From 5e1efe9149bfc06f7b80f65d9881acdcb6376e94 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Fri, 19 Jul 2024 11:19:36 +0200
Subject: [PATCH 01/35] WIP - api with types before exposing kisly directly

---
 inlang/source-code/sdk-v2/.eslintrc.json      |   21 +
 inlang/source-code/sdk-v2/LICENSE             |  201 ++
 inlang/source-code/sdk-v2/README.md           |   16 +
 inlang/source-code/sdk-v2/package.json        |   64 +
 .../source-code/sdk-v2/sample-app/.gitignore  |   26 +
 .../source-code/sdk-v2/sample-app/README.md   |   10 +
 .../source-code/sdk-v2/sample-app/index.html  |   96 +
 .../sdk-v2/sample-app/package.json            |   40 +
 .../sample-app/src/MessageBundleView.tsx      |   81 +
 .../sdk-v2/sample-app/src/PageView.tsx        |   95 +
 .../sdk-v2/sample-app/src/main.tsx            |   26 +
 .../sdk-v2/sample-app/src/mainView.tsx        |  101 +
 .../sdk-v2/sample-app/src/mainViewIframe.tsx  |  136 +
 .../sample-app/src/messageBundleListReact.tsx |  141 +
 .../src/messageBundleListSummary.tsx          |  112 +
 .../sdk-v2/sample-app/src/mock/bundle.ts      |   26 +
 .../sdk-v2/sample-app/src/mock/settings.ts    |   14 +
 .../sdk-v2/sample-app/src/settingsView.tsx    |   67 +
 .../sdk-v2/sample-app/src/style.css           |    0
 .../sdk-v2/sample-app/src/vite-env.d.ts       |    1 +
 .../sdk-v2/sample-app/tsconfig.json           |   20 +
 .../sdk-v2/sample-app/vite.config.ts          |   32 +
 .../sdk-v2/src/defaultProjectSettings.ts      |   28 +
 .../sdk-v2/src/dev-modules/lint-rule.js       |   56 +
 .../dev-modules/missing-selector-lint-rule.ts |   57 +
 .../dev-modules/missing-varint-lint-rule.ts   |   16 +
 .../sdk-v2/src/dev-modules/missingCatchall.ts |   46 +
 .../dev-modules/opral-uppercase-lint-rule.ts  |   69 +
 inlang/source-code/sdk-v2/src/errors.ts       |   84 +
 .../sdk-v2/src/human-id/human-readable-id.ts  |   27 +
 .../sdk-v2/src/human-id/words.test.ts         |   27 +
 .../source-code/sdk-v2/src/human-id/words.ts  | 1035 +++++++
 inlang/source-code/sdk-v2/src/import-utils.ts |   44 +
 inlang/source-code/sdk-v2/src/index.ts        |    5 +
 .../sdk-v2/src/lint/createLinter.ts           |   98 +
 inlang/source-code/sdk-v2/src/lint/host.ts    |   26 +
 inlang/source-code/sdk-v2/src/lint/import.ts  |  136 +
 .../sdk-v2/src/lint/populateLintLevel.ts      |   38 +
 .../source-code/sdk-v2/src/loadProjectOpfs.ts |  357 +++
 .../source-code/sdk-v2/src/mock/mockdata.ts   |  465 +++
 .../source-code/sdk-v2/src/mock/mockhelper.ts |  223 ++
 .../source-code/sdk-v2/src/newProjectOpfs.ts  |   71 +
 .../sdk-v2/src/resolve-modules/cache.ts       |  106 +
 .../sdk-v2/src/resolve-modules/errors.ts      |   69 +
 .../sdk-v2/src/resolve-modules/import.test.ts |   62 +
 .../sdk-v2/src/resolve-modules/import.ts      |  134 +
 .../sdk-v2/src/resolve-modules/index.ts       |    2 +
 .../message-lint-rules/errors.ts              |    9 +
 .../resolveMessageLintRules.ts                |   27 +
 .../src/resolve-modules/plugins/errors.ts     |   56 +
 .../plugins/resolvePlugins.test.ts            |  301 ++
 .../resolve-modules/plugins/resolvePlugins.ts |  129 +
 .../src/resolve-modules/plugins/types.test.ts |   53 +
 .../src/resolve-modules/plugins/types.ts      |   76 +
 .../resolve-modules/resolveModules.test.ts    |  224 ++
 .../src/resolve-modules/resolveModules.ts     |  113 +
 .../sdk-v2/src/resolve-modules/types.ts       |   72 +
 .../validateModuleSettings.test.ts            |   85 +
 .../validatedModuleSettings.ts                |   19 +
 .../src/resolveMessageBundleLintRules.ts      |   29 +
 .../sdk-v2/src/resolveModules2.test.ts        |  224 ++
 .../source-code/sdk-v2/src/resolveModules2.ts |  110 +
 .../source-code/sdk-v2/src/resolvePlugins2.ts |  126 +
 inlang/source-code/sdk-v2/src/settings.ts     |   65 +
 .../customApis/app.inlang.ideExtension.ts     |   92 +
 inlang/source-code/sdk-v2/src/types/index.ts  |   11 +
 .../sdk-v2/src/types/inlang-module.ts         |   16 +
 .../sdk-v2/src/types/language-tag.ts          |   22 +
 .../sdk-v2/src/types/lint-errors.ts           |    9 +
 inlang/source-code/sdk-v2/src/types/lint.ts   |  178 ++
 .../sdk-v2/src/types/module-errors.ts         |   67 +
 inlang/source-code/sdk-v2/src/types/module.ts |   79 +
 .../sdk-v2/src/types/plugin-errors.ts         |   56 +
 inlang/source-code/sdk-v2/src/types/plugin.ts |  151 +
 .../sdk-v2/src/types/project-settings.ts      |  125 +
 .../source-code/sdk-v2/src/types/project.ts   |   75 +
 inlang/source-code/sdk-v2/src/types/schema.ts |  127 +
 .../source-code/sdk-v2/src/types/sdkTypes.ts  |    9 +
 .../sdk-v2/src/validatedModuleSettings.ts     |   19 +
 inlang/source-code/sdk-v2/src/x.ts            |   42 +
 inlang/source-code/sdk-v2/tsconfig.json       |   14 +
 inlang/source-code/sdk-v2/vitest.config.ts    |   12 +
 pnpm-lock.yaml                                | 2598 ++++++++++++++---
 pnpm-workspace.yaml                           |    1 +
 84 files changed, 9691 insertions(+), 337 deletions(-)
 create mode 100644 inlang/source-code/sdk-v2/.eslintrc.json
 create mode 100644 inlang/source-code/sdk-v2/LICENSE
 create mode 100644 inlang/source-code/sdk-v2/README.md
 create mode 100644 inlang/source-code/sdk-v2/package.json
 create mode 100644 inlang/source-code/sdk-v2/sample-app/.gitignore
 create mode 100644 inlang/source-code/sdk-v2/sample-app/README.md
 create mode 100644 inlang/source-code/sdk-v2/sample-app/index.html
 create mode 100644 inlang/source-code/sdk-v2/sample-app/package.json
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/main.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/mock/bundle.ts
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/mock/settings.ts
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/settingsView.tsx
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/style.css
 create mode 100644 inlang/source-code/sdk-v2/sample-app/src/vite-env.d.ts
 create mode 100644 inlang/source-code/sdk-v2/sample-app/tsconfig.json
 create mode 100644 inlang/source-code/sdk-v2/sample-app/vite.config.ts
 create mode 100644 inlang/source-code/sdk-v2/src/defaultProjectSettings.ts
 create mode 100644 inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
 create mode 100644 inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
 create mode 100644 inlang/source-code/sdk-v2/src/dev-modules/missing-varint-lint-rule.ts
 create mode 100644 inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
 create mode 100644 inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
 create mode 100644 inlang/source-code/sdk-v2/src/errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/human-id/human-readable-id.ts
 create mode 100644 inlang/source-code/sdk-v2/src/human-id/words.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/human-id/words.ts
 create mode 100644 inlang/source-code/sdk-v2/src/import-utils.ts
 create mode 100644 inlang/source-code/sdk-v2/src/index.ts
 create mode 100644 inlang/source-code/sdk-v2/src/lint/createLinter.ts
 create mode 100644 inlang/source-code/sdk-v2/src/lint/host.ts
 create mode 100644 inlang/source-code/sdk-v2/src/lint/import.ts
 create mode 100644 inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
 create mode 100644 inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/mockdata.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/mockhelper.ts
 create mode 100644 inlang/source-code/sdk-v2/src/newProjectOpfs.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/cache.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/import.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/index.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/types.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolveMessageBundleLintRules.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolveModules2.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolveModules2.ts
 create mode 100644 inlang/source-code/sdk-v2/src/resolvePlugins2.ts
 create mode 100644 inlang/source-code/sdk-v2/src/settings.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/customApis/app.inlang.ideExtension.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/index.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/inlang-module.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/language-tag.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/lint-errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/lint.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/module-errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/module.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/plugin-errors.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/plugin.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/project-settings.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/project.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/schema.ts
 create mode 100644 inlang/source-code/sdk-v2/src/types/sdkTypes.ts
 create mode 100644 inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
 create mode 100644 inlang/source-code/sdk-v2/src/x.ts
 create mode 100644 inlang/source-code/sdk-v2/tsconfig.json
 create mode 100644 inlang/source-code/sdk-v2/vitest.config.ts

diff --git a/inlang/source-code/sdk-v2/.eslintrc.json b/inlang/source-code/sdk-v2/.eslintrc.json
new file mode 100644
index 0000000000..2b51924587
--- /dev/null
+++ b/inlang/source-code/sdk-v2/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+	"overrides": [
+		{
+			"files": ["**/*.ts"],
+			"excludedFiles": ["**/*.test.ts"],
+			"rules": {
+				"no-restricted-imports": [
+					"error",
+					{
+						"patterns": [
+							{
+								"group": ["node:*"],
+								"message": "Keep in mind that node API's don't work inside the browser"
+							}
+						]
+					}
+				]
+			}
+		}
+	]
+}
diff --git a/inlang/source-code/sdk-v2/LICENSE b/inlang/source-code/sdk-v2/LICENSE
new file mode 100644
index 0000000000..ecc0047717
--- /dev/null
+++ b/inlang/source-code/sdk-v2/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [2024] [Opral US Inc.]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
\ No newline at end of file
diff --git a/inlang/source-code/sdk-v2/README.md b/inlang/source-code/sdk-v2/README.md
new file mode 100644
index 0000000000..259198566e
--- /dev/null
+++ b/inlang/source-code/sdk-v2/README.md
@@ -0,0 +1,16 @@
+Developer-first localization infrastructure that is built on lix. Your lix is the single source of truth for localization for collaboration and automation.
+
+<div>
+    <p align="center">
+        <img width="300" src="https://cdn.jsdelivr.net/gh/opral/monorepo/inlang/assets/logo-white-background.png"/>
+    </p>
+    <h4 align="center">
+        <!-- <a href="https://inlang.com/documentation" target="_blank">Get Started</a>
+        ·  -->
+        <a href="https://github.com/opral/monorepo/discussions" target="_blank">Discussions</a> · <a href="https://twitter.com/inlangHQ" target="_blank">Twitter</a>
+    </h4>
+</div>
+
+# @inlang/sdk
+
+The core module bundles "sdk" modules that depend on each other and is everything one needs to build [plugins](https://inlang.com/documentation/plugin) or entire [apps](https://inlang.com/documentation/build-app) on inlang.
diff --git a/inlang/source-code/sdk-v2/package.json b/inlang/source-code/sdk-v2/package.json
new file mode 100644
index 0000000000..a3379542a7
--- /dev/null
+++ b/inlang/source-code/sdk-v2/package.json
@@ -0,0 +1,64 @@
+{
+	"name": "@inlang/sdk-v2",
+	"type": "module",
+	"version": "0.0.1",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://inlang.com/documentation/sdk",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/opral/inlang-message-sdk"
+	},
+	"exports": {
+		".": "./dist/index.js",
+		"./test-utilities": "./dist/test-utilities/index.js",
+		"./lint": "./dist/lint/index.js"
+	},
+	"files": [
+		"./dist",
+		"./src"
+	],
+	"scripts": {
+		"build": "npm run prepare-env-variables && tsc --build",
+		"dev": "npm run prepare-env-variables && tsc --watch",
+		"prepare-env-variables": "node ./src/env-variables/createIndexFile.js",
+		"test": "npm run prepare-env-variables && tsc --noEmit && vitest run --passWithNoTests --coverage",
+		"lint": "eslint ./src --fix",
+		"format": "prettier ./src --write",
+		"clean": "rm -rf ./dist ./node_modules"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"dependencies": {
+		"@inlang/result": "workspace:*",
+		"@inlang/module": "workspace:*",
+		"@inlang/json-types": "workspace:*",
+		"@inlang/translatable": "workspace:*",
+		"@inlang/plugin": "workspace:*",
+		"@sqlite.org/sqlite-wasm": "^3.46.0-build2",
+		"deepmerge-ts": "^5.1.0",
+		"kysely": "^0.27.4",
+		"sqlocal": "^0.10.1",
+		"rxjs": "7.8.1",
+		"@sinclair/typebox": "^0.31.17",
+		"uuid": "^10.0.0",
+		"murmurhash3js": "^3.0.1"
+	},
+	"devDependencies": {
+		"@types/debug": "^4.1.12",
+		"@types/murmurhash3js": "^3.0.7",
+		"@types/throttle-debounce": "5.0.0",
+		"@types/uuid": "^9.0.8",
+		"@vitest/coverage-v8": "^0.33.0",
+		"@vitest/web-worker": "^1.6.0",
+		"jsdom": "22.1.0",
+		"patch-package": "6.5.1",
+		"tsd": "^0.25.0",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.2",
+		"vitest": "^0.33.0"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/.gitignore b/inlang/source-code/sdk-v2/sample-app/.gitignore
new file mode 100644
index 0000000000..ac43eed893
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/.gitignore
@@ -0,0 +1,26 @@
+rxdb-local.tgz
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/inlang/source-code/sdk-v2/sample-app/README.md b/inlang/source-code/sdk-v2/sample-app/README.md
new file mode 100644
index 0000000000..ad7730d68d
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/README.md
@@ -0,0 +1,10 @@
+# Slot storage, git, RxDB in Vite Typescript Demo
+
+This is a quick crud app that showcases the slot file with query capabilities of rxdb
+
+# Try it out
+1. replace the github token in src/storage/db.ts
+2. create a repo you have access to and and set the repo url in src/storage/db.ts
+3. run `pnpm install` 
+4. run `pnpm run proxy` to start the cors proxy localy
+5. run `pnpm run dev` to start the app
diff --git a/inlang/source-code/sdk-v2/sample-app/index.html b/inlang/source-code/sdk-v2/sample-app/index.html
new file mode 100644
index 0000000000..5d93aee715
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>window.global = window;</script>
+    <style>
+      /* General styles for the tab container */
+      .tab-container {
+        display: flex;
+        border-bottom: 2px solid #ccc;
+        margin-bottom: 10px;
+      }
+
+      /* Styles for each tab */
+      .tab {
+        padding: 10px 20px;
+        cursor: pointer;
+        border: 1px solid #ccc;
+        border-bottom: none;
+        margin-right: 5px;
+        background-color: #f1f1f1;
+        transition: background-color 0.3s;
+      }
+
+      /* Active tab styles */
+      .tab.active {
+        background-color: #fff;
+        border-bottom: 2px solid #fff;
+        font-weight: bold;
+      }
+
+      /* Hover effect for tabs */
+      .tab:hover {
+        background-color: #ddd;
+      }
+
+      .summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.messageCount {
+  flex: 0 0 auto; /* Keeps it to its own width */
+}
+
+.lintsReportsContainer {
+  flex: 1; /* Takes the remaining space */
+  display: flex;
+  justify-content: flex-end; /* Aligns items to the right */
+}
+
+.lintsReports {
+  margin-left: 20px; /* Adds some space between the reports */
+  margin-left: 20px; /* Adds some space between the reports */
+  padding: 10px; /* Adds some padding inside the div */
+  border: 1px solid #ccc; /* Adds a solid border */
+  border-radius: 8px; /* Rounds the corners */
+  background-color: #f9f9f9; /* Optional: Adds a background color */
+}
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+}
+.container {
+    display: flex;
+    width: 100%;
+    height: calc(100% - 20px); /* Subtract 20px from the total height */
+}
+
+.left, .right {
+    width: 50%;
+    height: 100%;
+}
+
+iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+    </style>
+<script type="module">
+    
+</script>
+    <title>Message Format + rxdb + Slotstorage + lix</title>
+  </head>
+  <body>
+    <div id="app" style="height: 100%;"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/inlang/source-code/sdk-v2/sample-app/package.json b/inlang/source-code/sdk-v2/sample-app/package.json
new file mode 100644
index 0000000000..dc356ab546
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "inlang-sdk-v2-sampleapp",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"preview": "vite preview",
+		"test": "pnpm run build && concurrently \"pnpm run preview\" \"pnpm run test:e2e\" --kill-others --success first",
+		"proxy": "node ./proxy/index.js"
+	},
+	"devDependencies": {
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"async-test-util": "2.5.0",
+		"concurrently": "8.2.2",
+		"copyfiles": "2.4.1",
+		"testcafe": "3.6.0",
+		"typescript": "5.4.5",
+		"vite": "5.2.12",
+		"vite-plugin-top-level-await": "1.4.1"
+	},
+	"dependencies": {
+		"process": "^0.11.10",
+		"express": "^4.19.2",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-window": "^1.8.10",
+		"@lit/react": "^1.0.5",
+		"vite-plugin-node-polyfills": "0.17.0",
+		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+		"comlink": "^4.4.1",
+		"@types/react-dom": "^18.3.0",
+		"@inlang/sdk-v2": "workspace:*",
+		"@inlang/message-bundle-component": "workspace:*",
+		"@inlang/settings-component": "workspace:*"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
new file mode 100644
index 0000000000..b9719cb936
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react"
+import { createComponent } from "@lit/react"
+import { InlangMessageBundle } from "@inlang/message-bundle-component"
+import { BundleWithMessages } from "../../src/types/sdkTypes.js"
+import { ProjectSettings2 } from "../../src/types/project-settings.js"
+import { InlangProject } from "../../src/types/project.js"
+import { LintReport } from "../../src/types/lint.js"
+import { LanguageTag } from "../../src/types/language-tag.js"
+
+export const MessageBundleComponent = createComponent({
+	tagName: "inlang-message-bundle",
+	elementClass: InlangMessageBundle,
+	react: React,
+	events: {
+		changeMessageBundle: "change-message-bundle",
+		fixLint: "fix-lint",
+	},
+})
+type MessageBundleViewProps = {
+	bundle: BundleWithMessages // TODO SDK2 make SDK Bundle a reactive query that delivers the bundle instead
+	// reports: Subject<LintReport[]>
+	projectSettings: ProjectSettings2
+	project: InlangProject
+	filteredLocales: LanguageTag[]
+}
+function MessageBundleView({
+	bundle,
+	// reports,
+	projectSettings,
+	project,
+	filteredLocales,
+}: MessageBundleViewProps) {
+	const [currentBundle, setBundle] = useState(bundle)
+
+	console.log("render MessageBundle View")
+	useEffect(() => {
+		// Assume bundle$ is an RxJS Subject or Observable
+		// const subscription = bundle.$.subscribe((updatedBundle) => {
+		// 	console.log("updateing Bundle from subscribe", updatedBundle)
+		// 	// Handle the bundle update
+		// 	setBundle(updatedBundle)
+		// })
+		// return () => {
+		// 	// Clean up the subscription when the component unmounts or when bundle changes
+		// 	subscription.unsubscribe()
+		// }
+	}, [bundle])
+
+	const onBundleChange = (messageBundle: { detail: { argument: BundleWithMessages } }) => {
+		// eslint-disable-next-line no-console
+		// TODO SDK-V2 check how we update the bundle in v2 sql
+		// project.messageBundleCollection?.upsert(messageBundle.detail.argument)
+	}
+
+	return (
+		<MessageBundleComponent
+			key={bundle.id}
+			messageBundle={currentBundle as any}
+			settings={projectSettings}
+			changeMessageBundle={onBundleChange as any}
+			filteredLocales={filteredLocales.length > 0 ? filteredLocales : undefined}
+			fixLint={(e: any) => {
+				const { fix, lintReport } = e.detail.argument as {
+					fix: string
+					lintReport: LintReport
+				}
+
+				project.fix(lintReport, { title: fix })
+			}}
+		/>
+	)
+}
+// Custom comparison function to compare the logical contents of the bundle
+const areEqual = (prevProps: MessageBundleViewProps, nextProps: MessageBundleViewProps) => {
+	console.log("check")
+	// Assuming bundle has an id property to identify the logical record
+	return (
+		prevProps.bundle.id === nextProps.bundle.id && true // deepEqual(prevProps.filteredLocales, nextProps.filteredLocales)
+	)
+}
+export const MessageBundleViewMemoed = React.memo(MessageBundleView, areEqual)
diff --git a/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx b/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
new file mode 100644
index 0000000000..8ed3c093c1
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react"
+import { loadProjectOpfs, newProjectOpfs } from "../../src/index.js"
+import { MainView } from "./mainView.js"
+
+const projectPath = "workingCopy.inlang"
+
+export function PageView() {
+	const [loadingProjectState, setLoadingProjectState] = useState<string>("")
+	const [currentProject, setCurrentProject] = useState<
+		Awaited<ReturnType<typeof loadProjectOpfs>> | undefined
+	>(undefined)
+
+	const newProject = async () => {
+		await newProjectOpfs({
+			inlangFolderPath: projectPath,
+		})
+		await loadProject()
+	}
+
+	const loadProject = async () => {
+		setLoadingProjectState("Loading")
+		try {
+			const loadedProject = await loadProjectOpfs({
+				inlangFolderPath: projectPath,
+			})
+			setCurrentProject(loadedProject)
+		} catch (e) {
+			setLoadingProjectState((e as any).message)
+			return
+		}
+
+		setLoadingProjectState("")
+	}
+
+	return (
+		<div style={{ height: "100%" }}>
+			<h3>{"Fink 2"}</h3>
+			<div>
+				<button id="btnAdd1" onClick={newProject} disabled={loadingProjectState === "Loading"}>
+					New Project
+				</button>
+				<button id="btnAdd1" onClick={loadProject} disabled={loadingProjectState === "Loading"}>
+					Load Current Project
+				</button>
+			</div>
+			{loadingProjectState}
+			{currentProject && (
+				<>
+					<br />
+					<br />
+					{/* <button
+						id="commit"
+						type="button"
+						onClick={() => {
+							commit(currentProject)
+						}}
+						disabled={gitActive}
+					>
+						Commit Changes
+					</button>
+					<button
+						id="push"
+						type="button"
+						onClick={() => {
+							push(currentProject)
+						}}
+						disabled={gitActive}
+					>
+						Push Changes
+					</button>
+					<br />
+					<br />
+					<button
+						id="pull"
+						type="button"
+						onClick={() => {
+							pull(currentProject)
+						}}
+						disabled={gitActive}
+					>
+						Pull Changes
+					</button> */}
+					<div className="container">
+						<div className="left">
+							<MainView inlangProject={currentProject} />
+						</div>
+						{/* <div className="right">
+							<IFrame src={"/?inlangProjectPath=" + inlangProjectPath} withFs={fs} />
+						</div> */}
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/main.tsx b/inlang/source-code/sdk-v2/sample-app/src/main.tsx
new file mode 100644
index 0000000000..cca656126b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/main.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import "./style.css"
+import { createRoot } from "react-dom/client"
+import { PageView } from "./PageView.js"
+
+import "@inlang/message-bundle-component"
+
+document.querySelector<HTMLDivElement>(
+	"#app"
+)!.innerHTML = `<div id="root" style="height: 100%"></div>`
+
+const domNode = document.getElementById("root")
+const root = createRoot(domNode!)
+//root.render(<MessageBundleList />)
+// const isInIframe = window.self !== window.top
+
+// if (isInIframe) {
+// 	const { MainViewIframe } = await import("./mainViewIframe.js")
+// 	root.render(
+// 		<MainViewIframe
+// 			projectPath={new URLSearchParams(window.location.search).get("inlangProjectPath")!}
+// 		/>
+// 	)
+// } else {
+root.render(<PageView />)
+// }
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
new file mode 100644
index 0000000000..2824f0755e
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react"
+import { pluralBundle } from "../../src/v2/mocks/index.js"
+import { randomHumanId } from "../../src/storage/human-id/human-readable-id.js"
+import { createMessage, createMessageBundle } from "../../src/v2/helper.js"
+import { MessageBundleList } from "./messageBundleListReact.js"
+import { type InlangProject2, MessageBundle, getFs, loadProject } from "../../dist/v2/index.js"
+import { SettingsView } from "./settingsView.js"
+import { BundleWithMessages } from "../../src/types/sdkTypes.js"
+import { createBundle } from "../../src/mock/mockhelper.js"
+import { InlangProject } from "../../src/types/index.js"
+
+export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
+	const [currentView, setCurrentView] = useState<"overview" | "messageList" | "settings">(
+		"settings"
+	)
+
+	const insertNMessageBundles = async (project: InlangProject, n: number) => {
+		const messagesToAdd = [] as BundleWithMessages[]
+		for (let i = 0; i < n; i++) {
+			const newBundle = createBundle({
+				languageTags: ["de"],
+				nInputs: 3,
+				nSelectors: 2,
+				nExpressions: 3,
+			})
+
+			messagesToAdd.push(newBundle)
+		}
+
+		console.time("inserting " + n + " messageBundles")
+		await project.bundle.insert(messagesToAdd)
+		console.timeEnd("inserting " + n + " messageBundles")
+	}
+
+	return (
+		<div>
+			<div>
+				<br />
+				<h2>Actions</h2>
+				Add Message Bundles
+				<button
+					style={{ marginLeft: 10 }}
+					id="btnAdd1"
+					onClick={() => {
+						insertNMessageBundles(inlangProject, 1)
+					}}
+				>
+					+ 1{" "}
+				</button>
+				<button
+					id="btnAdd100"
+					onClick={() => {
+						insertNMessageBundles(inlangProject, 100)
+					}}
+				>
+					+ 100{" "}
+				</button>
+				<button
+					id="btnAdd1000"
+					onClick={() => {
+						insertNMessageBundles(inlangProject, 1000)
+					}}
+				>
+					+ 1000{" "}
+				</button>
+				<br />
+				<div className="tab-container">
+					<div
+						className={`tab ${currentView === "overview" ? "active" : ""}`}
+						onClick={() => setCurrentView("overview")}
+					>
+						Overview
+					</div>
+					<div
+						className={`tab ${currentView === "messageList" ? "active" : ""}`}
+						onClick={() => setCurrentView("messageList")}
+					>
+						MessageList
+					</div>
+					<div
+						className={`tab ${currentView === "settings" ? "active" : ""}`}
+						onClick={() => setCurrentView("settings")}
+					>
+						Settings
+					</div>
+				</div>
+				{/* {currentView === "settings" && (
+					<SettingsView
+						project={{
+							projectPath: projectPath,
+							inlangProject: inlangProject,
+						}}
+					></SettingsView>
+				)} */}
+				{currentView === "messageList" && (
+					<MessageBundleList project={inlangProject}></MessageBundleList>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx
new file mode 100644
index 0000000000..0874fdf177
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react"
+import { pluralBundle } from "../../src/v2/mocks/index.js"
+import { randomHumanId } from "../../src/storage/human-id/human-readable-id.js"
+import { createMessage, createMessageBundle } from "../../src/v2/helper.js"
+import { MessageBundleList } from "./messageBundleListReact.js"
+import { type InlangProject2, MessageBundle, getFs, loadProject } from "../../dist/v2/index.js"
+import { SettingsView } from "./settingsView.js"
+import * as Comlink from "comlink"
+
+export const isInIframe = window.self !== window.top
+const fs = getFs(Comlink.windowEndpoint(window.parent))
+const repo = {
+	nodeishFs: fs,
+	getFirstCommitHash: () => "dummy_first_hash",
+} as any
+
+export function MainViewIframe({ projectPath }: { projectPath: string }) {
+	const [currentProject, setCurrentProject] = useState<InlangProject2 | undefined>(undefined)
+
+	useEffect(() => {
+		loadProject({
+			projectPath,
+			repo: repo,
+		}).then((project) => {
+			setCurrentProject(project)
+		})
+	}, [])
+
+	const [currentView, setCurrentView] = useState<"overview" | "messageList" | "settings">(
+		"settings"
+	)
+
+	const insertNMessageBundles = async (project: InlangProject2, n: number) => {
+		const messagesToAdd = [] as MessageBundle[]
+		for (let i = 0; i < n; i++) {
+			const newMessage = createMessage({
+				locale: "de",
+				text: "new",
+			})
+
+			const messageBundle = createMessageBundle({
+				alias: {},
+				messages: [newMessage],
+			})
+			messagesToAdd.push(messageBundle)
+		}
+
+		const messageBundles = project.messageBundleCollection
+		if (n === 1) {
+			const temp = structuredClone(pluralBundle)
+			temp.id = randomHumanId()
+			temp.messages[0].id = randomHumanId()
+			temp.messages[1].id = randomHumanId()
+
+			await messageBundles.insert(temp as any)
+			return
+		}
+
+		console.time("inserting " + n + " messageBundles")
+
+		await project.messageBundleCollection.bulkInsert(messagesToAdd)
+		console.timeEnd("inserting " + n + " messageBundles")
+	}
+
+	return (
+		<div>
+			<h3>{isInIframe ? "inIframe" : "Fink 2"}</h3>
+			<div>
+				{currentProject && (
+					<>
+						<br />
+						<h2>Actions</h2>
+						Add Message Bundles
+						<button
+							style={{ marginLeft: 10 }}
+							id="btnAdd1"
+							onClick={() => {
+								insertNMessageBundles(currentProject, 1)
+							}}
+						>
+							+ 1{" "}
+						</button>
+						<button
+							id="btnAdd100"
+							onClick={() => {
+								insertNMessageBundles(currentProject, 100)
+							}}
+						>
+							+ 100{" "}
+						</button>
+						<button
+							id="btnAdd1000"
+							onClick={() => {
+								insertNMessageBundles(currentProject, 1000)
+							}}
+						>
+							+ 1000{" "}
+						</button>
+						<br />
+						<div className="tab-container">
+							<div
+								className={`tab ${currentView === "overview" ? "active" : ""}`}
+								onClick={() => setCurrentView("overview")}
+							>
+								Overview
+							</div>
+							<div
+								className={`tab ${currentView === "messageList" ? "active" : ""}`}
+								onClick={() => setCurrentView("messageList")}
+							>
+								MessageList
+							</div>
+							<div
+								className={`tab ${currentView === "settings" ? "active" : ""}`}
+								onClick={() => setCurrentView("settings")}
+							>
+								Settings
+							</div>
+						</div>
+						{currentView === "settings" && (
+							<SettingsView
+								project={{
+									projectPath: projectPath,
+									inlangProject: currentProject,
+								}}
+							></SettingsView>
+						)}
+						{currentView === "messageList" && (
+							<MessageBundleList project={currentProject}></MessageBundleList>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
new file mode 100644
index 0000000000..b5807a6718
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+import {
+	InlangProject,
+	BundleWithMessages,
+	LintReport,
+	LanguageTag,
+	ProjectSettings2,
+} from "../../src/types/index.js"
+import { VariableSizeList as List } from "react-window"
+import { MessageBundleViewMemoed } from "./MessageBundleView.js"
+import { MessageBundleListSummary } from "./messageBundleListSummary.js"
+import { InlangProject2 } from "../../../sdk/dist/v2/types/index.js"
+
+type MessageBundleListProps = {
+	project: InlangProject
+}
+
+export function MessageBundleList({ project }: MessageBundleListProps) {
+	const [bundles, setBundles] = useState([] as RxDocument<MessageBundle>[])
+	const [currentListBundles, setCrurrentListBundles] = useState([] as BundleWithMessages[])
+
+	const [lintReports, setLintReports] = useState([] as LintReport[])
+	const [projectSettings, setProjectSettings] = useState<ProjectSettings2 | undefined>(undefined)
+	const [messageBundleCollection, setMessageBundleCollection] = useState<any>()
+
+	const [activeLocales, setActiveLocales] = useState<LanguageTag[]>([])
+
+	const [textSearch, setTextSearch] = useState("")
+
+	useEffect(() => {
+		// TODO SDK-v2 setup query that filters by active language, reported lints, bundle ids and searches text within the filtered variants
+		project.bundle
+			.select()
+			.execute()
+			.then((freshBundles: any) => {
+				setCrurrentListBundles(freshBundles)
+			})
+	}, [textSearch, activeLocales])
+
+	useEffect(() => {
+		let inlangProject: InlangProject | undefined = undefined
+
+		inlangProject = project
+
+		inlangProject.settings.subscribe({
+			next: (settings) => {
+				setProjectSettings(settings)
+			},
+		})
+
+		return () => {
+			// unsubscribe inlangProject?.settings()
+		}
+	}, [])
+
+	const listRef = useRef<List>(null)
+	const itemSizeMap = useRef<Record<number, number>>({})
+
+	const getItemSize = (index: number) => {
+		// Default to a standard size if not yet measured
+		return itemSizeMap.current[index] || 100
+	}
+
+	const setItemSize = useCallback((index: number, size: number) => {
+		if (size !== 0 && listRef.current && itemSizeMap.current[index] !== size) {
+			itemSizeMap.current[index] = size
+
+			listRef.current.resetAfterIndex(index)
+		}
+	}, [])
+
+	const renderRow = ({ index, style }) => {
+		const bundle = currentListBundles[index]
+
+		// Use a ref callback to measure the component's height
+		const measureRef = (el: HTMLDivElement | null) => {
+			if (el) {
+				setTimeout(() => {
+					const height = el.getBoundingClientRect().height
+					// console.log("size for index:" + index + " " + height)
+					setItemSize(index, height)
+				}, 10)
+			}
+		}
+
+		return (
+			<div style={style}>
+				<div ref={measureRef}>
+					<MessageBundleViewMemoed
+						key={bundle.id}
+						bundle={bundle}
+						projectSettings={projectSettings!}
+						filteredLocales={activeLocales}
+						project={project}
+					/>
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div>
+			<div>
+				{
+					<input
+						type="text"
+						placeholder="search..."
+						value={textSearch}
+						onChange={(e) => {
+							setTextSearch(e.target.value)
+						}}
+					/>
+				}
+			</div>
+
+			{projectSettings && (
+				<>
+					<MessageBundleListSummary
+						project={project}
+						projectSettings={projectSettings}
+						bundles={bundles}
+						reports={lintReports}
+						activeLanguages={activeLocales}
+						onActiveLanguagesChange={(actives) => setActiveLocales(actives)}
+					/>
+					<List
+						height={900} // Adjust based on your requirements
+						itemCount={currentListBundles.length}
+						itemSize={getItemSize}
+						width={"100%"}
+						ref={listRef}
+					>
+						{renderRow}
+					</List>
+				</>
+			)}
+			{!projectSettings && <>loading</>}
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
new file mode 100644
index 0000000000..48b6021e16
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react"
+import {
+	InlangProject,
+	InstalledLintRule,
+	ProjectSettings2,
+	LintReport,
+	LanguageTag,
+	BundleWithMessages,
+} from "../../src/types/index.js"
+
+type MessageBundleListSummaryProps = {
+	project: InlangProject
+	projectSettings: ProjectSettings2
+	bundles: BundleWithMessages[]
+	reports: LintReport[]
+	activeLanguages: LanguageTag[]
+	onActiveLanguagesChange: (locales: LanguageTag[]) => void
+}
+
+export function MessageBundleListSummary({
+	project,
+	projectSettings,
+	bundles,
+	reports,
+	activeLanguages,
+	onActiveLanguagesChange,
+}: MessageBundleListSummaryProps) {
+	// const [bundles, setBundles] = useState([] as MessageBundle[])
+	// const [lintReports, setLintReports] = useState([] as LintReport[])
+	const [installedLints, setInstalledLints] = useState([] as InstalledLintRule[])
+
+	const [mappedLintReports, setMappedLintReports] = useState({} as any)
+
+	useEffect(() => {
+		const sub = project.installed.lintRules.subscribe({
+			next: (lintRules) => {
+				setInstalledLints(lintRules)
+
+				const bundleIds = new Set<string>()
+
+				for (const bundle of bundles) {
+					bundleIds.add(bundle.id)
+				}
+
+				const mapped = {} as any
+
+				for (const lintRule of lintRules) {
+					mapped[lintRule.id] = []
+				}
+
+				for (const report of reports) {
+					if (bundleIds.has(report.messageBundleId)) {
+						mapped[report.ruleId]?.push(report)
+					}
+				}
+				setMappedLintReports(mapped)
+			},
+		})
+
+		return () => {
+			sub.unsubscribe()
+		}
+	}, [reports, bundles])
+
+	const toggleLocale = (locale: LanguageTag) => {
+		if (activeLanguages.length === 0) {
+			onActiveLanguagesChange(projectSettings.locales.filter((current) => current !== locale))
+			return
+		}
+
+		if (activeLanguages.includes(locale)) {
+			onActiveLanguagesChange(activeLanguages.filter((current) => current !== locale))
+		} else {
+			onActiveLanguagesChange(activeLanguages.concat(locale))
+		}
+	}
+
+	return (
+		<div className="summary">
+			<div>
+				{projectSettings.locales.map((locale) => {
+					return (
+						<div key={locale}>
+							<input
+								type="checkbox"
+								id="vehicle1"
+								name="vehicle1"
+								value="Bike"
+								checked={activeLanguages.length == 0 || activeLanguages.includes(locale)}
+								onChange={() => toggleLocale(locale)}
+							/>
+							{locale}
+						</div>
+					)
+				})}
+			</div>
+			<div className="messageCount">Message Bundles: {bundles.length}</div>
+			<div className="lintsReportsContainer">
+				{installedLints.map((installedLint) => {
+					const lintReports = mappedLintReports[installedLint.id]
+					return (
+						lintReports.length > 0 && (
+							<div className="lintsReports" key={installedLint.id}>
+								{installedLint.displayName as string} - {lintReports.length}
+							</div>
+						)
+					)
+				})}
+			</div>
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mock/bundle.ts b/inlang/source-code/sdk-v2/sample-app/src/mock/bundle.ts
new file mode 100644
index 0000000000..18dfcc05f2
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/mock/bundle.ts
@@ -0,0 +1,26 @@
+const pluralBundle = {
+	id: "mock_bundle_human_id",
+	alias: {
+		default: "mock_bundle_alias",
+	},
+	messages: [
+		{
+			locale: "en",
+			declarations: [],
+			selectors: [],
+			variants: [
+				{
+					match: [],
+					pattern: [
+						{
+							type: "text",
+							value: "Hello World",
+						},
+					],
+				},
+			],
+		},
+	],
+}
+
+export { pluralBundle }
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mock/settings.ts b/inlang/source-code/sdk-v2/sample-app/src/mock/settings.ts
new file mode 100644
index 0000000000..558fd41977
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/mock/settings.ts
@@ -0,0 +1,14 @@
+const mockSetting = {
+	$schema: "https://inlang.com/schema/project-settings",
+	sourceLanguageTag: "en",
+	languageTags: ["en", "de"],
+	messageLintRuleLevels: {
+		"messageLintRule.inlang.identicalPattern": "error",
+	},
+	modules: ["https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@4/dist/index.js"],
+	"plugin.inlang.i18next": {
+		pathPattern: "./frontend/public/locales/{languageTag}/brain.json",
+	},
+}
+
+export { mockSetting }
diff --git a/inlang/source-code/sdk-v2/sample-app/src/settingsView.tsx b/inlang/source-code/sdk-v2/sample-app/src/settingsView.tsx
new file mode 100644
index 0000000000..9b5cba7546
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/settingsView.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react"
+
+import { createComponent } from "@lit/react"
+import { InlangSettings2 } from "@inlang/settings-component"
+
+import { ProjectSettings2, InstalledLintRule } from "../../src/types/project-settings.js"
+import { openProject } from "./storage/db-messagebundle.js"
+
+export const SettingsComponen2 = createComponent({
+	tagName: "inlang-settings2",
+	elementClass: InlangSettings2,
+	react: React,
+	events: {
+		setSettings: "set-settings",
+	},
+})
+
+type SettingsViewProps = {
+	project: Awaited<ReturnType<typeof openProject>>
+}
+
+export function SettingsView({ project }: SettingsViewProps) {
+	const [settings, setSettings] = useState<ProjectSettings2 | undefined>(undefined)
+	const [installedLintRules, setInstalledLintRules] = useState<InstalledLintRule[]>([])
+
+	console.log(settings)
+	useEffect(() => {
+		const settingsSub = project.inlangProject.settings.subscribe({
+			next: (currentSettings) => {
+				setSettings(currentSettings)
+			},
+		})
+		return () => {
+			settingsSub.unsubscribe()
+		}
+	}, [])
+
+	useEffect(() => {
+		const settingsSub = project.inlangProject.installed.lintRules.subscribe({
+			next: (currentInstalledLintRules) => {
+				setInstalledLintRules(currentInstalledLintRules)
+			},
+		})
+		return () => {
+			settingsSub.unsubscribe()
+		}
+	}, [])
+
+	// @ts-ignore
+	const updateSettings = (event: any) => {
+		project.inlangProject.setSettings(event.detail.argument)
+		// eslint-disable-next-line no-console
+		// TODO update settings on project messageBundleCollection?.upsert(messageBundle.detail.argument)
+	}
+
+	return (
+		<div>
+			{settings && (
+				<SettingsComponen2
+					settings={settings}
+					setSettings={updateSettings}
+					installedLintRules={installedLintRules}
+				/>
+			)}
+		</div>
+	)
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/style.css b/inlang/source-code/sdk-v2/sample-app/src/style.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/inlang/source-code/sdk-v2/sample-app/src/vite-env.d.ts b/inlang/source-code/sdk-v2/sample-app/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/inlang/source-code/sdk-v2/sample-app/tsconfig.json b/inlang/source-code/sdk-v2/sample-app/tsconfig.json
new file mode 100644
index 0000000000..18bacfc7ea
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/tsconfig.json
@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "Node16",
+		"lib": ["ESNext", "DOM"],
+		"moduleResolution": "Node16",
+		"strict": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"skipLibCheck": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"]
+}
diff --git a/inlang/source-code/sdk-v2/sample-app/vite.config.ts b/inlang/source-code/sdk-v2/sample-app/vite.config.ts
new file mode 100644
index 0000000000..f100dece2c
--- /dev/null
+++ b/inlang/source-code/sdk-v2/sample-app/vite.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from "vite"
+import topLevelAwait from "vite-plugin-top-level-await"
+import { nodePolyfills } from "vite-plugin-node-polyfills"
+
+export default defineConfig({
+	plugins: [
+		// required to support top level await
+		topLevelAwait(),
+		nodePolyfills({
+			// include: ["path", "stream", "util"],
+			// exclude: ["http"],
+			// globals: {
+			// 	Buffer: true,
+			// 	global: true,
+			// 	process: true,
+			// },
+			// overrides: {
+			// 	fs: "memfs",
+			// },
+			protocolImports: true,
+		}),
+	],
+	server: {
+		headers: {
+			"Cross-Origin-Opener-Policy": "same-origin",
+			"Cross-Origin-Embedder-Policy": "require-corp",
+		},
+	},
+	optimizeDeps: {
+		exclude: ["@sqlite.org/sqlite-wasm", "sqlocal"],
+	},
+})
diff --git a/inlang/source-code/sdk-v2/src/defaultProjectSettings.ts b/inlang/source-code/sdk-v2/src/defaultProjectSettings.ts
new file mode 100644
index 0000000000..1379d23e9d
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/defaultProjectSettings.ts
@@ -0,0 +1,28 @@
+import type { ProjectSettings2 } from "./types/index.js"
+
+/**
+ * Default project settings for createNewProject
+ * from paraglide-js/src/cli/commands/init/defaults.ts
+ */
+export const defaultProjectSettings = {
+	$schema: "https://inlang.com/schema/project-settings",
+	baseLocale: "en",
+	locales: ["en", "de"],
+	modules: [
+		"sdk-dev:opral-uppercase-lint.js",
+		"sdk-dev:missing-selector-lint-rule.js",
+		"sdk-dev:missing-catchall-variant",
+		// for instant gratification, we're adding common rules
+		// "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+		// "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		// "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+		// default to the message format plugin because it supports all features
+		// "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+		// the m function matcher should be installed by default in case Sherlock (VS Code extension) is adopted
+		// "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js",
+	],
+	"plugin.inlang.messageFormat": {
+		pathPattern: "./messages/{languageTag}.json",
+	},
+	lintConfig: [{ ruleId: "messageBundleLintRule.test.TODO", level: "warning" }],
+} satisfies ProjectSettings2
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js b/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
new file mode 100644
index 0000000000..af7dfae72c
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
@@ -0,0 +1,56 @@
+/**
+ * @type {import("../types/lint.js").MessageBundleLintRule}
+ */
+const lintRule = {
+	id: "messageBundleLintRule.inlangdev.missingLanguages",
+	displayName: "Missing Languages",
+	description: "Detects missing languages",
+	run: ({ settings, report, messageBundle }) => {
+		const expectedLanguageTags = new Set(settings.locales)
+		const presentLanguages = new Set(
+			messageBundle.messages.filter((msg) => msg.variants.length > 0).map((msg) => msg.locale)
+		)
+
+		if (presentLanguages.size === 0) {
+			// no messages in any language -> delete
+			report({
+				body: `No languages are present`,
+				messageId: undefined,
+				variantId: undefined,
+				messageBundleId: messageBundle.id,
+				fixes: [],
+			})
+			return
+		}
+
+		const missingLanguageTags = exclude(expectedLanguageTags, presentLanguages)
+		for (const missingLanguageTag of missingLanguageTags) {
+			report({
+				// locale: missingLanguageTag,
+				body: `Missing language tag '${missingLanguageTag}'.`,
+				messageId: undefined,
+				variantId: undefined,
+				messageBundleId: messageBundle.id,
+				fixes: [],
+			})
+		}
+	},
+}
+
+/**
+ * @template T
+ * @param {Set<T>} set
+ * @param {Set<T>} exclude
+ * @returns {Set<T>}
+ */
+function exclude(set, exclude) {
+	const newSet = new Set(set)
+	for (const value of set) {
+		if (exclude.has(value)) {
+			newSet.delete(value)
+		}
+	}
+	return newSet
+}
+
+export default lintRule
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
new file mode 100644
index 0000000000..1161f4362c
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
@@ -0,0 +1,57 @@
+import type { MessageBundleLintRule } from "../types/lint.js"
+// TODO SDK-v2
+// import type { VariableReference } from "../types/message-bundle.js"
+type VariableReference = any
+
+const missingSelectorLintRule: MessageBundleLintRule = {
+	id: "messageBundleLintRule.inlangdev.missingSelector",
+	displayName: "Missing Selector",
+	description: "Detects if a selector is not used in a language",
+
+	run: ({ report, messageBundle, settings }) => {
+		const sourceMessage = messageBundle.messages.find(
+			(message) => message.locale === settings.baseLocale
+		)
+		if (!sourceMessage) return
+
+		const expectedSelectors = new Set(
+			sourceMessage.selectors
+				.filter((selector) => selector.arg.type === "variable")
+				.map((selector) => (selector.arg as VariableReference).name)
+		)
+
+		for (const message of messageBundle.messages) {
+			if (message.locale === settings.baseLocale) continue // ignore the base locale
+
+			const selectors = new Set(
+				message.selectors
+					.filter((selector) => selector.arg.type === "variable")
+					.map((selector) => (selector.arg as VariableReference).name)
+			)
+
+			const missing = exclude(expectedSelectors, selectors)
+			if (missing.size === 0) continue
+
+			report({
+				// locale: message.locale,
+				body: `Missing selector(s): ${[...missing].join(", ")}`,
+				messageId: undefined,
+				variantId: undefined,
+				messageBundleId: messageBundle.id,
+				fixes: [],
+			})
+
+			// if there are missing selectors - report them
+		}
+	},
+}
+
+function exclude<T>(set: Set<T>, exclude: Set<T>): Set<T> {
+	const newSet = new Set<T>(set)
+	for (const value of newSet) {
+		if (exclude.has(value)) newSet.delete(value)
+	}
+	return newSet
+}
+
+export default missingSelectorLintRule
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missing-varint-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/missing-varint-lint-rule.ts
new file mode 100644
index 0000000000..63102d25cd
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missing-varint-lint-rule.ts
@@ -0,0 +1,16 @@
+import type { MessageBundleLintRule } from "../types/lint.js"
+
+const duplicateVariantLintRule: MessageBundleLintRule = {
+	id: "messageBundleLintRule.inlangdev.duplicateVariant",
+	displayName: "Duplicate Variant",
+	description: "Detects if a variant is present multiple times",
+	run: ({ messageBundle, report, settings }) => {
+		for (const message of messageBundle.messages) {
+			for (const variant of message.variants) {
+				const match = variant.match
+			}
+		}
+	},
+}
+
+export default duplicateVariantLintRule
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
new file mode 100644
index 0000000000..f0b5fe140a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
@@ -0,0 +1,46 @@
+// import { createVariant } from "../helper.js"
+import type { MessageBundleLintRule } from "../types/lint.js"
+
+const missingCatchallLintRule: MessageBundleLintRule = {
+	id: "messageBundleLintRule.inlang.missingCatchall",
+	displayName: "Missing catchall",
+	description: "Warns if a message is missing a catchall variant",
+	run: ({ report, messageBundle }) => {
+		for (const message of messageBundle.messages) {
+			if (message.selectors.length === 0) continue
+
+			const hasCatchall = message.variants.some((variant) => variant.match.every((m) => m === "*"))
+
+			if (!hasCatchall) {
+				report({
+					body: `The message ${message.id} is missing a catchall variant`,
+					messageBundleId: messageBundle.id,
+					messageId: message.id,
+					variantId: undefined,
+					// locale: message.locale,
+					fixes: [
+						{
+							key: "yadayada",
+							title: "Add catchall variant",
+						},
+					],
+				})
+			}
+		}
+	},
+	fix: ({ report, messageBundle }) => {
+		const message = messageBundle.messages.find((msg) => msg.id === report.messageId)
+		if (!message)
+			throw new Error(`message ${report.messageId} not found on bundle ${messageBundle.id}`)
+
+		// TODO SDK-v2
+		// const catchallVariant = createVariant({
+		// 	text: "",
+		// 	match: message.selectors.map(() => "*"),
+		// })
+
+		// message.variants.push(catchallVariant)
+		return messageBundle
+	},
+}
+export default missingCatchallLintRule
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
new file mode 100644
index 0000000000..d9c12abee9
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
@@ -0,0 +1,69 @@
+// ensure_OPRAL_upper_case
+
+import type { MessageBundleLintRule } from "../types/lint.js"
+
+const orpalRegex = /\bOPRAL\b/gi
+
+type Fixes = {
+	key: "OPRAL"
+	title: "Make OPRAL uppercase"
+}
+
+const makeOpralUppercase: MessageBundleLintRule = {
+	id: "messageBundleLintRule.inlangdev.makeOpralUppercase",
+	displayName: "Ensure OPRAL is uppercase",
+	description: "Warns if the OPRAL brand name is not uppercase",
+	run: ({ report, messageBundle }) => {
+		// loop over all messages and variants in the bundle
+		for (const message of messageBundle.messages) {
+			for (const variant of message.variants) {
+				const text = variant.pattern
+					.filter((el): el is Extract<typeof el, { type: "text" }> => el.type === "text")
+					.reduce((acc, el) => acc + el.value, "")
+
+				const matches = text.match(orpalRegex)
+				if (!matches) continue
+
+				const badMatches = matches.filter((match) => match !== match.toUpperCase())
+
+				if (badMatches.length === 0) continue
+
+				const fix: Fixes = {
+					key: "OPRAL",
+					title: "Make OPRAL uppercase",
+				}
+
+				report({
+					body: `The OPRAL brand name is not uppercase`,
+					messageBundleId: messageBundle.id,
+					messageId: message.id,
+					variantId: variant.id,
+					// locale: message.locale,
+					fixes: [fix],
+				})
+			}
+		}
+	},
+	fix: async ({ report, fix, messageBundle }) => {
+		if (fix.title !== "Make OPRAL uppercase") return messageBundle
+
+		if (!report.variantId || !report.messageId)
+			throw new Error("report must have variantId and messageId")
+
+		const msg = messageBundle.messages.find((msg) => msg.id === report.messageId)
+		if (!msg) throw new Error(`message ${report.messageId} not found on bundle ${messageBundle.id}`)
+
+		const variant = msg.variants.find((variant) => variant.id === report.variantId)
+		if (!variant) throw new Error(`variant ${report.variantId} not found on message ${msg.id}`)
+
+		variant.pattern = variant.pattern.map((el) => {
+			if (el.type !== "text") return el
+			el.value = el.value.replaceAll(orpalRegex, "OPRAL")
+			return el
+		})
+
+		return messageBundle
+	},
+}
+
+export default makeOpralUppercase
diff --git a/inlang/source-code/sdk-v2/src/errors.ts b/inlang/source-code/sdk-v2/src/errors.ts
new file mode 100644
index 0000000000..46797a188e
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/errors.ts
@@ -0,0 +1,84 @@
+import type { SchemaOptions } from "@sinclair/typebox"
+import type { ValueError } from "@sinclair/typebox/errors"
+
+export class LoadProjectInvalidArgument extends Error {
+	constructor(message: string, options: { argument: string }) {
+		super(`The argument "${options.argument}" of loadProject() is invalid: ${message}`)
+		this.name = "LoadProjectInvalidArgument"
+	}
+}
+
+export class ProjectSettingsInvalidError extends Error {
+	constructor(options: { errors: ValueError[] }) {
+		// TODO: beatufiy ValueErrors
+		super(
+			`The project settings are invalid:
+${options.errors
+	.filter((error) => error.path)
+	.map(FormatProjectSettingsError)
+	.join("\n")}`
+		)
+		this.name = "ProjectSettingsInvalidError"
+	}
+}
+
+function FormatProjectSettingsError(error: ValueError) {
+	let msg = `${error.message} at ${error.path}`
+	if (error.path.startsWith("/modules/")) {
+		msg += `
+value = "${error.value}"
+- ${error.schema.allOf.map((o: SchemaOptions) => `${o.description ?? ""}`).join("\n- ")}`
+	}
+	return msg
+}
+
+export class ProjectSettingsFileJSONSyntaxError extends Error {
+	constructor(options: { cause: ErrorOptions["cause"]; path: string }) {
+		super(
+			`The settings file at "${options.path}" is not a valid JSON file:\n\n${options.cause}`,
+			options
+		)
+		this.name = "ProjectSettingsFileJSONSyntaxError"
+	}
+}
+
+export class ProjectSettingsFileNotFoundError extends Error {
+	constructor(options: { cause?: ErrorOptions["cause"]; path: string }) {
+		super(`The file at "${options.path}" could not be read. Does the file exists?`, options)
+		this.name = "ProjectSettingsFileNotFoundError"
+	}
+}
+
+export class PluginSaveMessagesError extends Error {
+	constructor(options: { cause: ErrorOptions["cause"] }) {
+		super(`An error occured in saveMessages() caused by ${options.cause}.`, options)
+		this.name = "PluginSaveMessagesError"
+	}
+}
+
+export class PluginLoadMessagesError extends Error {
+	constructor(options: { cause: ErrorOptions["cause"] }) {
+		super(`An error occured in loadMessages() caused by ${options.cause}.`, options)
+		this.name = "PluginLoadMessagesError"
+	}
+}
+
+export class LoadMessageError extends Error {
+	constructor(options: { path: string; messageId: string; cause: ErrorOptions["cause"] }) {
+		super(
+			`An error occured when loading message ${options.messageId} from path ${options.path} caused by ${options.cause}.`,
+			options
+		)
+		this.name = "LoadMessageError"
+	}
+}
+
+export class SaveMessageError extends Error {
+	constructor(options: { path: string; messageId: string; cause: ErrorOptions["cause"] }) {
+		super(
+			`An error occured when loading message ${options.messageId} from path ${options.path} caused by ${options.cause}.`,
+			options
+		)
+		this.name = "SaveMessageError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/human-id/human-readable-id.ts b/inlang/source-code/sdk-v2/src/human-id/human-readable-id.ts
new file mode 100644
index 0000000000..1f29d2eb9e
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/human-id/human-readable-id.ts
@@ -0,0 +1,27 @@
+// we use murmur for best distribution https://medium.com/miro-engineering/choosing-a-hash-function-to-solve-a-data-sharding-problem-c656259e2b54
+import murmurhash3 from "murmurhash3js"
+import { adjectives, animals, adverbs, verbs } from "./words.js"
+
+export function randomHumanId() {
+	return `${adjectives[Math.floor(Math.random() * 256)]}_${
+		adjectives[Math.floor(Math.random() * 256)]
+	}_${animals[Math.floor(Math.random() * 256)]}_${verbs[Math.floor(Math.random() * 256)]}`
+}
+
+export function humanIdHash(value: string, offset: number = 0) {
+	// Seed value can be any arbitrary value
+	const seed = 42
+
+	// Use MurmurHash3 to produce a 32-bit hash
+	const hash32 = murmurhash3.x86.hash32(value, seed)
+	// Add 1 and take modulo 2^32 to fit within 32 bits
+	const hash32WithOffset: number = (hash32 + offset) >>> 0
+
+	// Extract four 8-bit parts
+	const part1 = (hash32WithOffset >>> 24) & 0xff
+	const part2 = (hash32WithOffset >>> 16) & 0xff
+	const part3 = (hash32WithOffset >>> 8) & 0xff
+	const part4 = hash32WithOffset & 0xff
+
+	return `${adjectives[part1]}_${animals[part2]}_${verbs[part3]}_${adverbs[part4]}`
+}
diff --git a/inlang/source-code/sdk-v2/src/human-id/words.test.ts b/inlang/source-code/sdk-v2/src/human-id/words.test.ts
new file mode 100644
index 0000000000..8065185b61
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/human-id/words.test.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest"
+import { adjectives, animals, adverbs, verbs } from "./words.js"
+
+const wordlists = [adjectives, animals, adverbs, verbs]
+const allwords = [...adjectives, ...animals, ...adverbs, ...verbs]
+
+describe("wordlists", () => {
+	it("should have 256 words", () => {
+		for (const wordlist of wordlists) {
+			expect(wordlist.length).toBe(256)
+		}
+	})
+	it("words should be unique across lists", () => {
+		const unique = new Set(allwords)
+		expect(unique.size).toBe(256 * 4)
+	})
+	it("words should have < 10 characters", () => {
+		for (const word of allwords) {
+			expect(word.length).toBeLessThan(10)
+		}
+	})
+	it("words should match /^[a-z]+$/", () => {
+		for (const word of allwords) {
+			expect(word.match(/^[a-z]+$/) !== null).toBe(true)
+		}
+	})
+})
diff --git a/inlang/source-code/sdk-v2/src/human-id/words.ts b/inlang/source-code/sdk-v2/src/human-id/words.ts
new file mode 100644
index 0000000000..f644e6172a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/human-id/words.ts
@@ -0,0 +1,1035 @@
+export const animals = [
+	"albatross",
+	"alligator",
+	"alpaca",
+	"anaconda",
+	"angelfish",
+	"ant",
+	"anteater",
+	"antelope",
+	"ape",
+	"baboon",
+	"badger",
+	"barbel",
+	"bat",
+	"bear",
+	"beaver",
+	"bee",
+	"beetle",
+	"bird",
+	"bison",
+	"blackbird",
+	"boar",
+	"bobcat",
+	"bulldog",
+	"bullock",
+	"bumblebee",
+	"butterfly",
+	"buzzard",
+	"camel",
+	"canary",
+	"capybara",
+	"carp",
+	"cat",
+	"cheetah",
+	"chicken",
+	"chipmunk",
+	"clownfish",
+	"cobra",
+	"cockroach",
+	"cod",
+	"cougar",
+	"cow",
+	"cowfish",
+	"coyote",
+	"crab",
+	"crocodile",
+	"crossbill",
+	"crow",
+	"cuckoo",
+	"dachshund",
+	"deer",
+	"dingo",
+	"dog",
+	"dolphin",
+	"donkey",
+	"dove",
+	"dragonfly",
+	"duck",
+	"eagle",
+	"earthworm",
+	"eel",
+	"elephant",
+	"elk",
+	"emu",
+	"falcon",
+	"felix",
+	"finch",
+	"fireant",
+	"firefox",
+	"fish",
+	"flamingo",
+	"flea",
+	"florian",
+	"fly",
+	"fox",
+	"frog",
+	"gadfly",
+	"gazelle",
+	"gecko",
+	"gibbon",
+	"giraffe",
+	"goat",
+	"goldfish",
+	"goose",
+	"gopher",
+	"gorilla",
+	"grebe",
+	"grizzly",
+	"gull",
+	"guppy",
+	"haddock",
+	"halibut",
+	"hamster",
+	"hare",
+	"hawk",
+	"hedgehog",
+	"herring",
+	"hornet",
+	"horse",
+	"hound",
+	"husky",
+	"hyena",
+	"ibex",
+	"iguana",
+	"impala",
+	"insect",
+	"jackal",
+	"jackdaw",
+	"jaguar",
+	"jan",
+	"jannes",
+	"javelina",
+	"jay",
+	"jellyfish",
+	"jurgen",
+	"kangaroo",
+	"kestrel",
+	"kitten",
+	"koala",
+	"kudu",
+	"ladybug",
+	"lamb",
+	"lark",
+	"larva",
+	"lemming",
+	"lemur",
+	"leopard",
+	"liger",
+	"lion",
+	"lionfish",
+	"lizard",
+	"llama",
+	"lobster",
+	"loris",
+	"lynx",
+	"macaw",
+	"maggot",
+	"mallard",
+	"mammoth",
+	"manatee",
+	"mantis",
+	"mare",
+	"marlin",
+	"marmot",
+	"marten",
+	"martin",
+	"mayfly",
+	"meerkat",
+	"midge",
+	"millipede",
+	"mink",
+	"mole",
+	"mongoose",
+	"monkey",
+	"moose",
+	"moth",
+	"mouse",
+	"mule",
+	"myna",
+	"newt",
+	"niklas",
+	"nils",
+	"nuthatch",
+	"ocelot",
+	"octopus",
+	"okapi",
+	"opossum",
+	"orangutan",
+	"oryx",
+	"osprey",
+	"ostrich",
+	"otter",
+	"owl",
+	"ox",
+	"panda",
+	"panther",
+	"parakeet",
+	"parrot",
+	"peacock",
+	"pelican",
+	"penguin",
+	"pig",
+	"pigeon",
+	"piranha",
+	"platypus",
+	"polecat",
+	"pony",
+	"poodle",
+	"porpoise",
+	"puffin",
+	"pug",
+	"puma",
+	"quail",
+	"rabbit",
+	"racoon",
+	"rat",
+	"raven",
+	"ray",
+	"reindeer",
+	"robin",
+	"rook",
+	"rooster",
+	"salmon",
+	"samuel",
+	"sawfish",
+	"scallop",
+	"seahorse",
+	"seal",
+	"shad",
+	"shark",
+	"sheep",
+	"shell",
+	"shrike",
+	"shrimp",
+	"skate",
+	"skunk",
+	"sloth",
+	"slug",
+	"snail",
+	"snake",
+	"sparrow",
+	"spider",
+	"squid",
+	"squirrel",
+	"starfish",
+	"stingray",
+	"stork",
+	"swallow",
+	"swan",
+	"tadpole",
+	"tapir",
+	"termite",
+	"tern",
+	"thrush",
+	"tiger",
+	"toad",
+	"tortoise",
+	"toucan",
+	"trout",
+	"tuna",
+	"turkey",
+	"turtle",
+	"vole",
+	"vulture",
+	"wallaby",
+	"walrus",
+	"warbler",
+	"warthog",
+	"wasp",
+	"weasel",
+	"whale",
+	"wolf",
+	"wombat",
+	"worm",
+	"wren",
+	"yak",
+	"zebra",
+]
+
+export const adjectives = [
+	"acidic",
+	"active",
+	"actual",
+	"agent",
+	"ago",
+	"alert",
+	"alive",
+	"aloof",
+	"antsy",
+	"any",
+	"aqua",
+	"arable",
+	"awake",
+	"aware",
+	"away",
+	"awful",
+	"bad",
+	"bald",
+	"basic",
+	"best",
+	"big",
+	"bland",
+	"blue",
+	"bold",
+	"born",
+	"brave",
+	"brief",
+	"bright",
+	"broad",
+	"busy",
+	"calm",
+	"candid",
+	"careful",
+	"caring",
+	"chunky",
+	"civil",
+	"clean",
+	"clear",
+	"close",
+	"cool",
+	"cozy",
+	"crazy",
+	"crisp",
+	"cuddly",
+	"curly",
+	"cute",
+	"dark",
+	"day",
+	"deft",
+	"direct",
+	"dirty",
+	"dizzy",
+	"drab",
+	"dry",
+	"due",
+	"dull",
+	"each",
+	"early",
+	"east",
+	"elegant",
+	"empty",
+	"equal",
+	"even",
+	"every",
+	"extra",
+	"factual",
+	"fair",
+	"fancy",
+	"few",
+	"fine",
+	"fit",
+	"flaky",
+	"flat",
+	"fluffy",
+	"formal",
+	"frail",
+	"free",
+	"fresh",
+	"front",
+	"full",
+	"fun",
+	"funny",
+	"fuzzy",
+	"game",
+	"gaudy",
+	"giant",
+	"glad",
+	"good",
+	"grand",
+	"grassy",
+	"gray",
+	"great",
+	"green",
+	"gross",
+	"happy",
+	"heavy",
+	"helpful",
+	"heroic",
+	"home",
+	"honest",
+	"hour",
+	"house",
+	"icy",
+	"ideal",
+	"inclusive",
+	"inner",
+	"jolly",
+	"jumpy",
+	"just",
+	"keen",
+	"key",
+	"kind",
+	"knotty",
+	"known",
+	"large",
+	"last",
+	"late",
+	"lazy",
+	"least",
+	"left",
+	"legal",
+	"less",
+	"level",
+	"light",
+	"lime",
+	"livid",
+	"lofty",
+	"long",
+	"loose",
+	"lost",
+	"loud",
+	"loved",
+	"low",
+	"lower",
+	"lucky",
+	"mad",
+	"main",
+	"major",
+	"male",
+	"many",
+	"maroon",
+	"mealy",
+	"mean",
+	"mellow",
+	"merry",
+	"mild",
+	"minor",
+	"misty",
+	"moving",
+	"muddy",
+	"mushy",
+	"neat",
+	"new",
+	"next",
+	"nice",
+	"nimble",
+	"noble",
+	"noisy",
+	"north",
+	"novel",
+	"odd",
+	"ok",
+	"only",
+	"orange",
+	"ornate",
+	"patchy",
+	"patient",
+	"petty",
+	"pink",
+	"plain",
+	"plane",
+	"polite",
+	"pretty",
+	"proof",
+	"proud",
+	"quaint",
+	"quick",
+	"quiet",
+	"raw",
+	"real",
+	"red",
+	"round",
+	"royal",
+	"sad",
+	"safe",
+	"salty",
+	"same",
+	"sea",
+	"seemly",
+	"sharp",
+	"short",
+	"shy",
+	"silly",
+	"simple",
+	"sleek",
+	"slimy",
+	"slow",
+	"small",
+	"smart",
+	"smug",
+	"soft",
+	"solid",
+	"sound",
+	"sour",
+	"spare",
+	"spicy",
+	"spry",
+	"stale",
+	"steep",
+	"still",
+	"stock",
+	"stout",
+	"strong",
+	"suave",
+	"such",
+	"sunny",
+	"super",
+	"sweet",
+	"swift",
+	"tame",
+	"tangy",
+	"tasty",
+	"teal",
+	"teary",
+	"tense",
+	"that",
+	"these",
+	"this",
+	"tidy",
+	"tiny",
+	"tired",
+	"top",
+	"topical",
+	"tough",
+	"trick",
+	"trite",
+	"true",
+	"upper",
+	"vexed",
+	"vivid",
+	"wacky",
+	"warm",
+	"watery",
+	"weak",
+	"weary",
+	"weird",
+	"white",
+	"whole",
+	"wide",
+	"wild",
+	"wise",
+	"witty",
+	"yummy",
+	"zany",
+	"zesty",
+	"zippy",
+]
+
+export const adverbs = [
+	"ablaze",
+	"about",
+	"above",
+	"abroad",
+	"across",
+	"adrift",
+	"afloat",
+	"after",
+	"again",
+	"ahead",
+	"alike",
+	"all",
+	"almost",
+	"alone",
+	"along",
+	"aloud",
+	"always",
+	"amazing",
+	"anxious",
+	"anywhere",
+	"apart",
+	"around",
+	"arrogant",
+	"aside",
+	"asleep",
+	"awkward",
+	"back",
+	"bashful",
+	"beautiful",
+	"before",
+	"behind",
+	"below",
+	"beside",
+	"besides",
+	"beyond",
+	"bitter",
+	"bleak",
+	"blissful",
+	"boldly",
+	"bravely",
+	"briefly",
+	"brightly",
+	"brisk",
+	"busily",
+	"calmly",
+	"carefully",
+	"careless",
+	"cautious",
+	"certain",
+	"cheerful",
+	"clearly",
+	"clever",
+	"closely",
+	"closer",
+	"colorful",
+	"common",
+	"correct",
+	"cross",
+	"cruel",
+	"curious",
+	"daily",
+	"dainty",
+	"daring",
+	"dear",
+	"desperate",
+	"diligent",
+	"doubtful",
+	"doubtless",
+	"down",
+	"downwards",
+	"dreamily",
+	"eager",
+	"easily",
+	"either",
+	"elegantly",
+	"else",
+	"elsewhere",
+	"enormous",
+	"enough",
+	"ever",
+	"famous",
+	"far",
+	"fast",
+	"fervent",
+	"fierce",
+	"fondly",
+	"foolish",
+	"forever",
+	"forth",
+	"fortunate",
+	"forward",
+	"frank",
+	"freely",
+	"frequent",
+	"fully",
+	"general",
+	"generous",
+	"gladly",
+	"graceful",
+	"grateful",
+	"gratis",
+	"half",
+	"happily",
+	"hard",
+	"harsh",
+	"hearty",
+	"helpless",
+	"here",
+	"highly",
+	"hitherto",
+	"how",
+	"however",
+	"hurried",
+	"immediate",
+	"in",
+	"indeed",
+	"inland",
+	"innocent",
+	"inside",
+	"instant",
+	"intense",
+	"inward",
+	"jealous",
+	"jovial",
+	"joyful",
+	"jubilant",
+	"keenly",
+	"kindly",
+	"knowing",
+	"lately",
+	"lazily",
+	"lightly",
+	"likely",
+	"little",
+	"live",
+	"loftily",
+	"longing",
+	"loosely",
+	"loudly",
+	"loving",
+	"loyal",
+	"luckily",
+	"madly",
+	"maybe",
+	"meanwhile",
+	"mocking",
+	"monthly",
+	"moreover",
+	"much",
+	"near",
+	"neatly",
+	"neither",
+	"nervous",
+	"never",
+	"noisily",
+	"normal",
+	"not",
+	"now",
+	"nowadays",
+	"nowhere",
+	"oddly",
+	"off",
+	"official",
+	"often",
+	"on",
+	"once",
+	"open",
+	"openly",
+	"opposite",
+	"otherwise",
+	"out",
+	"outside",
+	"over",
+	"overall",
+	"overhead",
+	"overnight",
+	"overseas",
+	"parallel",
+	"partial",
+	"past",
+	"patiently",
+	"perfect",
+	"perhaps",
+	"physical",
+	"playful",
+	"politely",
+	"potential",
+	"powerful",
+	"presto",
+	"profound",
+	"prompt",
+	"proper",
+	"proudly",
+	"punctual",
+	"quickly",
+	"quizzical",
+	"rare",
+	"ravenous",
+	"ready",
+	"really",
+	"reckless",
+	"regular",
+	"repeated",
+	"restful",
+	"rightful",
+	"rigid",
+	"rude",
+	"sadly",
+	"safely",
+	"scarce",
+	"scary",
+	"searching",
+	"seeming",
+	"seldom",
+	"selfish",
+	"separate",
+	"serious",
+	"shaky",
+	"sheepish",
+	"silent",
+	"sleepy",
+	"smooth",
+	"softly",
+	"solemn",
+	"solidly",
+	"sometimes",
+	"speedy",
+	"stealthy",
+	"stern",
+	"strict",
+	"stubborn",
+	"sudden",
+	"supposed",
+	"sweetly",
+	"swiftly",
+	"tender",
+	"tensely",
+	"thankful",
+	"tight",
+	"too",
+	"twice",
+	"under",
+	"untrue",
+	"uphill",
+	"upward",
+	"vaguely",
+	"vainly",
+	"vastly",
+	"warmly",
+	"wearily",
+	"weekly",
+	"well",
+	"wisely",
+	"within",
+	"wrongly",
+	"yonder",
+]
+
+export const verbs = [
+	"absorb",
+	"accept",
+	"achieve",
+	"adapt",
+	"adore",
+	"advise",
+	"affirm",
+	"agree",
+	"aid",
+	"aim",
+	"amaze",
+	"amuse",
+	"animate",
+	"approve",
+	"arise",
+	"arrive",
+	"ascend",
+	"ask",
+	"aspire",
+	"assure",
+	"attend",
+	"bake",
+	"bask",
+	"beam",
+	"believe",
+	"belong",
+	"bend",
+	"blend",
+	"bless",
+	"blink",
+	"bloom",
+	"boil",
+	"boost",
+	"borrow",
+	"breathe",
+	"bubble",
+	"build",
+	"bump",
+	"burn",
+	"buy",
+	"buzz",
+	"care",
+	"catch",
+	"charm",
+	"cheer",
+	"cherish",
+	"chop",
+	"clap",
+	"clasp",
+	"climb",
+	"clip",
+	"coax",
+	"comfort",
+	"commend",
+	"compose",
+	"conquer",
+	"cook",
+	"create",
+	"cry",
+	"cuddle",
+	"cure",
+	"cut",
+	"dance",
+	"dare",
+	"dart",
+	"dash",
+	"dazzle",
+	"delight",
+	"devour",
+	"dial",
+	"dig",
+	"dine",
+	"dream",
+	"drip",
+	"drop",
+	"drum",
+	"dust",
+	"earn",
+	"edit",
+	"embrace",
+	"emerge",
+	"empower",
+	"enchant",
+	"endure",
+	"engage",
+	"enjoy",
+	"enrich",
+	"evoke",
+	"exhale",
+	"expand",
+	"explore",
+	"express",
+	"fade",
+	"fall",
+	"favor",
+	"fear",
+	"feast",
+	"feel",
+	"fetch",
+	"file",
+	"find",
+	"flip",
+	"flop",
+	"flow",
+	"fold",
+	"fond",
+	"forgive",
+	"foster",
+	"fry",
+	"fulfill",
+	"gasp",
+	"gaze",
+	"gleam",
+	"glow",
+	"grace",
+	"grasp",
+	"greet",
+	"grin",
+	"grip",
+	"grow",
+	"gulp",
+	"hack",
+	"harbor",
+	"heal",
+	"heart",
+	"hike",
+	"hint",
+	"honor",
+	"hope",
+	"hug",
+	"hunt",
+	"hurl",
+	"hush",
+	"imagine",
+	"inspire",
+	"intend",
+	"jest",
+	"jolt",
+	"jump",
+	"kick",
+	"kiss",
+	"laugh",
+	"launch",
+	"lead",
+	"leap",
+	"learn",
+	"lend",
+	"lift",
+	"link",
+	"list",
+	"lock",
+	"loop",
+	"love",
+	"mend",
+	"mix",
+	"mop",
+	"nail",
+	"nourish",
+	"nudge",
+	"nurture",
+	"offer",
+	"pat",
+	"pause",
+	"pave",
+	"peek",
+	"peel",
+	"persist",
+	"pet",
+	"pick",
+	"pinch",
+	"play",
+	"pop",
+	"pout",
+	"praise",
+	"pray",
+	"pride",
+	"promise",
+	"propel",
+	"prosper",
+	"pull",
+	"push",
+	"quell",
+	"quiz",
+	"race",
+	"radiate",
+	"read",
+	"reap",
+	"relish",
+	"renew",
+	"reside",
+	"rest",
+	"revive",
+	"ripple",
+	"rise",
+	"roam",
+	"roar",
+	"rush",
+	"sail",
+	"savor",
+	"scold",
+	"scoop",
+	"seek",
+	"sew",
+	"shine",
+	"sing",
+	"skip",
+	"slide",
+	"slurp",
+	"smile",
+	"snap",
+	"snip",
+	"soar",
+	"spark",
+	"spin",
+	"splash",
+	"sprout",
+	"spur",
+	"stab",
+	"startle",
+	"stir",
+	"stop",
+	"strive",
+	"succeed",
+	"support",
+	"surge",
+	"sway",
+	"swim",
+	"talk",
+	"tap",
+	"taste",
+	"tear",
+	"tend",
+	"thrive",
+	"tickle",
+	"transform",
+	"treasure",
+	"treat",
+	"trim",
+	"trip",
+	"trust",
+	"twirl",
+	"twist",
+	"type",
+	"urge",
+	"value",
+	"vent",
+	"view",
+	"walk",
+	"wave",
+	"win",
+	"wish",
+	"work",
+	"yell",
+	"zap",
+	"zip",
+	"zoom",
+]
diff --git a/inlang/source-code/sdk-v2/src/import-utils.ts b/inlang/source-code/sdk-v2/src/import-utils.ts
new file mode 100644
index 0000000000..5aef0ac8b9
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/import-utils.ts
@@ -0,0 +1,44 @@
+import { ModuleImportError } from "./resolve-modules/errors.js"
+import type { InlangModule } from "./types/module.js"
+
+/**
+ * @throws {ModuleImportError}
+ */
+type Importer = (uri: string) => Promise<InlangModule>
+
+export function createDebugImport(importMap: Record<string, InlangModule["default"]>): Importer {
+	return async (uri) => {
+		const resolved = importMap[uri]
+		if (resolved) return { default: resolved }
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error("Not found"),
+		})
+	}
+}
+
+/**
+ * Use multiple import function in sequence
+ */
+export function importSequence(...importers: Importer[]): Importer {
+	return async (uri) => {
+		let lastError: ModuleImportError | undefined = undefined
+		for (const importer of importers) {
+			try {
+				return await importer(uri)
+			} catch (error) {
+				if (error instanceof ModuleImportError) {
+					lastError = error
+					continue
+				}
+				throw error
+			}
+		}
+
+		if (lastError) throw lastError
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error("Not found"),
+		})
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/index.ts b/inlang/source-code/sdk-v2/src/index.ts
new file mode 100644
index 0000000000..7c40cbd49b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/index.ts
@@ -0,0 +1,5 @@
+export * from "./loadProjectOpfs.js"
+export * from "./newProjectOpfs.js"
+// export * from "./mock/mockhelper";
+// export { newProject } from "./newProject";
+// export * from "./helper/index";
diff --git a/inlang/source-code/sdk-v2/src/lint/createLinter.ts b/inlang/source-code/sdk-v2/src/lint/createLinter.ts
new file mode 100644
index 0000000000..36a0ea8050
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/lint/createLinter.ts
@@ -0,0 +1,98 @@
+// TODO SDK-v2 implement linting
+// import { populateLevel } from "./populateLintLevel.js"
+// import * as Comlink from "comlink"
+// import type { ProjectSettings2 } from "../types/project-settings.js"
+// import type { Fix, LintReport, LintResult, MessageBundleLintRule } from "../types/lint.js"
+// import { debug, hashLintReports } from "./worker.js"
+// import type { InlangProject } from "../types/project.js"
+
+// function hash(url: string) {
+// 	const bytes = new TextEncoder().encode(url)
+
+// 	// 64-bit FNV1a hash
+// 	// https://en.wikipedia.org/wiki/FNV-1a
+// 	const hash = bytes.reduce(
+// 		(hash, byte) => BigInt.asUintN(64, (hash ^ BigInt(byte)) * 1_099_511_628_211n),
+// 		14_695_981_039_346_656_037n
+// 	)
+
+// 	return hash.toString(36)
+// }
+
+// export function hashLintReports(reports: LintReport[]) {
+// 	const stringified = JSON.stringify(reports)
+// 	return hash(stringified)
+// }
+
+// export async function createLinter(
+// 	inlangProject: InlangProject
+// ) {
+
+// 	return {
+// 		lint: async (settings: ProjectSettings2): Promise<LintResult> => {
+// 			const messageBundles = await inlangProject.getBundles()
+// 			const reportsById: {
+// 				[bundleId: string]: LintReport[]
+// 			} = {}
+
+// 			const promises: Promise<any>[] = []
+
+// 			for (const messageBundle of messageBundles.values()) {
+// 				reportsById[messageBundle.id] = []
+
+// 				for (const lintRule of inlangProject.installed.lintRules.getValue()) {
+//                     // TODO SDK-v2 get message lint rules separatly
+//                     const messageBundleLintRule = lintRule as unknown as MessageBundleLintRule
+// 					const promise = messageBundleLintRule.run({
+// 						messageBundle: messageBundle,
+// 						settings,
+// 						report: (report) => {
+// 							const reportWithRule = { ...report, ruleId: lintRule.id }
+
+// 							const fullReport = populateLevel(reportWithRule, settings.lintConfig)
+
+// 							const reportsForBundle = reportsById[messageBundle.id] || []
+// 							reportsForBundle.push(fullReport)
+// 						},
+// 					})
+// 					promises.push(promise as Promise<any>)
+// 				}
+// 			}
+
+// 			// wait for lints to finish
+// 			await Promise.all(promises)
+
+// 			// populate hashesh
+// 			const result: LintResult = {}
+// 			for (const [bundleId, reports] of Object.entries(reportsById)) {
+// 				const hash = hashLintReports(reports)
+// 				result[bundleId] = {
+// 					hash,
+// 					reports,
+// 				}
+// 			}
+
+// 			console.log(result)
+// 			return result
+// 		},
+
+// 		fix: async <Report extends LintReport>(report: Report, fix: Fix<Report>) => {
+// 			//enforce that the fix exists on the lint-report
+// 			const usedFix = report.fixes.find((f) => f.title === fix.title)
+// 			if (!usedFix) throw new Error(`fix ${fix.title} not available on report "${report.body}"`)
+
+//             const bundle = await inlangProject.bundles.getNestedById(report.messageBundleId)
+
+// 			if (!bundle) throw new Error(`messageBundle ${report.messageBundleId} not found`)
+
+//             // TODO SDK-v2 get message lint rules separatly
+// 			const rule = inlangProject.installed.lintRules.getValue().find((rule) => rule.id === report.ruleId) as unknown as MessageBundleLintRule
+// 			if (!rule) throw new Error(`rule ${report.ruleId} not found`)
+// 			if (!rule.fix) throw new Error(`rule ${report.ruleId} does not have a fix function`)
+
+// 			const messageBundle = structuredClone(bundle)
+// 			const fixed = await rule.fix({ report, fix, settings: inlangProject.settings.getValue(), messageBundle })
+// 			return fixed
+// 		},
+// 	}
+// }
diff --git a/inlang/source-code/sdk-v2/src/lint/host.ts b/inlang/source-code/sdk-v2/src/lint/host.ts
new file mode 100644
index 0000000000..3ce10a128b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/lint/host.ts
@@ -0,0 +1,26 @@
+import * as Comlink from "comlink"
+import type { createLinter as createLinterType } from "./worker.js"
+import type { NodeishFilesystemSubset } from "@inlang/plugin"
+import { WorkerPrototype as Worker, adapter } from "comlink-node"
+import type { ProjectSettings2 } from "../types/project-settings.js"
+
+/**
+ * Starts a web worker that can be used to lint messages.
+ */
+export async function createLintWorker(
+	projectPath: string,
+	settings: ProjectSettings2,
+	fs: Pick<NodeishFilesystemSubset, "readFile" | "readdir" | "mkdir">
+) {
+	const worker = new Worker(new URL("./linter.js", import.meta.url), { type: "module" })
+	const createLinter = Comlink.wrap<typeof createLinterType>(adapter(worker))
+
+	const fsProxy = Comlink.proxy(fs)
+	const linter = await createLinter(projectPath, settings, fsProxy)
+
+	return {
+		lint: (settings: ProjectSettings2) => linter.lint(settings),
+		fix: linter.fix,
+		terminate: () => worker.terminate(),
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/lint/import.ts b/inlang/source-code/sdk-v2/src/lint/import.ts
new file mode 100644
index 0000000000..d33a8316f4
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/lint/import.ts
@@ -0,0 +1,136 @@
+import dedent from "dedent"
+import type { NodeishFilesystemSubset } from "@inlang/plugin"
+import { tryCatch } from "@inlang/result"
+import { withReadOnlyCache } from "../../resolve-modules/cache.js"
+import { ModuleImportError } from "../../resolve-modules/errors.js"
+
+// TODO deduplicate this module
+
+/**
+ * Importing ES modules either from a local path, or from a url.
+ *
+ * - Name the import function `_import` to avoid shadowing the
+ *   native import function.
+ */
+export type ImportFunction = (uri: string) => Promise<any>
+
+/**
+ * Creates the import function.
+ *
+ * This function is required to import modules from a local path.
+ *
+ * @example
+ *   const $import = createImport({ readFile: fs.readFile, fetch });
+ *   const module = await _import('./some-module.js');
+ */
+export function createImport(
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile">
+) {
+	return (uri: string) => $import(uri, projectPath, nodeishFs)
+}
+
+async function $import(
+	uri: string,
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile">
+): Promise<any> {
+	const moduleAsText = uri.startsWith("http")
+		? await withReadOnlyCache(readModuleFromCDN, projectPath, nodeishFs)(uri)
+		: await readModulefromDisk(uri, nodeishFs.readFile)
+
+	const moduleWithMimeType = "data:application/javascript," + encodeURIComponent(moduleAsText)
+
+	try {
+		return await import(/* @vite-ignore */ moduleWithMimeType)
+	} catch (error) {
+		if (error instanceof SyntaxError && uri.includes("jsdelivr")) {
+			error.message += dedent`\n\n
+				Are you sure that the file exists on JSDelivr?
+
+				The error indicates that the imported file does not exist on JSDelivr. For non-existent files, JSDelivr returns a 404 text that JS cannot parse as a module and throws a SyntaxError.`
+		}
+		throw new ModuleImportError({ module: uri, cause: error as Error })
+	}
+}
+
+/**
+ * Tries to read the module from disk
+ * @throws {ModuleImportError}
+ */
+async function readModulefromDisk(
+	uri: string,
+	readFile: NodeishFilesystemSubset["readFile"]
+): Promise<string> {
+	try {
+		return await readFile(uri, { encoding: "utf-8" })
+	} catch (error) {
+		throw new ModuleImportError({ module: uri, cause: error as Error })
+	}
+}
+
+/**
+ * Reads a module from a CDN.
+ * Tries to read local cache first.
+ *
+ * @param uri A valid URL
+ * @throws {ModuleImportError}
+ */
+async function readModuleFromCDN(uri: string): Promise<string> {
+	if (!isValidUrl(uri))
+		throw new ModuleImportError({ module: uri, cause: new Error("Malformed URL") })
+
+	const result = await tryCatch(async () => await fetch(uri))
+	if (result.error) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: result.error,
+		})
+	}
+
+	const response = result.data
+	if (!response.ok) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error(
+				`Failed to fetch module. HTTP status: ${response.status}, Message: ${response.statusText}`
+			),
+		})
+	}
+
+	const JS_CONTENT_TYPES = [
+		"application/javascript",
+		"text/javascript",
+		"text/plain", //TODO remove this - only for githubusercontent
+		"application/x-javascript",
+		"text/x-javascript",
+	]
+
+	// if there is no content-type header, assume it's a JavaScript module & hope for the best
+	const contentType = response.headers.get("content-type")?.toLowerCase()
+	if (contentType && !JS_CONTENT_TYPES.some((knownType) => contentType.includes(knownType))) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error(`Server responded with ${contentType} insetad of a JavaScript module`),
+		})
+	}
+
+	return await response.text()
+}
+
+function isValidUrl(url: string) {
+	// This dance is necessary to both support a fallback in case URL.canParse
+	// is not present (like in vitest), and also appease typescript
+	const URLConstructor = URL
+	if ("canParse" in URL) {
+		return URL.canParse(url)
+	}
+
+	try {
+		new URLConstructor(url)
+		return true
+	} catch (e) {
+		console.warn(`Invalid URL: ${url}`)
+		return false
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
new file mode 100644
index 0000000000..84ad04ba23
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
@@ -0,0 +1,38 @@
+import type { LintConfig, LintReport } from "../types/lint.js"
+
+/**
+ * Figures out which level a lint report should have.
+ *
+ * @param report - The lint report without a level
+ * @param lintReportConfigs - The lint report configs in the project - sorted by priority
+ * @returns - The lint report with a level
+ */
+export function populateLevel(
+	report: Omit<LintReport, "level">,
+	lintReportConfigs: Iterable<LintConfig>
+): LintReport {
+	// for now we assume that reports are sorted by priority
+	for (const config of lintReportConfigs) {
+		if (!configMatches(report, config)) continue
+		return { ...report, level: config.level }
+	}
+
+	return { ...report, level: "error" }
+}
+
+const keys = [
+	["ruleId", "ruleId"],
+	["bundleId", "messageBundleId"],
+	["messageId", "messageId"],
+	["variantId", "variantId"], // ["messageLocale"], // , "locale"],
+	// ,
+] as const satisfies [keyof LintConfig, keyof LintReport][]
+
+function configMatches(report: Omit<LintReport, "level">, config: LintConfig): boolean {
+	for (const [configKey, reportKey] of keys) {
+		if (config[configKey] === undefined) continue
+		if (config[configKey] !== report[reportKey]) return false
+	}
+
+	return true
+}
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
new file mode 100644
index 0000000000..5fec7accb3
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -0,0 +1,357 @@
+import { Kysely, ParseJSONResultsPlugin, sql, type RawBuilder, type SelectQueryBuilder } from "kysely"
+import { SQLocalKysely } from "sqlocal/kysely"
+import type { Bundle, BundleNested, Database, LintReport, Message, NestedBundle, NestedMessage, NewBundle, NewMessage, NewVariant, Variant } from "./types/schema.js"
+import { jsonArrayFrom } from "kysely/helpers/sqlite"
+import { loadSettings } from "./settings.js"
+import { BehaviorSubject, combineLatest, from, switchMap, tap } from "rxjs"
+import { createDebugImport, importSequence } from "./import-utils.js"
+
+// development only
+import lintRule from "./dev-modules/lint-rule.js"
+import makeOpralUppercase from "./dev-modules/opral-uppercase-lint-rule.js"
+import missingSelectorLintRule from "./dev-modules/missing-selector-lint-rule.js"
+import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
+import { resolveModules } from "./resolveModules2.js"
+import type { InstalledLintRule, ProjectSettings2 } from "./types/project-settings.js"
+import type { InlangProject } from "./types/project.js"
+import type { BundleWithMessages } from "./types/sdkTypes.js"
+import { observeNotification } from "rxjs/internal/Notification"
+
+// extend the SQLocalKysely class to expose a rawSql function
+// needed for non parametrized queries
+class SQLocalKyselyWithRaw extends SQLocalKysely {
+	rawSql = async <T extends Record<string, any>[]>(rawSql: string) => {
+		const { rows, columns } = await this.exec(rawSql, [], "all")
+		return this.convertRowsToObjects(rows, columns) as T
+	}
+}
+
+type ProjectState = "initializing" | "resolvingModules" | "loaded"
+
+/**
+ * @param path - for now we expect settings file and sqlite file beein checked out under the given path - later we checkout the files manually from the repo?
+ * @returns
+ */
+export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promise<InlangProject> {
+	const opfsRoot = await navigator.storage.getDirectory()
+
+	const projectDir = await opfsRoot.getDirectoryHandle(args.inlangFolderPath)
+
+  // loading the settings from opfs
+	const settingsFilePath = "settings.json"
+	const settingsFileHandle = await projectDir.getFileHandle(settingsFilePath)
+	const settingsFile = await settingsFileHandle.getFile()
+	const settingsFileContent = await settingsFile.arrayBuffer()
+
+	const projectSettings = await loadSettings({
+		settingsFileContent: settingsFileContent,
+	})
+
+	// TODO SDK-v2 listen to changes on the settings file - how do multiple instance of a project get informed about changes?
+	const projectSettings$ = new BehaviorSubject(projectSettings)
+  const observable = projectSettings$.asObservable()
+  
+  
+
+	const _import = importSequence(
+		createDebugImport({
+			"sdk-dev:lint-rule.js": lintRule,
+			"sdk-dev:opral-uppercase-lint.js": makeOpralUppercase,
+			"sdk-dev:missing-selector-lint-rule.js": missingSelectorLintRule,
+			"sdk-dev:missing-catchall-variant": missingCatchallLintRule,
+		}) /*,
+		createImport(projectPath, nodeishFs)*/
+	)
+	const lifecycle$ = new BehaviorSubject<ProjectState>("initializing")
+
+	const settings$ = projectSettings$.asObservable()
+
+	const modules$ = settings$.pipe(
+		switchMap((settings: any) => {
+			lifecycle$.next("resolvingModules")
+			return from(resolveModules({ settings, _import }))
+		}),
+		tap(() => lifecycle$.next("loaded"))
+	)
+
+	const installedLintRules$ = new BehaviorSubject([] as InstalledLintRule[])
+
+	combineLatest([modules$, settings$])
+		.pipe(
+			switchMap(([modules]) => {
+				lifecycle$.next("resolvingModules")
+				// TODO SDK2 handle module load errors
+				const rules = (modules as any).messageBundleLintRules.map(
+					(rule: any) =>
+						({
+							id: rule.id,
+							displayName: rule.displayName,
+							description: rule.description,
+							module:
+								(modules as any).meta.find((m) => m.id.includes(rule.id))?.module ??
+								"Unknown module. You stumbled on a bug in inlang's source code. Please open an issue.",
+							// default to warning, see https://github.com/opral/monorepo/issues/1254
+							level: "warning", // TODO SDK2 settings.messageLintRuleLevels?.[rule.id] ?? "warning",
+							settingsSchema: rule.settingsSchema,
+						} satisfies InstalledLintRule)
+				)
+				return from([rules])
+			})
+		)
+		.subscribe({
+			next: (rules) => installedLintRules$.next(rules),
+			error: (err) => console.error(err),
+		})
+
+	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
+
+	// TODO SDK-v2 SQLocalKysely currently only support (1 client) <-> (1 instance worker) communication with an db instance for reports to work we need (n clients) <-> (1 instance) communication
+	const sqliteDb = new SQLocalKyselyWithRaw(sqliteDbFilePath)
+	const { dialect, sql, rawSql } = sqliteDb
+
+	const db = new Kysely<Database>({
+		dialect,
+		plugins: [new ParseJSONResultsPlugin()],
+	})
+
+	return {
+		id: "TODO SDK-v2",
+		// db,
+		// sql,
+		// rawSql,
+
+		installed: {
+			lintRules: installedLintRules$,
+			plugins: [],
+		},
+		settings: {
+      get: () => projectSettings$.getValue(),
+      set: async (settings:     ) => { 
+        // TODO SDK-v2 implement
+      },
+      subscribe: projectSettings$.asObservable().subscribe,
+    },
+    bundle: {ewdffwdr
+      select: db.selectFrom("bundle"),
+      insert: (bundle: Bundle) => {
+        return db.insertInto("bundle").values({
+          id: bundle.id,
+          alias: json(bundle.alias) as any // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        })
+      },
+      update: (bundle: Partial<Bundle> & { id: string }) => {
+        const bundleProperties = structuredClone(bundle as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        delete bundleProperties.id
+        if (bundle.alias) {
+          bundleProperties.alias = json(bundle.alias) as any
+        } 
+        return db.updateTable("bundle").set(bundleProperties).where('bundle.id', '=', bundle.id)
+      },
+      delete: (bundle: Bundle) => {
+        return db.deleteFrom("bundle").where('bundle.id', '=', bundle.id)
+      }
+    },
+    message: {
+      select: db.selectFrom("message"),
+      insert: (message: Message) => {
+        return db.insertInto("message").values({
+          id: message.id,
+          bundleId: message.bundleId,
+          locale: message.locale,
+          declarations: json(message.declarations) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+          selectors: json(message.selectors) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        })
+      },
+      update: (message: Partial<Message> & { id: string }) => {
+        
+        const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        delete messageProperties.id
+        if (message.declarations) {
+          messageProperties.declarations = json(message.declarations) as any
+        } 
+        if (message.selectors) {
+          // TODO SDK-v2 shall we structure clone here?
+          messageProperties.selectors = json(message.selectors) as any
+        } 
+
+        return db.updateTable("message").set(messageProperties).where('message.id', '=', message.id)
+      },
+      delete: (message: Message) => {
+        return db.deleteFrom("message").where('message.id', '=', message.id)
+      }
+    },
+    variant: {
+      select: db.selectFrom("variant"),
+      insert: (variant: Variant) => {
+        return db.insertInto("variant").values({
+          id: variant.id,
+          messageId: variant.messageId,
+          match: json(variant.match) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+          pattern: json(variant.pattern) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        })
+      },
+      update: (variant: Partial<Variant> & { id: string } ) => {
+        
+        const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+        delete variantProperties.id
+        if (variant.match) {
+          variantProperties.declarations = json(variant.match) as any
+        } 
+        if (variant.pattern) {
+          // TODO SDK-v2 shall we structure clone here?
+          variantProperties.selectors = json(variant.pattern) as any
+        } 
+
+        return db.updateTable("variant").set(variantProperties).where('variant.id', '=', variant.id)
+      },
+      delete: (variant: Variant) => {
+        return db.deleteFrom("variant").where('variant.id', '=', variant.id)
+      }
+    },
+		fix: async (report: LintReport, fix: Fix<LintReport>) => {
+			// TODO SDK-v2 implement fix
+			// const fixed = await linter.fix(report, fix)
+			// await database.collections.messageBundles.upsert(fixed)
+		},
+		close: () => {
+			// TODO SDK-v2 close database again
+		},
+	}
+}
+
+
+
+export const populateMessages = (bundleSelect: SelectQueryBuilder<Database, "bundle", object>) => {
+	return bundleSelect.select((eb) => [
+			// select all columns from bundle
+			"id",
+			"alias",
+			// select all columns from messages as "messages"
+			jsonArrayFrom(
+				populateVariants(eb.selectFrom("message"))
+					.whereRef("message.bundleId", "=", ("bundle.id" as any)) // TODO SDK-v2 check how get aliases into populateVariants
+			).as("messages"),
+		])
+}
+
+export const populateVariants = (messageSelect: SelectQueryBuilder<Database, "message", object>) => {
+	return messageSelect
+  .select((eb) => [
+    // select all columns from message
+    "id",
+    "bundleId",
+    "locale",
+    "declarations",
+    "selectors",
+    // select all columns from variants as "variants"
+    jsonArrayFrom(
+      eb
+        .selectFrom("variant")
+        .select(["id", "messageId", "match", "pattern"])
+        .whereRef("variant.messageId", "=", "message.id")
+    ).as("variants"),
+  ])
+}
+
+
+
+function json<T>(value: T): RawBuilder<T> {
+	// NOTE we cant use jsonb for now since kisley
+	// - couldn't find out how to return json instead of bytes in a selectFrom(...).select statment
+	//  return sql`jsonb(${JSON.stringify(value)})`
+	return sql`json(${JSON.stringify(value)})`
+}
+
+const insertBundles = (db: Kysely<Database>) => {
+	return async (bundleToInsert: BundleWithMessages[]) => {
+		let bundles: NewBundle[] = []
+		let messages: NewMessage[] = []
+		let variants: NewVariant[] = []
+		// let reports: LintReport[] = []
+
+		await db.transaction().execute(async (tsx) => {
+			for (const sdkBundle of bundleToInsert) {
+				// TODO move id generation to inlang-sdk
+				// const sdkBundle = createBundle(['de-DE', 'en-US'], 0, 0, 0)
+
+				// mockReports(sdkBundle).forEach(report => {
+				//   const reportToAdd:any = report
+				//   reportToAdd.fixes = json(reportToAdd.fixes)
+				//   reportToAdd.target = json(reportToAdd.target)
+				//   reports.push(reportToAdd)
+				// });
+
+				for (const message of sdkBundle.messages) {
+					for (const variant of message.variants)
+						variants.push({
+							id: variant.id,
+							messageId: message.id,
+							match: json(variant.match),
+							pattern: json(variant.pattern),
+						} as any)
+					messages.push({
+						bundleId: message.bundleId,
+						id: message.id,
+						locale: message.locale,
+						declarations: json(message.declarations),
+						selectors: json(message.selectors),
+					} as any)
+				}
+
+				bundles.push({
+					alias: json(sdkBundle.alias),
+					id: sdkBundle.id,
+				} as any)
+
+				// manual batching to avoid too many db operations
+				if (bundles.length > 300) {
+					console.log("Bundles created: " + i)
+					const now = new Date().getTime()
+					console.time("Creating " + bundles.length + " Bundles/Messages/Variants " + now)
+
+					// TODO make in one query
+					await tsx.insertInto("bundle").values(bundles).execute()
+					await tsx
+						.insertInto("message")
+						.values(messages as any)
+						.execute()
+					await tsx
+						.insertInto("variant")
+						.values(variants as any)
+						.execute()
+
+					// await tsx
+					//   .insertInto("LintReport")
+					//   .values(reports as any)
+					//   .execute();
+
+					console.timeEnd("Creating " + bundles.length + " Bundles/Messages/Variants " + now)
+					bundles = []
+					messages = []
+					variants = []
+					// reports = [];
+				}
+			}
+			// insert remaining bundles
+			if (bundles.length > 0) {
+				const now = new Date().getTime()
+				console.time("Creating " + bundles.length + " Bundles/Messages/Variants " + now)
+				await tsx.insertInto("bundle").values(bundles).execute()
+				await tsx
+					.insertInto("message")
+					.values(messages as any)
+					.execute()
+
+				await tsx
+					.insertInto("variant")
+					.values(variants as any)
+					.execute()
+				// await tsx
+				// .insertInto("LintReport")
+				// .values(reports as any)
+				// .execute();
+				console.timeEnd("Creating " + bundles.length + " Bundles/Messages/Variants " + now)
+			}
+		})
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/mock/mockdata.ts b/inlang/source-code/sdk-v2/src/mock/mockdata.ts
new file mode 100644
index 0000000000..aa2c82199c
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/mockdata.ts
@@ -0,0 +1,465 @@
+const languageTags: string[] = [
+	"en-US", // English (United States)
+	"es-ES", // Spanish (Spain)
+	"fr-FR", // French (France)
+	"de-DE", // German (Germany)
+	"zh-CN", // Chinese (Simplified, China)
+	"ja-JP", // Japanese (Japan)
+	"ko-KR", // Korean (South Korea)
+	"it-IT", // Italian (Italy)
+	"pt-BR", // Portuguese (Brazil)
+]
+
+export const translations: { [key: string]: string[] } = {
+	"en-US": [
+		"Welcome back, ",
+		"Your account balance is ",
+		"You have ",
+		" new messages.",
+		"Click here to ",
+		"learn more",
+		"Your order number ",
+		" is being processed.",
+		"Thank you for your purchase.",
+		"Please enter your ",
+		"username",
+		" and ",
+		"password.",
+		"Your appointment is scheduled for ",
+		"Please contact ",
+		" customer support.",
+		"Order status: ",
+		"Shipment tracking number: ",
+		"Estimated delivery date: ",
+		"Invoice amount: ",
+		"Billing address: ",
+		"Shipping address: ",
+		"Promo code: ",
+		"Discount applied: ",
+		"Total amount: ",
+		"Payment method: ",
+		"Transaction ID: ",
+		"Date: ",
+		"Time: ",
+		"Location: ",
+		"Please review and confirm your ",
+		"changes.",
+		"Your settings have been ",
+		"updated.",
+		"An error occurred: ",
+		"Message: ",
+		"Details: ",
+	],
+	"es-ES": [
+		"Bienvenido de nuevo, ",
+		"Su saldo es ",
+		"Tiene ",
+		" nuevos mensajes.",
+		"Haga clic aquí para ",
+		"saber más",
+		"Su número de pedido ",
+		" está siendo procesado.",
+		"Gracias por su compra.",
+		"Por favor, ingrese su ",
+		"nombre de usuario",
+		" y ",
+		"contraseña.",
+		"Su cita está programada para ",
+		"Por favor, póngase en contacto con ",
+		" servicio al cliente.",
+		"Estado del pedido: ",
+		"Número de seguimiento del envío: ",
+		"Fecha estimada de entrega: ",
+		"Monto de la factura: ",
+		"Dirección de facturación: ",
+		"Dirección de envío: ",
+		"Código promocional: ",
+		"Descuento aplicado: ",
+		"Monto total: ",
+		"Método de pago: ",
+		"ID de transacción: ",
+		"Fecha: ",
+		"Hora: ",
+		"Ubicación: ",
+		"Por favor revise y confirme sus ",
+		"cambios.",
+		"Su configuración ha sido ",
+		"actualizada.",
+		"Ocurrió un error: ",
+		"Mensaje: ",
+		"Detalles: ",
+	],
+	"fr-FR": [
+		"Bon retour, ",
+		"Votre solde est de ",
+		"Vous avez ",
+		" nouveaux messages.",
+		"Cliquez ici pour ",
+		"en savoir plus",
+		"Votre numéro de commande ",
+		" est en cours de traitement.",
+		"Merci pour votre achat.",
+		"Veuillez entrer votre ",
+		"nom d'utilisateur",
+		" et ",
+		"mot de passe.",
+		"Votre rendez-vous est prévu pour le ",
+		"Veuillez contacter ",
+		" le service client.",
+		"Statut de la commande : ",
+		"Numéro de suivi de l'envoi : ",
+		"Date de livraison estimée : ",
+		"Montant de la facture : ",
+		"Adresse de facturation : ",
+		"Adresse de livraison : ",
+		"Code promo : ",
+		"Remise appliquée : ",
+		"Montant total : ",
+		"Mode de paiement : ",
+		"ID de transaction : ",
+		"Date : ",
+		"Heure : ",
+		"Lieu : ",
+		"Veuillez vérifier et confirmer vos ",
+		"modifications.",
+		"Vos paramètres ont été ",
+		"mis à jour.",
+		"Une erreur s'est produite : ",
+		"Message : ",
+		"Détails : ",
+	],
+	de: [
+		"Willkommen zurück, ",
+		"Ihr Kontostand beträgt ",
+		"Sie haben ",
+		" neue Nachrichten.",
+		"Klicken Sie hier, um ",
+		"mehr zu erfahren",
+		"Ihre Bestellnummer ",
+		" wird bearbeitet.",
+		"Danke für Ihren Einkauf.",
+		"Bitte geben Sie Ihren ",
+		"Benutzernamen",
+		" und ",
+		"Passwort ein.",
+		"Ihr Termin ist geplant für ",
+		"Bitte kontaktieren Sie ",
+		" den Kundenservice.",
+		"Bestellstatus: ",
+		"Sendungsverfolgungsnummer: ",
+		"Geschätztes Lieferdatum: ",
+		"Rechnungsbetrag: ",
+		"Rechnungsadresse: ",
+		"Lieferadresse: ",
+		"Gutscheincode: ",
+		"Angewandter Rabatt: ",
+		"Gesamtbetrag: ",
+		"Zahlungsmethode: ",
+		"Transaktions-ID: ",
+		"Datum: ",
+		"Uhrzeit: ",
+		"Ort: ",
+		"Bitte überprüfen und bestätigen Sie Ihre ",
+		"Änderungen.",
+		"Ihre Einstellungen wurden ",
+		"aktualisiert.",
+		"Ein Fehler ist aufgetreten: ",
+		"Nachricht: ",
+		"Details: ",
+	],
+	"zh-CN": [
+		"欢迎回来，",
+		"您的账户余额为 ",
+		"您有 ",
+		" 条新消息。",
+		"点击这里 ",
+		"了解更多",
+		"您的订单号 ",
+		" 正在处理中。",
+		"感谢您的购买。",
+		"请输入您的 ",
+		"用户名",
+		" 和 ",
+		"密码。",
+		"您的预约定于 ",
+		"请联系 ",
+		" 客户支持。",
+		"订单状态：",
+		"运单号：",
+		"预计送达日期：",
+		"发票金额：",
+		"账单地址：",
+		"送货地址：",
+		"促销代码：",
+		"已应用折扣：",
+		"总金额：",
+		"支付方式：",
+		"交易ID：",
+		"日期：",
+		"时间：",
+		"地点：",
+		"请检查并确认您的 ",
+		"更改。",
+		"您的设置已 ",
+		"更新。",
+		"发生错误：",
+		"消息：",
+		"详细信息：",
+	],
+	"ja-JP": [
+		"おかえりなさい、",
+		"あなたの残高は ",
+		"あなたには ",
+		" 新しいメッセージがあります。",
+		"ここをクリックして ",
+		"詳細を見る",
+		"あなたの注文番号 ",
+		" は処理中です。",
+		"ご購入ありがとうございます。",
+		"あなたの ",
+		"ユーザー名",
+		" と ",
+		"パスワードを入力してください。",
+		"あなたの予約は ",
+		" に予定されています。",
+		"サポートに連絡してください：",
+		"注文状況：",
+		"配送追跡番号：",
+		"推定配達日：",
+		"請求金額：",
+		"請求先住所：",
+		"配送先住所：",
+		"プロモーションコード：",
+		"適用された割引：",
+		"合計金額：",
+		"支払方法：",
+		"取引ID：",
+		"日付：",
+		"時間：",
+		"場所：",
+		"あなたの ",
+		"変更を確認してください。",
+		"設定が更新されました。",
+		"エラーが発生しました：",
+		"メッセージ：",
+		"詳細：",
+	],
+	"ko-KR": [
+		"다시 오신 것을 환영합니다, ",
+		"계좌 잔액은 ",
+		"새 메시지가 ",
+		"개 있습니다.",
+		"여기를 클릭하여 ",
+		"더 알아보기",
+		"주문 번호 ",
+		"가 처리 중입니다.",
+		"구매해 주셔서 감사합니다.",
+		"를 입력하십시오 ",
+		"사용자 이름",
+		"와 ",
+		"비밀번호.",
+		"예약이 예정되어 있습니다 ",
+		"고객 지원에 문의하십시오: ",
+		"주문 상태: ",
+		"배송 추적 번호: ",
+		"예상 배송일: ",
+		"청구 금액: ",
+		"청구서 주소: ",
+		"배송지 주소: ",
+		"프로모션 코드: ",
+		"적용된 할인: ",
+		"총 금액: ",
+		"결제 방법: ",
+		"거래 ID: ",
+		"날짜: ",
+		"시간: ",
+		"위치: ",
+		"를 검토하고 확인하십시오 ",
+		"변경 사항.",
+		"설정이 ",
+		"업데이트되었습니다.",
+		"오류가 발생했습니다: ",
+		"메시지: ",
+		"세부 정보: ",
+	],
+	"it-IT": [
+		"Bentornato, ",
+		"Il saldo del tuo account è ",
+		"Hai ",
+		" nuovi messaggi.",
+		"Clicca qui per ",
+		"saperne di più",
+		"Il numero del tuo ordine ",
+		" è in fase di elaborazione.",
+		"Grazie per il tuo acquisto.",
+		"Per favore, inserisci il tuo ",
+		"nome utente",
+		" e ",
+		"password.",
+		"Il tuo appuntamento è previsto per ",
+		"Si prega di contattare ",
+		" il supporto clienti.",
+		"Stato dell'ordine: ",
+		"Numero di tracciamento della spedizione: ",
+		"Data di consegna prevista: ",
+		"Importo della fattura: ",
+		"Indirizzo di fatturazione: ",
+		"Indirizzo di spedizione: ",
+		"Codice promozionale: ",
+		"Sconto applicato: ",
+		"Importo totale: ",
+		"Metodo di pagamento: ",
+		"ID transazione: ",
+		"Data: ",
+		"Ora: ",
+		"Luogo: ",
+		"Per favore, controlla e conferma i tuoi ",
+		"cambiamenti.",
+		"Le tue impostazioni sono state ",
+		"aggiornate.",
+		"Si è verificato un errore: ",
+		"Messaggio: ",
+		"Dettagli: ",
+	],
+	"pt-BR": [
+		"Bem-vindo de volta, ",
+		"Seu saldo é ",
+		"Você tem ",
+		" novas mensagens.",
+		"Clique aqui para ",
+		"saber mais",
+		"Seu número de pedido ",
+		" está sendo processado.",
+		"Obrigado pela sua compra.",
+		"Por favor, insira seu ",
+		"nome de usuário",
+		" e ",
+		"senha.",
+		"Seu compromisso está agendado para ",
+		"Por favor, entre em contato com ",
+		" o suporte ao cliente.",
+		"Status do pedido: ",
+		"Número de rastreamento da remessa: ",
+		"Data estimada de entrega: ",
+		"Valor da fatura: ",
+		"Endereço de cobrança: ",
+		"Endereço de entrega: ",
+		"Código promocional: ",
+		"Desconto aplicado: ",
+		"Valor total: ",
+		"Método de pagamento: ",
+		"ID da transação: ",
+		"Data: ",
+		"Hora: ",
+		"Local: ",
+		"Por favor, revise e confirme suas ",
+		"alterações.",
+		"Suas configurações foram ",
+		"atualizadas.",
+		"Ocorreu um erro: ",
+		"Mensagem: ",
+		"Detalhes: ",
+	],
+}
+
+export const inputNames: string[] = [
+	"username",
+	"accountBalance",
+	"messageCount",
+	"orderNumber",
+	"purchaseDate",
+	"appointmentDate",
+	"customerSupportContact",
+	"orderStatus",
+	"trackingNumber",
+	"deliveryDate",
+	"invoiceAmount",
+	"billingAddress",
+	"shippingAddress",
+	"promoCode",
+	"discountAmount",
+	"totalAmount",
+	"paymentMethod",
+	"transactionId",
+	"date",
+	"time",
+	"location",
+	"confirmationDetails",
+	"errorMessage",
+	"errorDetails",
+]
+
+export const simpleInputs = {
+	string: (name: string) => ({
+		inputDeclaration: {
+			type: "input",
+			name: name,
+			value: {
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: name,
+				},
+			},
+		},
+	}),
+}
+
+export const inputsWithSelectors = {
+	number: (name: string) => ({
+		inputDeclaration: {
+			type: "input",
+			name: name,
+			value: {
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: name,
+				},
+			},
+		},
+
+		selector: {
+			type: "expression",
+			arg: {
+				type: "variable",
+				name: name,
+			},
+			annotation: {
+				type: "function",
+				name: "number",
+				options: [],
+			},
+		},
+
+		matcher: ["one", "many", "*"],
+	}),
+	gender: (name: string) => ({
+		inputDeclaration: {
+			type: "input",
+			name: name,
+			value: {
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: name,
+				},
+			},
+		},
+
+		selector: {
+			type: "expression",
+			arg: {
+				type: "variable",
+				name: name,
+			},
+			annotation: {
+				type: "function",
+				name: "gender",
+				options: [],
+			},
+		},
+
+		matcher: ["male", "female", "*"],
+	}),
+}
diff --git a/inlang/source-code/sdk-v2/src/mock/mockhelper.ts b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
new file mode 100644
index 0000000000..e4159d30fd
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
@@ -0,0 +1,223 @@
+import type { Declaration, Expression, LintReport, Pattern } from "../types/schema.js"
+import type { BundleWithMessages, MessageWithVariants } from "../types/sdkTypes.js"
+
+import { inputNames, inputsWithSelectors, simpleInputs, translations } from "./mockdata"
+import { v4 } from "uuid"
+import { randomHumanId } from "../human-id/human-readable-id.js"
+
+export function generateUUID() {
+	return v4()
+}
+
+/**
+ *
+ * @param variants
+ * @returns an array of variants and there vorresponding matachers like [['one', 'one'], ['one', '*'],['*', 'one'], ['*', '*']]
+ */
+function generateCombinations(variants: string[][]): string[][] {
+	const combinations: string[][] = []
+
+	function backtrack(path: string[], index: number) {
+		if (index === variants.length) {
+			combinations.push([...path])
+			return
+		}
+
+		for (const variant of variants[index]!) {
+			path.push(variant)
+			backtrack(path, index + 1)
+			path.pop()
+		}
+	}
+
+	backtrack([], 0)
+	return combinations
+}
+
+/**
+ * generates a message bundle with messages for the given locales and other properties passed as paramters
+ * @param languageTags language tags to generate messages for
+ * @param nInputs number of inputs to add number should be bigger or equal the number of selector for now
+ * @param nSelectors number of selectors to add like plural forms or numbers
+ * @param nExpressions number of expressens to add to the variant patterns (like name placeholders)
+ */
+export function createBundle(args: {
+	languageTags: string[]
+	nInputs: number
+	nSelectors: number
+	nExpressions: number
+}) {
+	const bundleId = randomHumanId()
+	const bundleAlias = {
+		// TODO generate more realistic message bundle name like login_button or welcome_message or learn_more_lix
+		default: "name_" + randomHumanId(),
+	}
+
+	const selectors: any[] = []
+	const inputs: any[] = []
+	const matchers: string[][] = []
+
+	// add selectors with selectors and matchers first
+	for (let i = 0; i < args.nSelectors; i++) {
+		if (i === 0) {
+			selectors.push(inputsWithSelectors.gender("gender").selector)
+			inputs.push(inputsWithSelectors.gender("gender").inputDeclaration)
+			matchers.push(inputsWithSelectors.gender("gender").matcher)
+		} else {
+			const inputName: string = inputNames[i]
+			selectors.push(inputsWithSelectors.number(inputName).selector)
+			inputs.push(inputsWithSelectors.number(inputName).inputDeclaration)
+			matchers.push(inputsWithSelectors.number(inputName).matcher)
+		}
+	}
+
+	// fill up the remaining inputs with simple inputs (no selector function and matchers)
+	for (let i = inputs.length; i < args.nInputs; i++) {
+		const inputName: string = inputNames[i] // TODO generate a selector name
+		if (i === 0) {
+			inputs.push(simpleInputs.string(inputName).inputDeclaration)
+		} else {
+			inputs.push(simpleInputs.string(inputName).inputDeclaration)
+		}
+	}
+
+	const messages = createMessages(
+		bundleId,
+		args.languageTags,
+		inputs,
+		selectors,
+		generateCombinations(matchers),
+		args.nExpressions
+	)
+	return {
+		id: bundleId,
+		alias: bundleAlias,
+		messages: messages,
+	} as BundleWithMessages
+}
+
+function createMessages(
+	bundleId: string,
+	languageTags: string[],
+	inputs: Declaration[],
+	selectors: Expression[],
+	variants: string[][],
+	nExpressions: number
+) {
+	const messagesByLanguage: Record<string, MessageWithVariants> = {}
+
+	for (const lanugageTag of languageTags) {
+		const messageId = generateUUID()
+		messagesByLanguage[lanugageTag] = {
+			id: messageId,
+			bundleId: bundleId,
+			locale: lanugageTag, // cycling through 10 locales
+			declarations: inputs,
+			selectors: selectors,
+			variants: [],
+		}
+	}
+
+	for (const variant of variants) {
+		const patternsByLanguage = createPattern(inputs, languageTags)
+		for (const lanugageTag of languageTags) {
+			messagesByLanguage[lanugageTag].variants.push({
+				id: generateUUID(),
+				match: variant,
+				messageId: messagesByLanguage[lanugageTag].id,
+				pattern: patternsByLanguage[lanugageTag],
+			})
+		}
+	}
+
+	return Object.values(messagesByLanguage)
+}
+
+function createPattern(inputs: Declaration[], languageTags: string[]) {
+	const patterns: {
+		[languageTag: string]: Pattern
+	} = {}
+	for (const lanugageTag of languageTags) {
+		patterns[lanugageTag] = []
+	}
+
+	const textIndex = Math.floor(Math.random() * translations["en-US"].length)
+	for (const lanugageTag of languageTags) {
+		patterns[lanugageTag].push({ type: "text", value: translations[lanugageTag][textIndex] })
+	}
+
+	for (const input of inputs) {
+		const textIndex = Math.floor(Math.random() * translations["en-US"].length)
+		for (const lanugageTag of languageTags) {
+			patterns[lanugageTag].push({ type: "text", value: translations[lanugageTag][textIndex] })
+		}
+
+		for (const lanugageTag of languageTags) {
+			patterns[lanugageTag].push({
+				type: "expression",
+				arg: { type: "variable", name: input.name },
+			})
+		}
+	}
+
+	return patterns
+}
+
+export function mockReports(messageBundle: ReturnType<typeof createBundle>) {
+	const lintReports: LintReport[] = []
+	lintReports.push({
+		ruleId: "uniqueAlias",
+		target: {
+			messageBundleId: messageBundle.id,
+			messageId: undefined,
+			variantId: undefined,
+		},
+		level: "error",
+		body: "This Rule triggers because the alias is not unique",
+		fixes: [
+			{
+				key: "toUpper",
+				title: "Regenerate the alias",
+			},
+		],
+	})
+
+	for (const message of messageBundle.messages) {
+		lintReports.push({
+			ruleId: "outdatedTranslation",
+			target: {
+				messageBundleId: messageBundle.id,
+				messageId: message.id,
+				variantId: undefined,
+			},
+			level: "error",
+			body: "This Messsage is outdated",
+			fixes: [
+				{
+					key: "toUpper",
+					title: "Convert to upper case",
+				},
+			],
+		})
+
+		for (const variant of message.variants) {
+			lintReports.push({
+				ruleId: "opralLowerCase",
+				target: {
+					messageBundleId: messageBundle.id,
+					messageId: message.id,
+					variantId: variant.id,
+				},
+				level: "error",
+				body: "This Rule triggers because the text contains a lowerCase Opral",
+				fixes: [
+					{
+						key: "toUpper",
+						title: "Convert to upper case",
+					},
+				],
+			})
+		}
+	}
+	return lintReports
+}
diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
new file mode 100644
index 0000000000..47ab9d6b02
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
@@ -0,0 +1,71 @@
+import { SQLocal } from "sqlocal"
+import { defaultProjectSettings } from "./defaultProjectSettings.js"
+import type { ProjectSettings2 } from "./types/project-settings.js"
+
+/**
+ * Creates a new inlang project.
+ *
+ * The app is responsible for saving the project "whereever"
+ * e.g. the user's computer, cloud storage, or OPFS in the browser.
+ */
+export async function newProjectOpfs(args: {
+	inlangFolderPath: string
+	projectSettings?: ProjectSettings2
+}) {
+	// Request access to the storage directory
+	const rootDir = await navigator.storage.getDirectory()
+
+	const projectDir = await rootDir.getDirectoryHandle(args.inlangFolderPath, { create: true })
+
+	const settingsFileHandle = await projectDir.getFileHandle("settings.json", { create: true })
+
+	const writableStream = await settingsFileHandle.createWritable()
+
+	// Write the JSON string to the file
+	const settingsText = JSON.stringify(args.projectSettings ?? defaultProjectSettings, undefined, 2)
+	await writableStream.write(settingsText)
+
+	// Close the writable stream
+	await writableStream.close()
+
+	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
+	const { sql, destroy } = new SQLocal(sqliteDbFilePath)
+
+	await sql`
+
+  CREATE TABLE Bundle (
+    id TEXT PRIMARY KEY,
+    alias TEXT NOT NULL
+  );
+
+  CREATE TABLE Message (
+    id TEXT PRIMARY KEY, 
+    bundleId TEXT NOT NULL,
+    locale TEXT NOT NULL,
+    declarations TEXT NOT NULL,
+    selectors TEXT NOT NULL
+  );
+
+  
+  CREATE TABLE Variant (
+    id TEXT PRIMARY KEY, 
+    messageId TEXT NOT NULL,
+    match TEXT NOT NULL,
+    pattern TEXT NOT NULL
+  );
+    
+  CREATE INDEX idx_message_bundleId ON Message (bundleId);
+  CREATE INDEX idx_variant_messageId ON Variant (messageId);
+
+  CREATE TABLE LintReport (
+    ruleId TEXT, 
+    target TEXT NOT NULL,
+    level TEXT NOT NULL,
+    body TEXT NOT NULL,
+    fixes TEXT
+  )
+  
+    `
+
+	await destroy()
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/cache.ts b/inlang/source-code/sdk-v2/src/resolve-modules/cache.ts
new file mode 100644
index 0000000000..162f3d8e55
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/cache.ts
@@ -0,0 +1,106 @@
+import type { NodeishFilesystemSubset } from "@inlang/plugin"
+import { type Result, tryCatch } from "@inlang/result"
+
+function hash(url: string) {
+	const bytes = new TextEncoder().encode(url)
+
+	// 64-bit FNV1a hash to make the file-names shorter
+	// https://en.wikipedia.org/wiki/FNV-1a
+	const hash = bytes.reduce(
+		(hash, byte) => BigInt.asUintN(64, (hash ^ BigInt(byte)) * 1_099_511_628_211n),
+		14_695_981_039_346_656_037n
+	)
+
+	return hash.toString(36)
+}
+
+async function readModuleFromCache(
+	moduleURI: string,
+	projectPath: string,
+	readFile: NodeishFilesystemSubset["readFile"]
+): Promise<Result<string, Error>> {
+	const moduleHash = hash(moduleURI)
+	const filePath = projectPath + `/cache/modules/${moduleHash}`
+
+	return await tryCatch(async () => await readFile(filePath, { encoding: "utf-8" }))
+}
+
+async function writeModuleToCache(
+	moduleURI: string,
+	moduleContent: string,
+	projectPath: string,
+	writeFile: NodeishFilesystemSubset["writeFile"],
+	mkdir: NodeishFilesystemSubset["mkdir"]
+): Promise<void> {
+	const moduleHash = hash(moduleURI)
+	const filePath = projectPath + `/cache/modules/${moduleHash}`
+
+	const writeFileResult = await tryCatch(() => writeFile(filePath, moduleContent))
+	if (writeFileResult.error) {
+		const dirPath = projectPath + `/cache/modules`
+		const createDirResult = await tryCatch(() => mkdir(dirPath, { recursive: true }))
+
+		// @ts-ignore - If the directory exists we can ignore this error
+		if (createDirResult.error && createDirResult.error.code !== "EEXIST")
+			throw new Error("[sdk:module-cacke] failed to create cache-directory. Path: " + dirPath, {
+				cause: createDirResult.error,
+			})
+
+		const writeFileResult = await tryCatch(() => writeFile(filePath, moduleContent))
+		if (writeFileResult.error)
+			throw new Error("[sdk:module-cacke] failed to write cache-file. Path: " + filePath, {
+				cause: writeFileResult.error,
+			})
+	}
+}
+
+/**
+ * Implements a "Network-First" caching strategy.
+ */
+export function withCache(
+	moduleLoader: (uri: string) => Promise<string>,
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile" | "writeFile" | "mkdir">
+): (uri: string) => Promise<string> {
+	return async (uri: string) => {
+		const cachePromise = readModuleFromCache(uri, projectPath, nodeishFs.readFile)
+		const loaderResult = await tryCatch(async () => await moduleLoader(uri))
+
+		if (loaderResult.error) {
+			const cacheResult = await cachePromise
+			if (!cacheResult.error) return cacheResult.data
+			else throw loaderResult.error
+		} else {
+			const moduleAsText = loaderResult.data
+			try {
+				await writeModuleToCache(
+					uri,
+					moduleAsText,
+					projectPath,
+					nodeishFs.writeFile,
+					nodeishFs.mkdir
+				)
+			} catch (error) {
+				// TODO trigger a warning
+			}
+			return moduleAsText
+		}
+	}
+}
+
+/**
+ * Implements a "Cache-First" strategy that does not update the cache.
+ */
+export function withReadOnlyCache(
+	moduleLoader: (uri: string) => Promise<string>,
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile">
+): (uri: string) => Promise<string> {
+	return async (uri: string) => {
+		const cacheResult = await readModuleFromCache(uri, projectPath, nodeishFs.readFile)
+		if (!cacheResult.error) return cacheResult.data
+		const networkResult = await tryCatch(async () => await moduleLoader(uri))
+		if (networkResult.error) throw networkResult.error
+		return networkResult.data
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
new file mode 100644
index 0000000000..c4bf89d2ca
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
@@ -0,0 +1,69 @@
+import type { ValueError } from "@sinclair/typebox/errors"
+export * from "./plugins/errors.js"
+export * from "./message-lint-rules/errors.js"
+
+export class ModuleError extends Error {
+	public readonly module: string
+
+	constructor(message: string, options: { module: string; cause?: Error }) {
+		super(message)
+		this.name = "ModuleError"
+		this.module = options.module
+		this.cause = options.cause
+	}
+}
+
+/**
+ * Error when a Module does not export any plugins or lint rules.
+ */
+export class ModuleHasNoExportsError extends ModuleError {
+	constructor(options: { module: string; cause?: Error }) {
+		super(
+			`Module "${options.module}" has no exports. Every module must have an "export default".`,
+			options
+		)
+		this.name = "ModuleHasNoExportsError"
+	}
+}
+
+/**
+ * Error when a Module cannot be imported.
+ */
+export class ModuleImportError extends ModuleError {
+	constructor(options: { module: string; cause: Error }) {
+		super(`Couldn't import the plugin "${options.module}":\n\n${options.cause}`, options)
+		this.name = "ModuleImportError"
+	}
+}
+
+export class ModuleExportIsInvalidError extends ModuleError {
+	constructor(options: { module: string; errors: ValueError[] }) {
+		super(
+			`The export(s) of "${options.module}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`"${error.path}" "${JSON.stringify(error.value, undefined, 2)}": "${error.message}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "ModuleExportIsInvalidError"
+	}
+}
+
+export class ModuleSettingsAreInvalidError extends ModuleError {
+	constructor(options: { module: string; errors: ValueError[] }) {
+		super(
+			`The settings are invalid of "${options.module}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`Path "${error.path}" with value "${JSON.stringify(error.value, undefined, 2)}": "${
+							error.message
+						}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "ModuleSettingsAreInvalidError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts
new file mode 100644
index 0000000000..58aa0d5963
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { createNodeishMemoryFs } from "@lix-js/fs"
+import { describe, expect, it } from "vitest"
+import { createImport } from "./import.js"
+
+describe("$import", async () => {
+	const fs = createNodeishMemoryFs()
+
+	await fs.mkdir("./project.inlang/cache/modules", { recursive: true })
+
+	await fs.writeFile(
+		"./mock-module.js",
+		`
+		export function hello() {
+			return "hello";
+		}
+		`
+	)
+
+	// mock module in a directory
+	await fs.mkdir("./nested")
+	await fs.writeFile(
+		"./nested/mock-module-two.js",
+		`
+		export function hello() {
+			return "world";
+		}
+		`
+	)
+
+	const _import = createImport("/project.inlang", {
+		writeFile: fs.writeFile,
+		readFile: fs.readFile,
+		mkdir: fs.mkdir,
+	})
+
+	it("should import a module from a local path", async () => {
+		const module = await _import("./mock-module.js")
+		expect(module.hello()).toBe("hello")
+	})
+
+	it("should import a module from a nested local path", async () => {
+		const module = await _import("./nested/mock-module-two.js")
+		expect(module.hello()).toBe("world")
+	})
+
+	it("should import an ES module from a url", async () => {
+		const module = await _import("https://cdn.jsdelivr.net/npm/normalize-url@7.2.0/index.js")
+		const normalizeUrl = module.default
+		expect(normalizeUrl("inlang.com")).toBe("http://inlang.com")
+	})
+
+	it("should throw if a module is loaded that is not an ES module", async () => {
+		try {
+			await _import("https://cdn.jsdelivr.net/npm/lodash@4.17.21")
+			throw "function did not throw"
+		} catch {
+			expect(true).toBe(true)
+		}
+	})
+})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/import.ts b/inlang/source-code/sdk-v2/src/resolve-modules/import.ts
new file mode 100644
index 0000000000..e08180b099
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/import.ts
@@ -0,0 +1,134 @@
+import dedent from "dedent"
+import type { NodeishFilesystemSubset } from "@inlang/plugin"
+import { ModuleImportError } from "./errors.js"
+import { withCache } from "./cache.js"
+import { tryCatch } from "@inlang/result"
+
+/**
+ * Importing ES modules either from a local path, or from a url.
+ *
+ * - Name the import function `_import` to avoid shadowing the
+ *   native import function.
+ */
+export type ImportFunction = (uri: string) => Promise<any>
+
+/**
+ * Creates the import function.
+ *
+ * This function is required to import modules from a local path.
+ *
+ * @example
+ *   const $import = createImport({ readFile: fs.readFile, fetch });
+ *   const module = await _import('./some-module.js');
+ */
+export function createImport(
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile" | "writeFile" | "mkdir">
+) {
+	return (uri: string) => $import(uri, projectPath, nodeishFs)
+}
+
+async function $import(
+	uri: string,
+	projectPath: string,
+	nodeishFs: Pick<NodeishFilesystemSubset, "readFile" | "writeFile" | "mkdir">
+): Promise<any> {
+	const moduleAsText = uri.startsWith("http")
+		? await withCache(readModuleFromCDN, projectPath, nodeishFs)(uri)
+		: await readModulefromDisk(uri, nodeishFs.readFile)
+
+	const moduleWithMimeType = "data:application/javascript," + encodeURIComponent(moduleAsText)
+
+	try {
+		return await import(/* @vite-ignore */ moduleWithMimeType)
+	} catch (error) {
+		if (error instanceof SyntaxError && uri.includes("jsdelivr")) {
+			error.message += dedent`\n\n
+				Are you sure that the file exists on JSDelivr?
+
+				The error indicates that the imported file does not exist on JSDelivr. For non-existent files, JSDelivr returns a 404 text that JS cannot parse as a module and throws a SyntaxError.`
+		}
+		throw new ModuleImportError({ module: uri, cause: error as Error })
+	}
+}
+
+/**
+ * Tries to read the module from disk
+ * @throws {ModuleImportError}
+ */
+async function readModulefromDisk(
+	uri: string,
+	readFile: NodeishFilesystemSubset["readFile"]
+): Promise<string> {
+	try {
+		return await readFile(uri, { encoding: "utf-8" })
+	} catch (error) {
+		throw new ModuleImportError({ module: uri, cause: error as Error })
+	}
+}
+
+/**
+ * Reads a module from a CDN.
+ * Tries to read local cache first.
+ *
+ * @param uri A valid URL
+ * @throws {ModuleImportError}
+ */
+async function readModuleFromCDN(uri: string): Promise<string> {
+	if (!isValidUrl(uri))
+		throw new ModuleImportError({ module: uri, cause: new Error("Malformed URL") })
+
+	const result = await tryCatch(async () => await fetch(uri))
+	if (result.error) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: result.error,
+		})
+	}
+
+	const response = result.data
+	if (!response.ok) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error(
+				`Failed to fetch module. HTTP status: ${response.status}, Message: ${response.statusText}`
+			),
+		})
+	}
+
+	const JS_CONTENT_TYPES = [
+		"application/javascript",
+		"text/javascript",
+		"application/x-javascript",
+		"text/x-javascript",
+		"text/plain", //TODO remove this - only for githubusercontent
+	]
+
+	// if there is no content-type header, assume it's a JavaScript module & hope for the best
+	const contentType = response.headers.get("content-type")?.toLowerCase()
+	if (contentType && !JS_CONTENT_TYPES.some((knownType) => contentType.includes(knownType))) {
+		throw new ModuleImportError({
+			module: uri,
+			cause: new Error(`Server responded with ${contentType} insetad of a JavaScript module`),
+		})
+	}
+
+	return await response.text()
+}
+
+function isValidUrl(url: string) {
+	// This dance is necessary to both support a fallback in case URL.canParse
+	// is not present (like in vitest), and also appease typescript
+	const URLConstructor = URL
+	if ("canParse" in URL) {
+		return URL.canParse(url)
+	}
+
+	try {
+		new URLConstructor(url)
+		return true
+	} catch (e) {
+		console.warn(`Invalid URL: ${url}`)
+		return false
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/index.ts b/inlang/source-code/sdk-v2/src/resolve-modules/index.ts
new file mode 100644
index 0000000000..dffd3278d1
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/index.ts
@@ -0,0 +1,2 @@
+export { resolveModules } from "./resolveModules.js"
+export { type ImportFunction, createImport } from "./import.js"
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
new file mode 100644
index 0000000000..0be277db74
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
@@ -0,0 +1,9 @@
+import type { MessageLintRule } from "@inlang/message-lint-rule"
+import type { ValueError } from "@sinclair/typebox/errors"
+
+export class MessageLintRuleIsInvalidError extends Error {
+	constructor(options: { id: MessageLintRule["id"]; errors: ValueError[] }) {
+		super(`The message lint rule "${options.id}" is invalid:\n\n${options.errors.join("\n")}`)
+		this.name = "MessageLintRuleIsInvalidError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
new file mode 100644
index 0000000000..0a3c691e4c
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
@@ -0,0 +1,27 @@
+import { Value } from "@sinclair/typebox/value"
+import { MessageLintRule } from "@inlang/message-lint-rule"
+import { MessageLintRuleIsInvalidError } from "./errors.js"
+
+export const resolveMessageLintRules = (args: { messageLintRules: Array<MessageLintRule> }) => {
+	const result = {
+		data: [] as Array<MessageLintRule>,
+		errors: [] as MessageLintRuleIsInvalidError[],
+	}
+	for (const rule of args.messageLintRules) {
+		if (Value.Check(MessageLintRule, rule) === false) {
+			const errors = [...Value.Errors(MessageLintRule, rule)]
+			result.errors.push(
+				new MessageLintRuleIsInvalidError({
+					// @ts-ignore
+					id: rule.id,
+					errors,
+				})
+			)
+			continue
+		} else {
+			result.data.push(rule)
+		}
+	}
+
+	return result
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
new file mode 100644
index 0000000000..cdfd21190a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
@@ -0,0 +1,56 @@
+import type { Plugin } from "@inlang/plugin"
+import type { ValueError } from "@sinclair/typebox/errors"
+
+export class PluginHasInvalidIdError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" has an invalid id. The id must:\n1) Start with "plugin."\n2) camelCase\n3) Contain a namespace.\nAn example would be "plugin.namespace.myPlugin".`
+		)
+		this.name = "PluginHasInvalidIdError"
+	}
+}
+
+export class PluginHasInvalidSchemaError extends Error {
+	constructor(options: { id: Plugin["id"]; errors: ValueError[] }) {
+		super(
+			`Plugin "${options.id}" has an invalid schema:\n\n${options.errors
+				.map((error) => `Path "${error.path}" with value "${error.value}": "${error.message}"`)
+				.join("\n")})}\n\nPlease refer to the documentation for the correct schema.`
+		)
+		this.name = "PluginHasInvalidSchemaError"
+	}
+}
+
+export class PluginLoadMessagesFunctionAlreadyDefinedError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" defines the \`loadMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`loadMessages()\` function.`
+		)
+		this.name = "PluginLoadMessagesFunctionAlreadyDefinedError"
+	}
+}
+
+export class PluginSaveMessagesFunctionAlreadyDefinedError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" defines the \`saveMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`saveMessages()\` function.`
+		)
+		this.name = "PluginSaveMessagesFunctionAlreadyDefinedError"
+	}
+}
+
+export class PluginReturnedInvalidCustomApiError extends Error {
+	constructor(options: { id: Plugin["id"]; cause: ErrorOptions["cause"] }) {
+		super(`Plugin "${options.id}" returned an invalid custom API:\n\n${options.cause}`, options)
+		this.name = "PluginReturnedInvalidCustomApiError"
+	}
+}
+
+export class PluginsDoNotProvideLoadOrSaveMessagesError extends Error {
+	constructor() {
+		super(
+			`No plugin provides a \`loadMessages()\` or \`saveMessages()\` function\n\nIn case no plugin threw an error, you likely forgot to add a plugin that handles the loading and saving of messages. Refer to the marketplace for available plugins https://inlang.com/marketplace.`
+		)
+		this.name = "PluginsDoNotProvideLoadOrSaveMessagesError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
new file mode 100644
index 0000000000..558af97618
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
@@ -0,0 +1,301 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { describe, expect, it } from "vitest"
+import { resolvePlugins } from "./resolvePlugins.js"
+import {
+	PluginLoadMessagesFunctionAlreadyDefinedError,
+	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginHasInvalidIdError,
+	PluginReturnedInvalidCustomApiError,
+	PluginsDoNotProvideLoadOrSaveMessagesError,
+} from "./errors.js"
+import type { Plugin } from "@inlang/plugin"
+import type { ProjectSettings } from "@inlang/project-settings"
+
+it("should return an error if a plugin uses an invalid id", async () => {
+	const mockPlugin: Plugin = {
+		// @ts-expect-error - invalid id
+		id: "no-namespace",
+		description: { en: "My plugin description" },
+		displayName: { en: "My plugin" },
+		loadMessages: () => undefined as any,
+		saveMessages: () => undefined as any,
+	}
+
+	const resolved = await resolvePlugins({
+		plugins: [mockPlugin],
+		settings: {} as any as any,
+		nodeishFs: {} as any,
+	})
+
+	expect(resolved.errors[0]).toBeInstanceOf(PluginHasInvalidIdError)
+})
+
+it("should expose the project settings including the plugin settings", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["en", "de"],
+		modules: [],
+		"plugin.namespace.placeholder": {
+			myPluginSetting: "value",
+		},
+	}
+	const mockPlugin: Plugin = {
+		id: "plugin.namespace.placeholder",
+		description: { en: "My plugin description" },
+		displayName: { en: "My plugin" },
+		saveMessages: async ({ settings }) => {
+			expect(settings).toStrictEqual(settings)
+		},
+		addCustomApi: ({ settings }) => {
+			expect(settings).toStrictEqual(settings)
+			return {}
+		},
+		loadMessages: async ({ settings }) => {
+			expect(settings).toStrictEqual(settings)
+			return []
+		},
+	}
+	const resolved = await resolvePlugins({
+		plugins: [mockPlugin],
+		settings: settings,
+		nodeishFs: {} as any,
+	})
+	await resolved.data.loadMessages!({ settings, nodeishFs: {} as any })
+	await resolved.data.saveMessages!({ settings, messages: [], nodeishFs: {} as any })
+})
+
+describe("loadMessages", () => {
+	it("should load messages from a local source", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			loadMessages: async () => [
+				{ id: "test", alias: {}, expressions: [], selectors: [], variants: [] },
+			],
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(
+			await resolved.data.loadMessages!({
+				settings: {} as any,
+				nodeishFs: {} as any,
+			})
+		).toEqual([{ id: "test", alias: {}, expressions: [], selectors: [], variants: [] }])
+	})
+
+	it("should collect an error if function is defined twice in multiple plugins", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namepsace.loadMessagesFirst",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+
+			loadMessages: async () => undefined as any,
+		}
+		const mockPlugin2: Plugin = {
+			id: "plugin.namepsace.loadMessagesSecond",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+
+			loadMessages: async () => undefined as any,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin, mockPlugin2],
+			nodeishFs: {} as any,
+			settings: {} as any,
+		})
+
+		expect(resolved.errors[0]).toBeInstanceOf(PluginLoadMessagesFunctionAlreadyDefinedError)
+	})
+
+	it("should return an error if no plugin defines loadMessages", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namepsace.loadMessagesFirst",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+
+			saveMessages: async () => undefined as any,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			nodeishFs: {} as any,
+			settings: {} as any,
+		})
+
+		expect(resolved.errors).toHaveLength(1)
+		expect(resolved.errors[0]).toBeInstanceOf(PluginsDoNotProvideLoadOrSaveMessagesError)
+	})
+})
+
+describe("saveMessages", () => {
+	it("should save messages to a local source", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			loadMessages: async () => undefined as any,
+			saveMessages: async () => undefined as any,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			nodeishFs: {} as any,
+			settings: {} as any,
+		})
+
+		expect(resolved.errors).toHaveLength(0)
+	})
+
+	it("should collect an error if function is defined twice in multiple plugins", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namepsace.saveMessages",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			saveMessages: async () => undefined as any,
+		}
+		const mockPlugin2: Plugin = {
+			id: "plugin.namepsace.saveMessages2",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			saveMessages: async () => undefined as any,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin, mockPlugin2],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(resolved.errors[0]).toBeInstanceOf(PluginSaveMessagesFunctionAlreadyDefinedError)
+	})
+
+	it("should return an error if no plugin defines saveMessages", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namepsace.loadMessagesFirst",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+
+			loadMessages: async () => undefined as any,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			nodeishFs: {} as any,
+			settings: {} as any,
+		})
+		expect(resolved.errors).toHaveLength(1)
+		expect(resolved.errors[0]).toBeInstanceOf(PluginsDoNotProvideLoadOrSaveMessagesError)
+	})
+})
+
+describe("addCustomApi", () => {
+	it("it should resolve app specific api", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			addCustomApi: () => ({
+				"my-app": {
+					messageReferenceMatcher: () => undefined as any,
+				},
+			}),
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(resolved.data.customApi).toHaveProperty("my-app")
+	})
+
+	it("it should resolve multiple app specific apis", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			addCustomApi: () => ({
+				"my-app-1": {
+					functionOfMyApp1: () => undefined as any,
+				},
+				"my-app-2": {
+					functionOfMyApp2: () => undefined as any,
+				},
+			}),
+		}
+		const mockPlugin2: Plugin = {
+			id: "plugin.namespace.placeholder2",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			addCustomApi: () => ({
+				"my-app-3": {
+					functionOfMyApp3: () => undefined as any,
+				},
+			}),
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin, mockPlugin2],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(resolved.data.customApi).toHaveProperty("my-app-1")
+		expect(resolved.data.customApi).toHaveProperty("my-app-2")
+		expect(resolved.data.customApi).toHaveProperty("my-app-3")
+	})
+
+	it("it should throw an error if return value is not an object", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			// @ts-expect-error - invalid return type
+			addCustomApi: () => undefined,
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(resolved.errors[0]).toBeInstanceOf(PluginReturnedInvalidCustomApiError)
+	})
+
+	it("it should throw an error if the passed options are not defined inside customApi", async () => {
+		const mockPlugin: Plugin = {
+			id: "plugin.namepsace.placeholder",
+			description: { en: "My plugin description" },
+			displayName: { en: "My plugin" },
+			addCustomApi: () => ({
+				"app.inlang.placeholder": {
+					messageReferenceMatcher: () => {
+						return { hello: "world" }
+					},
+				},
+			}),
+		}
+
+		const resolved = await resolvePlugins({
+			plugins: [mockPlugin],
+			settings: {} as any,
+			nodeishFs: {} as any,
+		})
+
+		expect(resolved.data.customApi).toHaveProperty("app.inlang.placeholder")
+		expect(
+			(resolved.data.customApi?.["app.inlang.placeholder"] as any).messageReferenceMatcher()
+		).toEqual({
+			hello: "world",
+		})
+	})
+})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
new file mode 100644
index 0000000000..3de9c55760
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
@@ -0,0 +1,129 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { ResolvePluginsFunction } from "./types.js"
+import { Plugin } from "@inlang/plugin"
+import {
+	PluginReturnedInvalidCustomApiError,
+	PluginLoadMessagesFunctionAlreadyDefinedError,
+	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginsDoNotProvideLoadOrSaveMessagesError,
+	PluginHasInvalidIdError,
+	PluginHasInvalidSchemaError,
+} from "./errors.js"
+import { deepmerge } from "deepmerge-ts"
+import { TypeCompiler } from "@sinclair/typebox/compiler"
+import { tryCatch } from "@inlang/result"
+
+import _debug from "debug"
+const debug = _debug("sdk:resolvePlugins")
+
+// @ts-ignore - type mismatch error
+const PluginCompiler = TypeCompiler.Compile(Plugin)
+
+export const resolvePlugins: ResolvePluginsFunction = async (args) => {
+	const result: Awaited<ReturnType<ResolvePluginsFunction>> = {
+		data: {
+			loadMessages: undefined as any,
+			saveMessages: undefined as any,
+			customApi: {},
+		},
+		errors: [],
+	}
+
+	const experimentalPersistence = !!args.settings.experimental?.persistence
+	if (experimentalPersistence) {
+		debug("Using experimental persistence")
+	}
+
+	for (const plugin of args.plugins) {
+		const errors = [...PluginCompiler.Errors(plugin)]
+
+		/**
+		 * -------------- RESOLVE PLUGIN --------------
+		 */
+
+		// -- INVALID ID in META --
+		const hasInvalidId = errors.some((error) => error.path === "/id")
+		if (hasInvalidId) {
+			result.errors.push(new PluginHasInvalidIdError({ id: plugin.id }))
+		}
+
+		// -- USES INVALID SCHEMA --
+		if (errors.length > 0) {
+			result.errors.push(
+				new PluginHasInvalidSchemaError({
+					id: plugin.id,
+					errors: errors,
+				})
+			)
+		}
+
+		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
+		if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
+			result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
+
+		if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
+			result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
+
+		// --- ADD APP SPECIFIC API ---
+		if (typeof plugin.addCustomApi === "function") {
+			// TODO: why do we call this function 2 times (here for validation and later for retrieving the actual value)?
+			const { data: customApi, error } = tryCatch(() =>
+				plugin.addCustomApi!({
+					settings: args.settings,
+				})
+			)
+			if (error) {
+				result.errors.push(new PluginReturnedInvalidCustomApiError({ id: plugin.id, cause: error }))
+			} else if (typeof customApi !== "object") {
+				result.errors.push(
+					new PluginReturnedInvalidCustomApiError({
+						id: plugin.id,
+						cause: new Error(`The return value must be an object. Received "${typeof customApi}".`),
+					})
+				)
+			}
+		}
+
+		// -- CONTINUE IF ERRORS --
+		if (result.errors.length > 0) {
+			continue
+		}
+
+		/**
+		 * -------------- BEGIN ADDING TO RESULT --------------
+		 */
+
+		if (typeof plugin.loadMessages === "function") {
+			result.data.loadMessages = plugin.loadMessages
+		}
+
+		if (typeof plugin.saveMessages === "function") {
+			result.data.saveMessages = plugin.saveMessages
+		}
+
+		if (typeof plugin.addCustomApi === "function") {
+			const { data: customApi } = tryCatch(() =>
+				plugin.addCustomApi!({
+					settings: args.settings,
+				})
+			)
+			if (customApi) {
+				result.data.customApi = deepmerge(result.data.customApi, customApi)
+			}
+		}
+	}
+
+	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
+
+	if (
+		!experimentalPersistence &&
+		(typeof result.data.loadMessages !== "function" ||
+			typeof result.data.saveMessages !== "function")
+	) {
+		result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
+	}
+
+	return result
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
new file mode 100644
index 0000000000..066426cc1a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
@@ -0,0 +1,53 @@
+import { ProjectSettings } from "@inlang/project-settings"
+import { Value } from "@sinclair/typebox/value"
+import { describe, test, expect } from "vitest"
+import { expectType } from "tsd"
+import { Plugin } from "@inlang/plugin"
+
+describe("Plugin", () => {
+	test("meta.id should enforce plugin.namespace.* patterns", () => {
+		expectType<`plugin.${string}.${string}`>("" as Plugin["id"])
+
+		const mockPlugin: Plugin = {
+			id: "plugin.namespace.placeholder",
+			displayName: { en: "" },
+			description: { en: "" },
+		}
+
+		const passCases = ["plugin.namespace.helloWorld", "plugin.namespace.i18n"]
+		const failCases = [
+			"namespace.hello_World",
+			"plugin.namespace-HelloWorld",
+			"lintRule.namespace.coolPlugin",
+		]
+
+		for (const pass of passCases) {
+			mockPlugin.id = pass as any
+
+			// @ts-ignore - type mismatch error. fix after refactor
+			expect(Value.Check(Plugin, mockPlugin)).toBe(true)
+		}
+
+		for (const fail of failCases) {
+			mockPlugin.id = fail as any
+			// @ts-ignore - type mismatch error. fix after refactor
+			expect(Value.Check(Plugin, mockPlugin)).toBe(false)
+		}
+	})
+
+	test("meta.id should be a valid inlang.config.setting key", () => {
+		const settings: ProjectSettings = {
+			sourceLanguageTag: "en",
+			languageTags: ["en", "de"],
+			modules: [],
+		}
+		const cases = ["plugin.namespace.helloWorld", "plugin.namespace.i18n"]
+
+		for (const _case of cases) {
+			const mergedSettings = { ...settings, [_case]: {} }
+			expect(Value.Check(ProjectSettings, mergedSettings)).toBe(true)
+			// @ts-ignore - type mismatch error. fix after refactor
+			expect(Value.Check(Plugin["properties"]["id"], _case)).toBe(true)
+		}
+	})
+})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
new file mode 100644
index 0000000000..a13820e105
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
@@ -0,0 +1,76 @@
+import type { NodeishFilesystem } from "@lix-js/fs"
+import type {
+	PluginReturnedInvalidCustomApiError,
+	PluginLoadMessagesFunctionAlreadyDefinedError,
+	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginHasInvalidIdError,
+	PluginHasInvalidSchemaError,
+	PluginsDoNotProvideLoadOrSaveMessagesError,
+} from "./errors.js"
+import type { Message } from "@inlang/message"
+import type { CustomApiInlangIdeExtension, Plugin } from "@inlang/plugin"
+import type { ProjectSettings } from "@inlang/project-settings"
+
+/**
+ * The filesystem is a subset of project lisa's nodeish filesystem.
+ *
+ * - only uses minimally required functions to decrease the API footprint on the ecosystem.
+ */
+export type NodeishFilesystemSubset = Pick<
+	NodeishFilesystem,
+	"readFile" | "readdir" | "mkdir" | "writeFile" | "watch"
+>
+
+/**
+ * Function that resolves (imports and initializes) the plugins.
+ */
+export type ResolvePluginsFunction = (args: {
+	plugins: Array<Plugin>
+	settings: ProjectSettings
+	nodeishFs: NodeishFilesystemSubset
+}) => Promise<{
+	data: ResolvedPluginApi
+	errors: Array<
+		| PluginReturnedInvalidCustomApiError
+		| PluginLoadMessagesFunctionAlreadyDefinedError
+		| PluginSaveMessagesFunctionAlreadyDefinedError
+		| PluginHasInvalidIdError
+		| PluginHasInvalidSchemaError
+		| PluginsDoNotProvideLoadOrSaveMessagesError
+	>
+}>
+
+/**
+ * The API after resolving the plugins.
+ */
+export type ResolvedPluginApi = {
+	loadMessages: (args: {
+		settings: ProjectSettings
+		nodeishFs: NodeishFilesystemSubset
+	}) => Promise<Message[]> | Message[]
+	saveMessages: (args: {
+		settings: ProjectSettings
+		messages: Message[]
+		nodeishFs: NodeishFilesystemSubset
+	}) => Promise<void> | void
+	/**
+	 * App specific APIs.
+	 *
+	 * @example
+	 *  // define
+	 *  customApi: ({ settings }) => ({
+	 * 	 "app.inlang.ide-extension": {
+	 * 	   messageReferenceMatcher: () => {
+	 * 		 // use settings
+	 * 		 settings.pathPattern
+	 * 		return
+	 * 	   }
+	 * 	 }
+	 *  })
+	 *  // use
+	 *  customApi['app.inlang.ide-extension'].messageReferenceMatcher()
+	 */
+	customApi: Record<`app.${string}.${string}` | `library.${string}.${string}`, unknown> & {
+		"app.inlang.ideExtension"?: CustomApiInlangIdeExtension
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
new file mode 100644
index 0000000000..0808d3e4f3
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { MessageLintRule } from "@inlang/message-lint-rule"
+import type { Plugin } from "@inlang/plugin"
+import { expect, it } from "vitest"
+import {
+	ModuleError,
+	ModuleExportIsInvalidError,
+	ModuleHasNoExportsError,
+	ModuleImportError,
+	ModuleSettingsAreInvalidError,
+} from "./errors.js"
+import { resolveModules } from "./resolveModules.js"
+import type { ProjectSettings } from "@inlang/project-settings"
+import type { InlangModule } from "@inlang/module"
+import { Type } from "@sinclair/typebox"
+
+it("should return an error if a plugin cannot be imported", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		nodeishFs: {} as any,
+		_import: () => {
+			throw new ModuleImportError({
+				module: settings.modules[0]!,
+				cause: new Error("Could not import"),
+			})
+		},
+	})
+
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
+})
+
+it("should resolve plugins and message lint rules successfully", async () => {
+	// Define mock data
+	const mockPlugin: Plugin = {
+		id: "plugin.namespace.mock",
+		description: { en: "Mock plugin description" },
+		displayName: { en: "Mock Plugin" },
+
+		loadMessages: () => undefined as any,
+		saveMessages: () => undefined as any,
+		addCustomApi: () => ({
+			"app.inlang.ideExtension": {
+				messageReferenceMatcher: () => undefined as any,
+			},
+		}),
+	}
+
+	const mockMessageLintRule: MessageLintRule = {
+		id: "messageLintRule.namespace.mock",
+		description: { en: "Mock lint rule description" },
+		displayName: { en: "Mock Lint Rule" },
+
+		run: () => undefined,
+	}
+
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["lint-rule.js", "plugin.js"],
+	}
+
+	const _import = async (name: string) => {
+		if (name === "lint-rule.js") {
+			return {
+				default: mockMessageLintRule,
+			}
+		} else {
+			return {
+				default: mockPlugin,
+			}
+		}
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors).toHaveLength(0)
+	// Check for the meta data of the plugin
+	expect(resolved.plugins.some((module) => module.id === mockPlugin.id)).toBeDefined()
+	// Check for the app specific api
+	expect(resolved.resolvedPluginApi["customApi"]?.["app.inlang.ideExtension"]).toBeDefined()
+	// Check for the lint rule
+	expect(resolved.messageLintRules[0]?.id).toBe(mockMessageLintRule.id)
+})
+
+it("should return an error if a module cannot be imported", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => {
+		throw new ModuleImportError({
+			module: settings.modules[0]!,
+			cause: new Error(),
+		})
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
+})
+
+it("should return an error if a module does not export anything", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => ({})
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleHasNoExportsError)
+})
+
+it("should return an error if a module exports an invalid plugin or lint rule", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+	const _import = async () =>
+		({
+			// @ts-expect-error - invalid meta of a plugin
+			default: {
+				id: "plugin.namespace.mock",
+				description: { en: "Mock plugin description" },
+			},
+		} satisfies InlangModule)
+
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleExportIsInvalidError)
+})
+
+it("should handle other unhandled errors during plugin resolution", async () => {
+	const errorMessage = "Unhandled error during plugin resolution"
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => {
+		throw new Error(errorMessage)
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleError)
+})
+it("should return an error if a moduleSettings are invalid", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["plugin.js"],
+		"plugin.namespace.mock": {
+			ignore: ["invalid"],
+		},
+	}
+
+	const _import = async () => ({
+		default: {
+			id: "plugin.namespace.mock",
+			description: { en: "Mock plugin description" },
+			displayName: { en: "Mock Plugin" },
+			settingsSchema: Type.Object({
+				ignore: Type.String(),
+			}),
+		},
+	})
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleSettingsAreInvalidError)
+})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
new file mode 100644
index 0000000000..537f9b8967
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
@@ -0,0 +1,113 @@
+import type { ResolveModuleFunction } from "./types.js"
+import { InlangModule } from "@inlang/module"
+import {
+	ModuleError,
+	ModuleImportError,
+	ModuleHasNoExportsError,
+	ModuleExportIsInvalidError,
+	ModuleSettingsAreInvalidError,
+} from "./errors.js"
+import { tryCatch } from "@inlang/result"
+import { resolveMessageLintRules } from "./message-lint-rules/resolveMessageLintRules.js"
+import { createImport } from "./import.js"
+import { resolvePlugins } from "./plugins/resolvePlugins.js"
+import { TypeCompiler } from "@sinclair/typebox/compiler"
+import { validatedModuleSettings } from "./validatedModuleSettings.js"
+import type { Plugin } from "@inlang/plugin"
+import type { MessageBundleLintRule } from "../types/lint.js"
+
+const ModuleCompiler = TypeCompiler.Compile(InlangModule)
+
+export const resolveModules: ResolveModuleFunction = async (args) => {
+	const _import = args._import ?? createImport(args.projectPath, args.nodeishFs)
+
+	const allPlugins: Array<Plugin> = []
+	const allMessageLintRules: Array<MessageLintRule> = []
+	const meta: Awaited<ReturnType<ResolveModuleFunction>>["meta"] = []
+	const moduleErrors: Array<ModuleError> = []
+
+	async function resolveModule(module: string) {
+		const importedModule = await tryCatch<InlangModule>(() => _import(module))
+
+		// -- FAILED TO IMPORT --
+		if (importedModule.error) {
+			moduleErrors.push(
+				new ModuleImportError({
+					module: module,
+					cause: importedModule.error as Error,
+				})
+			)
+			return
+		}
+
+		// -- MODULE DOES NOT EXPORT ANYTHING --
+		if (importedModule.data?.default === undefined) {
+			moduleErrors.push(
+				new ModuleHasNoExportsError({
+					module: module,
+				})
+			)
+			return
+		}
+
+		// -- CHECK IF MODULE IS SYNTACTIALLY VALID
+		const isValidModule = ModuleCompiler.Check(importedModule.data)
+		if (isValidModule === false) {
+			const errors = [...ModuleCompiler.Errors(importedModule.data)]
+			moduleErrors.push(
+				new ModuleExportIsInvalidError({
+					module: module,
+					errors,
+				})
+			)
+
+			return
+		}
+
+		// -- VALIDATE MODULE SETTINGS
+
+		const result = validatedModuleSettings({
+			settingsSchema: importedModule.data.default.settingsSchema,
+			moduleSettings: args.settings[importedModule.data.default.id],
+		})
+		if (result !== "isValid") {
+			moduleErrors.push(new ModuleSettingsAreInvalidError({ module: module, errors: result }))
+			return
+		}
+
+		meta.push({
+			module: module,
+			id: importedModule.data.default.id,
+		})
+
+		if (importedModule.data.default.id.startsWith("plugin.")) {
+			allPlugins.push(importedModule.data.default as Plugin)
+		} else if (importedModule.data.default.id.startsWith("messageLintRule.")) {
+			allMessageLintRules.push(importedModule.data.default as MessageLintRule)
+		} else {
+			moduleErrors.push(
+				new ModuleError(
+					`Unimplemented module type ${importedModule.data.default.id}.The module has not been installed.`,
+					{ module: module }
+				)
+			)
+		}
+	}
+
+	await Promise.all(args.settings.modules.map(resolveModule))
+	const resolvedPlugins = await resolvePlugins({
+		plugins: allPlugins,
+		settings: args.settings,
+		nodeishFs: args.nodeishFs,
+	})
+
+	const resolvedLintRules = resolveMessageLintRules({ messageLintRules: allMessageLintRules })
+
+	return {
+		meta,
+		messageLintRules: allMessageLintRules,
+		plugins: allPlugins,
+		resolvedPluginApi: resolvedPlugins.data,
+		errors: [...moduleErrors, ...resolvedLintRules.errors, ...resolvedPlugins.errors],
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/types.ts b/inlang/source-code/sdk-v2/src/resolve-modules/types.ts
new file mode 100644
index 0000000000..7e1d75c01b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/types.ts
@@ -0,0 +1,72 @@
+import type { MessageLintRule } from "@inlang/message-lint-rule"
+import type { Plugin } from "@inlang/plugin"
+import type {
+	NodeishFilesystemSubset,
+	ResolvePluginsFunction,
+	ResolvedPluginApi,
+} from "./plugins/types.js"
+import type { ModuleHasNoExportsError, ModuleImportError } from "./errors.js"
+import type { ImportFunction } from "./import.js"
+import type { resolveMessageLintRules } from "./message-lint-rules/resolveMessageLintRules.js"
+import type { ProjectSettings } from "@inlang/project-settings"
+
+/**
+ * Function that resolves modules from the config.
+ *
+ * Pass a custom `_import` function to override the default import function.
+ */
+export type ResolveModuleFunction = (args: {
+	projectPath: string
+	settings: ProjectSettings
+	nodeishFs: NodeishFilesystemSubset
+	_import?: ImportFunction
+}) => Promise<{
+	/**
+	 * Metadata about the resolved module.
+	 *
+	 * @example
+	 * [{
+	 * 	  id: "plugin.inlang.json",
+	 * 	  module: "https://myplugin.com/index.js"
+	 * }]
+	 */
+	meta: Array<{
+		/**
+		 * The module link.
+		 *
+		 * @example "https://myplugin.com/index.js"
+		 */
+		module: string
+		/**
+		 * The resolved item id of the module.
+		 */
+		id: Plugin["id"] | MessageLintRule["id"]
+	}>
+	/**
+	 * The resolved plugins.
+	 */
+	plugins: Array<Plugin>
+	/**
+	 * The resolved message lint rules.
+	 */
+	messageLintRules: Array<MessageLintRule>
+	/**
+	 * The resolved api provided by plugins.
+	 */
+	resolvedPluginApi: ResolvedPluginApi
+	/**
+	 * Errors during the resolution process.
+	 *
+	 * This includes errors from:
+	 * - importing module
+	 * - resolving plugins
+	 * - resolving lint rules
+	 * - resolving the runtime plugin api
+	 */
+	errors: Array<
+		| ModuleHasNoExportsError
+		| ModuleImportError
+		| Awaited<ReturnType<ResolvePluginsFunction>>["errors"][number]
+		| Awaited<ReturnType<typeof resolveMessageLintRules>>["errors"][number]
+	>
+}>
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
new file mode 100644
index 0000000000..dd3db1eaed
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { expect, test } from "vitest"
+import { Plugin, MessageLintRule } from "../index.js"
+// import { createNodeishMemoryFs } from "@lix-js/fs"
+import { Type } from "@sinclair/typebox"
+import { validatedModuleSettings } from "./validatedModuleSettings.js"
+
+const mockPluginSchema: Plugin["settingsSchema"] = Type.Object({
+	pathPattern: Type.Union([
+		Type.String({
+			pattern: "^(\\./|\\../|/)[^*]*\\{languageTag\\}[^*]*\\.json",
+			description: "The pathPattern must contain `{languageTag}` and end with `.json`.",
+		}),
+		Type.Record(
+			Type.String({
+				pattern: "^[^.]+$",
+				description: "Dots are not allowd ",
+				examples: ["website", "app", "homepage"],
+			}),
+			Type.String({
+				pattern: "^(\\./|\\../|/)[^*]*\\{languageTag\\}[^*]*\\.json",
+				description: "The pathPattern must contain `{languageTag}` and end with `.json`.",
+			})
+		),
+	]),
+	variableReferencePattern: Type.Array(Type.String()),
+})
+
+const mockMessageLintRuleSchema: MessageLintRule["settingsSchema"] = Type.Object({
+	ignore: Type.Array(
+		Type.String({
+			pattern: '([^"]*)',
+			description: "All items in the array need quotaion marks at the end and beginning",
+		})
+	),
+})
+
+test("if PluginSchema does match with the moduleSettings", async () => {
+	const isValid = await validatedModuleSettings({
+		settingsSchema: mockPluginSchema,
+		moduleSettings: {
+			pathPattern: "./examples/example01/{languageTag}.json",
+			variableReferencePattern: ["{", "}"],
+		},
+	})
+
+	expect(isValid).toBe("isValid")
+})
+
+test("if namespace settings are valide", async () => {
+	const isValid = validatedModuleSettings({
+		settingsSchema: mockPluginSchema,
+		moduleSettings: {
+			pathPattern: {
+				website: "./{languageTag}examplerFolder/ExampleFile.json",
+				app: "../{languageTag}examplerFolder/ExampleFile.json",
+				footer: "./{languageTag}examplerFolder/ExampleFile.json",
+			},
+			variableReferencePattern: ["{", "}"],
+		},
+	})
+	expect(isValid).toBe("isValid")
+})
+
+test(" if MessageLintRuleSchema  match with the settings", async () => {
+	const isValid = await validatedModuleSettings({
+		settingsSchema: mockMessageLintRuleSchema,
+		moduleSettings: {
+			ignore: ["example", "warning"],
+		},
+	})
+
+	expect(isValid).toBe("isValid")
+})
+
+test("if  messageLintRule settings are not matching to the settingsSchema would pass ", async () => {
+	const isValid = validatedModuleSettings({
+		settingsSchema: mockMessageLintRuleSchema,
+		moduleSettings: {
+			ignore: "example",
+		},
+	})
+
+	expect(isValid).not.toBe("isValid")
+})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts b/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
new file mode 100644
index 0000000000..2ebb79fb02
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
@@ -0,0 +1,19 @@
+import type { InlangModule } from "@inlang/module"
+import type { TSchema } from "@sinclair/typebox"
+import { Value, type ValueError } from "@sinclair/typebox/value"
+
+export const validatedModuleSettings = (args: {
+	settingsSchema: InlangModule["default"]["settingsSchema"]
+	moduleSettings: unknown
+}): "isValid" | ValueError[] => {
+	if (args.settingsSchema && args.moduleSettings) {
+		const hasValidSettings = Value.Check(args.settingsSchema as TSchema, args.moduleSettings)
+
+		if (hasValidSettings === false) {
+			const errors = [...Value.Errors(args.settingsSchema as TSchema, args.moduleSettings)]
+
+			return errors
+		}
+	}
+	return "isValid"
+}
diff --git a/inlang/source-code/sdk-v2/src/resolveMessageBundleLintRules.ts b/inlang/source-code/sdk-v2/src/resolveMessageBundleLintRules.ts
new file mode 100644
index 0000000000..03e3dccf28
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolveMessageBundleLintRules.ts
@@ -0,0 +1,29 @@
+import { Value } from "@sinclair/typebox/value"
+import { MessageBundleLintRule } from "./types/lint.js"
+import { MessageBundleLintRuleIsInvalidError } from "./types/lint-errors.js"
+
+export const resolveMessageBundleLintRules = (args: {
+	messageLintRules: Array<MessageBundleLintRule>
+}) => {
+	const result = {
+		data: [] as Array<MessageBundleLintRule>,
+		errors: [] as MessageBundleLintRuleIsInvalidError[],
+	}
+	for (const rule of args.messageLintRules) {
+		if (Value.Check(MessageBundleLintRule, rule) === false) {
+			const errors = [...Value.Errors(MessageBundleLintRule, rule)]
+			result.errors.push(
+				new MessageBundleLintRuleIsInvalidError({
+					// @ts-ignore
+					id: rule.id,
+					errors,
+				})
+			)
+			continue
+		} else {
+			result.data.push(rule)
+		}
+	}
+
+	return result
+}
diff --git a/inlang/source-code/sdk-v2/src/resolveModules2.test.ts b/inlang/source-code/sdk-v2/src/resolveModules2.test.ts
new file mode 100644
index 0000000000..c5e9f96bcd
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolveModules2.test.ts
@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { MessageLintRule } from "@inlang/message-lint-rule"
+import type { Plugin } from "@inlang/plugin"
+import { expect, it } from "vitest"
+import {
+	ModuleError,
+	ModuleExportIsInvalidError,
+	ModuleHasNoExportsError,
+	ModuleImportError,
+	ModuleSettingsAreInvalidError,
+} from "../resolve-modules/errors.js"
+import { resolveModules } from "../resolve-modules/resolveModules.js"
+import type { ProjectSettings } from "@inlang/project-settings"
+import type { InlangModule } from "@inlang/module"
+import { Type } from "@sinclair/typebox"
+
+it("should return an error if a plugin cannot be imported", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		nodeishFs: {} as any,
+		_import: () => {
+			throw new ModuleImportError({
+				module: settings.modules[0]!,
+				cause: new Error("Could not import"),
+			})
+		},
+	})
+
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
+})
+
+it("should resolve plugins and message lint rules successfully", async () => {
+	// Define mock data
+	const mockPlugin: Plugin = {
+		id: "plugin.namespace.mock",
+		description: { en: "Mock plugin description" },
+		displayName: { en: "Mock Plugin" },
+
+		loadMessages: () => undefined as any,
+		saveMessages: () => undefined as any,
+		addCustomApi: () => ({
+			"app.inlang.ideExtension": {
+				messageReferenceMatcher: () => undefined as any,
+			},
+		}),
+	}
+
+	const mockMessageLintRule: MessageLintRule = {
+		id: "messageLintRule.namespace.mock",
+		description: { en: "Mock lint rule description" },
+		displayName: { en: "Mock Lint Rule" },
+
+		run: () => undefined,
+	}
+
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["lint-rule.js", "plugin.js"],
+	}
+
+	const _import = async (name: string) => {
+		if (name === "lint-rule.js") {
+			return {
+				default: mockMessageLintRule,
+			}
+		} else {
+			return {
+				default: mockPlugin,
+			}
+		}
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors).toHaveLength(0)
+	// Check for the meta data of the plugin
+	expect(resolved.plugins.some((module) => module.id === mockPlugin.id)).toBeDefined()
+	// Check for the app specific api
+	expect(resolved.resolvedPluginApi["customApi"]?.["app.inlang.ideExtension"]).toBeDefined()
+	// Check for the lint rule
+	expect(resolved.messageLintRules[0]?.id).toBe(mockMessageLintRule.id)
+})
+
+it("should return an error if a module cannot be imported", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => {
+		throw new ModuleImportError({
+			module: settings.modules[0]!,
+			cause: new Error(),
+		})
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
+})
+
+it("should return an error if a module does not export anything", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => ({})
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleHasNoExportsError)
+})
+
+it("should return an error if a module exports an invalid plugin or lint rule", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+	const _import = async () =>
+		({
+			// @ts-expect-error - invalid meta of a plugin
+			default: {
+				id: "plugin.namespace.mock",
+				description: { en: "Mock plugin description" },
+			},
+		} satisfies InlangModule)
+
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleExportIsInvalidError)
+})
+
+it("should handle other unhandled errors during plugin resolution", async () => {
+	const errorMessage = "Unhandled error during plugin resolution"
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["https://myplugin.com/index.js"],
+	}
+
+	const _import = async () => {
+		throw new Error(errorMessage)
+	}
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleError)
+})
+it("should return an error if a moduleSettings are invalid", async () => {
+	const settings: ProjectSettings = {
+		sourceLanguageTag: "en",
+		languageTags: ["de", "en"],
+		modules: ["plugin.js"],
+		"plugin.namespace.mock": {
+			ignore: ["invalid"],
+		},
+	}
+
+	const _import = async () => ({
+		default: {
+			id: "plugin.namespace.mock",
+			description: { en: "Mock plugin description" },
+			displayName: { en: "Mock Plugin" },
+			settingsSchema: Type.Object({
+				ignore: Type.String(),
+			}),
+		},
+	})
+
+	// Call the function
+	const resolved = await resolveModules({
+		projectPath: "/project.inlang",
+		settings,
+		_import,
+		nodeishFs: {} as any,
+	})
+
+	// Assert results
+	expect(resolved.errors[0]).toBeInstanceOf(ModuleSettingsAreInvalidError)
+})
diff --git a/inlang/source-code/sdk-v2/src/resolveModules2.ts b/inlang/source-code/sdk-v2/src/resolveModules2.ts
new file mode 100644
index 0000000000..7f1815efb6
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolveModules2.ts
@@ -0,0 +1,110 @@
+import {
+	ModuleError,
+	ModuleImportError,
+	ModuleHasNoExportsError,
+	ModuleExportIsInvalidError,
+	ModuleSettingsAreInvalidError,
+} from "./resolve-modules/errors.js"
+import { tryCatch } from "@inlang/result"
+import { resolveMessageBundleLintRules } from "./resolveMessageBundleLintRules.js"
+import { resolvePlugins2 } from "./resolvePlugins2.js"
+import { TypeCompiler } from "@sinclair/typebox/compiler"
+import { validatedModuleSettings } from "./validatedModuleSettings.js"
+import type { Plugin2 } from "./types/plugin.js"
+import { InlangModule, type ResolveModule2Function } from "./types/module.js"
+import type { MessageBundleLintRule } from "./types/lint.js"
+
+const ModuleCompiler = TypeCompiler.Compile(InlangModule)
+
+export const resolveModules: ResolveModule2Function = async (args) => {
+	const _import = args._import
+
+	const allPlugins: Array<Plugin2> = []
+	const allMessageLintRules: Array<MessageBundleLintRule> = []
+	const meta: Awaited<ReturnType<ResolveModule2Function>>["meta"] = []
+	const moduleErrors: Array<ModuleError> = []
+
+	async function resolveModule(module: string) {
+		const importedModule = await tryCatch<InlangModule>(() => _import(module))
+
+		// -- FAILED TO IMPORT --
+		if (importedModule.error) {
+			moduleErrors.push(
+				new ModuleImportError({
+					module: module,
+					cause: importedModule.error as Error,
+				})
+			)
+			return
+		}
+
+		// -- MODULE DOES NOT EXPORT ANYTHING --
+		if (importedModule.data?.default === undefined) {
+			moduleErrors.push(
+				new ModuleHasNoExportsError({
+					module: module,
+				})
+			)
+			return
+		}
+
+		// -- CHECK IF MODULE IS SYNTACTIALLY VALID
+		const isValidModule = ModuleCompiler.Check(importedModule.data)
+		if (isValidModule === false) {
+			const errors = [...ModuleCompiler.Errors(importedModule.data)]
+			moduleErrors.push(
+				new ModuleExportIsInvalidError({
+					module: module,
+					errors,
+				})
+			)
+
+			return
+		}
+
+		// -- VALIDATE MODULE SETTINGS
+
+		const result = validatedModuleSettings({
+			settingsSchema: importedModule.data.default.settingsSchema,
+			moduleSettings: (args.settings as any)[importedModule.data.default.id],
+		})
+		if (result !== "isValid") {
+			moduleErrors.push(new ModuleSettingsAreInvalidError({ module: module, errors: result }))
+			return
+		}
+
+		meta.push({
+			module: module,
+			id: importedModule.data.default.id,
+		})
+
+		if (importedModule.data.default.id.startsWith("plugin.")) {
+			allPlugins.push(importedModule.data.default as Plugin2)
+		} else if (importedModule.data.default.id.startsWith("messageBundleLintRule.")) {
+			allMessageLintRules.push(importedModule.data.default as MessageBundleLintRule)
+		} else {
+			moduleErrors.push(
+				new ModuleError(
+					`Unimplemented module type ${importedModule.data.default.id}.The module has not been installed.`,
+					{ module: module }
+				)
+			)
+		}
+	}
+
+	await Promise.all(args.settings.modules.map(resolveModule))
+	const resolvedPlugins = await resolvePlugins2({
+		plugins: allPlugins,
+		settings: args.settings,
+	})
+
+	const resolvedLintRules = resolveMessageBundleLintRules({ messageLintRules: allMessageLintRules })
+
+	return {
+		meta,
+		messageBundleLintRules: allMessageLintRules,
+		plugins: allPlugins,
+		resolvedPluginApi: resolvedPlugins.data,
+		errors: [...moduleErrors, ...resolvedLintRules.errors, ...resolvedPlugins.errors],
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
new file mode 100644
index 0000000000..f959b27ffb
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { ResolvePlugins2Function } from "./types/index.js"
+import { Plugin } from "@inlang/plugin"
+import {
+	PluginReturnedInvalidCustomApiError,
+	PluginLoadMessagesFunctionAlreadyDefinedError,
+	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginsDoNotProvideLoadOrSaveMessagesError,
+	PluginHasInvalidIdError,
+	PluginHasInvalidSchemaError,
+} from "./types/plugin-errors.js"
+import { deepmerge } from "deepmerge-ts"
+import { TypeCompiler } from "@sinclair/typebox/compiler"
+import { tryCatch } from "@inlang/result"
+
+// @ts-ignore - type mismatch error
+const PluginCompiler = TypeCompiler.Compile(Plugin)
+
+export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
+	const result: Awaited<ReturnType<ResolvePlugins2Function>> = {
+		data: {
+			loadMessages: undefined as any,
+			saveMessages: undefined as any,
+			customApi: {},
+		},
+		errors: [],
+	}
+
+	const experimentalPersistence = !!args.settings.experimental?.persistence
+	if (experimentalPersistence) {
+		// debug("Using experimental persistence")
+	}
+
+	for (const plugin of args.plugins) {
+		const errors = [...PluginCompiler.Errors(plugin)]
+
+		/**
+		 * -------------- RESOLVE PLUGIN --------------
+		 */
+
+		// -- INVALID ID in META --
+		const hasInvalidId = errors.some((error) => error.path === "/id")
+		if (hasInvalidId) {
+			result.errors.push(new PluginHasInvalidIdError({ id: plugin.id }))
+		}
+
+		// -- USES INVALID SCHEMA --
+		if (errors.length > 0) {
+			result.errors.push(
+				new PluginHasInvalidSchemaError({
+					id: plugin.id,
+					errors: errors,
+				})
+			)
+		}
+
+		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
+		if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
+			result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
+
+		if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
+			result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
+
+		// --- ADD APP SPECIFIC API ---
+		if (typeof plugin.addCustomApi === "function") {
+			// TODO: why do we call this function 2 times (here for validation and later for retrieving the actual value)?
+			const { data: customApi, error } = tryCatch(() =>
+				plugin.addCustomApi!({
+					settings: args.settings,
+				})
+			)
+			if (error) {
+				result.errors.push(new PluginReturnedInvalidCustomApiError({ id: plugin.id, cause: error }))
+			} else if (typeof customApi !== "object") {
+				result.errors.push(
+					new PluginReturnedInvalidCustomApiError({
+						id: plugin.id,
+						cause: new Error(`The return value must be an object. Received "${typeof customApi}".`),
+					})
+				)
+			}
+		}
+
+		// -- CONTINUE IF ERRORS --
+		if (result.errors.length > 0) {
+			continue
+		}
+
+		/**
+		 * -------------- BEGIN ADDING TO RESULT --------------
+		 */
+
+		if (typeof plugin.loadMessages === "function") {
+			result.data.loadMessages = plugin.loadMessages
+		}
+
+		if (typeof plugin.saveMessages === "function") {
+			result.data.saveMessages = plugin.saveMessages
+		}
+
+		if (typeof plugin.addCustomApi === "function") {
+			const { data: customApi } = tryCatch(() =>
+				plugin.addCustomApi!({
+					settings: args.settings,
+				})
+			)
+			if (customApi) {
+				result.data.customApi = deepmerge(result.data.customApi, customApi)
+			}
+		}
+	}
+
+	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
+
+	if (
+		!experimentalPersistence &&
+		(typeof result.data.loadMessages !== "function" ||
+			typeof result.data.saveMessages !== "function")
+	) {
+		result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
+	}
+
+	return result
+}
diff --git a/inlang/source-code/sdk-v2/src/settings.ts b/inlang/source-code/sdk-v2/src/settings.ts
new file mode 100644
index 0000000000..cfaa36448b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/settings.ts
@@ -0,0 +1,65 @@
+import { tryCatch } from "@inlang/result"
+
+import { ProjectSettingsFileJSONSyntaxError, ProjectSettingsInvalidError } from "./errors.js"
+
+import { ValueErrorType } from "@sinclair/typebox/compiler"
+import { ProjectSettings2 } from "./types/project-settings.js"
+
+export async function loadSettings(args: {
+	settingsFileContent: ArrayBuffer
+}): Promise<ProjectSettings2> {
+	const decoder = new TextDecoder("utf-8")
+	const settingsFileString = decoder.decode(args.settingsFileContent)
+
+	const json = tryCatch(() => JSON.parse(settingsFileString))
+
+	if (json.error) {
+		throw new ProjectSettingsFileJSONSyntaxError({
+			cause: json.error,
+			path: "fix error...",
+		})
+	}
+
+	const projectSettings = parseSettings(json.data)
+
+	// TODO SDK-v2 - Add legacy fields - needed for settings component to work, check how we can get rid of those
+	// @ts-ignore
+	projectSettings.languageTags = projectSettings.locales
+	// @ts-ignore
+	projectSettings.sourceLanguageTag = projectSettings.baseLocale
+	return projectSettings
+}
+
+const parseSettings = (settings: unknown) => {
+	// TODO SDK-v2 check how we want to deal with migration here
+	// const settingsCompiler = TypeCompiler.Compile(ProjectSettings2)
+	// const withMigration = migrateIfOutdated(settings as any)
+	// if (settingsCompiler.Check(withMigration) === false) {
+	// 	const typeErrors = [...settingsCompiler.Errors(settings)]
+	// 	if (typeErrors.length > 0) {
+	// 		throw new ProjectSettingsInvalidError({
+	// 			errors: typeErrors,
+	// 		})
+	// 	}
+	// }
+
+	const { baseLocale, locales } = settings as ProjectSettings2
+	if (!locales.includes(baseLocale)) {
+		throw new ProjectSettingsInvalidError({
+			errors: [
+				{
+					message: `The baseLocale "${baseLocale}" is not included in the locales "${locales.join(
+						'", "'
+					)}". Please add it to the locales.`,
+					type: ValueErrorType.String,
+					schema: ProjectSettings2,
+					value: baseLocale,
+					path: "baseLocale",
+				},
+			],
+		})
+	}
+
+	// TODO SDK2 check migration (the new project settings changes to locales and baseLocale!)
+	return settings as unknown as ProjectSettings2
+}
diff --git a/inlang/source-code/sdk-v2/src/types/customApis/app.inlang.ideExtension.ts b/inlang/source-code/sdk-v2/src/types/customApis/app.inlang.ideExtension.ts
new file mode 100644
index 0000000000..184ab489f8
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/customApis/app.inlang.ideExtension.ts
@@ -0,0 +1,92 @@
+import { type Static, Type } from "@sinclair/typebox"
+
+/**
+ * The result of a message reference matcher.
+ *
+ * The result contains the message id and the position
+ * from where to where the reference can be found.
+ */
+export const MessageReferenceMatch = Type.Object({
+	/**
+	 * The messages id.
+	 */
+	messageId: Type.String(),
+	/**
+	 * The position from where to where the reference can be found.
+	 */
+	position: Type.Object({
+		start: Type.Object({
+			line: Type.Number(),
+			character: Type.Number(),
+		}),
+		end: Type.Object({
+			line: Type.Number(),
+			character: Type.Number(),
+		}),
+	}),
+})
+
+/**
+ * The config schema for the ide extension.
+ */
+export const IdeExtensionConfigSchema = Type.Object({
+	/**
+	 * Defines matchers for message references inside the code.
+	 *
+	 * @param args represents the data to conduct the search on
+	 * @returns a promise with matched message references
+	 */
+	messageReferenceMatchers: Type.Array(
+		Type.Function(
+			[
+				Type.Object({
+					documentText: Type.String(),
+				}),
+			],
+			Type.Promise(Type.Array(MessageReferenceMatch))
+		)
+	),
+	/**
+	 * Defines the options to extract messages.
+	 */
+	extractMessageOptions: Type.Array(
+		Type.Object({
+			/**
+			 * Function which is called, when the user finished the message extraction command.
+			 *
+			 * @param messageId is the message identifier entered by the user
+			 * @param selection is the text which was extracted
+			 * @returns the code which is inserted into the document
+			 */
+			callback: Type.Function(
+				[
+					Type.Object({
+						messageId: Type.String(),
+						selection: Type.String(),
+					}),
+				],
+				Type.Object({
+					messageId: Type.String(),
+					messageReplacement: Type.String(),
+				})
+			),
+		})
+	),
+	/**
+	 * An array of Visual Studio Code DocumentSelectors.
+	 *
+	 * The document selectors specify for which files/programming languages
+	 * (typescript, svelte, etc.) the extension should be activated.
+	 *
+	 * See https://code.visualstudio.com/api/references/document-selector
+	 */
+	documentSelectors: Type.Optional(
+		Type.Array(
+			Type.Object({
+				language: Type.Optional(Type.String()),
+			})
+		)
+	),
+})
+
+export type CustomApiInlangIdeExtension = Static<typeof IdeExtensionConfigSchema>
diff --git a/inlang/source-code/sdk-v2/src/types/index.ts b/inlang/source-code/sdk-v2/src/types/index.ts
new file mode 100644
index 0000000000..c9c423a829
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/index.ts
@@ -0,0 +1,11 @@
+// Re-exporting for easier importing
+
+// export * from "./errors.js"
+export * from "./language-tag.js"
+export * from "./lint.js"
+// export * from "./message-bundle.js"
+export * from "./plugin.js"
+export * from "./project-settings.js"
+export * from "./project.js"
+export * from "./sdkTypes.js"
+// export * from "./module.js"
diff --git a/inlang/source-code/sdk-v2/src/types/inlang-module.ts b/inlang/source-code/sdk-v2/src/types/inlang-module.ts
new file mode 100644
index 0000000000..7742759b60
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/inlang-module.ts
@@ -0,0 +1,16 @@
+import { Plugin } from "@inlang/plugin"
+import { Type } from "@sinclair/typebox"
+import { MessageBundleLintRule } from "./lint.js"
+
+/**
+ * An inlang module has a default export that is either a plugin or a message lint rule.
+ *
+ * @example
+ *   export default myPlugin
+ */
+// not using Static<infer T> here because the type is not inferred correctly
+// due to type overwrites in modules.
+export type InlangModule = { default: Plugin | MessageBundleLintRule }
+export const InlangModule = Type.Object({
+	default: Type.Union([Plugin, MessageBundleLintRule]),
+})
diff --git a/inlang/source-code/sdk-v2/src/types/language-tag.ts b/inlang/source-code/sdk-v2/src/types/language-tag.ts
new file mode 100644
index 0000000000..cfe1019c88
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/language-tag.ts
@@ -0,0 +1,22 @@
+import { Type, type Static } from "@sinclair/typebox"
+
+/**
+ * Follows the IETF BCP 47 language tag schema.
+ *
+ * @see https://www.ietf.org/rfc/bcp/bcp47.txt
+ * @see https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
+ */
+export type LanguageTag = Static<typeof LanguageTag>
+/**
+ * Follows the IETF BCP 47 language tag schema with modifications.
+ * @see REAMDE.md file for more information on the validation.
+ */
+
+export const pattern =
+	"^((?<grandfathered>(en-GB-oed|i-ami|i-bnn|i-default|i-enochian|i-hak|i-klingon|i-lux|i-mingo|i-navajo|i-pwn|i-tao|i-tay|i-tsu|sgn-BE-FR|sgn-BE-NL|sgn-CH-DE)|(art-lojban|cel-gaulish|no-bok|no-nyn|zh-guoyu|zh-hakka|zh-min|zh-min-nan|zh-xiang))|((?<language>([A-Za-z]{2,3}(-(?<extlang>[A-Za-z]{3}(-[A-Za-z]{3}){0,2}))?))(-(?<script>[A-Za-z]{4}))?(-(?<region>[A-Za-z]{2}|[0-9]{3}))?(-(?<variant>[A-Za-z0-9]{5,8}|[0-9][A-Za-z0-9]{3}))*))$"
+
+export const LanguageTag = Type.String({
+	pattern: pattern,
+	description: "The language tag must be a valid IETF BCP 47 language tag.",
+	examples: ["en", "de", "en-US", "zh-Hans", "es-419"],
+})
diff --git a/inlang/source-code/sdk-v2/src/types/lint-errors.ts b/inlang/source-code/sdk-v2/src/types/lint-errors.ts
new file mode 100644
index 0000000000..603cfa90da
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/lint-errors.ts
@@ -0,0 +1,9 @@
+import type { ValueError } from "@sinclair/typebox/errors"
+import type { MessageBundleLintRule } from "./lint.js"
+
+export class MessageBundleLintRuleIsInvalidError extends Error {
+	constructor(options: { id: MessageBundleLintRule["id"]; errors: ValueError[] }) {
+		super(`The message bundle lint rule "${options.id}" is invalid:\n\n${options.errors.join("\n")}`)
+		this.name = "MessageBundleLintRuleIsInvalidError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/types/lint.ts b/inlang/source-code/sdk-v2/src/types/lint.ts
new file mode 100644
index 0000000000..8d082e19df
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/lint.ts
@@ -0,0 +1,178 @@
+import { Translatable } from "@inlang/translatable"
+import {
+	Type,
+	type Static,
+	type TLiteral,
+	type TObject,
+	type TTemplateLiteral,
+} from "@sinclair/typebox"
+import type { JSONObject } from "@inlang/json-types"
+
+// import type { MessageBundle } from "./message-bundle.js"
+import { LanguageTag } from "./language-tag.js"
+import type { ExternalProjectSettings, ProjectSettings2 } from "./project-settings.js"
+import type { BundleWithMessages } from "./sdkTypes.js"
+
+// export type LintResult = {
+// 	// TODO SDK 2 add property for report type - if is not specific for lint results?
+// 	[id: MessageBundle["id"]]: {
+// 		hash: string
+// 		reports: LintReport[]
+// 	}
+// }
+
+/**
+ * ---------------- AVOIDING CIRCULAR DEPENDENCIES ----------------
+ *
+ * The types beneath belong to other packages that depent on project settings
+ * and must therefore be declared here to avoid circular dependencies.
+ *
+ */
+// TODO check if we need to add properties to lints like missing-pattern-de or missing-pattern-en or
+export const _MessageBundleLintRuleId = Type.String({
+	description: "The key must be conform to `messageBundleLintRule.{namespace}.{id}` pattern.",
+	examples: [
+		"messageBundleLintRule.namespace.patternInvalid",
+		"messageBundleLintRule.namespace.missingTranslation",
+	],
+	pattern: "^messageBundleLintRule\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+}) as unknown as TTemplateLiteral<[TLiteral<`messageBundleLintRule.${string}.${string}`>]>
+
+export const _MessageLintRuleLevel = Type.Union([
+	Type.Literal("error"),
+	Type.Literal("warning"),
+	Type.Literal("off"),
+])
+
+export type MessageLintLevel = Static<typeof MessageLintLevel>
+export const MessageLintLevel = _MessageLintRuleLevel
+
+/**
+ * Lint configuration for a given bundle/message/variant
+ */
+export const LintConfig = Type.Object({
+	// TODO SDK2 Rename to LintSettings
+	id: Type.Optional(Type.String({ description: "id of the lint config entry" })),
+	ruleId: _MessageBundleLintRuleId,
+	// TODO disable this for now - to only reach feature parity for now - this is purly experimental
+	bundleId: Type.Optional(Type.String()),
+	messageId: Type.Optional(Type.String()),
+	messageLocale: Type.Optional(LanguageTag),
+	variantId: Type.Optional(Type.String()),
+	level: MessageLintLevel,
+})
+export type LintConfig = Static<typeof LintConfig>
+
+type LintFix = { key: string; title: string }
+const LintFix = Type.Object({
+	key: Type.String(),
+	title: Type.String(),
+})
+
+/**
+ * The basis of a lint report (required to contruct a lint report union type)
+ */
+export const LintReport = Type.Object({
+	ruleId: Type.String(),
+
+	// TODO SDK2 check if we should provide a lint target
+	// target: Type.Object({
+	messageBundleId: Type.String(),
+	messageId: Type.Optional(Type.String()),
+	variantId: Type.Optional(Type.String()),
+	// }),
+
+	level: MessageLintLevel,
+	body: Translatable(Type.String()),
+
+	/**
+	 * The available fixes that can be automatically applied
+	 * Empty array = no automatic fixes
+	 */
+	fixes: Type.Array(LintFix),
+})
+
+export type LintReport<Fixes extends LintFix[] = LintFix[]> = {
+	ruleId: MessageBundleLintRule["id"]
+
+	// TODO SDK2 check if we should provide a lint target
+	messageBundleId: string
+	messageId: string | undefined
+	variantId: string | undefined
+	// locale: LanguageTag | undefined
+
+	level: MessageLintLevel
+	body: Translatable<string>
+
+	/**
+	 * The available fixes that can be automatically applied
+	 * Empty array = no automatic fixes
+	 */
+	fixes: Fixes
+}
+
+/**
+ * Gets the allowed fixes type for a given report
+ */
+export type Fix<Report extends LintReport> = Report["fixes"][number]
+
+/**
+ * The message bundle lint rule API.
+ *
+ * You can use your own settings by extending the type with a generic:
+ *
+ * ```ts
+ * 	type RuleSettings = {
+ *  	filePath: string
+ * 	}
+ *
+ * 	const messageLintRule: MessageLintRule<{
+ * 		"messageLintRule.your.id": RuleSettings
+ * 	}>
+ * ```
+ */
+
+export type MessageBundleLintRule<
+	ExternalSettings extends Record<keyof ExternalProjectSettings, JSONObject> | unknown = unknown
+> = Omit<Static<typeof MessageBundleLintRule>, "settingsSchema"> & {
+	settingsSchema?: TObject
+
+	run: (args: {
+		messageBundle: BundleWithMessages
+		settings: ProjectSettings2 & ExternalSettings
+		report: (args: Omit<LintReport, "ruleId" | "level">) => void
+	}) => MaybePromise<void>
+
+	fix?: <Report extends LintReport>(args: {
+		report: Report
+		fix: Fix<Report>
+		settings: ProjectSettings2 & ExternalSettings
+		messageBundle: BundleWithMessages
+	}) => MaybePromise<BundleWithMessages>
+}
+export const MessageBundleLintRule = Type.Object({
+	id: _MessageBundleLintRuleId,
+	displayName: Translatable(Type.String()),
+	description: Translatable(Type.String()),
+
+	/*
+	for: Type.Union([
+		Type.Literal("messageBundle"),
+		Type.Literal("message"),
+		Type.Literal("variant"),
+	]),
+	*/
+
+	/**
+	 * Tyepbox is must be used to validate the Json Schema.
+	 * Github discussion to upvote a plain Json Schema validator and read the benefits of Typebox
+	 * https://github.com/opral/monorepo/discussions/1503
+	 */
+	settingsSchema: Type.Optional(Type.Object({}, { additionalProperties: true })),
+})
+
+/**
+ * ---------------- UTILITIES ----------------
+ */
+
+type MaybePromise<T> = T | Promise<T>
diff --git a/inlang/source-code/sdk-v2/src/types/module-errors.ts b/inlang/source-code/sdk-v2/src/types/module-errors.ts
new file mode 100644
index 0000000000..1d8b6c0a49
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/module-errors.ts
@@ -0,0 +1,67 @@
+import type { ValueError } from "@sinclair/typebox/errors"
+
+export class ModuleError extends Error {
+	public readonly module: string
+
+	constructor(message: string, options: { module: string; cause?: Error }) {
+		super(message)
+		this.name = "ModuleError"
+		this.module = options.module
+		this.cause = options.cause
+	}
+}
+
+/**
+ * Error when a Module does not export any plugins or lint rules.
+ */
+export class ModuleHasNoExportsError extends ModuleError {
+	constructor(options: { module: string; cause?: Error }) {
+		super(
+			`Module "${options.module}" has no exports. Every module must have an "export default".`,
+			options
+		)
+		this.name = "ModuleHasNoExportsError"
+	}
+}
+
+/**
+ * Error when a Module cannot be imported.
+ */
+export class ModuleImportError extends ModuleError {
+	constructor(options: { module: string; cause: Error }) {
+		super(`Couldn't import the plugin "${options.module}":\n\n${options.cause}`, options)
+		this.name = "ModuleImportError"
+	}
+}
+
+export class ModuleExportIsInvalidError extends ModuleError {
+	constructor(options: { module: string; errors: ValueError[] }) {
+		super(
+			`The export(s) of "${options.module}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`"${error.path}" "${JSON.stringify(error.value, undefined, 2)}": "${error.message}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "ModuleExportIsInvalidError"
+	}
+}
+
+export class ModuleSettingsAreInvalidError extends ModuleError {
+	constructor(options: { module: string; errors: ValueError[] }) {
+		super(
+			`The settings are invalid of "${options.module}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`Path "${error.path}" with value "${JSON.stringify(error.value, undefined, 2)}": "${
+							error.message
+						}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "ModuleSettingsAreInvalidError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/types/module.ts b/inlang/source-code/sdk-v2/src/types/module.ts
new file mode 100644
index 0000000000..21a731ac4b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/module.ts
@@ -0,0 +1,79 @@
+import type { ProjectSettings2 } from "./project-settings.js"
+import type { ImportFunction } from "../resolve-modules/import.js"
+import { Plugin2, type ResolvePlugins2Function, type ResolvedPlugin2Api } from "./plugin.js"
+import { MessageBundleLintRule } from "./lint.js"
+import type { ModuleHasNoExportsError, ModuleImportError } from "./module-errors.js"
+import type { resolveMessageBundleLintRules } from "../resolveMessageBundleLintRules.js"
+import { Type } from "@sinclair/typebox"
+
+/**
+ * An inlang module has a default export that is either a plugin or a message lint rule.
+ *
+ * @example
+ *   export default myPlugin
+ */
+// not using Static<infer T> here because the type is not inferred correctly
+// due to type overwrites in modules.
+export type InlangModule = { default: Plugin2 | MessageBundleLintRule }
+export const InlangModule = Type.Object({
+	default: Type.Union([Plugin2, MessageBundleLintRule]),
+})
+
+/**
+ * Function that resolves modules from the config.
+ *
+ * Pass a custom `_import` function to override the default import function.
+ */
+export type ResolveModule2Function = (args: {
+	settings: ProjectSettings2
+	_import: ImportFunction
+}) => Promise<{
+	/**
+	 * Metadata about the resolved module.
+	 *
+	 * @example
+	 * [{
+	 * 	  id: "plugin.inlang.json",
+	 * 	  module: "https://myplugin.com/index.js"
+	 * }]
+	 */
+	meta: Array<{
+		/**
+		 * The module link.
+		 *
+		 * @example "https://myplugin.com/index.js"
+		 */
+		module: string
+		/**
+		 * The resolved item id of the module.
+		 */
+		id: Plugin2["id"] | MessageBundleLintRule["id"]
+	}>
+	/**
+	 * The resolved plugins.
+	 */
+	plugins: Array<Plugin2>
+	/**
+	 * The resolved message lint rules.
+	 */
+	messageBundleLintRules: Array<MessageBundleLintRule>
+	/**
+	 * The resolved api provided by plugins.
+	 */
+	resolvedPluginApi: ResolvedPlugin2Api
+	/**
+	 * Errors during the resolution process.
+	 *
+	 * This includes errors from:
+	 * - importing module
+	 * - resolving plugins
+	 * - resolving lint rules
+	 * - resolving the runtime plugin api
+	 */
+	errors: Array<
+		| ModuleHasNoExportsError
+		| ModuleImportError
+		| Awaited<ReturnType<ResolvePlugins2Function>>["errors"][number]
+		| Awaited<ReturnType<typeof resolveMessageBundleLintRules>>["errors"][number]
+	>
+}>
diff --git a/inlang/source-code/sdk-v2/src/types/plugin-errors.ts b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
new file mode 100644
index 0000000000..cdfd21190a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
@@ -0,0 +1,56 @@
+import type { Plugin } from "@inlang/plugin"
+import type { ValueError } from "@sinclair/typebox/errors"
+
+export class PluginHasInvalidIdError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" has an invalid id. The id must:\n1) Start with "plugin."\n2) camelCase\n3) Contain a namespace.\nAn example would be "plugin.namespace.myPlugin".`
+		)
+		this.name = "PluginHasInvalidIdError"
+	}
+}
+
+export class PluginHasInvalidSchemaError extends Error {
+	constructor(options: { id: Plugin["id"]; errors: ValueError[] }) {
+		super(
+			`Plugin "${options.id}" has an invalid schema:\n\n${options.errors
+				.map((error) => `Path "${error.path}" with value "${error.value}": "${error.message}"`)
+				.join("\n")})}\n\nPlease refer to the documentation for the correct schema.`
+		)
+		this.name = "PluginHasInvalidSchemaError"
+	}
+}
+
+export class PluginLoadMessagesFunctionAlreadyDefinedError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" defines the \`loadMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`loadMessages()\` function.`
+		)
+		this.name = "PluginLoadMessagesFunctionAlreadyDefinedError"
+	}
+}
+
+export class PluginSaveMessagesFunctionAlreadyDefinedError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" defines the \`saveMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`saveMessages()\` function.`
+		)
+		this.name = "PluginSaveMessagesFunctionAlreadyDefinedError"
+	}
+}
+
+export class PluginReturnedInvalidCustomApiError extends Error {
+	constructor(options: { id: Plugin["id"]; cause: ErrorOptions["cause"] }) {
+		super(`Plugin "${options.id}" returned an invalid custom API:\n\n${options.cause}`, options)
+		this.name = "PluginReturnedInvalidCustomApiError"
+	}
+}
+
+export class PluginsDoNotProvideLoadOrSaveMessagesError extends Error {
+	constructor() {
+		super(
+			`No plugin provides a \`loadMessages()\` or \`saveMessages()\` function\n\nIn case no plugin threw an error, you likely forgot to add a plugin that handles the loading and saving of messages. Refer to the marketplace for available plugins https://inlang.com/marketplace.`
+		)
+		this.name = "PluginsDoNotProvideLoadOrSaveMessagesError"
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
new file mode 100644
index 0000000000..941a6cacac
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -0,0 +1,151 @@
+import {
+	type Static,
+	Type,
+	type TTemplateLiteral,
+	type TLiteral,
+	type TObject,
+} from "@sinclair/typebox"
+import type { JSONObject } from "@inlang/json-types"
+import type { CustomApiInlangIdeExtension } from "./customApis/app.inlang.ideExtension.js"
+import { Translatable } from "@inlang/translatable"
+import type { ProjectSettings2, ExternalProjectSettings } from "./project-settings.js"
+import type {
+	PluginHasInvalidIdError,
+	PluginHasInvalidSchemaError,
+	PluginLoadMessagesFunctionAlreadyDefinedError,
+	PluginReturnedInvalidCustomApiError,
+	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginsDoNotProvideLoadOrSaveMessagesError,
+} from "./plugin-errors.js"
+
+// ---------------------------- RUNTIME VALIDATION TYPES ---------------------------------------------
+
+/**
+ * The plugin API is used to extend inlang's functionality.
+ *
+ * You can use your own settings by extending the plugin with a generic:
+ *
+ * ```ts
+ * 	type PluginSettings = {
+ *  	filePath: string
+ * 	}
+ *
+ * 	const plugin: Plugin<{
+ * 		"plugin.your.id": PluginSettings
+ * 	}>
+ * ```
+ */
+export type Plugin2<
+	ExternalSettings extends Record<keyof ExternalProjectSettings, JSONObject> | unknown = unknown
+> = Omit<
+	Static<typeof Plugin2>,
+	"loadMessages" | "saveMessages" | "addCustomApi" | "settingsSchema"
+> & {
+	settingsSchema?: TObject
+	/**
+	 * Load messages.
+	 */
+	// TODO SDK-V2 check how to setup loadMessages
+	// loadMessages?: (args: {
+	// 	settings: ProjectSettings2 & ExternalSettings
+	// 	// nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<Message[]> | Message[]
+	// TODO SDK-V2 check how to setup saveMessages
+	// saveMessages?: (args: {
+	// 	// messages: Message[]
+	// 	settings: ProjectSettings2 & ExternalSettings
+	// 	// nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<void> | void
+	/**
+	 * Define app specific APIs.
+	 *
+	 * @example
+	 * addCustomApi: () => ({
+	 * 	 "app.inlang.ide-extension": {
+	 * 	   messageReferenceMatcher: () => {}
+	 * 	 }
+	 *  })
+	 */
+	addCustomApi?: (args: {
+		settings: ProjectSettings2 & ExternalSettings
+	}) =>
+		| Record<`app.${string}.${string}`, unknown>
+		| { "app.inlang.ideExtension": CustomApiInlangIdeExtension }
+}
+
+export const Plugin2 = Type.Object({
+	id: Type.String({
+		pattern: "^plugin\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+		examples: ["plugin.namespace.id"],
+	}) as unknown as TTemplateLiteral<[TLiteral<`plugin.${string}.${string}`>]>,
+	displayName: Translatable(Type.String()),
+	description: Translatable(Type.String()),
+	/**
+	 * Tyepbox is must be used to validate the Json Schema.
+	 * Github discussion to upvote a plain Json Schema validator and read the benefits of Typebox
+	 * https://github.com/opral/monorepo/discussions/1503
+	 */
+	settingsSchema: Type.Optional(Type.Object({}, { additionalProperties: true })),
+	loadMessages: Type.Optional(Type.Any()),
+	saveMessages: Type.Optional(Type.Any()),
+	/**
+	 * @deprecated removed
+	 */
+	detectedLanguageTags: Type.Optional(Type.Any()),
+	addCustomApi: Type.Optional(Type.Any()),
+})
+
+/**
+ * Function that resolves (imports and initializes) the plugins.
+ */
+export type ResolvePlugins2Function = (args: {
+	plugins: Array<Plugin2>
+	settings: ProjectSettings2
+}) => Promise<{
+	data: ResolvedPlugin2Api
+	errors: Array<
+		| PluginReturnedInvalidCustomApiError
+		| PluginLoadMessagesFunctionAlreadyDefinedError
+		| PluginSaveMessagesFunctionAlreadyDefinedError
+		| PluginHasInvalidIdError
+		| PluginHasInvalidSchemaError
+		| PluginsDoNotProvideLoadOrSaveMessagesError
+	>
+}>
+
+/**
+ * The API after resolving the plugins.
+ */
+export type ResolvedPlugin2Api = {
+	// TODO SDK-V2 check how to setup loadMessages
+	// loadMessages: (args: {
+	// 	settings: ProjectSettings2
+	// 	nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<Message[]> | Message[]
+	// TODO SDK-V2 check how to setup saveMessages
+	// saveMessages: (args: {
+	// 	settings: ProjectSettings2
+	// 	messages: Message[]
+	// 	nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<void> | void
+	/**
+	 * App specific APIs.
+	 *
+	 * @example
+	 *  // define
+	 *  customApi: ({ settings }) => ({
+	 * 	 "app.inlang.ide-extension": {
+	 * 	   messageReferenceMatcher: () => {
+	 * 		 // use settings
+	 * 		 settings.pathPattern
+	 * 		return
+	 * 	   }
+	 * 	 }
+	 *  })
+	 *  // use
+	 *  customApi['app.inlang.ide-extension'].messageReferenceMatcher()
+	 */
+	customApi: Record<`app.${string}.${string}` | `library.${string}.${string}`, unknown> & {
+		"app.inlang.ideExtension"?: CustomApiInlangIdeExtension
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/types/project-settings.ts b/inlang/source-code/sdk-v2/src/types/project-settings.ts
new file mode 100644
index 0000000000..dec7e48321
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/project-settings.ts
@@ -0,0 +1,125 @@
+import { type Static, type TLiteral, type TTemplateLiteral, Type } from "@sinclair/typebox"
+import { LanguageTag } from "./language-tag.js"
+import type { JSONObject } from "@inlang/json-types"
+import { LintConfig, type MessageBundleLintRule, type MessageLintLevel } from "./lint.js"
+import type { Plugin2 } from "./plugin.js"
+
+/**
+ * ---------------- Specific Language Tag field meta information ----------------
+ */
+
+// TODO SDK2 naming?
+const BaseLocale = LanguageTag
+BaseLocale.title = "Source language tag"
+BaseLocale.description =
+	"Set the reference language for your project. It needs to be a valid BCP-47 language tag."
+
+const InternalProjectSettings = Type.Object({
+	$schema: Type.Optional(Type.Literal("https://inlang.com/schema/project-settings")),
+	baseLocale: BaseLocale,
+	locales: Type.Array(LanguageTag, {
+		uniqueItems: true,
+		title: "Project Locales",
+		description:
+			"Set the locales that are available in your project. All locales needs to be a valid BCP-47 language tag. Needs to include the base locale tag.",
+	}),
+
+	/**
+	 * The modules to load.
+	 *
+	 * @example
+	 *  modules: [
+	 * 	  "https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@3/dist/index.js",
+	 * 	  "https://cdn.jsdelivr.net/npm/@inlang/plugin-csv@1/dist/index.js",
+	 *  ]
+	 */
+	modules: Type.Array(
+		Type.Intersect([
+			Type.String({
+				description: "The module must be a valid URI according to RFC 3986.",
+				pattern:
+					"(?:[A-Za-z][A-Za-z0-9+.-]*:/{2})?(?:(?:[A-Za-z0-9-._~]|%[A-Fa-f0-9]{2})+(?::([A-Za-z0-9-._~]?|[%][A-Fa-f0-9]{2})+)?@)?(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\\.){1,126}[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?(?::[0-9]+)?(?:/(?:[A-Za-z0-9-._~]|%[A-Fa-f0-9]{2})*)*(?:\\?(?:[A-Za-z0-9-._~]+(?:=(?:[A-Za-z0-9-._~+]|%[A-Fa-f0-9]{2})+)?)(?:&|;[A-Za-z0-9-._~]+(?:=(?:[A-Za-z0-9-._~+]|%[A-Fa-f0-9]{2})+)?)*)?",
+			}),
+			Type.String({
+				description: "The module must end with `.js`.",
+				pattern: ".*\\.js$",
+			}),
+			Type.String({
+				description: "The module can only contain a major version number.",
+				pattern: "^(?!.*@\\d\\.)[^]*$",
+			}),
+		]),
+		{
+			uniqueItems: true,
+			description: "The modules to load. Must be a valid URI but can be relative.",
+			examples: [
+				"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@3/dist/index.js",
+				"https://cdn.jsdelivr.net/npm/@inlang/plugin-csv@1/dist/index.js",
+				"./local-testing-plugin.js",
+			],
+		}
+	),
+	lintConfig: Type.Array(LintConfig, {
+		title: "Levels for lint rules",
+		description:
+			"Adjust the lint rule levels in your project to choose between 'warning', 'error' and 'off'. If set to 'error', you can configure a CI process to prevent merging with existing reports. (When you want to configure your lint rules visit inlang.com/c/lint-rules)",
+	}),
+	experimental: Type.Optional(
+		Type.Record(Type.String(), Type.Literal(true), {
+			title: "Experimental settings",
+			description: "Experimental settings that are used for product development.",
+		})
+	),
+})
+
+/**
+ * Settings defined via apps, plugins, lint rules, etc.
+ */
+export type ExternalProjectSettings = Static<typeof ExternalProjectSettings>
+export const ExternalProjectSettings = Type.Record(
+	Type.String({
+		// pattern includes ProjectSettings keys
+		pattern: `^((messageBundleLintRule|plugin|app|library)\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)|\\$schema|${Object.keys(
+			InternalProjectSettings.properties
+		)
+			.map((key) => key.replaceAll(".", "\\."))
+			.join("|")})$`,
+		description:
+			"The key must be conform to `{type:app|plugin|messageBundleLintRule}.{namespace:string}.{id:string}`.",
+		examples: ["plugin.publisher.sqlite", "messageBundleLintRule.inlang.missingTranslation"],
+	}) as unknown as TTemplateLiteral<
+		[TLiteral<`${"app" | "plugin" | "library" | "messageBundleLintRule"}.${string}.${string}`>]
+	>,
+	// Using JSON (array and object) as a workaround to make the
+	// intersection between `InternalSettings`, which contains an array,
+	// and `ExternalSettings` which are objects possible
+	JSON as unknown as typeof JSONObject,
+	{ description: "Settings defined by apps, plugins, etc." }
+)
+
+export type ProjectSettings2 = Static<typeof ProjectSettings2>
+export const ProjectSettings2 = Type.Intersect([InternalProjectSettings, ExternalProjectSettings])
+
+export type InstalledPlugin = {
+	id: Plugin2["id"]
+	displayName: Plugin2["displayName"]
+	description: Plugin2["description"]
+	/**
+	 * The module which the plugin is installed from.
+	 */
+	module: string
+	settingsSchema: Plugin2["settingsSchema"]
+	// disabled: boolean
+}
+
+export type InstalledLintRule = {
+	id: MessageBundleLintRule["id"]
+	displayName: MessageBundleLintRule["displayName"]
+	description: MessageBundleLintRule["description"]
+	/**
+	 * The module which the lint rule is installed from.
+	 */
+	module: string
+	level: MessageLintLevel
+	settingsSchema: MessageBundleLintRule["settingsSchema"]
+}
diff --git a/inlang/source-code/sdk-v2/src/types/project.ts b/inlang/source-code/sdk-v2/src/types/project.ts
new file mode 100644
index 0000000000..b38cfa442d
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/project.ts
@@ -0,0 +1,75 @@
+import type { BehaviorSubject, Observable, Observer, Subscribable, Subscription } from "rxjs"
+import type {
+	Fix,
+	InstalledLintRule,
+	InstalledPlugin,
+	LintReport,
+	ProjectSettings2,
+	// LintResult,
+	// Message,
+	// MessageBundle,
+	// MessageBundleRecord,
+	// MessageRecord,
+	// ProjectSettings2,
+} from "./index.js"
+import type { Bundle, Database, Message, NestedBundle, NestedMessage, Variant } from "./schema.js"
+import type { DeleteQueryBuilder, DeleteResult, InsertQueryBuilder, InsertResult, SelectQueryBuilder, UpdateQueryBuilder, UpdateResult } from "kysely"
+
+export type InlangProject = {
+	/**#
+	 * The project's id.
+	 */
+	id: string
+
+	installed: {
+		plugins: InstalledPlugin[] // TODO check how we get those subscribable
+		lintRules: BehaviorSubject<InstalledLintRule[]> // TODO check how we get those subscribable
+	}
+
+	settings: {
+		get: () => ProjectSettings2
+		set: (settings: ProjectSettings2) => Promise<void>
+		subscribe: (observerOrNext?: Partial<Observer<ProjectSettings2>> | ((value: ProjectSettings2) => void), error?: (error: any) => void, complete?: () => void) => Subscription
+	}
+	bundle: {
+		select: SelectQueryBuilder<Database, "bundle", object>
+		insert: (bundle: NestedBundle) => InsertQueryBuilder<Database, "bundle", InsertResult>
+		update: (bundle: Partial<Bundle> & { id: string }) => UpdateQueryBuilder<Database, "bundle", "bundle", UpdateResult>
+		delete: (bundle: Bundle) =>  DeleteQueryBuilder<Database, "bundle", DeleteResult>
+	}
+	message: {
+		select: SelectQueryBuilder<Database, "message", object>
+		insert: (message: NestedMessage) => InsertQueryBuilder<Database, "message", InsertResult>
+		update: (message: Partial<Message> & { id: string }) => UpdateQueryBuilder<Database, "message", "message", UpdateResult>
+		delete: (message: Message) =>  DeleteQueryBuilder<Database, "message", DeleteResult>
+	}
+	variant: {
+		select: SelectQueryBuilder<Database, "variant", object>
+		insert: (variant: Variant) => InsertQueryBuilder<Database, "variant", InsertResult>
+		update: (variant: Variant) => UpdateQueryBuilder<Database, "variant", "variant", UpdateResult>
+		delete: (bundle: Variant) =>  DeleteQueryBuilder<Database, "variant", DeleteResult>
+	}
+	reports: {
+		select: any
+	}
+	// js libraries containing lint rules, importers, exporters, code matchers, registries (icu2)
+	// modules: {
+	// 	// TODO provide import exporter plugins: Subscribable<InstalledPlugin[]>
+	// 	messageBundleLintRules: InstalledMessageLintRule[]
+	// }
+	// errors: Subscribable<
+	// 	((typeof ModuleResolutionError)[keyof typeof ModuleResolutionError] | Error)[]
+	// >
+	// TODO clearify what this is used for with Felix
+	// customApi: Subscribable<ResolvedPluginApi["customApi"]>
+	// TODO make this an rxDocument and use another persistence
+	// settings: Subscribable<ProjectSettings2>
+	// setSettings: (config: ProjectSettings2) => void // Result<void, RuntimeError.ProjectSettingsInvalidError>
+
+	// bundle: {
+	// 	selectNested:
+	// }
+
+	fix: <Report extends LintReport>(lintReport: Report, fix: Fix<Report>) => Promise<void>
+	close: () => void
+}
diff --git a/inlang/source-code/sdk-v2/src/types/schema.ts b/inlang/source-code/sdk-v2/src/types/schema.ts
new file mode 100644
index 0000000000..4eb39b9d69
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/schema.ts
@@ -0,0 +1,127 @@
+import type { Insertable, JSONColumnType, Selectable, Updateable } from "kysely"
+
+export type Database = {
+	bundle: BundleTable
+	message: MessageTable
+	variant: VariantTable
+
+	LintReport: LintReport
+	// todo - move out of database
+	settings: Settings
+}
+
+export type MessageLintLevel = "error" | "warning" | "off"
+
+type LintFix = { key: string; title: string }
+
+/**
+ * The basis of a lint report (required to contruct a lint report union type)
+ */
+export type LintReport = {
+	ruleId: string
+
+	target: {
+		messageBundleId: string
+		messageId?: string
+		variantId?: string
+	}
+
+	level: MessageLintLevel
+	body: string
+
+	/**
+	 * The available fixes that can be automatically applied
+	 * Empty array = no automatic fixes
+	 */
+	fixes: LintFix[]
+}
+
+type AliasMap = {
+	[key: string]: string
+}
+
+// Bundles all languages of a message -
+type BundleTable = {
+	id: string
+	// todo make alias relational
+	alias: JSONColumnType<AliasMap> // alias usually have a property "default"  that represents the message name like "welcome_message" or "login_button"
+	// messages[] @relation
+	// messages: Message[]
+}
+
+type MessageTable = {
+	id: string
+	// @relation to Bundle
+	bundleId: BundleTable["id"]
+	locale: string
+	declarations: JSONColumnType<Declaration[]> // JSON
+	selectors: JSONColumnType<Expression[]> // JSON
+	// variants: Variant[]
+}
+
+type VariantTable = {
+	id: string
+	// @relation to Message
+	messageId: MessageTable["id"]
+	match: JSONColumnType<string[]>
+	pattern: JSONColumnType<Pattern> // JSON
+}
+
+export type Bundle = Selectable<BundleTable>
+
+
+export type NestedMessage = Message & {
+	variants: Variant[]
+}
+
+export type NestedBundle = Bundle & {
+	messages: NestedMessage[]
+}
+
+
+export type NewBundle = Insertable<BundleTable>
+export type UpdatedBundle = Updateable<BundleTable>
+
+export type Message = Selectable<MessageTable>
+export type NewMessage = Insertable<MessageTable>
+export type UpdatedMessage = Updateable<MessageTable>
+
+export type Variant = Selectable<VariantTable>
+export type NewVariant = Insertable<VariantTable>
+export type UpdatedVariant = Updateable<VariantTable>
+
+export type Pattern = Array<Text | Expression>
+
+export type Text = {
+	type: "text"
+	value: string
+}
+
+export type VariableReference = {
+	type: "variable"
+	name: string
+}
+
+export type Literal = {
+	type: "literal"
+	name: string
+}
+
+export type Declaration = InputDeclaration
+
+export type InputDeclaration = {
+	type: "input"
+	name: string
+	value: Expression
+}
+
+export type Expression = {
+	type: "expression"
+	arg: VariableReference | Literal
+}
+
+export type Settings = {
+	baseLocale: string
+	locales: string
+	modules: string
+}
diff --git a/inlang/source-code/sdk-v2/src/types/sdkTypes.ts b/inlang/source-code/sdk-v2/src/types/sdkTypes.ts
new file mode 100644
index 0000000000..9a5716b1da
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/sdkTypes.ts
@@ -0,0 +1,9 @@
+import type { Bundle, Message, Variant } from "./schema.js"
+
+export type MessageWithVariants = Message & {
+	variants: Variant[]
+}
+
+export type BundleWithMessages = Bundle & {
+	messages: MessageWithVariants[]
+}
diff --git a/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts b/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
new file mode 100644
index 0000000000..5400a43edc
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
@@ -0,0 +1,19 @@
+import type { TSchema } from "@sinclair/typebox"
+import { Value, type ValueError } from "@sinclair/typebox/value"
+import type { InlangModule } from "./types/module.js"
+
+export const validatedModuleSettings = (args: {
+	settingsSchema: InlangModule["default"]["settingsSchema"]
+	moduleSettings: unknown
+}): "isValid" | ValueError[] => {
+	if (args.settingsSchema && args.moduleSettings) {
+		const hasValidSettings = Value.Check(args.settingsSchema as TSchema, args.moduleSettings)
+
+		if (hasValidSettings === false) {
+			const errors = [...Value.Errors(args.settingsSchema as TSchema, args.moduleSettings)]
+
+			return errors
+		}
+	}
+	return "isValid"
+}
diff --git a/inlang/source-code/sdk-v2/src/x.ts b/inlang/source-code/sdk-v2/src/x.ts
new file mode 100644
index 0000000000..0ffe730a24
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/x.ts
@@ -0,0 +1,42 @@
+const project = loadProjectV1()
+
+
+
+
+type Bundle = {
+	id: string
+	alias: Record<string, string>
+}
+
+type Bundle2 = {
+	identifier: string
+	alias: Record<string, string>
+}
+
+type BundleApp = {
+  id: string
+	alias: Record<string, string>
+}
+
+// @deprecated
+project.bundle.select().where("id", "=", "blabla")
+
+// inlang sdk 1.6 -> computed virtual table
+project.bundle2.select().where("identifier", "=", "blabla")
+
+// inlang sdk 1.6 -> map "identifier" -> "id"
+project.bundle2.insert().where("identifier", "=", "blabla")
+
+// inlang sdk 2.0
+project.bundle2.select().where("identifier", "=", "blabla")
+project.bundle2.insert().where("identifier", "=", "blabla")
+
+
+project.bundleapp.select().where("id", "=", "blabla")
+
+// inlang sdk 1.6
+project.bundle.get()
+project.bundle2.get()
+
+// inlang sdk 2.0
+project.bundle2.get()
diff --git a/inlang/source-code/sdk-v2/tsconfig.json b/inlang/source-code/sdk-v2/tsconfig.json
new file mode 100644
index 0000000000..901f153892
--- /dev/null
+++ b/inlang/source-code/sdk-v2/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"extends": "../tsconfig.base.json",
+	"include": ["src/**/*.ts"],
+	"compilerOptions": {
+		// DOM because of fetch. TODO: extract fetch from this package and
+		// let fetch be provided by the environment.
+		"lib": ["ESNext", "DOM"],
+		"types": ["vite/client"],
+		"outDir": "./dist",
+		"rootDir": "./src",
+		"declaration": true,
+		"sourceMap": true
+	}
+}
diff --git a/inlang/source-code/sdk-v2/vitest.config.ts b/inlang/source-code/sdk-v2/vitest.config.ts
new file mode 100644
index 0000000000..1515e1e627
--- /dev/null
+++ b/inlang/source-code/sdk-v2/vitest.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+	test: {
+		maxConcurrency: 1,
+		singleThread: true,
+		setupFiles: ["@vitest/web-worker"],
+	},
+	resolve: {
+		conditions: ["vitest"],
+	},
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0377132f78..e511f9496a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ importers:
         version: 45.0.2(eslint@8.57.0)
       nx:
         specifier: 18.3.3
-        version: 18.3.3
+        version: 18.3.3(@swc/core@1.6.13)
       nx-cloud:
         specifier: 16.5.2
         version: 16.5.2
@@ -100,7 +100,7 @@ importers:
         version: 12.3.1(i18next@22.5.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       tailwindcss:
         specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.0.4))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4))
       typescript:
         specifier: 5.0.4
         version: 5.0.4
@@ -134,7 +134,7 @@ importers:
         version: 3.59.2
       svelte-check:
         specifier: ^3.6.9
-        version: 3.8.0(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3)))(postcss@8.4.38)(svelte@3.59.2)
+        version: 3.8.0(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@3.59.2)
       typescript:
         specifier: ^5.0.4
         version: 5.3.3
@@ -302,7 +302,7 @@ importers:
         version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.2.2)))
       tailwindcss:
         specifier: ^3.3.3
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.2.2))
+        version: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2))
       typescript:
         specifier: 5.2.2
         version: 5.2.2
@@ -352,7 +352,7 @@ importers:
         version: link:../marketplace-registry
       '@nx/storybook':
         specifier: ^18.0.4
-        version: 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
+        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
       '@storybook/addon-essentials':
         specifier: ^7.6.16
         version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -367,7 +367,7 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
@@ -584,13 +584,13 @@ importers:
         version: link:../telemetry
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
-        version: 0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))
+        version: 0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))
       '@tailwindcss/forms':
         specifier: ^0.5.3
-        version: 0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))
+        version: 0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))
       '@tailwindcss/typography':
         specifier: ^0.5.7
-        version: 0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))
+        version: 0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))
       '@types/compression':
         specifier: ^1.7.4
         version: 1.7.5
@@ -629,7 +629,7 @@ importers:
         version: 8.4.38
       tailwindcss:
         specifier: ^3.3.0
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2))
+        version: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2))
       typescript:
         specifier: 5.2.2
         version: 5.2.2
@@ -644,7 +644,7 @@ importers:
         version: 4.5.2(@types/node@20.5.9)(terser@5.31.1)
       vite-plugin-node-polyfills:
         specifier: 0.17.0
-        version: 0.17.0(rollup@3.29.1)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1))
+        version: 0.17.0(rollup@4.18.0)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1))
       vite-plugin-solid:
         specifier: 2.7.0
         version: 2.7.0(solid-js@1.8.17)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1))
@@ -901,7 +901,7 @@ importers:
         version: 3.1.3
       ts-node:
         specifier: ^10.9.1
-        version: 10.9.2(@types/node@20.14.7)(typescript@5.3.2)
+        version: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.7)(typescript@5.3.2)
       typescript:
         specifier: 5.3.2
         version: 5.3.2
@@ -947,7 +947,7 @@ importers:
         version: 4.12.0
       vite-plugin-node-polyfills:
         specifier: 0.16.0
-        version: 0.16.0(rollup@3.29.1)(vite@4.5.2(@types/node@20.14.2)(terser@5.31.1))
+        version: 0.16.0(rollup@4.18.0)(vite@4.5.2(@types/node@20.14.2)(terser@5.31.1))
       zod:
         specifier: ^3.22.4
         version: 3.23.8
@@ -990,10 +990,10 @@ importers:
         version: 8.57.0
       eslint-config-galex:
         specifier: ^4.5.2
-        version: 4.5.2(eslint@8.57.0)(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2)))
+        version: 4.5.2(eslint@8.57.0)(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2)))
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2))
+        version: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2))
       typescript:
         specifier: 5.3.2
         version: 5.3.2
@@ -1069,7 +1069,7 @@ importers:
         version: link:../telemetry
       tailwindcss:
         specifier: 3.3.3
-        version: 3.3.3(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.2))
+        version: 3.3.3(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2))
       typescript:
         specifier: 5.3.2
         version: 5.3.2
@@ -1128,7 +1128,7 @@ importers:
         version: link:../versioned-interfaces/message-lint-rule
       '@nx/storybook':
         specifier: ^18.0.4
-        version: 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
+        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
       '@storybook/addon-essentials':
         specifier: ^7.6.16
         version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1143,7 +1143,7 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
@@ -1381,7 +1381,7 @@ importers:
     dependencies:
       '@astrojs/check':
         specifier: ^0.7.0
-        version: 0.7.0(prettier@2.8.3)(typescript@5.5.2)
+        version: 0.7.0(prettier@3.3.2)(typescript@5.5.2)
       '@astrojs/mdx':
         specifier: 3.1.2
         version: 3.1.2(astro@4.11.3(@types/node@20.14.9)(terser@5.31.1)(typescript@5.5.2))
@@ -1427,7 +1427,7 @@ importers:
         version: 3.2.3
       dedent:
         specifier: 1.5.1
-        version: 1.5.1(babel-plugin-macros@2.8.0)
+        version: 1.5.1
       json5:
         specifier: 2.2.3
         version: 2.2.3
@@ -1731,7 +1731,7 @@ importers:
         version: 0.13.6(solid-js@1.8.17)
       '@solidjs/start':
         specifier: ^1.0.2
-        version: 1.0.2(rollup@3.29.1)(solid-js@1.8.17)(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 1.0.2(rollup@4.18.0)(solid-js@1.8.17)(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       solid-js:
         specifier: ^1.8.17
         version: 1.8.17
@@ -1768,7 +1768,7 @@ importers:
         version: 12.1.0
       dedent:
         specifier: 1.5.1
-        version: 1.5.1(babel-plugin-macros@2.8.0)
+        version: 1.5.1
       devalue:
         specifier: ^4.3.2
         version: 4.3.3
@@ -1848,7 +1848,7 @@ importers:
         version: 4.2.18
       svelte-check:
         specifier: ^3.6.9
-        version: 3.8.0(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)))(postcss@8.4.38)(svelte@4.2.18)
+        version: 3.8.0(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18)
       vite:
         specifier: ^5.2.6
         version: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
@@ -1956,7 +1956,7 @@ importers:
         version: 5.5.2
       webpack:
         specifier: ^5.89.0
-        version: 5.91.0(webpack-cli@5.1.4)
+        version: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
       webpack-cli:
         specifier: ^5.1.4
         version: 5.1.4(webpack@5.91.0)
@@ -2423,7 +2423,7 @@ importers:
         version: 4.3.5
       dedent:
         specifier: 1.5.1
-        version: 1.5.1(babel-plugin-macros@2.8.0)
+        version: 1.5.1
       deepmerge-ts:
         specifier: ^5.1.0
         version: 5.1.0
@@ -2465,6 +2465,155 @@ importers:
         specifier: 0.34.6
         version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
 
+  inlang/source-code/sdk-v2:
+    dependencies:
+      '@inlang/json-types':
+        specifier: workspace:*
+        version: link:../json-types
+      '@inlang/module':
+        specifier: workspace:*
+        version: link:../versioned-interfaces/module
+      '@inlang/plugin':
+        specifier: workspace:*
+        version: link:../versioned-interfaces/plugin
+      '@inlang/result':
+        specifier: workspace:*
+        version: link:../result
+      '@inlang/translatable':
+        specifier: workspace:*
+        version: link:../versioned-interfaces/translatable
+      '@sinclair/typebox':
+        specifier: ^0.31.17
+        version: 0.31.28
+      '@sqlite.org/sqlite-wasm':
+        specifier: ^3.46.0-build2
+        version: 3.46.0-build2
+      deepmerge-ts:
+        specifier: ^5.1.0
+        version: 5.1.0
+      kysely:
+        specifier: ^0.27.4
+        version: 0.27.4
+      murmurhash3js:
+        specifier: ^3.0.1
+        version: 3.0.1
+      rxjs:
+        specifier: 7.8.1
+        version: 7.8.1
+      sqlocal:
+        specifier: ^0.10.1
+        version: 0.10.1(kysely@0.27.4)
+      uuid:
+        specifier: ^10.0.0
+        version: 10.0.0
+    devDependencies:
+      '@types/debug':
+        specifier: ^4.1.12
+        version: 4.1.12
+      '@types/murmurhash3js':
+        specifier: ^3.0.7
+        version: 3.0.7
+      '@types/throttle-debounce':
+        specifier: 5.0.0
+        version: 5.0.0
+      '@types/uuid':
+        specifier: ^9.0.8
+        version: 9.0.8
+      '@vitest/coverage-v8':
+        specifier: 0.34.6
+        version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))
+      '@vitest/web-worker':
+        specifier: ^1.6.0
+        version: 1.6.0(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))
+      jsdom:
+        specifier: 22.1.0
+        version: 22.1.0
+      patch-package:
+        specifier: 6.5.1
+        version: 6.5.1
+      tsd:
+        specifier: ^0.25.0
+        version: 0.25.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.5.2
+      vite:
+        specifier: ^5.3.2
+        version: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+      vitest:
+        specifier: 0.34.6
+        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
+
+  inlang/source-code/sdk-v2/sample-app:
+    dependencies:
+      '@esbuild-plugins/node-globals-polyfill':
+        specifier: ^0.2.3
+        version: 0.2.3(esbuild@0.21.5)
+      '@esbuild-plugins/node-modules-polyfill':
+        specifier: ^0.2.2
+        version: 0.2.2(esbuild@0.21.5)
+      '@inlang/message-bundle-component':
+        specifier: workspace:*
+        version: link:../../message-bundle-component
+      '@inlang/sdk-v2':
+        specifier: workspace:*
+        version: link:..
+      '@inlang/settings-component':
+        specifier: workspace:*
+        version: link:../../settings-component
+      '@lit/react':
+        specifier: ^1.0.5
+        version: 1.0.5(@types/react@18.3.3)
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+      comlink:
+        specifier: ^4.4.1
+        version: 4.4.1
+      express:
+        specifier: ^4.19.2
+        version: 4.19.2
+      process:
+        specifier: ^0.11.10
+        version: 0.11.10
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      react-window:
+        specifier: ^1.8.10
+        version: 1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vite-plugin-node-polyfills:
+        specifier: 0.17.0
+        version: 0.17.0(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.9)(terser@5.31.1))
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      async-test-util:
+        specifier: 2.5.0
+        version: 2.5.0
+      concurrently:
+        specifier: 8.2.2
+        version: 8.2.2
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
+      testcafe:
+        specifier: 3.6.0
+        version: 3.6.0
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
+      vite:
+        specifier: 5.2.12
+        version: 5.2.12(@types/node@20.14.9)(terser@5.31.1)
+      vite-plugin-top-level-await:
+        specifier: 1.4.1
+        version: 1.4.1(@swc/helpers@0.5.5)(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.9)(terser@5.31.1))
+
   inlang/source-code/sdk/load-test:
     dependencies:
       '@inlang/cli':
@@ -2590,7 +2739,7 @@ importers:
         version: link:../marketplace-registry
       '@nx/storybook':
         specifier: ^18.0.4
-        version: 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
+        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
       '@storybook/addon-essentials':
         specifier: ^7.6.16
         version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -2605,7 +2754,7 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
@@ -3062,13 +3211,13 @@ importers:
         version: link:../telemetry
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
-        version: 0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))
+        version: 0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))
       '@tailwindcss/forms':
         specifier: ^0.5.3
-        version: 0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))
+        version: 0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))
       '@tailwindcss/typography':
         specifier: ^0.5.7
-        version: 0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))
+        version: 0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))
       '@types/compression':
         specifier: ^1.7.4
         version: 1.7.5
@@ -3107,7 +3256,7 @@ importers:
         version: 8.4.38
       tailwindcss:
         specifier: ^3.3.0
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2))
+        version: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
       typescript:
         specifier: ^5.5.2
         version: 5.5.2
@@ -3327,6 +3476,9 @@ packages:
   '@actions/http-client@2.2.1':
     resolution: {integrity: sha512-KhC/cZsq7f8I4LfZSJKgCvEwfkE8o1538VoBeoGzokVLLnbFDEAdFD3UhoMklxo2un9NJVBdANOresx7vTHlHw==}
 
+  '@adobe/css-tools@4.4.0':
+    resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==}
+
   '@algolia/cache-browser-local-storage@4.20.0':
     resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==}
 
@@ -3582,6 +3734,16 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-define-polyfill-provider@0.4.4':
+    resolution: {integrity: sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  '@babel/helper-define-polyfill-provider@0.5.0':
+    resolution: {integrity: sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
   '@babel/helper-define-polyfill-provider@0.6.2':
     resolution: {integrity: sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==}
     peerDependencies:
@@ -3702,12 +3864,40 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/plugin-proposal-async-generator-functions@7.20.7':
+    resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
+    engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-proposal-class-properties@7.18.6':
+    resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
+    engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-proposal-decorators@7.24.7':
     resolution: {integrity: sha512-RL9GR0pUG5Kc8BUWLNDm2T5OpYwSX15r98I0IkgmRQTXuELq/OynH8xtMTMvTJFjXbMWFVTKtYkTaYQsuAwQlQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-proposal-object-rest-spread@7.20.7':
+    resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
+    engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-proposal-private-methods@7.18.6':
+    resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
+    engines: {node: '>=6.9.0'}
+    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
@@ -4110,6 +4300,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-runtime@7.23.3':
+    resolution: {integrity: sha512-XcQ3X58CKBdBnnZpPaQjgVMePsXtSZzHoku70q9tUAQp02ggPQNM04BF3RvlW1GSM/McbSOQAzEK4MXbS7/JFg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-runtime@7.24.7':
     resolution: {integrity: sha512-YqXjrk4C+a1kZjewqt+Mmu2UuV1s07y8kqcUf4qYLnoqemhR4gRQikhdAhSVJioMjVTu6Mo6pAbaypEA3jY6fw==}
     engines: {node: '>=6.9.0'}
@@ -4199,6 +4395,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/preset-react@7.24.7':
+    resolution: {integrity: sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/preset-typescript@7.24.7':
     resolution: {integrity: sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==}
     engines: {node: '>=6.9.0'}
@@ -4214,6 +4416,10 @@ packages:
   '@babel/regjsgen@0.8.0':
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
 
+  '@babel/runtime@7.24.5':
+    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/runtime@7.24.7':
     resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
     engines: {node: '>=6.9.0'}
@@ -4332,10 +4538,21 @@ packages:
   '@deno/shim-deno@0.19.2':
     resolution: {integrity: sha512-q3VTHl44ad8T2Tw2SpeAvghdGOjlnLPDNO2cpOxwMrBE/PVas6geWpbpIgrM+czOCH0yejp0yi8OaTuB+NU40Q==}
 
+  '@devexpress/bin-v8-flags-filter@1.3.0':
+    resolution: {integrity: sha512-LWLNfYGwVJKYpmHUDoODltnlqxdEAl5Qmw7ha1+TSpsABeF94NKSWkQTTV1TB4CM02j2pZyqn36nHgaFl8z7qw==}
+
+  '@devexpress/callsite-record@4.1.7':
+    resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@electron/asar@3.2.10':
+    resolution: {integrity: sha512-mvBSwIBUeiRscrCeJE1LwctAriBj65eUDm0Pc11iE5gRwzkmsdbS7FnZ1XUWjpSeQWL1L5g12Fc/SchPM9DUOw==}
+    engines: {node: '>=10.12.0'}
+    hasBin: true
+
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
 
@@ -4374,6 +4591,16 @@ packages:
   '@esbuild-kit/esm-loader@2.6.5':
     resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
 
+  '@esbuild-plugins/node-globals-polyfill@0.2.3':
+    resolution: {integrity: sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==}
+    peerDependencies:
+      esbuild: '*'
+
+  '@esbuild-plugins/node-modules-polyfill@0.2.2':
+    resolution: {integrity: sha512-LXV7QsWJxRuMYvKbiznh+U1ilIop3g2TeKRzUxOG5X3YITc8JyyTa90BmLwqqv0YnX4v32CSlG+vsziZp9dMvA==}
+    peerDependencies:
+      esbuild: '*'
+
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
@@ -6676,6 +6903,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-virtual@3.0.2':
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/pluginutils@4.2.1':
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -7006,6 +7242,10 @@ packages:
   '@solidjs/start@1.0.2':
     resolution: {integrity: sha512-SRoFvSnL47O1hg4/Er2es2AVoOWRdGBm0C8h2KsHFjbiRe1r2AxsONHR9job+Hmzbl5icSaGmNoXoQ8qpTy4UA==}
 
+  '@sqlite.org/sqlite-wasm@3.46.0-build2':
+    resolution: {integrity: sha512-10s/u/Main1RGO+jjzK+mgC/zh1ls1CEnq3Dujr03TwvzLg+j4FAohOmlYkQj8KQOj1vGR9cuB9F8tVBTwVGVA==}
+    hasBin: true
+
   '@storybook/addon-actions@7.6.19':
     resolution: {integrity: sha512-ATLrA5QKFJt7tIAScRHz5T3eBQ+RG3jaZk08L7gChvyQZhei8knWwePElZ7GaWbCr9BgznQp1lQUUXq/UUblAQ==}
 
@@ -7266,6 +7506,75 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
 
+  '@swc/core-darwin-arm64@1.6.13':
+    resolution: {integrity: sha512-SOF4buAis72K22BGJ3N8y88mLNfxLNprTuJUpzikyMGrvkuBFNcxYtMhmomO0XHsgLDzOJ+hWzcgjRNzjMsUcQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.6.13':
+    resolution: {integrity: sha512-AW8akFSC+tmPE6YQQvK9S2A1B8pjnXEINg+gGgw0KRUUXunvu1/OEOeC5L2Co1wAwhD7bhnaefi06Qi9AiwOag==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.6.13':
+    resolution: {integrity: sha512-f4gxxvDXVUm2HLYXRd311mSrmbpQF2MZ4Ja6XCQz1hWAxXdhRl1gpnZ+LH/xIfGSwQChrtLLVrkxdYUCVuIjFg==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.6.13':
+    resolution: {integrity: sha512-Nf/eoW2CbG8s+9JoLtjl9FByBXyQ5cjdBsA4efO7Zw4p+YSuXDgc8HRPC+E2+ns0praDpKNZtLvDtmF2lL+2Gg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-arm64-musl@1.6.13':
+    resolution: {integrity: sha512-2OysYSYtdw79prJYuKIiux/Gj0iaGEbpS2QZWCIY4X9sGoETJ5iMg+lY+YCrIxdkkNYd7OhIbXdYFyGs/w5LDg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-x64-gnu@1.6.13':
+    resolution: {integrity: sha512-PkR4CZYJNk5hcd2+tMWBpnisnmYsUzazI1O5X7VkIGFcGePTqJ/bWlfUIVVExWxvAI33PQFzLbzmN5scyIUyGQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-linux-x64-musl@1.6.13':
+    resolution: {integrity: sha512-OdsY7wryTxCKwGQcwW9jwWg3cxaHBkTTHi91+5nm7hFPpmZMz1HivJrWAMwVE7iXFw+M4l6ugB/wCvpYrUAAjA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-win32-arm64-msvc@1.6.13':
+    resolution: {integrity: sha512-ap6uNmYjwk9M/+bFEuWRNl3hq4VqgQ/Lk+ID/F5WGqczNr0L7vEf+pOsRAn0F6EV+o/nyb3ePt8rLhE/wjHpPg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.6.13':
+    resolution: {integrity: sha512-IJ8KH4yIUHTnS/U1jwQmtbfQals7zWPG0a9hbEfIr4zI0yKzjd83lmtS09lm2Q24QBWOCFGEEbuZxR4tIlvfzA==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.6.13':
+    resolution: {integrity: sha512-f6/sx6LMuEnbuxtiSL/EkR0Y6qUHFw1XVrh6rwzKXptTipUdOY+nXpKoh+1UsBm/r7H0/5DtOdrn3q5ZHbFZjQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.6.13':
+    resolution: {integrity: sha512-eailUYex6fkfaQTev4Oa3mwn0/e3mQU4H8y1WPuImYQESOQDtVrowwUGDSc19evpBbHpKtwM+hw8nLlhIsF+Tw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '*'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
@@ -7275,6 +7584,9 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@swc/types@0.1.9':
+    resolution: {integrity: sha512-qKnCno++jzcJ4lM4NTfYifm1EFSCeIfKiAHAfkENZAV5Kl9PjJIyd2yeeVv6c/2CckuLyv2NmRC5pv6pm2WQBg==}
+
   '@szmarczak/http-timer@5.0.1':
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
@@ -7537,6 +7849,9 @@ packages:
   '@types/cli-progress@3.11.5':
     resolution: {integrity: sha512-D4PbNRbviKyppS5ivBGyFO29POlySLmA2HyUFE4p5QGazAMM3CwkKWcvTl8gvElSuxRh6FPKL8XmidX873ou4g==}
 
+  '@types/clone@2.1.4':
+    resolution: {integrity: sha512-NKRWaEGaVGVLnGLB2GazvDaZnyweW9FJLLFL5LhywGJB3aqGMT9R/EUoJoSRP4nzofYnZysuDmrEJtJdAqUOtQ==}
+
   '@types/compression@1.7.5':
     resolution: {integrity: sha512-AAQvK5pxMpaT+nDvhHrsBhLSYG5yQdtkaJE1WYieSNY2mVFKAgmU4ks65rkZD5oqnGCFLyQpUr1CqI4DmUMyDg==}
 
@@ -7585,6 +7900,9 @@ packages:
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
+  '@types/estree@0.0.46':
+    resolution: {integrity: sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -7606,6 +7924,9 @@ packages:
   '@types/fs-extra@11.0.2':
     resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==}
 
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
   '@types/glob@8.1.0':
     resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
 
@@ -8059,6 +8380,9 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@ungap/with-resolvers@0.1.0':
+    resolution: {integrity: sha512-g7f0IkJdPW2xhY7H4iE72DAsIyfuwEFc6JWc2tYFwKDMWWAF699vGjrM348cwQuOXgHpe1gWFe+Eiyjx/ewvvw==}
+
   '@vercel/nft@0.22.6':
     resolution: {integrity: sha512-gTsFnnT4mGxodr4AUlW3/urY+8JKKB452LwF3m477RFUJTAaDmcz2JqFuInzvdybYIeyIv1sSONEJxsxnbQ5JQ==}
     engines: {node: '>=14'}
@@ -8117,6 +8441,11 @@ packages:
   '@vitest/utils@0.34.6':
     resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
 
+  '@vitest/web-worker@1.6.0':
+    resolution: {integrity: sha512-VVKzjk6PVKfaXfhRwTxXaQ0NCp2BoUPhiR2OYd3InZb60jbZVmKquvngFXgvgOf1aDT8ztloMi8yu3wj9eRcuQ==}
+    peerDependencies:
+      vitest: 0.34.6
+
   '@volar/kit@2.2.5':
     resolution: {integrity: sha512-Bmn0UCaT43xUGGRwcmFG9lKhiCCLjRT4ScSLLPn5C9ltUcSGnIFFDlbZZa1PreHYHq25/4zkXt9Ap32klAh17w==}
     peerDependencies:
@@ -8422,6 +8751,9 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  acorn-hammerhead@0.6.2:
+    resolution: {integrity: sha512-JZklfs1VVyjA1hf1y5qSzKSmK3K1UUUI7fQTuM/Zhv3rz4kFhdx4QwVnmU6tBEC8g/Ov6B+opfNFPeSZrlQfqA==}
+
   acorn-import-assertions@1.9.0:
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     peerDependencies:
@@ -8615,6 +8947,9 @@ packages:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
 
+  array-find@1.0.0:
+    resolution: {integrity: sha512-kO/vVCacW9mnpn3WPWbTVlEnOabK2L7LWi2HViURtCM46y1zb6I8UMjx4LgbiqadTgHnLInUronwn3ampNTJtQ==}
+
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
@@ -8628,10 +8963,18 @@ packages:
   array-timsort@1.0.3:
     resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
 
+  array-union@1.0.2:
+    resolution: {integrity: sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==}
+    engines: {node: '>=0.10.0'}
+
   array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
+  array-uniq@1.0.3:
+    resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==}
+    engines: {node: '>=0.10.0'}
+
   array.prototype.findlast@1.2.5:
     resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
     engines: {node: '>= 0.4'}
@@ -8700,6 +9043,10 @@ packages:
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
+  async-exit-hook@1.1.2:
+    resolution: {integrity: sha512-CeTSWB5Bou31xSHeO45ZKgLPRaJbV4I8csRcFYETDBehX7H+1GDO/v+v8G7fZmar1gOmYa6UTXn6d/WIiJbslw==}
+    engines: {node: '>=0.12.0'}
+
   async-exit-hook@2.0.1:
     resolution: {integrity: sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==}
     engines: {node: '>=0.12.0'}
@@ -8713,6 +9060,12 @@ packages:
   async-sema@3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
+  async-test-util@2.5.0:
+    resolution: {integrity: sha512-tjng4jQnrRzC5PIE3a+8W9mxXPTwSZbSKYThyCFtx86pyc1nmvgafSvyWGzi+wt2pjHewEVBrH72Xayi4ZVBrQ==}
+
+  async@3.2.3:
+    resolution: {integrity: sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==}
+
   async@3.2.5:
     resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
 
@@ -8801,6 +9154,9 @@ packages:
   babel-plugin-macros@2.8.0:
     resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
 
+  babel-plugin-module-resolver@5.0.2:
+    resolution: {integrity: sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==}
+
   babel-plugin-polyfill-corejs2@0.4.11:
     resolution: {integrity: sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==}
     peerDependencies:
@@ -8811,11 +9167,24 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
+  babel-plugin-polyfill-corejs3@0.8.7:
+    resolution: {integrity: sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-regenerator@0.5.5:
+    resolution: {integrity: sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
   babel-plugin-polyfill-regenerator@0.6.2:
     resolution: {integrity: sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
+  babel-plugin-syntax-trailing-function-commas@6.22.0:
+    resolution: {integrity: sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==}
+
   babel-plugin-transform-hook-names@1.0.2:
     resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
     peerDependencies:
@@ -8933,6 +9302,12 @@ packages:
   bottleneck@2.19.5:
     resolution: {integrity: sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==}
 
+  bowser@1.6.0:
+    resolution: {integrity: sha512-Fk23J0+vRnI2eKDEDoUZXWtbMjijr098lKhuj4DKAfMKMCRVfJOuxXlbpxy0sTgbZ/Nr2N8MexmOir+GGI/ZMA==}
+
+  bowser@2.11.0:
+    resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==}
+
   boxen@7.1.1:
     resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
     engines: {node: '>=14.16'}
@@ -9092,6 +9467,9 @@ packages:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
     engines: {node: '>= 0.4'}
 
+  callsite@1.0.0:
+    resolution: {integrity: sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -9125,6 +9503,10 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@4.3.4:
+    resolution: {integrity: sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==}
+    engines: {node: '>=4'}
+
   chai@4.4.1:
     resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
     engines: {node: '>=4'}
@@ -9184,6 +9566,10 @@ packages:
   chroma-js@2.4.2:
     resolution: {integrity: sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==}
 
+  chrome-remote-interface@0.32.2:
+    resolution: {integrity: sha512-3UbFKtEmqApehPQnqdblcggx7KveQphEMKQmdJZsOguE9ylw2N2/9Z7arO7xS55+DBJ/hyP8RrayLt4MMdJvQg==}
+    hasBin: true
+
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -9198,6 +9584,9 @@ packages:
     peerDependencies:
       devtools-protocol: '*'
 
+  ci-info@1.6.0:
+    resolution: {integrity: sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==}
+
   ci-info@2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
 
@@ -9296,6 +9685,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -9311,6 +9704,14 @@ packages:
   code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
+  coffeescript@2.7.0:
+    resolution: {integrity: sha512-hzWp6TUE2d/jCcN67LrW1eh5b/rSDKQK6oD6VMLlggYVUUFexgTH9z3dNYihzX4RMhze5FTUsUmOXViJKFQR/A==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  coincident@1.2.3:
+    resolution: {integrity: sha512-Uxz3BMTWIslzeWjuQnizGWVg0j6khbvHUQ8+5BdM7WuJEm4ALXwq3wluYoB+uF68uPBz/oUOeJnYURKyfjexlA==}
+
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
 
@@ -9367,6 +9768,9 @@ packages:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
 
+  commander@2.11.0:
+    resolution: {integrity: sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -9374,10 +9778,18 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@5.1.0:
+    resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
+    engines: {node: '>= 6'}
+
   commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
     engines: {node: '>= 6'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
@@ -9420,6 +9832,11 @@ packages:
     resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
     engines: {'0': node >= 0.8}
 
+  concurrently@8.2.2:
+    resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==}
+    engines: {node: ^14.13.0 || >=16.0.0}
+    hasBin: true
+
   confbox@0.1.7:
     resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
 
@@ -9479,6 +9896,10 @@ packages:
     resolution: {integrity: sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==}
     engines: {node: '>= 0.8'}
 
+  copyfiles@2.4.1:
+    resolution: {integrity: sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==}
+    hasBin: true
+
   core-js-compat@3.37.1:
     resolution: {integrity: sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==}
 
@@ -9559,6 +9980,10 @@ packages:
   crypto-browserify@3.12.0:
     resolution: {integrity: sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==}
 
+  crypto-md5@1.0.0:
+    resolution: {integrity: sha512-65Mtei8+EkSIK+5Ie4gpWXoJ/5bgpqPXFknHHXAyhDqKsEAAzUslGd8mOeawbfcuQ8fADNKcF4xQA3fqlZJ8Ig==}
+    engines: {iojs: '>=1.0.0', node: '>=0.5.2'}
+
   crypto-random-string@2.0.0:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
@@ -9779,6 +10204,15 @@ packages:
   dedent-js@1.0.1:
     resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
 
+  dedent@0.4.0:
+    resolution: {integrity: sha512-25DJIXD6mCqYHIqI3/aBfAvFgJSY9jIx397eUQSofXbWVR4lcB21a17qQ5Bswj0Zv+3Nf06zNCyfkGyvo0AqqQ==}
+
+  dedent@0.6.0:
+    resolution: {integrity: sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==}
+
+  dedent@0.7.0:
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
+
   dedent@1.5.1:
     resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==}
     peerDependencies:
@@ -9787,6 +10221,10 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  deep-eql@3.0.1:
+    resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
+    engines: {node: '>=0.12'}
+
   deep-eql@4.1.4:
     resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
     engines: {node: '>=6'}
@@ -9848,6 +10286,14 @@ packages:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
 
+  del@3.0.0:
+    resolution: {integrity: sha512-7yjqSoVSlJzA4t/VUwazuEagGeANEKB3f/aNI//06pfKgwoCb7f6Q1gETN1sZzYaj6chTQ0AhIwDiPdfOjko4A==}
+    engines: {node: '>=4'}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
   del@6.1.1:
     resolution: {integrity: sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==}
     engines: {node: '>=10'}
@@ -9923,6 +10369,9 @@ packages:
   devalue@5.0.0:
     resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==}
 
+  device-specs@1.0.1:
+    resolution: {integrity: sha512-rxns/NDZfbdYumnn801z9uo8kWIz3Eld7Bk/F0V9zw4sZemSoD93+gxHEonLdxYulkws4iCMt7ZP8zuM8EzUSg==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -10063,9 +10512,21 @@ packages:
   electron-to-chromium@1.4.792:
     resolution: {integrity: sha512-rkg5/N3L+Y844JyfgPUyuKK0Hk0efo3JNxUDKvz3HgP6EmN4rNGhr2D8boLsfTV/hGo7ZGAL8djw+jlg99zQyA==}
 
+  elegant-spinner@1.0.1:
+    resolution: {integrity: sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ==}
+    engines: {node: '>=0.10.0'}
+
   elliptic@6.5.5:
     resolution: {integrity: sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==}
 
+  email-validator@2.0.4:
+    resolution: {integrity: sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==}
+    engines: {node: '>4.0'}
+
+  emittery@0.4.1:
+    resolution: {integrity: sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==}
+    engines: {node: '>=6'}
+
   emmet@2.4.7:
     resolution: {integrity: sha512-O5O5QNqtdlnQM2bmKHtJgyChcrFMgQuulI+WdiOw2NArzprUqqxUW6bgYtKvzKgrsYpuLWalOkdhNP+1jluhCA==}
 
@@ -10085,6 +10546,9 @@ packages:
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
+  endpoint-utils@1.0.2:
+    resolution: {integrity: sha512-s5IrlLvx7qVXPOjcxjF00CRBlybiQWOoGCNiIZ/Vin2WeJ3SHtfkWHRsyu7C1+6QAwYXf0ULoweylxUa19Khjg==}
+
   enhanced-resolve@5.17.0:
     resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==}
     engines: {node: '>=10.13.0'}
@@ -10521,6 +10985,9 @@ packages:
   esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 
+  esotope-hammerhead@0.6.8:
+    resolution: {integrity: sha512-2Zhg0c6NfrNA4QT5s4+QG5WJQtq3Se7GonNwtNwfr7sVIo/7L8rirPfh9yyloEmDA7R0yPgD10teFxhf2vWyIw==}
+
   espree@10.0.1:
     resolution: {integrity: sha512-MWkrWZbJsL2UwnjxTX3gG8FneachS/Mwg7tdGXce011sJd5b0JG54vat5KHnfSBODZ3Wvzd2WnjxyzsRoVv+ww==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -10606,6 +11073,14 @@ packages:
   evp_bytestokey@1.0.3:
     resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
+  execa@3.4.0:
+    resolution: {integrity: sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==}
+    engines: {node: ^8.12.0 || >=9.7.0}
+
+  execa@4.1.0:
+    resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
+    engines: {node: '>=10'}
+
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -10634,6 +11109,10 @@ packages:
     resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==}
     engines: {node: '>= 0.10.0'}
 
+  express@4.19.2:
+    resolution: {integrity: sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==}
+    engines: {node: '>= 0.10.0'}
+
   ext-list@2.2.2:
     resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
     engines: {node: '>=0.10.0'}
@@ -10810,6 +11289,9 @@ packages:
     resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
     engines: {node: '>= 0.8'}
 
+  find-babel-config@2.1.1:
+    resolution: {integrity: sha512-5Ji+EAysHGe1OipH7GN4qDjok5Z1uw5KAwDCbicU/4wyTZY7CqOCzcWbG7J5ad9mazq67k89fXlbc1MuIfl9uA==}
+
   find-cache-dir@2.1.0:
     resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
     engines: {node: '>=6'}
@@ -10923,6 +11405,10 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
   fs-extra@11.1.1:
     resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
     engines: {node: '>=14.14'}
@@ -10979,6 +11465,9 @@ packages:
     resolution: {integrity: sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==}
     engines: {node: '>= 4.0.0'}
 
+  gc-hook@0.3.1:
+    resolution: {integrity: sha512-E5M+O/h2o7eZzGhzRZGex6hbB3k4NWqO0eA+OzLRLXxhdbYPajZnynPwAtphnh+cRHPwsj5Z80dqZlfI4eK55A==}
+
   geckodriver@4.4.1:
     resolution: {integrity: sha512-nnAdIrwLkMcDu4BitWXF23pEMeZZ0Cj7HaWWFdSpeedBP9z6ft150JYiGO2mwzw6UiR823Znk1JeIf07RyzloA==}
     engines: {node: ^16.13 || >=18 || >=20}
@@ -11014,6 +11503,9 @@ packages:
     resolution: {integrity: sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==}
     engines: {node: '>=12.17'}
 
+  get-os-info@1.0.2:
+    resolution: {integrity: sha512-Nlgt85ph6OHZ4XvTcC8LMLDDFUzf7LAinYJZUwzrnc3WiO+vDEHDmNItTtzixBDLv94bZsvJGrrDRAE6uPs4MQ==}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -11033,6 +11525,10 @@ packages:
     resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
     engines: {node: '>=16'}
 
+  get-stdin@4.0.1:
+    resolution: {integrity: sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==}
+    engines: {node: '>=0.10.0'}
+
   get-stream@2.3.1:
     resolution: {integrity: sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==}
     engines: {node: '>=0.10.0'}
@@ -11068,6 +11564,9 @@ packages:
     resolution: {integrity: sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==}
     engines: {node: '>= 14'}
 
+  getos@3.2.1:
+    resolution: {integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==}
+
   giget@1.2.3:
     resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
     hasBin: true
@@ -11120,6 +11619,10 @@ packages:
     engines: {node: '>=12'}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  glob@9.3.5:
+    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -11143,6 +11646,10 @@ packages:
   globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
 
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -11155,6 +11662,10 @@ packages:
     resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==}
     engines: {node: '>=18'}
 
+  globby@6.1.0:
+    resolution: {integrity: sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==}
+    engines: {node: '>=0.10.0'}
+
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -11182,6 +11693,9 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+
   gray-matter@4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
@@ -11348,6 +11862,9 @@ packages:
     resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
     engines: {node: '>=6'}
 
+  highlight-es@1.0.3:
+    resolution: {integrity: sha512-s/SIX6yp/5S1p8aC/NRDC1fwEb+myGIfp8/TzZz0rtAv8fzsdX7vGl3Q1TrXCsczFq8DI3CBFBCySPClfBSdbg==}
+
   highlight.js@11.9.0:
     resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
     engines: {node: '>=12.0.0'}
@@ -11438,10 +11955,21 @@ packages:
     resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  http-status-codes@2.3.0:
+    resolution: {integrity: sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==}
+
   http2-wrapper@2.2.1:
     resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
     engines: {node: '>=10.19.0'}
 
+  httpntlm@1.8.13:
+    resolution: {integrity: sha512-2F2FDPiWT4rewPzNMg3uPhNkP3NExENlUGADRUDPQvuftuUTGW98nLZtGemCIW3G40VhWZYgkIDcQFAwZ3mf2Q==}
+    engines: {node: '>=10.4.0'}
+
+  httpreq@1.1.1:
+    resolution: {integrity: sha512-uhSZLPPD2VXXOSN8Cni3kIsoFHaU2pT/nySEU/fHr/ePbqHYr0jeiQRmUKLEirC09SFPsdMoA7LU7UXMd/w0Kw==}
+    engines: {node: '>= 6.15.1'}
+
   https-browserify@1.0.0:
     resolution: {integrity: sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==}
 
@@ -11467,6 +11995,10 @@ packages:
   human-id@1.0.2:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
 
+  human-signals@1.1.1:
+    resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==}
+    engines: {node: '>=8.12.0'}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -11479,6 +12011,9 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  humanize-duration@3.32.1:
+    resolution: {integrity: sha512-inh5wue5XdfObhu/IGEMiA1nUXigSGcaKNemcbLRKa7jXYGDZXr3LoT9pTIzq2hPEbld7w/qv9h+ikWGz8fL1g==}
+
   hyperdyperid@1.2.0:
     resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
     engines: {node: '>=10.18'}
@@ -11502,6 +12037,10 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.5.1:
+    resolution: {integrity: sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==}
+    engines: {node: '>=0.10.0'}
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -11523,6 +12062,10 @@ packages:
   import-in-the-middle@1.8.1:
     resolution: {integrity: sha512-yhRwoHtiLGvmSozNOALgjRPFI6uYsds60EoMqqnXyyv+JOIW/BrrLejuTGBt+bq0T5tLzOHrN0T7xYTm4Qt/ng==}
 
+  import-lazy@3.1.0:
+    resolution: {integrity: sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==}
+    engines: {node: '>=6'}
+
   import-lazy@4.0.0:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
     engines: {node: '>=8'}
@@ -11539,6 +12082,11 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@1.2.2:
+    resolution: {integrity: sha512-Z1vqf6lDC3f4N2mWqRywY6odjRatPNGDZgUr4DY9MLC14+Fp2/y+CI/RnNGlb8hD6ckscE/8DlZUwHUaiDBshg==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
   indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -11590,6 +12138,9 @@ packages:
     resolution: {integrity: sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==}
     engines: {node: '>=8'}
 
+  ip@1.1.9:
+    resolution: {integrity: sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==}
+
   ip@2.0.1:
     resolution: {integrity: sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==}
 
@@ -11655,6 +12206,10 @@ packages:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
+  is-ci@1.2.1:
+    resolution: {integrity: sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==}
+    hasBin: true
+
   is-ci@2.0.0:
     resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
     hasBin: true
@@ -11686,10 +12241,17 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-es2016-keyword@1.0.0:
+    resolution: {integrity: sha512-JtZWPUwjdbQ1LIo9OSZ8MdkWEve198ors27vH+RzUUvZXXZkzXCxFnlUhzWYxy5IexQSRiXVw9j2q/tHMmkVYQ==}
+
   is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
 
+  is-extglob@1.0.0:
+    resolution: {integrity: sha512-7Q+VbVafe6x2T+Tu6NcOf6sRklazEPmBoB3IWk3WdGZM2iGUwU/Oe3Wtq5lSEkDTTlpp8yx+5t4pzO/i9Ty1ww==}
+    engines: {node: '>=0.10.0'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -11697,6 +12259,10 @@ packages:
   is-finalizationregistry@1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
 
+  is-finite@1.1.0:
+    resolution: {integrity: sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==}
+    engines: {node: '>=0.10.0'}
+
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -11705,6 +12271,10 @@ packages:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
 
+  is-glob@2.0.1:
+    resolution: {integrity: sha512-a1dBeB19NXsf/E0+FHqkagizel/LQw2DjSQpvQrj3zT+jYPpaUCryPnrQajXKFLCMuf4I6FhRpaGtw4lPrG6Eg==}
+    engines: {node: '>=0.10.0'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -11751,6 +12321,10 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
+  is-node@1.0.2:
+    resolution: {integrity: sha512-U37UdVWHNH1wDFmlSauKRDL1nhaCVRIH1FoaZN94eGJvU832sjMHEO/4AITAkOT0aRD7oA1Fovn7PeNCHiqz0w==}
+    engines: {node: '>= 0.10'}
+
   is-number-object@1.0.7:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
@@ -11762,10 +12336,22 @@ packages:
   is-object@1.0.2:
     resolution: {integrity: sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==}
 
+  is-path-cwd@1.0.0:
+    resolution: {integrity: sha512-cnS56eR9SPAscL77ik76ATVqoPARTqPIVkMDVxRaWH06zT+6+CzIroYRJ0VVvm0Z1zfAvxvz9i/D3Ppjaqt5Nw==}
+    engines: {node: '>=0.10.0'}
+
   is-path-cwd@2.2.0:
     resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
     engines: {node: '>=6'}
 
+  is-path-in-cwd@1.0.1:
+    resolution: {integrity: sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-path-inside@1.0.1:
+    resolution: {integrity: sha512-qhsCR/Esx4U4hg/9I19OVUAJkGWtjRYHMRgUMZE2TDdj+Ag+kttZanLupfddNyglzz50cUlmWzUaI37GDfNx/g==}
+    engines: {node: '>=0.10.0'}
+
   is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
@@ -11790,6 +12376,11 @@ packages:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
 
+  is-podman@1.0.1:
+    resolution: {integrity: sha512-+5vbtF5FIg262iUa7gOIseIWTx0740RHiax7oSmJMhbfSoBIMQ/IacKKgfnGj65JGeH9lGEVQcdkDwhn1Em1mQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -11858,6 +12449,9 @@ packages:
   is-url@1.2.4:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
 
+  is-utf8@0.2.1:
+    resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -11893,6 +12487,9 @@ packages:
     resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
     engines: {node: '>=18'}
 
+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -12007,6 +12604,12 @@ packages:
   jpeg-js@0.4.4:
     resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
 
+  js-md4@0.3.2:
+    resolution: {integrity: sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==}
+
+  js-tokens@3.0.2:
+    resolution: {integrity: sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -12198,6 +12801,10 @@ packages:
     resolution: {integrity: sha512-CasD9OCEQSFIam2U8efFK81Yeg8vNMTBUqtMOHlrcWQHqUX3HeCl9Dr31u4toV7emlH8Mymk5+9p0lL6mKb/Xw==}
     engines: {node: '>=14.16'}
 
+  kysely@0.27.4:
+    resolution: {integrity: sha512-dyNKv2KRvYOQPLCAOCjjQuCk4YFd33BvGdf/o5bC7FiW+BB6snA81Zt+2wT9QDFzKqxKa5rrOmvlK/anehCcgA==}
+    engines: {node: '>=14.0.0'}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -12261,6 +12868,9 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  linux-platform-info@0.0.3:
+    resolution: {integrity: sha512-FZhfFOIz0i4EGAvM4fQz+eayE9YzMuTx45tbygWYBttNapyiODg85BnAlQ1xnahEkvIM87T98XhXSfW8JAClHg==}
+
   listhen@1.7.2:
     resolution: {integrity: sha512-7/HamOm5YD9Wb7CFgAZkKgVPA96WwhcTQoqtm2VTZGVbVVn3IWKRBTgrU7cchA3Q8k9iCsG8Osoi9GX4JsGM9g==}
     hasBin: true
@@ -12402,6 +13012,9 @@ packages:
     resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
     engines: {node: '>=18'}
 
+  log-update-async-hook@2.0.7:
+    resolution: {integrity: sha512-V9KpD1AZUBd/oiZ+/Xsgd5rRP9awhgtRiDv5Am4VQCixiDnAbXMdt/yKz41kCzYZtVbwC6YCxnWEF3zjNEwktA==}
+
   loglevel-plugin-prefix@0.8.4:
     resolution: {integrity: sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==}
 
@@ -12448,6 +13061,9 @@ packages:
     resolution: {integrity: sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==}
     engines: {node: 14 || >=16.14}
 
+  lru-cache@2.6.3:
+    resolution: {integrity: sha512-qkisDmHMe8gxKujmC1BdaqgkoFlioLDCUwaFBA3lX8Ilhr3YzsasbGYaiADMjxQnj+aiZUKgGKe/BN3skMwXWw==}
+
   lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
 
@@ -12466,6 +13082,13 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  macos-release@3.2.0:
+    resolution: {integrity: sha512-fSErXALFNsnowREYZ49XCdOHF8wOPWuFOGQrAhP7x5J/BqQv+B02cNsTykGpDgRVx43EKg++6ANmTaGTtW+hUA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
@@ -12533,6 +13156,9 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
+  match-url-wildcard@0.0.4:
+    resolution: {integrity: sha512-R1XhQaamUZPWLOPtp4ig5j+3jctN+skhgRmEQTUamMzmNtRG69QEirQs0NZKLtHMR7tzWpmtnS4Eqv65DcgXUA==}
+
   md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
 
@@ -12657,6 +13283,9 @@ packages:
     peerDependencies:
       tslib: '2'
 
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
 
@@ -12675,6 +13304,9 @@ packages:
   merge-descriptors@1.0.1:
     resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
 
+  merge-stream@1.0.1:
+    resolution: {integrity: sha512-e6RM36aegd4f+r8BZCcYXlO2P3H6xbUM6ktL2Xmf45GAOit9bI4z6/3VU7JwllVO1L7u0UDSg/EhzQ5lmMLolA==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -12903,6 +13535,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime@1.4.1:
+    resolution: {integrity: sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==}
+    hasBin: true
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -12923,6 +13559,10 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  mimic-fn@1.2.0:
+    resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
+    engines: {node: '>=4'}
+
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
@@ -12975,6 +13615,10 @@ packages:
     resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
     engines: {node: '>=10'}
 
+  minimatch@8.0.4:
+    resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -13001,6 +13645,10 @@ packages:
     resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
     engines: {node: '>=8'}
 
+  minipass@4.2.8:
+    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
+    engines: {node: '>=8'}
+
   minipass@5.0.0:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
@@ -13051,6 +13699,9 @@ packages:
   module-details-from-path@1.0.3:
     resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==}
 
+  moment-duration-format-commonjs@1.0.1:
+    resolution: {integrity: sha512-KhKZRH21/+ihNRWrmdNFOyBptFi7nAWZFeFsRRpXkzgk/Yublb4fxyP0jU6EY1VDxUL/VUPdCmm/wAnpbfXdfw==}
+
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
@@ -13085,6 +13736,11 @@ packages:
     resolution: {integrity: sha512-KL8QYUaxq7kUbcl0Yto51rMcYt7E/4N4BG3/c96Iqw1PQrTRspu8Cpx4TZ4Nunib1d4bEkIH3gjCYlP2RLBdow==}
     engines: {node: '>=0.10.0'}
 
+  mustache@2.3.2:
+    resolution: {integrity: sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ==}
+    engines: {npm: '>=1.4.0'}
+    hasBin: true
+
   mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
 
@@ -13100,6 +13756,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.7:
+    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   nanospinner@1.1.0:
     resolution: {integrity: sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==}
 
@@ -13239,6 +13900,9 @@ packages:
     resolution: {integrity: sha512-VSjFxUhRhkyed8AtLwSCkMrJRfQ3e2lGtG3sP6FEgaLKBBbxM/dLfjRe1+iLhjvyLFW3tBQ8+c0pcOtXGbAZJg==}
     engines: {node: '>=10'}
 
+  noms@0.0.0:
+    resolution: {integrity: sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==}
+
   nopt@5.0.0:
     resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
     engines: {node: '>=6'}
@@ -13400,6 +14064,10 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  onetime@2.0.1:
+    resolution: {integrity: sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==}
+    engines: {node: '>=4'}
+
   onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
@@ -13454,6 +14122,9 @@ packages:
   os-browserify@0.3.0:
     resolution: {integrity: sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==}
 
+  os-family@1.1.0:
+    resolution: {integrity: sha512-E3Orl5pvDJXnVmpaAA2TeNNpNhTMl4o5HghuWhOivBjEiTnJSrMYSa5uZMek1lBEvu8kKEsa2YgVcGFVDqX/9w==}
+
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -13486,6 +14157,10 @@ packages:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
 
+  p-finally@2.0.1:
+    resolution: {integrity: sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==}
+    engines: {node: '>=8'}
+
   p-is-promise@1.1.0:
     resolution: {integrity: sha512-zL7VE4JVS2IFSkR2GQKDSPEVxkoH43/p7oEnwpdCndKYJO0HVeRB7fA8TJwuLOTBREtK0ea8eHaxdwcpob5dmg==}
     engines: {node: '>=4'}
@@ -13522,10 +14197,18 @@ packages:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-map@1.2.0:
+    resolution: {integrity: sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==}
+    engines: {node: '>=4'}
+
   p-map@2.1.0:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
     engines: {node: '>=6'}
 
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
   p-map@4.0.0:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
     engines: {node: '>=10'}
@@ -13601,6 +14284,12 @@ packages:
   parse5-htmlparser2-tree-adapter@7.0.0:
     resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
 
+  parse5@1.5.1:
+    resolution: {integrity: sha512-w2jx/0tJzvgKwZa58sj2vAYq/S/K1QJfIB3cWYea/Iu1scFPDQQ3IQiVZTHWtRBwAjv2Yd7S/xeZf3XqLDb3bA==}
+
+  parse5@2.2.3:
+    resolution: {integrity: sha512-yJQdbcT+hCt6HD+BuuUvjHUdNwerQIKSJSm7tXjtp6oIH5Mxbzlt/VIIeWxblsgcDt1+E7kxPeilD5McWswStA==}
+
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
 
@@ -13648,6 +14337,9 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+
   path-key@2.0.1:
     resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
     engines: {node: '>=4'}
@@ -13726,10 +14418,18 @@ packages:
     resolution: {integrity: sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==}
     engines: {node: '>=10'}
 
+  pinkie-promise@1.0.0:
+    resolution: {integrity: sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==}
+    engines: {node: '>=0.10.0'}
+
   pinkie-promise@2.0.1:
     resolution: {integrity: sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==}
     engines: {node: '>=0.10.0'}
 
+  pinkie@1.0.0:
+    resolution: {integrity: sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==}
+    engines: {node: '>=0.10.0'}
+
   pinkie@2.0.4:
     resolution: {integrity: sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==}
     engines: {node: '>=0.10.0'}
@@ -13763,6 +14463,10 @@ packages:
   pkg-types@1.1.1:
     resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
 
+  pkg-up@3.1.0:
+    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
+    engines: {node: '>=8'}
+
   playwright-core@1.39.0:
     resolution: {integrity: sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==}
     engines: {node: '>=16'}
@@ -13791,6 +14495,10 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  pngjs@3.4.0:
+    resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
+    engines: {node: '>=4.0.0'}
+
   pngjs@7.0.0:
     resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
     engines: {node: '>=14.19.0'}
@@ -13957,6 +14665,9 @@ packages:
     resolution: {integrity: sha512-zLaJ9b8hnC564fnJH6NFSOGZYYdzrAJn2JUUIwzoQb32fG2QAakpDNM+CZo1km6keXkRXRM+hml1BFAPVnPkxg==}
     engines: {node: '>=16'}
 
+  promisify-event@1.0.0:
+    resolution: {integrity: sha512-mshw5LiFmdtphcuUGKyd3t6zmmgIVxrdZ8v4R1INAXHvMemUsDCqIUeq5QUIqqDfed8ZZ6uhov1PqhrdBvHOIA==}
+
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -14053,6 +14764,9 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
+  proxy-target@3.0.2:
+    resolution: {integrity: sha512-FFE1XNwXX/FNC3/P8HiKaJSy/Qk68RitG/QEcLy/bVnTAPlgTAWPZKh0pARLAnpfXQPKyalBhk009NRTgsk8vQ==}
+
   pseudomap@1.0.2:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
 
@@ -14102,6 +14816,10 @@ packages:
   qr-creator@1.0.0:
     resolution: {integrity: sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==}
 
+  qrcode-terminal@0.10.0:
+    resolution: {integrity: sha512-ZvWjbAj4MWAj6bnCc9CnculsXnJr7eoKsvH/8rVpZbqYxP2z05HNQa43ZVwe/dVRcFxgfFHE2CkUqn0sCyLfHw==}
+    hasBin: true
+
   qs@6.11.0:
     resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
     engines: {node: '>=0.6'}
@@ -14252,13 +14970,27 @@ packages:
       '@types/react':
         optional: true
 
+  react-window@1.8.10:
+    resolution: {integrity: sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==}
+    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
+
   react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
+  read-file-relative@1.2.0:
+    resolution: {integrity: sha512-lwZUlN2tQyPa62/XmVtX1MeNLVutlRWwqvclWU8YpOCgjKdhg2zyNkeFjy7Rnjo3txhKCy5FGgAi+vx59gvkYg==}
+
   read-pkg-up@10.0.0:
     resolution: {integrity: sha512-jgmKiS//w2Zs+YbX039CorlkOp8FIVbSAN8r8GJHDsGlmNPXo+VeHkqAwCiQVTTx5/LwLZTcEw59z3DvcLbr0g==}
     engines: {node: '>=16'}
@@ -14283,6 +15015,9 @@ packages:
     resolution: {integrity: sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==}
     engines: {node: '>=0.8'}
 
+  readable-stream@1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -14445,6 +15180,14 @@ packages:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
 
+  repeating@1.1.3:
+    resolution: {integrity: sha512-Nh30JLeMHdoI+AsQ5eblhZ7YlTsM9wiJQe/AHIunlK3KWzvXhXb36IJ7K1IOeRjIOtzMjdUHjwXUFxKJoPTSOg==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  replicator@1.0.5:
+    resolution: {integrity: sha512-saxS4y7NFkLMa92BR4bPHR41GD+f/qoDAwD2xZmN+MpDXgibkxwLO2qk7dCHYtskSkd/bWS8Jy6kC5MZUkg1tw==}
+
   request-light@0.7.0:
     resolution: {integrity: sha512-lMbBMrDoxgsyO+yB3sDcrDuX85yYt7sS8BfQd11jtbW/z5ZWgLZRcEGLsLoYw7I0WSUGQBs8CC8ScIxkTX1+6Q==}
 
@@ -14473,13 +15216,24 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
+  reselect@4.1.8:
+    resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
+
   resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
 
+  resolve-cwd@1.0.0:
+    resolution: {integrity: sha512-ac27EnKWWlc2yQ/5GCoCGecqVJ9MSmgiwvUYOS+9A+M0dn1FdP5mnsDZ9gwx+lAvh/d7f4RFn4jLfggRRYxPxw==}
+    engines: {node: '>=0.10.0'}
+
   resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
 
+  resolve-from@2.0.0:
+    resolution: {integrity: sha512-qpFcKaXsq8+oRoLilkwyc7zHGF5i9Q2/25NIgLQQ/+VVv9rU4qvr6nXVAw1DsnXJyQkZsR4Ytfbtg5ehfcUssQ==}
+    engines: {node: '>=0.10.0'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -14580,6 +15334,13 @@ packages:
   ripemd160@2.0.2:
     resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
 
+  rollup-plugin-inject@3.0.2:
+    resolution: {integrity: sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==}
+    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
+
+  rollup-plugin-node-polyfills@0.2.1:
+    resolution: {integrity: sha512-4kCrKPTJ6sK4/gLL/U5QzVT8cxJcofO0OU74tnB19F40cmuAKSzH5/siithxlofFEjwvw1YAhPmbvGNA6jEroA==}
+
   rollup-plugin-peer-deps-external@2.2.4:
     resolution: {integrity: sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==}
     peerDependencies:
@@ -14689,6 +15450,9 @@ packages:
   sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
 
+  sanitize-filename@1.6.3:
+    resolution: {integrity: sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==}
+
   satori-html@0.3.2:
     resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==}
 
@@ -14836,6 +15600,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-quote@1.8.1:
+    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
+
   shiki@0.11.1:
     resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
 
@@ -15021,6 +15788,9 @@ packages:
   spacetrim@0.11.25:
     resolution: {integrity: sha512-SWxXDROciuJs9YEYXUBjot5k/cqNGPPbT3QmkInFne4AGc1y+76It+jqU8rfsXKt57RRiunzZn1m9+KfuuNklw==}
 
+  spawn-command@0.0.2:
+    resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==}
+
   spawndamnit@2.0.0:
     resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
 
@@ -15046,6 +15816,17 @@ packages:
   sprintf-js@1.1.3:
     resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
 
+  sqlocal@0.10.1:
+    resolution: {integrity: sha512-ZrnEYuBPuSukxWTQnoyOjVQFKGGPkDti0KK58jGMk4SIXBe43x0V9iCN4kViNN5y/1cS8+J9bCI8j+N/e2g15g==}
+    peerDependencies:
+      drizzle-orm: '*'
+      kysely: '*'
+    peerDependenciesMeta:
+      drizzle-orm:
+        optional: true
+      kysely:
+        optional: true
+
   stable@0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
@@ -15172,6 +15953,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -15193,6 +15977,10 @@ packages:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
 
+  strip-bom@2.0.0:
+    resolution: {integrity: sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==}
+    engines: {node: '>=0.10.0'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -15481,6 +16269,45 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  testcafe-browser-tools@2.0.26:
+    resolution: {integrity: sha512-nTKSJhBzn9BmnOs0xVzXMu8dN2Gu13Ca3x3SJr/zF6ZdKjXO82JlbHu55dt5MFoWjzAQmwlqBkSxPaYicsTgUw==}
+    engines: {node: '>= 0.10'}
+
+  testcafe-hammerhead@31.7.1:
+    resolution: {integrity: sha512-H162ruxCc0wIAkoVky7aQyEntiA6Np8OcWzOx0/2cSPY6BARFdFNd3spu2TB2j3qcpFIZ233IpEx+2sY+VFbjg==}
+    engines: {node: '>=14.0.0'}
+
+  testcafe-legacy-api@5.1.8:
+    resolution: {integrity: sha512-Jp/8xPQ+tjr2iS569Og8fFRaSx/7h/N/t6DVzhWpVNO3D5AtPkGmSjCAABh7tHkUwrKfBI7sLuVaxekiT5PWTA==}
+
+  testcafe-reporter-json@2.2.0:
+    resolution: {integrity: sha512-wfpNaZgGP2WoqdmnIXOyxcpwSzdH1HvzXSN397lJkXOrQrwhuGUThPDvyzPnZqxZSzXdDUvIPJm55tCMWbfymQ==}
+    engines: {node: '>=8.0.0'}
+
+  testcafe-reporter-list@2.2.0:
+    resolution: {integrity: sha512-+6Q2CC+2B90OYED2Yx6GoBIMUYd5tADNUbOHu3Hgdd3qskzjBdKwpdDt0b7w0w7oYDO1/Uu4HDBTDud3lWpD4Q==}
+
+  testcafe-reporter-minimal@2.2.0:
+    resolution: {integrity: sha512-iUSWI+Z+kVUAsGegMmEXKDiMPZHDxq+smo4utWwc3wI3Tk6jT8PbNvsROQAjwkMKDmnpo6To5vtyvzvK+zKGXA==}
+
+  testcafe-reporter-spec@2.2.0:
+    resolution: {integrity: sha512-4jUN75Y7eaHQfSjiCLBXt/TvJMW76kBaZGC74sq03FJNBLoo8ibkEFzfjDJzNDCRYo+P7FjCx3vxGrzgfQU26w==}
+
+  testcafe-reporter-xunit@2.2.3:
+    resolution: {integrity: sha512-aGyc+MZPsTNwd9SeKJSjFNwEZfILzFnObzOImaDbsf57disTQfEY+9japXWav/Ef5Cv04UEW24bTFl2Q4f8xwg==}
+
+  testcafe-safe-storage@1.1.6:
+    resolution: {integrity: sha512-WFm1UcmO3uZs+uW8lYtBBJpnrvgTKkMQMKG9BvTEKbjeqhonEXVTxOkGEs3DM1ZB/ylPuwh7Jux7qUtjcM/D2Q==}
+    deprecated: The testcafe-safe-storage package has reached end-of-life and will not receive further updates.
+
+  testcafe-selector-generator@0.1.0:
+    resolution: {integrity: sha512-MTw+RigHsEYmFgzUFNErDxui1nTYUk6nm2bmfacQiKPdhJ9AHW/wue4J/l44mhN8x3E8NgOUkHHOI+1TDFXiLQ==}
+
+  testcafe@3.6.0:
+    resolution: {integrity: sha512-GrCw4udtrTpAUokzasI2FCRDCXiB6uhBs8BGpRffNrVUvlRFYeF9zjIShuDGf8vvRsOsv3+ZXvq5CGvVAmiuzQ==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+
   text-decoder@1.1.0:
     resolution: {integrity: sha512-TmLJNj6UgX8xcUZo4UDStGQtDiTzF7BzWlzn9g7UWrjkpHr5uJTK1ld16wZ3LXb2vb6jH8qU89dW5whuMdXYdw==}
 
@@ -15513,6 +16340,10 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  time-limit-promise@1.0.4:
+    resolution: {integrity: sha512-FLHDDsIDducw7MBcRWlFtW2Tm50DoKOSFf0Nzx17qwXj8REXCte0eUkHrJl9QU3Bl9arG3XNYX0PcHpZ9xyuLw==}
+    engines: {node: '>= 0.12'}
+
   timed-out@4.0.1:
     resolution: {integrity: sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==}
     engines: {node: '>=0.10.0'}
@@ -15551,6 +16382,10 @@ packages:
   tmp-promise@3.0.3:
     resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
 
+  tmp@0.0.28:
+    resolution: {integrity: sha512-c2mmfiBmND6SOVxzogm1oda0OJ1HZVIk/5n26N59dDTh80MUeavpiCls4PGAdkX1PFkKokLpcf7prSjCeXLsJg==}
+    engines: {node: '>=0.4.0'}
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -15592,6 +16427,10 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+    engines: {node: '>=6'}
+
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -15621,6 +16460,9 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
+  truncate-utf8-bytes@1.0.2:
+    resolution: {integrity: sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==}
+
   ts-api-utils@1.3.0:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -15851,6 +16693,11 @@ packages:
       typescript:
         optional: true
 
+  typescript@4.7.4:
+    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+
   typescript@4.9.5:
     resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
     engines: {node: '>=4.2.0'}
@@ -15925,6 +16772,9 @@ packages:
   unctx@2.3.1:
     resolution: {integrity: sha512-PhKke8ZYauiqh3FEMVNm7ljvzQiph0Mt3GBRve03IJm7ukfaON2OBK795tLwhbyfzknuRRkW0+Ze+CQUmzOZ+A==}
 
+  underscore@1.12.1:
+    resolution: {integrity: sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==}
+
   underscore@1.13.6:
     resolution: {integrity: sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==}
 
@@ -16101,6 +16951,9 @@ packages:
   unplugin@1.5.1:
     resolution: {integrity: sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==}
 
+  unquote@1.1.1:
+    resolution: {integrity: sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==}
+
   unstorage@1.10.2:
     resolution: {integrity: sha512-cULBcwDqrS8UhlIysUJs2Dk0Mmt8h7B0E6mtR+relW9nZvsf/u4SkAYyNliPiPW7XtFNb5u3IUMkxGxFTTRTgQ==}
     peerDependencies:
@@ -16182,6 +17035,10 @@ packages:
     resolution: {integrity: sha512-0kQLIzG4fdk/G5NONku64rSH/x32NOA39LVQqlK8Le6lvTF6GGRJpqaQFGgU+CLwySIqBSMdwYM0sYcW9f6P4A==}
     engines: {node: '>= 4'}
 
+  url-to-options@2.0.0:
+    resolution: {integrity: sha512-mfONnc9dqO0J41wUh/El+plDskrIJRcyLcx6WjEGYW2K11RnjPDAgeoNFCallADaYJfcWIvAlYyZPBw02AbfIQ==}
+    engines: {node: '>=8'}
+
   url@0.11.3:
     resolution: {integrity: sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==}
 
@@ -16218,6 +17075,9 @@ packages:
     resolution: {integrity: sha512-ayFKY3H+Pwfy4W98yPdtH1VqH4psDeyW8lYYFzfecR9d6hqLpqhecktvYR3SEEXt7vG0S1JEpciI3g94pMErig==}
     engines: {node: '>= 0.8.0'}
 
+  utf8-byte-length@1.0.5:
+    resolution: {integrity: sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==}
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -16228,6 +17088,10 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
+  uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -16372,6 +17236,11 @@ packages:
       svelte: ^3.0.0
       vite: '>=0.20.8 <2.0.0'
 
+  vite-plugin-top-level-await@1.4.1:
+    resolution: {integrity: sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw==}
+    peerDependencies:
+      vite: '>=2.8'
+
   vite-plugin-watch@0.2.0:
     resolution: {integrity: sha512-MBlqIuL8OW6YBgsDuIq39/2HPOjz9E1na595k3EoFQVFJiL3IfnKGKrqNe6OYj+LIA67opun13YvgterMWSqgA==}
     engines: {node: '>=10.6.0'}
@@ -16412,6 +17281,34 @@ packages:
       terser:
         optional: true
 
+  vite@5.2.12:
+    resolution: {integrity: sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
   vite@5.3.2:
     resolution: {integrity: sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -16734,6 +17631,9 @@ packages:
     resolution: {integrity: sha512-MOiaDbA5ZZgUjkeMWM5EkJp4loW5ZRoa5bc3/aeMox/PJelMhE6t7S/mLuiY43DBupyxH+S0U1bTui9kWUlmsw==}
     engines: {node: '>=8.15'}
 
+  which-promise@1.0.0:
+    resolution: {integrity: sha512-15ahjtDr3H+RBtTrvBcKhOFhIEiN3RZSCevDPWtBys+QUivZX9cYyNJcyWNIrUMVsgGrEuIThif9jxeEAQFauw==}
+
   which-typed-array@1.1.15:
     resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
     engines: {node: '>= 0.4'}
@@ -16767,6 +17667,10 @@ packages:
   wildcard@2.0.1:
     resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
 
+  windows-release@5.1.1:
+    resolution: {integrity: sha512-NMD00arvqcq2nwqc5Q6KtrSRHK+fVD31erE5FEMahAw5PmVCgD7MUXodq3pdZSUkqA9Cda2iWx6s1XYwiJWRmw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -16810,6 +17714,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@8.13.0:
     resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
     engines: {node: '>=10.0.0'}
@@ -16977,6 +17893,8 @@ snapshots:
       tunnel: 0.0.6
       undici: 5.28.4
 
+  '@adobe/css-tools@4.4.0': {}
+
   '@algolia/cache-browser-local-storage@4.20.0':
     dependencies:
       '@algolia/cache-common': 4.20.0
@@ -17055,9 +17973,9 @@ snapshots:
 
   '@antfu/utils@0.7.8': {}
 
-  '@astrojs/check@0.7.0(prettier@2.8.3)(typescript@5.5.2)':
+  '@astrojs/check@0.7.0(prettier@3.3.2)(typescript@5.5.2)':
     dependencies:
-      '@astrojs/language-server': 2.10.0(prettier@2.8.3)(typescript@5.5.2)
+      '@astrojs/language-server': 2.10.0(prettier@3.3.2)(typescript@5.5.2)
       chokidar: 3.6.0
       fast-glob: 3.3.2
       kleur: 4.1.5
@@ -17075,7 +17993,7 @@ snapshots:
 
   '@astrojs/internal-helpers@0.4.1': {}
 
-  '@astrojs/language-server@2.10.0(prettier@2.8.3)(typescript@5.5.2)':
+  '@astrojs/language-server@2.10.0(prettier@3.3.2)(typescript@5.5.2)':
     dependencies:
       '@astrojs/compiler': 2.8.1
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -17088,13 +18006,13 @@ snapshots:
       volar-service-css: 0.0.45(@volar/language-service@2.2.5)
       volar-service-emmet: 0.0.45(@volar/language-service@2.2.5)
       volar-service-html: 0.0.45(@volar/language-service@2.2.5)
-      volar-service-prettier: 0.0.45(@volar/language-service@2.2.5)(prettier@2.8.3)
+      volar-service-prettier: 0.0.45(@volar/language-service@2.2.5)(prettier@3.3.2)
       volar-service-typescript: 0.0.45(@volar/language-service@2.2.5)
       volar-service-typescript-twoslash-queries: 0.0.45(@volar/language-service@2.2.5)
       vscode-html-languageservice: 5.2.0
       vscode-uri: 3.0.8
     optionalDependencies:
-      prettier: 2.8.3
+      prettier: 3.3.2
     transitivePeerDependencies:
       - typescript
 
@@ -17458,6 +18376,28 @@ snapshots:
       regexpu-core: 5.3.2
       semver: 6.3.1
 
+  '@babel/helper-define-polyfill-provider@0.4.4(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-compilation-targets': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      debug: 4.3.5
+      lodash.debounce: 4.0.8
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-define-polyfill-provider@0.5.0(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-compilation-targets': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      debug: 4.3.5
+      lodash.debounce: 4.0.8
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -17621,6 +18561,24 @@ snapshots:
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-environment-visitor': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/helper-remap-async-to-generator': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
+      '@babel/helper-plugin-utils': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-proposal-decorators@7.24.7(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -17630,6 +18588,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/compat-data': 7.24.7
+      '@babel/core': 7.24.7
+      '@babel/helper-compilation-targets': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.7)
+      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.24.7)
+
+  '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.7)
+      '@babel/helper-plugin-utils': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -18022,6 +18997,18 @@ snapshots:
       '@babel/core': 7.21.4
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-react-display-name@7.24.7(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+
+  '@babel/plugin-transform-react-jsx-development@7.24.7':
+    dependencies:
+      '@babel/plugin-transform-react-jsx': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-react-jsx-development@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -18035,7 +19022,6 @@ snapshots:
       '@babel/plugin-transform-react-jsx': 7.24.7(@babel/core@7.24.7)
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   '@babel/plugin-transform-react-jsx-self@7.24.7(@babel/core@7.24.7)':
     dependencies:
@@ -18047,6 +19033,17 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-react-jsx@7.24.7':
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.21.4)
+      '@babel/types': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -18075,6 +19072,12 @@ snapshots:
       '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-react-pure-annotations@7.24.7(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+
   '@babel/plugin-transform-regenerator@7.24.7(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -18086,6 +19089,18 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-runtime@7.23.3(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.24.7)
+      babel-plugin-polyfill-corejs3: 0.8.7(@babel/core@7.24.7)
+      babel-plugin-polyfill-regenerator: 0.5.5(@babel/core@7.24.7)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-runtime@7.24.7(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -18272,6 +19287,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-react@7.24.7(@babel/core@7.24.7)':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/helper-validator-option': 7.24.7
+      '@babel/plugin-transform-react-display-name': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-react-jsx': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-react-jsx-development': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-react-pure-annotations': 7.24.7(@babel/core@7.24.7)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/preset-typescript@7.24.7(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
@@ -18294,6 +19321,10 @@ snapshots:
 
   '@babel/regjsgen@0.8.0': {}
 
+  '@babel/runtime@7.24.5':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/runtime@7.24.7':
     dependencies:
       regenerator-runtime: 0.14.1
@@ -18522,8 +19553,26 @@ snapshots:
       '@deno/shim-deno-test': 0.5.0
       which: 4.0.0
 
+  '@devexpress/bin-v8-flags-filter@1.3.0': {}
+
+  '@devexpress/callsite-record@4.1.7':
+    dependencies:
+      '@types/lodash': 4.17.4
+      callsite: 1.0.0
+      chalk: 2.4.2
+      error-stack-parser: 2.1.4
+      highlight-es: 1.0.3
+      lodash: 4.17.21
+      pinkie-promise: 2.0.1
+
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@electron/asar@3.2.10':
+    dependencies:
+      commander: 5.1.0
+      glob: 7.2.3
+      minimatch: 3.1.2
+
   '@emmetio/abbreviation@2.3.3':
     dependencies:
       '@emmetio/scanner': 1.0.4
@@ -18571,6 +19620,16 @@ snapshots:
       '@esbuild-kit/core-utils': 3.3.2
       get-tsconfig: 4.7.5
 
+  '@esbuild-plugins/node-globals-polyfill@0.2.3(esbuild@0.21.5)':
+    dependencies:
+      esbuild: 0.21.5
+
+  '@esbuild-plugins/node-modules-polyfill@0.2.2(esbuild@0.21.5)':
+    dependencies:
+      esbuild: 0.21.5
+      escape-string-regexp: 4.0.0
+      rollup-plugin-node-polyfills: 0.2.1
+
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
 
@@ -19526,9 +20585,9 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@nrwl/cypress@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)':
+  '@nrwl/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
-      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
+      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -19543,15 +20602,15 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nrwl/devkit@18.3.5(nx@18.3.5)':
+  '@nrwl/devkit@18.3.5(nx@18.3.5(@swc/core@1.6.13))':
     dependencies:
-      '@nx/devkit': 18.3.5(nx@18.3.5)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
     transitivePeerDependencies:
       - nx
 
-  '@nrwl/js@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.4.5)':
+  '@nrwl/js@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
     dependencies:
-      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.4.5)
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -19564,9 +20623,9 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nrwl/js@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)':
+  '@nrwl/js@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
-      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -19585,9 +20644,9 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  '@nrwl/storybook@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)':
+  '@nrwl/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
-      '@nx/storybook': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
+      '@nx/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -19602,38 +20661,38 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nrwl/tao@18.3.3':
+  '@nrwl/tao@18.3.3(@swc/core@1.6.13)':
     dependencies:
-      nx: 18.3.3
+      nx: 18.3.3(@swc/core@1.6.13)
       tslib: 2.6.3
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nrwl/tao@18.3.5':
+  '@nrwl/tao@18.3.5(@swc/core@1.6.13)':
     dependencies:
-      nx: 18.3.5
+      nx: 18.3.5(@swc/core@1.6.13)
       tslib: 2.6.3
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nrwl/workspace@18.3.5':
+  '@nrwl/workspace@18.3.5(@swc/core@1.6.13)':
     dependencies:
-      '@nx/workspace': 18.3.5
+      '@nx/workspace': 18.3.5(@swc/core@1.6.13)
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/cypress@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)':
+  '@nx/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
-      '@nrwl/cypress': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
-      '@nx/devkit': 18.3.5(nx@18.3.5)
-      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)
-      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)
+      '@nrwl/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.5.2)
       detect-port: 1.6.1
       semver: 7.6.2
@@ -19651,23 +20710,23 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/devkit@18.3.5(nx@18.3.5)':
+  '@nx/devkit@18.3.5(nx@18.3.5(@swc/core@1.6.13))':
     dependencies:
-      '@nrwl/devkit': 18.3.5(nx@18.3.5)
+      '@nrwl/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
       ejs: 3.1.10
       enquirer: 2.3.6
       ignore: 5.3.1
-      nx: 18.3.5
+      nx: 18.3.5(@swc/core@1.6.13)
       semver: 7.6.2
       tmp: 0.2.3
       tslib: 2.6.3
       yargs-parser: 21.1.1
 
-  '@nx/eslint@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)':
+  '@nx/eslint@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))':
     dependencies:
-      '@nx/devkit': 18.3.5(nx@18.3.5)
-      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.4.5)
-      '@nx/linter': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@nx/linter': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
       eslint: 8.57.0
       tslib: 2.6.3
       typescript: 5.4.5
@@ -19684,7 +20743,7 @@ snapshots:
       - supports-color
       - verdaccio
 
-  '@nx/js@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.4.5)':
+  '@nx/js@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.24.7)
@@ -19693,9 +20752,9 @@ snapshots:
       '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
       '@babel/runtime': 7.24.7
-      '@nrwl/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.4.5)
-      '@nx/devkit': 18.3.5(nx@18.3.5)
-      '@nx/workspace': 18.3.5
+      '@nrwl/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/workspace': 18.3.5(@swc/core@1.6.13)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.4.5)
       babel-plugin-const-enum: 1.2.0(@babel/core@7.24.7)
       babel-plugin-macros: 2.8.0
@@ -19713,7 +20772,7 @@ snapshots:
       ora: 5.3.0
       semver: 7.6.2
       source-map-support: 0.5.19
-      ts-node: 10.9.1(@types/node@20.14.9)(typescript@5.4.5)
+      ts-node: 10.9.1(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.4.5)
       tsconfig-paths: 4.2.0
       tslib: 2.6.3
     transitivePeerDependencies:
@@ -19727,7 +20786,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nx/js@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)':
+  '@nx/js@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.24.7)
@@ -19736,9 +20795,9 @@ snapshots:
       '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
       '@babel/runtime': 7.24.7
-      '@nrwl/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)
-      '@nx/devkit': 18.3.5(nx@18.3.5)
-      '@nx/workspace': 18.3.5
+      '@nrwl/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/workspace': 18.3.5(@swc/core@1.6.13)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.5.2)
       babel-plugin-const-enum: 1.2.0(@babel/core@7.24.7)
       babel-plugin-macros: 2.8.0
@@ -19756,7 +20815,7 @@ snapshots:
       ora: 5.3.0
       semver: 7.6.2
       source-map-support: 0.5.19
-      ts-node: 10.9.1(@types/node@20.14.9)(typescript@5.5.2)
+      ts-node: 10.9.1(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.5.2)
       tsconfig-paths: 4.2.0
       tslib: 2.6.3
     transitivePeerDependencies:
@@ -19770,9 +20829,9 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nx/linter@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)':
+  '@nx/linter@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))':
     dependencies:
-      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)
+      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
@@ -19845,13 +20904,13 @@ snapshots:
   '@nx/nx-win32-x64-msvc@18.3.5':
     optional: true
 
-  '@nx/storybook@18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)':
+  '@nx/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
-      '@nrwl/storybook': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
-      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)(typescript@5.5.2)
-      '@nx/devkit': 18.3.5(nx@18.3.5)
-      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5)
-      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@types/node@20.14.9)(nx@18.3.5)(typescript@5.5.2)
+      '@nrwl/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.5.2)
       semver: 7.6.2
       tslib: 2.6.3
@@ -19869,13 +20928,13 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/workspace@18.3.5':
+  '@nx/workspace@18.3.5(@swc/core@1.6.13)':
     dependencies:
-      '@nrwl/workspace': 18.3.5
-      '@nx/devkit': 18.3.5(nx@18.3.5)
+      '@nrwl/workspace': 18.3.5(@swc/core@1.6.13)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
       chalk: 4.1.2
       enquirer: 2.3.6
-      nx: 18.3.5
+      nx: 18.3.5(@swc/core@1.6.13)
       tslib: 2.6.3
       yargs-parser: 21.1.1
     transitivePeerDependencies:
@@ -20299,13 +21358,34 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
       '@babel/code-frame': 7.24.7
       '@babel/core': 7.24.7
       '@babel/plugin-transform-react-jsx': 7.24.7(@babel/core@7.24.7)
       '@babel/plugin-transform-react-jsx-development': 7.24.7(@babel/core@7.24.7)
-      '@prefresh/vite': 2.4.6(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@prefresh/vite': 2.4.6(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@rollup/pluginutils': 4.2.1
+      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.7)
+      debug: 4.3.5
+      kolorist: 1.8.0
+      magic-string: 0.30.5
+      node-html-parser: 6.1.13
+      resolve: 1.22.8
+      source-map: 0.7.4
+      stack-trace: 1.0.0-pre2
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+    transitivePeerDependencies:
+      - preact
+      - supports-color
+    optional: true
+
+  '@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/plugin-transform-react-jsx': 7.24.7
+      '@babel/plugin-transform-react-jsx-development': 7.24.7
+      '@prefresh/vite': 2.4.6(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@rollup/pluginutils': 4.2.1
       babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.7)
       debug: 4.3.5
@@ -20324,22 +21404,19 @@ snapshots:
   '@prefresh/babel-plugin@0.5.1':
     optional: true
 
-  '@prefresh/core@1.5.2(preact@10.22.0)':
-    dependencies:
-      preact: 10.22.0
+  '@prefresh/core@1.5.2':
     optional: true
 
   '@prefresh/utils@1.2.0':
     optional: true
 
-  '@prefresh/vite@2.4.6(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@prefresh/vite@2.4.6(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
       '@babel/core': 7.24.7
       '@prefresh/babel-plugin': 0.5.1
-      '@prefresh/core': 1.5.2(preact@10.22.0)
+      '@prefresh/core': 1.5.2
       '@prefresh/utils': 1.2.0
       '@rollup/pluginutils': 4.2.1
-      preact: 10.22.0
       vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
     transitivePeerDependencies:
       - supports-color
@@ -20841,14 +21918,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.18.0
 
-  '@rollup/plugin-inject@5.0.5(rollup@3.29.1)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.1)
-      estree-walker: 2.0.2
-      magic-string: 0.30.10
-    optionalDependencies:
-      rollup: 3.29.1
-
   '@rollup/plugin-inject@5.0.5(rollup@4.18.0)':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@@ -20934,6 +22003,10 @@ snapshots:
     optionalDependencies:
       rollup: 3.29.1
 
+  '@rollup/plugin-virtual@3.0.2(rollup@4.18.0)':
+    optionalDependencies:
+      rollup: 4.18.0
+
   '@rollup/pluginutils@4.2.1':
     dependencies:
       estree-walker: 2.0.2
@@ -21321,11 +22394,11 @@ snapshots:
     dependencies:
       solid-js: 1.8.17
 
-  '@solidjs/start@1.0.2(rollup@3.29.1)(solid-js@1.8.17)(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@solidjs/start@1.0.2(rollup@4.18.0)(solid-js@1.8.17)(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
-      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))
-      '@vinxi/server-components': 0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))
-      '@vinxi/server-functions': 0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))
+      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))
+      '@vinxi/server-components': 0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))
+      '@vinxi/server-functions': 0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))
       defu: 6.1.4
       error-stack-parser: 2.1.4
       glob: 10.4.2
@@ -21336,7 +22409,7 @@ snapshots:
       shikiji: 0.9.19
       source-map-js: 1.2.0
       terracotta: 1.0.5(solid-js@1.8.17)
-      vite-plugin-inspect: 0.7.42(rollup@3.29.1)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      vite-plugin-inspect: 0.7.42(rollup@4.18.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       vite-plugin-solid: 2.10.2(solid-js@1.8.17)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -21347,6 +22420,8 @@ snapshots:
       - vinxi
       - vite
 
+  '@sqlite.org/sqlite-wasm@3.46.0-build2': {}
+
   '@storybook/addon-actions@7.6.19':
     dependencies:
       '@storybook/core-events': 7.6.19
@@ -21502,7 +22577,7 @@ snapshots:
       ejs: 3.1.10
       esbuild: 0.18.20
       esbuild-plugin-alias: 0.2.1
-      express: 4.18.2
+      express: 4.19.2
       find-cache-dir: 3.3.2
       fs-extra: 11.2.0
       process: 0.11.10
@@ -21511,7 +22586,33 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@storybook/channels': 7.6.19
+      '@storybook/client-logger': 7.6.19
+      '@storybook/core-common': 7.6.19
+      '@storybook/csf-plugin': 7.6.19
+      '@storybook/node-logger': 7.6.19
+      '@storybook/preview': 7.6.19
+      '@storybook/preview-api': 7.6.19
+      '@storybook/types': 7.6.19
+      '@types/find-cache-dir': 3.2.1
+      browser-assert: 1.2.1
+      es-module-lexer: 0.9.3
+      express: 4.19.2
+      find-cache-dir: 3.3.2
+      fs-extra: 11.2.0
+      magic-string: 0.30.10
+      rollup: 3.29.1
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+    optionalDependencies:
+      '@preact/preset-vite': 2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      typescript: 5.5.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
       '@storybook/channels': 7.6.19
       '@storybook/client-logger': 7.6.19
@@ -21524,14 +22625,14 @@ snapshots:
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 0.9.3
-      express: 4.18.2
+      express: 4.19.2
       find-cache-dir: 3.3.2
       fs-extra: 11.2.0
       magic-string: 0.30.10
       rollup: 3.29.1
       vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
     optionalDependencies:
-      '@preact/preset-vite': 2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@preact/preset-vite': 2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       typescript: 5.5.2
     transitivePeerDependencies:
       - encoding
@@ -21569,7 +22670,7 @@ snapshots:
       detect-indent: 6.1.0
       envinfo: 7.13.0
       execa: 5.1.1
-      express: 4.18.2
+      express: 4.19.2
       find-up: 5.0.0
       fs-extra: 11.2.0
       get-npm-tarball-url: 2.1.0
@@ -21699,7 +22800,7 @@ snapshots:
       cli-table3: 0.6.3
       compression: 1.7.4
       detect-port: 1.6.1
-      express: 4.18.2
+      express: 4.19.2
       fs-extra: 11.2.0
       globby: 11.1.0
       ip: 2.0.1
@@ -21856,9 +22957,29 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
-      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(preact@10.22.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@storybook/core-server': 7.6.19
+      '@storybook/node-logger': 7.6.19
+      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      magic-string: 0.30.10
+    transitivePeerDependencies:
+      - '@preact/preset-vite'
+      - bufferutil
+      - encoding
+      - lit
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vite
+      - vite-plugin-glimmerx
+
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@storybook/core-server': 7.6.19
       '@storybook/node-logger': 7.6.19
       '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -22060,6 +23181,53 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/core-darwin-arm64@1.6.13':
+    optional: true
+
+  '@swc/core-darwin-x64@1.6.13':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.6.13':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.6.13':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.6.13':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.6.13':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.6.13':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.6.13':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.6.13':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.6.13':
+    optional: true
+
+  '@swc/core@1.6.13(@swc/helpers@0.5.5)':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.9
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.6.13
+      '@swc/core-darwin-x64': 1.6.13
+      '@swc/core-linux-arm-gnueabihf': 1.6.13
+      '@swc/core-linux-arm64-gnu': 1.6.13
+      '@swc/core-linux-arm64-musl': 1.6.13
+      '@swc/core-linux-x64-gnu': 1.6.13
+      '@swc/core-linux-x64-musl': 1.6.13
+      '@swc/core-win32-arm64-msvc': 1.6.13
+      '@swc/core-win32-ia32-msvc': 1.6.13
+      '@swc/core-win32-x64-msvc': 1.6.13
+      '@swc/helpers': 0.5.5
+
   '@swc/counter@0.1.3': {}
 
   '@swc/helpers@0.5.2':
@@ -22071,43 +23239,47 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.6.3
 
+  '@swc/types@0.1.9':
+    dependencies:
+      '@swc/counter': 0.1.3
+
   '@szmarczak/http-timer@5.0.1':
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))':
+  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))':
     dependencies:
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2))
 
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))':
+  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))':
     dependencies:
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
 
-  '@tailwindcss/forms@0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))':
+  '@tailwindcss/forms@0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))':
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2))
 
-  '@tailwindcss/forms@0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))':
+  '@tailwindcss/forms@0.5.7(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))':
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
 
-  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)))':
+  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)))':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2))
 
-  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)))':
+  '@tailwindcss/typography@0.5.13(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)))':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
 
   '@testim/chrome-version@1.1.4': {}
 
@@ -22398,6 +23570,8 @@ snapshots:
     dependencies:
       '@types/node': 20.5.9
 
+  '@types/clone@2.1.4': {}
+
   '@types/compression@1.7.5':
     dependencies:
       '@types/express': 4.17.21
@@ -22454,6 +23628,8 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
 
+  '@types/estree@0.0.46': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/express-serve-static-core@4.19.3':
@@ -22486,6 +23662,11 @@ snapshots:
       '@types/jsonfile': 6.1.4
       '@types/node': 20.5.9
 
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 20.14.9
+
   '@types/glob@8.1.0':
     dependencies:
       '@types/minimatch': 5.1.2
@@ -22533,13 +23714,13 @@ snapshots:
 
   '@types/jsonwebtoken@9.0.6':
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.14.9
 
   '@types/keygrip@1.0.6': {}
 
   '@types/keyv@3.1.4':
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
 
   '@types/lodash.merge@4.6.7':
     dependencies:
@@ -22670,7 +23851,7 @@ snapshots:
 
   '@types/responselike@1.0.3':
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
 
   '@types/sax@1.2.7':
     dependencies:
@@ -22731,17 +23912,17 @@ snapshots:
   '@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint@8.57.0)(typescript@5.3.2)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
-      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
       '@typescript-eslint/scope-manager': 5.56.0
-      '@typescript-eslint/type-utils': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
-      '@typescript-eslint/utils': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/type-utils': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
+      '@typescript-eslint/utils': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
       debug: 4.3.5
       eslint: 8.57.0
       grapheme-splitter: 1.0.4
       ignore: 5.3.1
       natural-compare-lite: 1.4.0
       semver: 7.6.2
-      tsutils: 3.21.0(typescript@5.3.2)
+      tsutils: 3.21.0(typescript@5.0.3)
     optionalDependencies:
       typescript: 5.3.2
     transitivePeerDependencies:
@@ -22815,15 +23996,15 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2)':
+  '@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 5.56.0
       '@typescript-eslint/types': 5.56.0
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.3.2)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.3)
       debug: 4.3.5
       eslint: 8.57.0
     optionalDependencies:
-      typescript: 5.3.2
+      typescript: 5.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -22899,15 +24080,15 @@ snapshots:
       '@typescript-eslint/types': 7.7.0
       '@typescript-eslint/visitor-keys': 7.7.0
 
-  '@typescript-eslint/type-utils@5.56.0(eslint@8.57.0)(typescript@5.3.2)':
+  '@typescript-eslint/type-utils@5.56.0(eslint@8.57.0)(typescript@5.0.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.3.2)
-      '@typescript-eslint/utils': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.3)
+      '@typescript-eslint/utils': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
       debug: 4.3.5
       eslint: 8.57.0
-      tsutils: 3.21.0(typescript@5.3.2)
+      tsutils: 3.21.0(typescript@5.0.3)
     optionalDependencies:
-      typescript: 5.3.2
+      typescript: 5.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -22955,7 +24136,7 @@ snapshots:
 
   '@typescript-eslint/types@7.7.0': {}
 
-  '@typescript-eslint/typescript-estree@5.56.0(typescript@5.3.2)':
+  '@typescript-eslint/typescript-estree@5.56.0(typescript@5.0.3)':
     dependencies:
       '@typescript-eslint/types': 5.56.0
       '@typescript-eslint/visitor-keys': 5.56.0
@@ -22963,9 +24144,9 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.2
-      tsutils: 3.21.0(typescript@5.3.2)
+      tsutils: 3.21.0(typescript@5.0.3)
     optionalDependencies:
-      typescript: 5.3.2
+      typescript: 5.0.3
     transitivePeerDependencies:
       - supports-color
 
@@ -23035,7 +24216,7 @@ snapshots:
       debug: 4.3.5
       globby: 11.1.0
       is-glob: 4.0.3
-      minimatch: 9.0.4
+      minimatch: 9.0.5
       semver: 7.6.2
       ts-api-utils: 1.3.0(typescript@5.2.2)
     optionalDependencies:
@@ -23043,14 +24224,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@5.56.0(eslint@8.57.0)(typescript@5.3.2)':
+  '@typescript-eslint/utils@5.56.0(eslint@8.57.0)(typescript@5.0.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.56.0
       '@typescript-eslint/types': 5.56.0
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.3.2)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.3)
       eslint: 8.57.0
       eslint-scope: 5.1.1
       semver: 7.6.2
@@ -23165,6 +24346,8 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@ungap/with-resolvers@0.1.0': {}
+
   '@vercel/nft@0.22.6':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11
@@ -23222,7 +24405,7 @@ snapshots:
     transitivePeerDependencies:
       - uWebSockets.js
 
-  '@vinxi/plugin-directives@0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))':
+  '@vinxi/plugin-directives@0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))':
     dependencies:
       '@babel/parser': 7.24.7
       acorn: 8.12.0
@@ -23233,29 +24416,29 @@ snapshots:
       magicast: 0.2.11
       recast: 0.23.9
       tslib: 2.6.3
-      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0)
+      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)
 
-  '@vinxi/server-components@0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))':
+  '@vinxi/server-components@0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))':
     dependencies:
-      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))
+      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))
       acorn: 8.12.0
       acorn-loose: 8.4.0
       acorn-typescript: 1.4.13(acorn@8.12.0)
       astring: 1.8.6
       magicast: 0.2.11
       recast: 0.23.9
-      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0)
+      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)
 
-  '@vinxi/server-functions@0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))':
+  '@vinxi/server-functions@0.3.3(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))':
     dependencies:
-      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0))
+      '@vinxi/plugin-directives': 0.3.1(vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1))
       acorn: 8.12.0
       acorn-loose: 8.4.0
       acorn-typescript: 1.4.13(acorn@8.12.0)
       astring: 1.8.6
       magicast: 0.2.11
       recast: 0.23.9
-      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0)
+      vinxi: 0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)
 
   '@vitejs/plugin-react@4.3.0(vite@5.3.2(@types/node@20.14.2)(terser@5.31.1))':
     dependencies:
@@ -23370,6 +24553,13 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
+  '@vitest/web-worker@1.6.0(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))':
+    dependencies:
+      debug: 4.3.5
+      vitest: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
+    transitivePeerDependencies:
+      - supports-color
+
   '@volar/kit@2.2.5(typescript@5.5.2)':
     dependencies:
       '@volar/language-service': 2.2.5
@@ -23824,19 +25014,19 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
-  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))':
+  '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4)
+      webpack: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack@5.91.0)
 
-  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))':
+  '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4)
+      webpack: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack@5.91.0)
 
-  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))':
+  '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))':
     dependencies:
-      webpack: 5.91.0(webpack-cli@5.1.4)
+      webpack: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
       webpack-cli: 5.1.4(webpack@5.91.0)
 
   '@xtuc/ieee754@1.2.0': {}
@@ -23891,6 +25081,10 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  acorn-hammerhead@0.6.2:
+    dependencies:
+      '@types/estree': 0.0.46
+
   acorn-import-assertions@1.9.0(acorn@8.11.3):
     dependencies:
       acorn: 8.11.3
@@ -23923,7 +25117,7 @@ snapshots:
 
   acorn-walk@8.3.3:
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.12.0
 
   acorn@8.11.3: {}
 
@@ -24092,6 +25286,8 @@ snapshots:
       call-bind: 1.0.7
       is-array-buffer: 3.0.4
 
+  array-find@1.0.0: {}
+
   array-flatten@1.1.1: {}
 
   array-includes@3.1.8:
@@ -24107,8 +25303,14 @@ snapshots:
 
   array-timsort@1.0.3: {}
 
+  array-union@1.0.2:
+    dependencies:
+      array-uniq: 1.0.3
+
   array-union@2.1.0: {}
 
+  array-uniq@1.0.3: {}
+
   array.prototype.findlast@1.2.5:
     dependencies:
       call-bind: 1.0.7
@@ -24352,6 +25554,8 @@ snapshots:
       - terser
       - typescript
 
+  async-exit-hook@1.1.2: {}
+
   async-exit-hook@2.0.1: {}
 
   async-limiter@1.0.1: {}
@@ -24360,6 +25564,16 @@ snapshots:
 
   async-sema@3.1.1: {}
 
+  async-test-util@2.5.0:
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@types/clone': 2.1.4
+      clone: 2.1.2
+      deep-equal: 2.2.3
+      is-node: 1.0.2
+
+  async@3.2.3: {}
+
   async@3.2.5: {}
 
   asynckit@0.4.0: {}
@@ -24479,6 +25693,14 @@ snapshots:
       cosmiconfig: 6.0.0
       resolve: 1.22.8
 
+  babel-plugin-module-resolver@5.0.2:
+    dependencies:
+      find-babel-config: 2.1.1
+      glob: 9.3.5
+      pkg-up: 3.1.0
+      reselect: 4.1.8
+      resolve: 1.22.8
+
   babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.24.7):
     dependencies:
       '@babel/compat-data': 7.24.7
@@ -24496,6 +25718,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-plugin-polyfill-corejs3@0.8.7(@babel/core@7.24.7):
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-define-polyfill-provider': 0.4.4(@babel/core@7.24.7)
+      core-js-compat: 3.37.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.5.5(@babel/core@7.24.7):
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/helper-define-polyfill-provider': 0.5.0(@babel/core@7.24.7)
+    transitivePeerDependencies:
+      - supports-color
+
   babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.24.7):
     dependencies:
       '@babel/core': 7.24.7
@@ -24503,6 +25740,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-plugin-syntax-trailing-function-commas@6.22.0: {}
+
   babel-plugin-transform-hook-names@1.0.2(@babel/core@7.24.7):
     dependencies:
       '@babel/core': 7.24.7
@@ -24641,6 +25880,10 @@ snapshots:
 
   bottleneck@2.19.5: {}
 
+  bowser@1.6.0: {}
+
+  bowser@2.11.0: {}
+
   boxen@7.1.1:
     dependencies:
       ansi-align: 3.0.1
@@ -24849,6 +26092,8 @@ snapshots:
       get-intrinsic: 1.2.4
       set-function-length: 1.2.2
 
+  callsite@1.0.0: {}
+
   callsites@3.1.0: {}
 
   camelcase-css@2.0.1: {}
@@ -24871,6 +26116,15 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@4.3.4:
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.3
+      deep-eql: 3.0.1
+      get-func-name: 2.0.2
+      pathval: 1.1.1
+      type-detect: 4.0.8
+
   chai@4.4.1:
     dependencies:
       assertion-error: 1.1.0
@@ -24957,6 +26211,14 @@ snapshots:
 
   chroma-js@2.4.2: {}
 
+  chrome-remote-interface@0.32.2:
+    dependencies:
+      commander: 2.11.0
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   chrome-trace-event@1.0.4: {}
 
   chromedriver@121.0.2:
@@ -24977,6 +26239,8 @@ snapshots:
       devtools-protocol: 0.0.1147663
       mitt: 3.0.0
 
+  ci-info@1.6.0: {}
+
   ci-info@2.0.0: {}
 
   ci-info@3.9.0: {}
@@ -25074,6 +26338,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clone@2.1.2: {}
+
   clsx@2.1.1: {}
 
   cluster-key-slot@1.1.2: {}
@@ -25088,6 +26354,20 @@ snapshots:
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
+  coffeescript@2.7.0: {}
+
+  coincident@1.2.3:
+    dependencies:
+      '@ungap/structured-clone': 1.2.0
+      '@ungap/with-resolvers': 0.1.0
+      gc-hook: 0.3.1
+      proxy-target: 3.0.2
+    optionalDependencies:
+      ws: 8.17.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   collapse-white-space@2.1.0: {}
 
   color-convert@1.9.3:
@@ -25137,12 +26417,18 @@ snapshots:
 
   commander@12.1.0: {}
 
+  commander@2.11.0: {}
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
 
+  commander@5.1.0: {}
+
   commander@6.2.1: {}
 
+  commander@8.3.0: {}
+
   commander@9.5.0: {}
 
   comment-json@4.2.3:
@@ -25196,6 +26482,18 @@ snapshots:
       readable-stream: 2.3.8
       typedarray: 0.0.6
 
+  concurrently@8.2.2:
+    dependencies:
+      chalk: 4.1.2
+      date-fns: 2.30.0
+      lodash: 4.17.21
+      rxjs: 7.8.1
+      shell-quote: 1.8.1
+      spawn-command: 0.0.2
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
   confbox@0.1.7: {}
 
   confusing-browser-globals@1.0.11: {}
@@ -25242,6 +26540,16 @@ snapshots:
       depd: 2.0.0
       keygrip: 1.1.0
 
+  copyfiles@2.4.1:
+    dependencies:
+      glob: 7.2.3
+      minimatch: 3.1.2
+      mkdirp: 1.0.4
+      noms: 0.0.0
+      through2: 2.0.5
+      untildify: 4.0.0
+      yargs: 16.2.0
+
   core-js-compat@3.37.1:
     dependencies:
       browserslist: 4.23.0
@@ -25348,6 +26656,8 @@ snapshots:
       randombytes: 2.1.0
       randomfill: 1.0.4
 
+  crypto-md5@1.0.0: {}
+
   crypto-random-string@2.0.0: {}
 
   css-background-parser@0.1.0: {}
@@ -25540,9 +26850,17 @@ snapshots:
 
   dedent-js@1.0.1: {}
 
-  dedent@1.5.1(babel-plugin-macros@2.8.0):
-    optionalDependencies:
-      babel-plugin-macros: 2.8.0
+  dedent@0.4.0: {}
+
+  dedent@0.6.0: {}
+
+  dedent@0.7.0: {}
+
+  dedent@1.5.1: {}
+
+  deep-eql@3.0.1:
+    dependencies:
+      type-detect: 4.0.8
 
   deep-eql@4.1.4:
     dependencies:
@@ -25620,6 +26938,26 @@ snapshots:
       escodegen: 2.1.0
       esprima: 4.0.1
 
+  del@3.0.0:
+    dependencies:
+      globby: 6.1.0
+      is-path-cwd: 1.0.0
+      is-path-in-cwd: 1.0.1
+      p-map: 1.2.0
+      pify: 3.0.0
+      rimraf: 2.7.1
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
   del@6.1.1:
     dependencies:
       globby: 11.1.0
@@ -25681,6 +27019,8 @@ snapshots:
 
   devalue@5.0.0: {}
 
+  device-specs@1.0.1: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -25820,6 +27160,8 @@ snapshots:
 
   electron-to-chromium@1.4.792: {}
 
+  elegant-spinner@1.0.1: {}
+
   elliptic@6.5.5:
     dependencies:
       bn.js: 4.12.0
@@ -25830,6 +27172,10 @@ snapshots:
       minimalistic-assert: 1.0.1
       minimalistic-crypto-utils: 1.0.1
 
+  email-validator@2.0.4: {}
+
+  emittery@0.4.1: {}
+
   emmet@2.4.7:
     dependencies:
       '@emmetio/abbreviation': 2.3.3
@@ -25847,6 +27193,11 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  endpoint-utils@1.0.2:
+    dependencies:
+      ip: 1.1.9
+      pinkie-promise: 1.0.0
+
   enhanced-resolve@5.17.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -26148,14 +27499,14 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-galex@4.5.2(eslint@8.57.0)(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2))):
+  eslint-config-galex@4.5.2(eslint@8.57.0)(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2))):
     dependencies:
       '@babel/core': 7.21.4
       '@babel/eslint-parser': 7.21.3(@babel/core@7.21.4)(eslint@8.57.0)
       '@babel/preset-react': 7.18.6(@babel/core@7.21.4)
       '@next/eslint-plugin-next': 13.2.4
       '@typescript-eslint/eslint-plugin': 5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint@8.57.0)(typescript@5.3.2)
-      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
       confusing-browser-globals: 1.0.11
       eslint: 8.57.0
       eslint-config-prettier: 8.8.0(eslint@8.57.0)
@@ -26163,8 +27514,8 @@ snapshots:
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0)
       eslint-plugin-etc: 2.0.2(eslint@8.57.0)(typescript@5.0.3)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0)
-      eslint-plugin-jest: 27.2.1(@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0)
+      eslint-plugin-jest: 27.2.1(@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3)
       eslint-plugin-jest-dom: 4.0.3(eslint@8.57.0)
       eslint-plugin-jest-formatting: 3.1.0(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.57.0)
@@ -26174,7 +27525,7 @@ snapshots:
       eslint-plugin-simple-import-sort: 10.0.0(eslint@8.57.0)
       eslint-plugin-sonarjs: 0.19.0(eslint@8.57.0)
       eslint-plugin-storybook: 0.6.11(eslint@8.57.0)(typescript@5.0.3)
-      eslint-plugin-tailwindcss: 3.10.3(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2)))
+      eslint-plugin-tailwindcss: 3.10.3(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2)))
       eslint-plugin-testing-library: 5.10.2(eslint@8.57.0)(typescript@5.0.3)
       eslint-plugin-unicorn: 46.0.0(eslint@8.57.0)
       lodash.merge: 4.6.2
@@ -26193,8 +27544,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.41.0)
       eslint-plugin-react: 7.34.2(eslint@8.41.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.41.0)
@@ -26220,7 +27571,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.57.0)(typescript@5.0.3)
       eslint: 8.57.0
-      tsutils: 3.21.0(typescript@5.3.2)
+      tsutils: 3.21.0(typescript@5.0.3)
       tsutils-etc: 1.4.2(tsutils@3.21.0(typescript@5.0.3))(typescript@5.0.3)
       typescript: 5.0.3
     transitivePeerDependencies:
@@ -26264,7 +27615,7 @@ snapshots:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0)
       get-tsconfig: 4.7.5
       globby: 13.2.2
       is-core-module: 2.13.1
@@ -26273,13 +27624,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.41.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -26290,35 +27641,25 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
-      eslint: 8.41.0
-      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -26335,7 +27676,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0):
+  eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint-import-resolver-typescript@3.5.4)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.flat: 1.3.2
@@ -26344,7 +27685,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.7
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.4(eslint-plugin-import@2.27.5)(eslint@8.57.0))(eslint@8.57.0)
       has: 1.0.4
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -26354,13 +27695,13 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.3.2)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.57.0)(typescript@5.0.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -26370,7 +27711,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -26381,7 +27722,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -26398,7 +27739,7 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-jest@27.2.1(@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3):
+  eslint-plugin-jest@27.2.1(@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint@8.57.0)(typescript@5.0.3))(eslint@8.57.0)(typescript@5.0.3):
     dependencies:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.0.3)
       eslint: 8.57.0
@@ -26556,11 +27897,11 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-tailwindcss@3.10.3(tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2))):
+  eslint-plugin-tailwindcss@3.10.3(tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.38
-      tailwindcss: 3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2))
+      tailwindcss: 3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2))
 
   eslint-plugin-testing-library@5.10.2(eslint@8.57.0)(typescript@5.0.3):
     dependencies:
@@ -26822,6 +28163,10 @@ snapshots:
 
   esm-env@1.0.0: {}
 
+  esotope-hammerhead@0.6.8:
+    dependencies:
+      '@types/estree': 0.0.46
+
   espree@10.0.1:
     dependencies:
       acorn: 8.11.3
@@ -26908,6 +28253,31 @@ snapshots:
       md5.js: 1.3.5
       safe-buffer: 5.2.1
 
+  execa@3.4.0:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 5.2.0
+      human-signals: 1.1.1
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      p-finally: 2.0.1
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@4.1.0:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 5.2.0
+      human-signals: 1.1.1
+      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
+
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -27009,6 +28379,42 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  express@4.19.2:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.2
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.6.0
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.2.0
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      merge-descriptors: 1.0.1
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.7
+      proxy-addr: 2.0.7
+      qs: 6.11.0
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.18.0
+      serve-static: 1.15.0
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   ext-list@2.2.2:
     dependencies:
       mime-db: 1.52.0
@@ -27217,6 +28623,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  find-babel-config@2.1.1:
+    dependencies:
+      json5: 2.2.3
+      path-exists: 4.0.0
+
   find-cache-dir@2.1.0:
     dependencies:
       commondir: 1.0.1
@@ -27327,6 +28738,12 @@ snapshots:
 
   fs-constants@1.0.0: {}
 
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
   fs-extra@11.1.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -27397,6 +28814,8 @@ snapshots:
     dependencies:
       globule: 1.3.4
 
+  gc-hook@0.3.1: {}
+
   geckodriver@4.4.1:
     dependencies:
       '@wdio/logger': 8.38.0
@@ -27432,6 +28851,13 @@ snapshots:
 
   get-npm-tarball-url@2.1.0: {}
 
+  get-os-info@1.0.2:
+    dependencies:
+      getos: 3.2.1
+      macos-release: 3.2.0
+      os-family: 1.1.0
+      windows-release: 5.1.1
+
   get-package-type@0.1.0: {}
 
   get-port-please@3.1.2: {}
@@ -27442,6 +28868,8 @@ snapshots:
 
   get-port@7.1.0: {}
 
+  get-stdin@4.0.1: {}
+
   get-stream@2.3.1:
     dependencies:
       object-assign: 4.1.1
@@ -27480,6 +28908,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  getos@3.2.1:
+    dependencies:
+      async: 3.2.5
+
   giget@1.2.3:
     dependencies:
       citty: 0.1.6
@@ -27559,6 +28991,13 @@ snapshots:
       minimatch: 5.0.1
       once: 1.4.0
 
+  glob@9.3.5:
+    dependencies:
+      fs.realpath: 1.0.0
+      minimatch: 8.0.4
+      minipass: 4.2.8
+      path-scurry: 1.11.1
+
   globals@11.12.0: {}
 
   globals@13.24.0:
@@ -27576,6 +29015,17 @@ snapshots:
 
   globalyzer@0.1.0: {}
 
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      glob: 7.2.3
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 3.0.0
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -27602,6 +29052,14 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.1.0
 
+  globby@6.1.0:
+    dependencies:
+      array-union: 1.0.2
+      glob: 7.2.3
+      object-assign: 4.1.1
+      pify: 2.3.0
+      pinkie-promise: 2.0.1
+
   globrex@0.1.2: {}
 
   globule@1.3.4:
@@ -27656,6 +29114,10 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  graphlib@2.1.8:
+    dependencies:
+      lodash: 4.17.21
+
   gray-matter@4.0.3:
     dependencies:
       js-yaml: 3.14.1
@@ -27972,6 +29434,12 @@ snapshots:
 
   hex-rgb@4.3.0: {}
 
+  highlight-es@1.0.3:
+    dependencies:
+      chalk: 2.4.2
+      is-es2016-keyword: 1.0.0
+      js-tokens: 3.0.2
+
   highlight.js@11.9.0: {}
 
   hmac-drbg@1.0.1:
@@ -28088,11 +29556,22 @@ snapshots:
 
   http-shutdown@1.2.2: {}
 
+  http-status-codes@2.3.0: {}
+
   http2-wrapper@2.2.1:
     dependencies:
       quick-lru: 5.1.1
       resolve-alpn: 1.2.1
 
+  httpntlm@1.8.13:
+    dependencies:
+      des.js: 1.1.0
+      httpreq: 1.1.1
+      js-md4: 0.3.2
+      underscore: 1.12.1
+
+  httpreq@1.1.1: {}
+
   https-browserify@1.0.0: {}
 
   https-proxy-agent@4.0.0:
@@ -28127,12 +29606,16 @@ snapshots:
 
   human-id@1.0.2: {}
 
+  human-signals@1.1.1: {}
+
   human-signals@2.1.0: {}
 
   human-signals@4.3.1: {}
 
   human-signals@5.0.0: {}
 
+  humanize-duration@3.32.1: {}
+
   hyperdyperid@1.2.0: {}
 
   i18next-browser-languagedetector@7.2.1:
@@ -28159,6 +29642,10 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.5.1:
+    dependencies:
+      safer-buffer: 2.1.2
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -28181,6 +29668,8 @@ snapshots:
       cjs-module-lexer: 1.3.1
       module-details-from-path: 1.0.3
 
+  import-lazy@3.1.0: {}
+
   import-lazy@4.0.0: {}
 
   import-local@3.1.0:
@@ -28192,6 +29681,12 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@1.2.2:
+    dependencies:
+      get-stdin: 4.0.1
+      minimist: 1.2.8
+      repeating: 1.1.3
+
   indent-string@4.0.0: {}
 
   inflight@1.0.6:
@@ -28264,6 +29759,8 @@ snapshots:
 
   ip-regex@4.3.0: {}
 
+  ip@1.1.9: {}
+
   ip@2.0.1: {}
 
   ipaddr.js@1.9.1: {}
@@ -28321,6 +29818,10 @@ snapshots:
 
   is-callable@1.2.7: {}
 
+  is-ci@1.2.1:
+    dependencies:
+      ci-info: 1.6.0
+
   is-ci@2.0.0:
     dependencies:
       ci-info: 2.0.0
@@ -28345,20 +29846,30 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-es2016-keyword@1.0.0: {}
+
   is-extendable@0.1.1: {}
 
+  is-extglob@1.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.0.2:
     dependencies:
       call-bind: 1.0.7
 
+  is-finite@1.1.0: {}
+
   is-fullwidth-code-point@3.0.0: {}
 
   is-generator-function@1.0.10:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-glob@2.0.1:
+    dependencies:
+      is-extglob: 1.0.0
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -28392,6 +29903,8 @@ snapshots:
 
   is-negative-zero@2.0.3: {}
 
+  is-node@1.0.2: {}
+
   is-number-object@1.0.7:
     dependencies:
       has-tostringtag: 1.0.2
@@ -28400,8 +29913,18 @@ snapshots:
 
   is-object@1.0.2: {}
 
+  is-path-cwd@1.0.0: {}
+
   is-path-cwd@2.2.0: {}
 
+  is-path-in-cwd@1.0.1:
+    dependencies:
+      is-path-inside: 1.0.1
+
+  is-path-inside@1.0.1:
+    dependencies:
+      path-is-inside: 1.0.2
+
   is-path-inside@3.0.3: {}
 
   is-plain-obj@1.1.0: {}
@@ -28416,6 +29939,8 @@ snapshots:
     dependencies:
       isobject: 3.0.1
 
+  is-podman@1.0.1: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
   is-reference@1.2.1:
@@ -28469,6 +29994,8 @@ snapshots:
 
   is-url@1.2.4: {}
 
+  is-utf8@0.2.1: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.0.2:
@@ -28502,6 +30029,8 @@ snapshots:
     dependencies:
       system-architecture: 0.1.0
 
+  isarray@0.0.1: {}
+
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -28655,6 +30184,10 @@ snapshots:
 
   jpeg-js@0.4.4: {}
 
+  js-md4@0.3.2: {}
+
+  js-tokens@3.0.2: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.0: {}
@@ -28883,6 +30416,8 @@ snapshots:
 
   ky@0.33.3: {}
 
+  kysely@0.27.4: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.5:
@@ -28947,6 +30482,10 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  linux-platform-info@0.0.3:
+    dependencies:
+      os-family: 1.1.0
+
   listhen@1.7.2:
     dependencies:
       '@parcel/watcher': 2.4.1
@@ -29106,6 +30645,13 @@ snapshots:
       chalk: 5.3.0
       is-unicode-supported: 1.3.0
 
+  log-update-async-hook@2.0.7:
+    dependencies:
+      ansi-escapes: 4.3.2
+      async-exit-hook: 1.1.2
+      onetime: 2.0.1
+      wrap-ansi: 7.0.0
+
   loglevel-plugin-prefix@0.8.4: {}
 
   loglevel@1.9.1: {}
@@ -29142,6 +30688,8 @@ snapshots:
 
   lru-cache@10.3.0: {}
 
+  lru-cache@2.6.3: {}
+
   lru-cache@4.1.5:
     dependencies:
       pseudomap: 1.0.2
@@ -29159,6 +30707,12 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  macos-release@3.2.0: {}
+
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
   magic-string@0.30.10:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -29235,6 +30789,10 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  match-url-wildcard@0.0.4:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
   md5.js@1.3.5:
     dependencies:
       hash-base: 3.1.0
@@ -29560,6 +31118,8 @@ snapshots:
       - quill-delta
       - rxjs
 
+  memoize-one@5.2.1: {}
+
   memoizerific@1.11.3:
     dependencies:
       map-or-similar: 1.5.0
@@ -29599,6 +31159,10 @@ snapshots:
 
   merge-descriptors@1.0.1: {}
 
+  merge-stream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -30091,6 +31655,8 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime@1.4.1: {}
+
   mime@1.6.0: {}
 
   mime@2.6.0: {}
@@ -30099,6 +31665,8 @@ snapshots:
 
   mime@4.0.3: {}
 
+  mimic-fn@1.2.0: {}
+
   mimic-fn@2.1.0: {}
 
   mimic-fn@4.0.0: {}
@@ -30137,6 +31705,10 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
+  minimatch@8.0.4:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@9.0.3:
     dependencies:
       brace-expansion: 2.0.1
@@ -30165,6 +31737,8 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  minipass@4.2.8: {}
+
   minipass@5.0.0: {}
 
   minipass@7.1.2: {}
@@ -30224,6 +31798,8 @@ snapshots:
 
   module-details-from-path@1.0.3: {}
 
+  moment-duration-format-commonjs@1.0.1: {}
+
   moment@2.30.1: {}
 
   mri@1.2.0: {}
@@ -30244,6 +31820,8 @@ snapshots:
 
   murmurhash3js@3.0.1: {}
 
+  mustache@2.3.2: {}
+
   mute-stream@0.0.8: {}
 
   mute-stream@1.0.0: {}
@@ -30256,6 +31834,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@5.0.7: {}
+
   nanospinner@1.1.0:
     dependencies:
       picocolors: 1.0.1
@@ -30361,7 +31941,7 @@ snapshots:
 
   nice-try@1.0.5: {}
 
-  nitropack@2.9.7(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(magicast@0.3.4)(xml2js@0.5.0):
+  nitropack@2.9.7(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(magicast@0.3.4):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.0(@opentelemetry/api@1.9.0)
@@ -30429,8 +32009,6 @@ snapshots:
       unimport: 3.7.2(rollup@4.18.0)
       unstorage: 1.10.2(@azure/identity@4.3.0)(ioredis@5.4.1)
       unwasm: 0.3.9
-    optionalDependencies:
-      xml2js: 0.5.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -30540,6 +32118,11 @@ snapshots:
       util: 0.12.5
       vm-browserify: 1.1.2
 
+  noms@0.0.0:
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 1.0.34
+
   nopt@5.0.0:
     dependencies:
       abbrev: 1.1.1
@@ -30622,9 +32205,9 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  nx@18.3.3:
+  nx@18.3.3(@swc/core@1.6.13):
     dependencies:
-      '@nrwl/tao': 18.3.3
+      '@nrwl/tao': 18.3.3(@swc/core@1.6.13)
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.6
@@ -30669,12 +32252,13 @@ snapshots:
       '@nx/nx-linux-x64-musl': 18.3.3
       '@nx/nx-win32-arm64-msvc': 18.3.3
       '@nx/nx-win32-x64-msvc': 18.3.3
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     transitivePeerDependencies:
       - debug
 
-  nx@18.3.5:
+  nx@18.3.5(@swc/core@1.6.13):
     dependencies:
-      '@nrwl/tao': 18.3.5
+      '@nrwl/tao': 18.3.5(@swc/core@1.6.13)
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.6
@@ -30719,6 +32303,7 @@ snapshots:
       '@nx/nx-linux-x64-musl': 18.3.5
       '@nx/nx-win32-arm64-msvc': 18.3.5
       '@nx/nx-win32-x64-msvc': 18.3.5
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     transitivePeerDependencies:
       - debug
 
@@ -30816,6 +32401,10 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@2.0.1:
+    dependencies:
+      mimic-fn: 1.2.0
+
   onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
@@ -30913,6 +32502,8 @@ snapshots:
 
   os-browserify@0.3.0: {}
 
+  os-family@1.1.0: {}
+
   os-tmpdir@1.0.2: {}
 
   outdent@0.5.0: {}
@@ -30944,6 +32535,8 @@ snapshots:
 
   p-finally@1.0.0: {}
 
+  p-finally@2.0.1: {}
+
   p-is-promise@1.1.0: {}
 
   p-limit@2.3.0:
@@ -30978,8 +32571,14 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
+  p-map@1.2.0: {}
+
   p-map@2.1.0: {}
 
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
   p-map@4.0.0:
     dependencies:
       aggregate-error: 3.1.0
@@ -31091,6 +32690,10 @@ snapshots:
       domhandler: 5.0.3
       parse5: 7.1.2
 
+  parse5@1.5.1: {}
+
+  parse5@2.2.3: {}
+
   parse5@7.1.2:
     dependencies:
       entities: 4.5.0
@@ -31165,6 +32768,8 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
+  path-is-inside@1.0.2: {}
+
   path-key@2.0.1: {}
 
   path-key@3.1.1: {}
@@ -31226,10 +32831,16 @@ snapshots:
 
   pify@5.0.0: {}
 
+  pinkie-promise@1.0.0:
+    dependencies:
+      pinkie: 1.0.0
+
   pinkie-promise@2.0.1:
     dependencies:
       pinkie: 2.0.4
 
+  pinkie@1.0.0: {}
+
   pinkie@2.0.4: {}
 
   pino-abstract-transport@1.2.0:
@@ -31273,6 +32884,10 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
+  pkg-up@3.1.0:
+    dependencies:
+      find-up: 3.0.0
+
   playwright-core@1.39.0: {}
 
   playwright-core@1.45.0:
@@ -31297,6 +32912,8 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  pngjs@3.4.0: {}
+
   pngjs@7.0.0: {}
 
   polished@4.3.1:
@@ -31317,71 +32934,53 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.38
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.0.4)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.2)(typescript@5.0.4)
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.2)(typescript@5.3.2)
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.2.2)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.9)(typescript@5.2.2)
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.2)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.9)(typescript@5.3.2)
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.9)(typescript@5.3.3)
-    optional: true
-
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)):
-    dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
-    optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.14.9)(typescript@5.5.2)
-    optional: true
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.5.9)(typescript@5.2.2)
-
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)):
-    dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.3
-    optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.5.9)(typescript@5.5.2)
+      ts-node: 10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -31516,6 +33115,10 @@ snapshots:
 
   promise-coalesce@1.1.2: {}
 
+  promisify-event@1.0.0:
+    dependencies:
+      pinkie-promise: 2.0.1
+
   prompts@2.4.2:
     dependencies:
       kleur: 3.0.3
@@ -31703,6 +33306,8 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
+  proxy-target@3.0.2: {}
+
   pseudomap@1.0.2: {}
 
   psl@1.9.0: {}
@@ -31830,6 +33435,8 @@ snapshots:
 
   qr-creator@1.0.0: {}
 
+  qrcode-terminal@0.10.0: {}
+
   qs@6.11.0:
     dependencies:
       side-channel: 1.0.6
@@ -31932,6 +33539,12 @@ snapshots:
       react: 18.2.0
       scheduler: 0.23.2
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-i18next@12.3.1(i18next@22.5.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@babel/runtime': 7.24.7
@@ -31977,14 +33590,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-window@1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.24.7
+      memoize-one: 5.2.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react@18.2.0:
     dependencies:
       loose-envify: 1.4.0
 
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
 
+  read-file-relative@1.2.0:
+    dependencies:
+      callsite: 1.0.0
+
   read-pkg-up@10.0.0:
     dependencies:
       find-up: 6.3.0
@@ -32022,6 +33650,13 @@ snapshots:
     dependencies:
       mute-stream: 0.0.8
 
+  readable-stream@1.0.34:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -32309,6 +33944,12 @@ snapshots:
 
   repeat-string@1.6.1: {}
 
+  repeating@1.1.3:
+    dependencies:
+      is-finite: 1.1.0
+
+  replicator@1.0.5: {}
+
   request-light@0.7.0: {}
 
   require-directory@2.1.1: {}
@@ -32331,12 +33972,20 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  reselect@4.1.8: {}
+
   resolve-alpn@1.2.1: {}
 
+  resolve-cwd@1.0.0:
+    dependencies:
+      resolve-from: 2.0.0
+
   resolve-cwd@3.0.0:
     dependencies:
       resolve-from: 5.0.0
 
+  resolve-from@2.0.0: {}
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -32461,6 +34110,16 @@ snapshots:
       hash-base: 3.1.0
       inherits: 2.0.4
 
+  rollup-plugin-inject@3.0.2:
+    dependencies:
+      estree-walker: 0.6.1
+      magic-string: 0.25.9
+      rollup-pluginutils: 2.8.2
+
+  rollup-plugin-node-polyfills@0.2.1:
+    dependencies:
+      rollup-plugin-inject: 3.0.2
+
   rollup-plugin-peer-deps-external@2.2.4(rollup@3.29.1):
     dependencies:
       rollup: 3.29.1
@@ -32588,6 +34247,10 @@ snapshots:
       mkdirp: 0.5.6
       rimraf: 2.7.1
 
+  sanitize-filename@1.6.3:
+    dependencies:
+      truncate-utf8-bytes: 1.0.2
+
   satori-html@0.3.2:
     dependencies:
       ultrahtml: 1.5.3
@@ -32775,6 +34438,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.8.1: {}
+
   shiki@0.11.1:
     dependencies:
       jsonc-parser: 3.2.1
@@ -33011,6 +34676,8 @@ snapshots:
 
   spacetrim@0.11.25: {}
 
+  spawn-command@0.0.2: {}
+
   spawndamnit@2.0.0:
     dependencies:
       cross-spawn: 5.1.0
@@ -33036,6 +34703,17 @@ snapshots:
 
   sprintf-js@1.1.3: {}
 
+  sqlocal@0.10.1(kysely@0.27.4):
+    dependencies:
+      '@sqlite.org/sqlite-wasm': 3.46.0-build2
+      coincident: 1.2.3
+      nanoid: 5.0.7
+    optionalDependencies:
+      kysely: 0.27.4
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   stable@0.1.8: {}
 
   stack-trace@1.0.0-pre2:
@@ -33182,6 +34860,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
+  string_decoder@0.10.31: {}
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -33205,6 +34885,10 @@ snapshots:
 
   strip-bom-string@1.0.0: {}
 
+  strip-bom@2.0.0:
+    dependencies:
+      is-utf8: 0.2.1
+
   strip-bom@3.0.0: {}
 
   strip-dirs@2.1.0:
@@ -33226,7 +34910,7 @@ snapshots:
 
   strip-literal@1.3.0:
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.12.0
 
   strip-literal@2.1.0:
     dependencies:
@@ -33294,7 +34978,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.0(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3)))(postcss@8.4.38)(svelte@3.59.2):
+  svelte-check@3.8.0(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@3.59.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
@@ -33303,7 +34987,7 @@ snapshots:
       picocolors: 1.0.1
       sade: 1.8.1
       svelte: 3.59.2
-      svelte-preprocess: 5.1.4(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3)))(postcss@8.4.38)(svelte@3.59.2)(typescript@5.5.2)
+      svelte-preprocess: 5.1.4(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@3.59.2)(typescript@5.5.2)
       typescript: 5.5.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -33316,7 +35000,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@3.8.0(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)))(postcss@8.4.38)(svelte@4.2.18):
+  svelte-check@3.8.0(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
@@ -33325,7 +35009,7 @@ snapshots:
       picocolors: 1.0.1
       sade: 1.8.1
       svelte: 4.2.18
-      svelte-preprocess: 5.1.4(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.5.2)
+      svelte-preprocess: 5.1.4(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.5.2)
       typescript: 5.5.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -33354,7 +35038,7 @@ snapshots:
     dependencies:
       svelte: 5.0.0-next.150
 
-  svelte-preprocess@5.1.4(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3)))(postcss@8.4.38)(svelte@3.59.2)(typescript@5.5.2):
+  svelte-preprocess@5.1.4(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@3.59.2)(typescript@5.5.2):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
@@ -33364,11 +35048,12 @@ snapshots:
       svelte: 3.59.2
     optionalDependencies:
       '@babel/core': 7.24.7
+      coffeescript: 2.7.0
       postcss: 8.4.38
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
       typescript: 5.5.2
 
-  svelte-preprocess@5.1.4(@babel/core@7.24.7)(postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2)))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.5.2):
+  svelte-preprocess@5.1.4(@babel/core@7.24.7)(coffeescript@2.7.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.18)(typescript@5.5.2):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
@@ -33378,8 +35063,9 @@ snapshots:
       svelte: 4.2.18
     optionalDependencies:
       '@babel/core': 7.24.7
+      coffeescript: 2.7.0
       postcss: 8.4.38
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
       typescript: 5.5.2
 
   svelte2tsx@0.7.9(svelte@4.2.18)(typescript@5.5.2):
@@ -33442,7 +35128,7 @@ snapshots:
 
   system-architecture@0.1.0: {}
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.0.4)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33461,7 +35147,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.0.4))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       postcss-value-parser: 4.2.0
@@ -33470,7 +35156,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.3(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.2)):
+  tailwindcss@3.3.3(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33489,7 +35175,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -33497,7 +35183,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2)):
+  tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33516,7 +35202,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -33524,7 +35210,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.2.2)):
+  tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33543,7 +35229,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.2.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -33551,7 +35237,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2)):
+  tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33570,7 +35256,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -33578,7 +35264,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2)):
+  tailwindcss@3.4.4(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -33597,7 +35283,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -33702,14 +35388,16 @@ snapshots:
       solid-js: 1.8.17
       solid-use: 0.8.0(solid-js@1.8.17)
 
-  terser-webpack-plugin@5.3.10(webpack@5.91.0(webpack-cli@5.1.4)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.6.13)(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.31.1
-      webpack: 5.91.0(webpack-cli@5.1.4)
+      webpack: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
 
   terser@5.31.1:
     dependencies:
@@ -33724,6 +35412,197 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.2
 
+  testcafe-browser-tools@2.0.26:
+    dependencies:
+      array-find: 1.0.0
+      debug: 4.3.5
+      dedent: 0.7.0
+      del: 5.1.0
+      execa: 3.4.0
+      fs-extra: 10.1.0
+      graceful-fs: 4.2.11
+      linux-platform-info: 0.0.3
+      lodash: 4.17.21
+      mkdirp: 0.5.6
+      mustache: 2.3.2
+      nanoid: 3.3.7
+      os-family: 1.1.0
+      pify: 2.3.0
+      pinkie: 2.0.4
+      read-file-relative: 1.2.0
+      which-promise: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  testcafe-hammerhead@31.7.1:
+    dependencies:
+      '@adobe/css-tools': 4.4.0
+      '@electron/asar': 3.2.10
+      acorn-hammerhead: 0.6.2
+      bowser: 1.6.0
+      crypto-md5: 1.0.0
+      debug: 4.3.1
+      esotope-hammerhead: 0.6.8
+      http-cache-semantics: 4.1.1
+      httpntlm: 1.8.13
+      iconv-lite: 0.5.1
+      lodash: 4.17.21
+      lru-cache: 2.6.3
+      match-url-wildcard: 0.0.4
+      merge-stream: 1.0.1
+      mime: 1.4.1
+      mustache: 2.3.2
+      nanoid: 3.3.7
+      os-family: 1.1.0
+      parse5: 7.1.2
+      pinkie: 2.0.4
+      read-file-relative: 1.2.0
+      semver: 7.5.3
+      tough-cookie: 4.1.3
+      tunnel-agent: 0.6.0
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  testcafe-legacy-api@5.1.8:
+    dependencies:
+      async: 3.2.3
+      dedent: 0.6.0
+      highlight-es: 1.0.3
+      lodash: 4.17.21
+      moment: 2.30.1
+      mustache: 2.3.2
+      os-family: 1.1.0
+      parse5: 2.2.3
+      pify: 2.3.0
+      pinkie: 2.0.4
+      read-file-relative: 1.2.0
+      strip-bom: 2.0.0
+      testcafe-hammerhead: 31.7.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  testcafe-reporter-json@2.2.0: {}
+
+  testcafe-reporter-list@2.2.0: {}
+
+  testcafe-reporter-minimal@2.2.0: {}
+
+  testcafe-reporter-spec@2.2.0: {}
+
+  testcafe-reporter-xunit@2.2.3: {}
+
+  testcafe-safe-storage@1.1.6: {}
+
+  testcafe-selector-generator@0.1.0: {}
+
+  testcafe@3.6.0:
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.7)
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.7)
+      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.7)
+      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.24.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.7)
+      '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-for-of': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-runtime': 7.23.3(@babel/core@7.24.7)
+      '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-flow': 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-react': 7.24.7(@babel/core@7.24.7)
+      '@babel/runtime': 7.24.7
+      '@devexpress/bin-v8-flags-filter': 1.3.0
+      '@devexpress/callsite-record': 4.1.7
+      '@types/node': 12.20.55
+      async-exit-hook: 1.1.2
+      babel-plugin-module-resolver: 5.0.2
+      babel-plugin-syntax-trailing-function-commas: 6.22.0
+      bowser: 2.11.0
+      callsite: 1.0.0
+      chai: 4.3.4
+      chalk: 2.4.2
+      chrome-remote-interface: 0.32.2
+      coffeescript: 2.7.0
+      commander: 8.3.0
+      debug: 4.3.5
+      dedent: 0.4.0
+      del: 3.0.0
+      device-specs: 1.0.1
+      diff: 4.0.2
+      elegant-spinner: 1.0.1
+      email-validator: 2.0.4
+      emittery: 0.4.1
+      endpoint-utils: 1.0.2
+      error-stack-parser: 2.1.4
+      execa: 4.1.0
+      get-os-info: 1.0.2
+      globby: 11.1.0
+      graceful-fs: 4.2.11
+      graphlib: 2.1.8
+      http-status-codes: 2.3.0
+      humanize-duration: 3.32.1
+      import-lazy: 3.1.0
+      indent-string: 1.2.2
+      is-ci: 1.2.1
+      is-docker: 2.2.1
+      is-glob: 2.0.1
+      is-podman: 1.0.1
+      is-stream: 2.0.1
+      json5: 2.2.3
+      lodash: 4.17.21
+      log-update-async-hook: 2.0.7
+      make-dir: 3.1.0
+      mime-db: 1.52.0
+      moment: 2.30.1
+      moment-duration-format-commonjs: 1.0.1
+      mustache: 2.3.2
+      nanoid: 3.3.7
+      os-family: 1.1.0
+      parse5: 1.5.1
+      pify: 2.3.0
+      pinkie: 2.0.4
+      pngjs: 3.4.0
+      pretty-hrtime: 1.0.3
+      promisify-event: 1.0.0
+      prompts: 2.4.2
+      qrcode-terminal: 0.10.0
+      read-file-relative: 1.2.0
+      replicator: 1.0.5
+      resolve-cwd: 1.0.0
+      resolve-from: 4.0.0
+      sanitize-filename: 1.6.3
+      semver: 7.6.2
+      set-cookie-parser: 2.6.0
+      source-map-support: 0.5.21
+      strip-bom: 2.0.0
+      testcafe-browser-tools: 2.0.26
+      testcafe-hammerhead: 31.7.1
+      testcafe-legacy-api: 5.1.8
+      testcafe-reporter-json: 2.2.0
+      testcafe-reporter-list: 2.2.0
+      testcafe-reporter-minimal: 2.2.0
+      testcafe-reporter-spec: 2.2.0
+      testcafe-reporter-xunit: 2.2.3
+      testcafe-safe-storage: 1.1.6
+      testcafe-selector-generator: 0.1.0
+      time-limit-promise: 1.0.4
+      tmp: 0.0.28
+      tree-kill: 1.2.2
+      typescript: 4.7.4
+      unquote: 1.1.1
+      url-to-options: 2.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   text-decoder@1.1.0:
     dependencies:
       b4a: 1.6.6
@@ -33755,6 +35634,8 @@ snapshots:
 
   through@2.3.8: {}
 
+  time-limit-promise@1.0.4: {}
+
   timed-out@4.0.1: {}
 
   timers-browserify@2.0.12:
@@ -33786,6 +35667,10 @@ snapshots:
     dependencies:
       tmp: 0.2.3
 
+  tmp@0.0.28:
+    dependencies:
+      os-tmpdir: 1.0.2
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -33812,6 +35697,13 @@ snapshots:
 
   totalist@3.0.1: {}
 
+  tough-cookie@4.1.3:
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.9.0
@@ -33837,6 +35729,10 @@ snapshots:
 
   trough@2.2.0: {}
 
+  truncate-utf8-bytes@1.0.2:
+    dependencies:
+      utf8-byte-length: 1.0.5
+
   ts-api-utils@1.3.0(typescript@5.0.4):
     dependencies:
       typescript: 5.0.4
@@ -33853,7 +35749,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.1(@types/node@20.14.9)(typescript@5.4.5):
+  ts-node@10.9.1(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.4.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33870,8 +35766,10 @@ snapshots:
       typescript: 5.4.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
 
-  ts-node@10.9.1(@types/node@20.14.9)(typescript@5.5.2):
+  ts-node@10.9.1(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.5.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33888,8 +35786,10 @@ snapshots:
       typescript: 5.5.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
 
-  ts-node@10.9.2(@types/node@20.14.2)(typescript@5.0.4):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.0.4):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33906,9 +35806,11 @@ snapshots:
       typescript: 5.0.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.2(@types/node@20.14.2)(typescript@5.3.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.3.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33925,9 +35827,11 @@ snapshots:
       typescript: 5.3.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.2(@types/node@20.14.7)(typescript@5.3.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.7)(typescript@5.3.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33944,8 +35848,10 @@ snapshots:
       typescript: 5.3.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
 
-  ts-node@10.9.2(@types/node@20.14.9)(typescript@5.2.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.2.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33962,9 +35868,11 @@ snapshots:
       typescript: 5.2.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.9)(typescript@5.3.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -33981,47 +35889,11 @@ snapshots:
       typescript: 5.3.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.2(@types/node@20.14.9)(typescript@5.3.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.9
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.3.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
-  ts-node@10.9.2(@types/node@20.14.9)(typescript@5.5.2):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.14.9
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.5.2
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    optional: true
-
-  ts-node@10.9.2(@types/node@20.5.9)(typescript@5.2.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.2.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -34038,9 +35910,11 @@ snapshots:
       typescript: 5.2.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
-  ts-node@10.9.2(@types/node@20.5.9)(typescript@5.5.2):
+  ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.5.9)(typescript@5.5.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -34057,6 +35931,8 @@ snapshots:
       typescript: 5.5.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
     optional: true
 
   tsconfck@3.1.0(typescript@5.5.2):
@@ -34124,7 +36000,7 @@ snapshots:
   tsutils-etc@1.4.2(tsutils@3.21.0(typescript@5.0.3))(typescript@5.0.3):
     dependencies:
       '@types/yargs': 17.0.32
-      tsutils: 3.21.0(typescript@5.3.2)
+      tsutils: 3.21.0(typescript@5.0.3)
       typescript: 5.0.3
       yargs: 17.7.2
 
@@ -34133,11 +36009,6 @@ snapshots:
       tslib: 1.14.1
       typescript: 5.0.3
 
-  tsutils@3.21.0(typescript@5.3.2):
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.3.2
-
   tsx@3.12.7:
     dependencies:
       '@esbuild-kit/cjs-loader': 2.4.4
@@ -34184,7 +36055,6 @@ snapshots:
   tunnel-agent@0.6.0:
     dependencies:
       safe-buffer: 5.2.1
-    optional: true
 
   tunnel@0.0.6: {}
 
@@ -34280,6 +36150,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  typescript@4.7.4: {}
+
   typescript@4.9.5: {}
 
   typescript@5.0.3: {}
@@ -34330,6 +36202,8 @@ snapshots:
       magic-string: 0.30.10
       unplugin: 1.5.1
 
+  underscore@1.12.1: {}
+
   underscore@1.13.6: {}
 
   undici-types@5.25.3: {}
@@ -34570,6 +36444,8 @@ snapshots:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.2
 
+  unquote@1.1.1: {}
+
   unstorage@1.10.2(@azure/identity@4.3.0)(ioredis@5.4.1):
     dependencies:
       anymatch: 3.1.3
@@ -34630,6 +36506,8 @@ snapshots:
 
   url-to-options@1.0.1: {}
 
+  url-to-options@2.0.0: {}
+
   url@0.11.3:
     dependencies:
       punycode: 1.4.1
@@ -34660,6 +36538,8 @@ snapshots:
 
   userhome@1.0.0: {}
 
+  utf8-byte-length@1.0.5: {}
+
   util-deprecate@1.0.2: {}
 
   util@0.12.5:
@@ -34672,6 +36552,8 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
+  uuid@10.0.0: {}
+
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}
@@ -34774,7 +36656,7 @@ snapshots:
       source-map-support: 0.5.21
       vite: 4.5.2(@types/node@20.5.9)(terser@5.31.1)
 
-  vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1)(xml2js@0.5.0):
+  vinxi@0.3.12(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(terser@5.31.1):
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.24.7)
@@ -34796,7 +36678,7 @@ snapshots:
       hookable: 5.5.3
       http-proxy: 1.18.1
       micromatch: 4.0.7
-      nitropack: 2.9.7(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(magicast@0.3.4)(xml2js@0.5.0)
+      nitropack: 2.9.7(@azure/identity@4.3.0)(@opentelemetry/api@1.9.0)(magicast@0.3.4)
       node-fetch-native: 1.6.4
       path-to-regexp: 6.2.2
       pathe: 1.1.2
@@ -34849,7 +36731,7 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
       picocolors: 1.0.1
-      vite: 4.5.2(@types/node@20.14.9)(terser@5.31.1)
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -34877,10 +36759,10 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-inspect@0.7.42(rollup@3.29.1)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)):
+  vite-plugin-inspect@0.7.42(rollup@4.18.0)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.1)
+      '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
       debug: 4.3.5
       error-stack-parser-es: 0.1.4
       fs-extra: 11.2.0
@@ -34892,9 +36774,9 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-node-polyfills@0.16.0(rollup@3.29.1)(vite@4.5.2(@types/node@20.14.2)(terser@5.31.1)):
+  vite-plugin-node-polyfills@0.16.0(rollup@4.18.0)(vite@4.5.2(@types/node@20.14.2)(terser@5.31.1)):
     dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@3.29.1)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.18.0)
       buffer-polyfill: buffer@6.0.3
       node-stdlib-browser: 1.2.0
       process: 0.11.10
@@ -34902,9 +36784,9 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  vite-plugin-node-polyfills@0.17.0(rollup@3.29.1)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1)):
+  vite-plugin-node-polyfills@0.17.0(rollup@4.18.0)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1)):
     dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@3.29.1)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.18.0)
       buffer-polyfill: buffer@6.0.3
       node-stdlib-browser: 1.2.0
       process: 0.11.10
@@ -34912,6 +36794,16 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  vite-plugin-node-polyfills@0.17.0(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.9)(terser@5.31.1)):
+    dependencies:
+      '@rollup/plugin-inject': 5.0.5(rollup@4.18.0)
+      buffer-polyfill: buffer@6.0.3
+      node-stdlib-browser: 1.2.0
+      process: 0.11.10
+      vite: 5.2.12(@types/node@20.14.9)(terser@5.31.1)
+    transitivePeerDependencies:
+      - rollup
+
   vite-plugin-solid@2.10.2(solid-js@1.7.11)(vite@4.5.2(@types/node@20.5.9)(terser@5.31.1)):
     dependencies:
       '@babel/core': 7.24.7
@@ -34975,6 +36867,16 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  vite-plugin-top-level-await@1.4.1(@swc/helpers@0.5.5)(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.9)(terser@5.31.1)):
+    dependencies:
+      '@rollup/plugin-virtual': 3.0.2(rollup@4.18.0)
+      '@swc/core': 1.6.13(@swc/helpers@0.5.5)
+      uuid: 9.0.1
+      vite: 5.2.12(@types/node@20.14.9)(terser@5.31.1)
+    transitivePeerDependencies:
+      - '@swc/helpers'
+      - rollup
+
   vite-plugin-watch@0.2.0:
     dependencies:
       minimatch: 5.1.6
@@ -35030,6 +36932,16 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.31.1
 
+  vite@5.2.12(@types/node@20.14.9)(terser@5.31.1):
+    dependencies:
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.18.0
+    optionalDependencies:
+      '@types/node': 20.14.9
+      fsevents: 2.3.3
+      terser: 5.31.1
+
   vite@5.3.2(@types/node@20.14.2)(terser@5.31.1):
     dependencies:
       esbuild: 0.21.5
@@ -35089,7 +37001,7 @@ snapshots:
       strip-literal: 1.3.0
       tinybench: 2.8.0
       tinypool: 0.7.0
-      vite: 4.5.2(@types/node@20.14.9)(terser@5.31.1)
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
       vite-node: 0.34.6(@types/node@20.14.9)(terser@5.31.1)
       why-is-node-running: 2.2.2
     optionalDependencies:
@@ -35129,7 +37041,7 @@ snapshots:
       strip-literal: 1.3.0
       tinybench: 2.8.0
       tinypool: 0.7.0
-      vite: 4.5.2(@types/node@20.14.9)(terser@5.31.1)
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
       vite-node: 0.34.6(@types/node@20.14.9)(terser@5.31.1)
       why-is-node-running: 2.2.2
     optionalDependencies:
@@ -35169,7 +37081,7 @@ snapshots:
       strip-literal: 1.3.0
       tinybench: 2.8.0
       tinypool: 0.7.0
-      vite: 4.5.2(@types/node@20.14.9)(terser@5.31.1)
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
       vite-node: 0.34.6(@types/node@20.14.9)(terser@5.31.1)
       why-is-node-running: 2.2.2
     optionalDependencies:
@@ -35209,7 +37121,7 @@ snapshots:
       strip-literal: 1.3.0
       tinybench: 2.8.0
       tinypool: 0.7.0
-      vite: 4.5.2(@types/node@20.14.9)(terser@5.31.1)
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
       vite-node: 0.34.6(@types/node@20.14.9)(terser@5.31.1)
       why-is-node-running: 2.2.2
     optionalDependencies:
@@ -35254,12 +37166,12 @@ snapshots:
     optionalDependencies:
       '@volar/language-service': 2.2.5
 
-  volar-service-prettier@0.0.45(@volar/language-service@2.2.5)(prettier@2.8.3):
+  volar-service-prettier@0.0.45(@volar/language-service@2.2.5)(prettier@3.3.2):
     dependencies:
       vscode-uri: 3.0.8
     optionalDependencies:
       '@volar/language-service': 2.2.5
-      prettier: 2.8.3
+      prettier: 3.3.2
 
   volar-service-typescript-twoslash-queries@0.0.45(@volar/language-service@2.2.5):
     optionalDependencies:
@@ -35601,9 +37513,9 @@ snapshots:
   webpack-cli@5.1.4(webpack@5.91.0):
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))
-      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))
-      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))
+      '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))
+      '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))
+      '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))
       colorette: 2.0.20
       commander: 10.0.1
       cross-spawn: 7.0.3
@@ -35612,7 +37524,7 @@ snapshots:
       import-local: 3.1.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.91.0(webpack-cli@5.1.4)
+      webpack: 5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4)
       webpack-merge: 5.10.0
 
   webpack-merge@5.10.0:
@@ -35625,7 +37537,7 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.91.0(webpack-cli@5.1.4):
+  webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.5
@@ -35648,7 +37560,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.91.0(webpack-cli@5.1.4))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.6.13)(webpack@5.91.0(@swc/core@1.6.13)(webpack-cli@5.1.4))
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     optionalDependencies:
@@ -35718,6 +37630,12 @@ snapshots:
       load-yaml-file: 0.2.0
       path-exists: 4.0.0
 
+  which-promise@1.0.0:
+    dependencies:
+      pify: 2.3.0
+      pinkie-promise: 1.0.0
+      which: 1.3.1
+
   which-typed-array@1.1.15:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -35753,6 +37671,10 @@ snapshots:
 
   wildcard@2.0.1: {}
 
+  windows-release@5.1.1:
+    dependencies:
+      execa: 5.1.1
+
   word-wrap@1.2.5: {}
 
   wordwrap@1.0.0: {}
@@ -35794,6 +37716,8 @@ snapshots:
     dependencies:
       async-limiter: 1.0.1
 
+  ws@7.5.10: {}
+
   ws@8.13.0: {}
 
   ws@8.17.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index be1d73d8d4..a01f296d67 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -15,3 +15,4 @@ packages:
   - 'inlang/source-code/versioned-interfaces/*'
   - 'inlang/source-code/sdk/load-test'
   - 'inlang/source-code/sdk/multi-project-test'
+  - 'inlang/source-code/sdk-v2/sample-app'

From cb68b78d3f99e77261bd2a40c8fbcbd73def3101 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Fri, 19 Jul 2024 12:12:25 +0200
Subject: [PATCH 02/35] cleanup

---
 inlang/source-code/sdk-v2/src/loadProjectOpfs.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 5fec7accb3..e7aede4d7c 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -49,8 +49,6 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 
 	// TODO SDK-v2 listen to changes on the settings file - how do multiple instance of a project get informed about changes?
 	const projectSettings$ = new BehaviorSubject(projectSettings)
-  const observable = projectSettings$.asObservable()
-  
   
 
 	const _import = importSequence(
@@ -126,12 +124,12 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 		},
 		settings: {
       get: () => projectSettings$.getValue(),
-      set: async (settings:     ) => { 
+      set: async (settings: ProjectSettings2) => { 
         // TODO SDK-v2 implement
       },
       subscribe: projectSettings$.asObservable().subscribe,
     },
-    bundle: {ewdffwdr
+    bundle: {
       select: db.selectFrom("bundle"),
       insert: (bundle: Bundle) => {
         return db.insertInto("bundle").values({
@@ -253,8 +251,6 @@ export const populateVariants = (messageSelect: SelectQueryBuilder<Database, "me
   ])
 }
 
-
-
 function json<T>(value: T): RawBuilder<T> {
 	// NOTE we cant use jsonb for now since kisley
 	// - couldn't find out how to return json instead of bytes in a selectFrom(...).select statment

From a1505acb8fa0b5418274a620a2f797ffea80b766 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 10:09:29 +0200
Subject: [PATCH 03/35] message-bundle-component ->  bundle-component

---
 .../.storybook/main.js                        |   0
 .../.storybook/preview.js                     |   0
 .../CHANGELOG.md                              |   0
 .../README.md                                 |   0
 .../package.json                              |  15 +-
 .../src/helper/crud/input/create.test.ts      |  56 ++
 .../src/helper/crud/input/create.ts           |  34 +
 .../src/helper/crud/input/delete.test.ts      |  81 +++
 .../src/helper/crud/input/delete.ts           |  21 +
 .../src/helper/crud/input/get.test.ts         |  61 ++
 .../src/helper/crud/input/get.ts              |  21 +
 .../crud/pattern/patternToString.test.ts      |  31 +
 .../helper/crud/pattern/patternToString.ts    |  32 +
 .../crud/pattern/stringToPattern.test.ts      |  30 +
 .../helper/crud/pattern/stringToPattern.ts    |  52 ++
 .../src/helper/crud/selector/add.test.ts      |  37 ++
 .../src/helper/crud/selector/add.ts           |  24 +
 .../src/helper/crud/selector/delete.test.ts   |  36 ++
 .../src/helper/crud/selector/delete.ts        |  20 +
 .../src/helper/crud/variant/delete.test.ts    |  23 +
 .../src/helper/crud/variant/delete.ts         |  12 +-
 .../helper/crud/variant/isCatchAll.test.ts    |  15 +
 .../src/helper/crud/variant/isCatchAll.ts     |   5 +
 .../src/helper/crud/variant/sortAll.test.ts   |  67 ++
 .../src/helper/crud/variant/sortAll.ts        |  34 +
 .../helper/crud/variant/updateMatch.test.ts   |  38 ++
 .../src/helper/crud/variant/updateMatch.ts    |  17 +
 .../src/helper/crud/variant/upsert.test.ts    |  29 +-
 .../src/helper/crud/variant/upsert.ts         |  30 +
 .../helper/overridePrimitiveColors.test.ts    |   0
 .../src/helper/overridePrimitiveColors.ts     |   0
 .../src/helper/simplifyBundle.ts              |   0
 .../source-code/bundle-component/src/index.ts |   1 +
 .../bundle-component/src/inlang-bundle.mdx    |   4 +
 .../bundle-component/src/mock/lint.ts         |  51 ++
 .../src/mock/messageBundle.ts                 |  37 ++
 .../bundle-component/src/mock/settings.ts     |  42 ++
 .../stories/actions/inlang-bundle-action.ts   |  47 ++
 .../stories/actions/inlang-variant-action.ts  |  54 ++
 .../src/stories/inlang-add-input.ts           | 157 +++++
 .../src/stories/inlang-bundle-header.ts       | 295 +++++++++
 .../src/stories/inlang-bundle-root.ts         |  33 +
 .../src/stories/inlang-bundle.stories.ts      | 171 +++++
 .../src/stories/inlang-bundle.ts              | 431 +++++++++++++
 .../src/stories/inlang-lint-report-tip.ts     | 206 ++++++
 .../src/stories/inlang-message.ts             | 381 +++++++++++
 .../stories/inlang-selector-configurator.ts   | 609 ++++++++++++++++++
 .../src/stories/inlang-variant.ts             | 426 ++++++++++++
 .../inlang-pattern-editor.stories.ts          |  34 +
 .../pattern-editor/inlang-pattern-editor.ts   | 173 +++++
 .../src/stories/testing/reactiveWrapper.ts    |  86 +++
 .../bundle-component/src/stories/x.ts         |  84 +++
 .../src/styling/base.ts                       |   6 +-
 .../src/styling/preview.css                   |   0
 .../tsconfig.json                             |   0
 .../src/helper/crud/input/get.ts              |  13 -
 .../src/helper/crud/selector/add.ts           |   8 -
 .../src/helper/crud/variant/sort.ts           |  38 --
 .../src/helper/crud/variant/updateMatch.ts    |   8 -
 .../src/helper/crud/variant/upsert.ts         |  38 --
 .../message-bundle-component/src/index.ts     |   1 -
 .../src/inlang-message-bundle.mdx             |   6 -
 .../src/stories/inlang-lint-report-tip.ts     |  55 --
 .../stories/inlang-message-bundle.stories.ts  | 109 ----
 .../stories/inlang-message-bundle.styles.ts   | 129 ----
 .../src/stories/inlang-message-bundle.ts      | 230 -------
 .../stories/inlang-selector-configurator.ts   | 267 --------
 .../src/stories/inlang-variant.ts             | 323 ----------
 68 files changed, 4131 insertions(+), 1243 deletions(-)
 rename inlang/source-code/{message-bundle-component => bundle-component}/.storybook/main.js (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/.storybook/preview.js (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/CHANGELOG.md (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/README.md (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/package.json (84%)
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/create.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/input/get.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/crud/variant/delete.ts (51%)
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/crud/variant/isCatchAll.ts (62%)
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/crud/variant/upsert.test.ts (62%)
 create mode 100644 inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/overridePrimitiveColors.test.ts (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/overridePrimitiveColors.ts (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/helper/simplifyBundle.ts (100%)
 create mode 100644 inlang/source-code/bundle-component/src/index.ts
 create mode 100644 inlang/source-code/bundle-component/src/inlang-bundle.mdx
 create mode 100644 inlang/source-code/bundle-component/src/mock/lint.ts
 create mode 100644 inlang/source-code/bundle-component/src/mock/messageBundle.ts
 create mode 100644 inlang/source-code/bundle-component/src/mock/settings.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/actions/inlang-bundle-action.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/actions/inlang-variant-action.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-add-input.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-bundle-root.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-message.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/inlang-variant.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
 create mode 100644 inlang/source-code/bundle-component/src/stories/x.ts
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/styling/base.ts (99%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/src/styling/preview.css (100%)
 rename inlang/source-code/{message-bundle-component => bundle-component}/tsconfig.json (100%)
 delete mode 100644 inlang/source-code/message-bundle-component/src/helper/crud/input/get.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/helper/crud/selector/add.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/helper/crud/variant/sort.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/helper/crud/variant/updateMatch.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/index.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/inlang-message-bundle.mdx
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-lint-report-tip.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.stories.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.styles.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-selector-configurator.ts
 delete mode 100644 inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts

diff --git a/inlang/source-code/message-bundle-component/.storybook/main.js b/inlang/source-code/bundle-component/.storybook/main.js
similarity index 100%
rename from inlang/source-code/message-bundle-component/.storybook/main.js
rename to inlang/source-code/bundle-component/.storybook/main.js
diff --git a/inlang/source-code/message-bundle-component/.storybook/preview.js b/inlang/source-code/bundle-component/.storybook/preview.js
similarity index 100%
rename from inlang/source-code/message-bundle-component/.storybook/preview.js
rename to inlang/source-code/bundle-component/.storybook/preview.js
diff --git a/inlang/source-code/message-bundle-component/CHANGELOG.md b/inlang/source-code/bundle-component/CHANGELOG.md
similarity index 100%
rename from inlang/source-code/message-bundle-component/CHANGELOG.md
rename to inlang/source-code/bundle-component/CHANGELOG.md
diff --git a/inlang/source-code/message-bundle-component/README.md b/inlang/source-code/bundle-component/README.md
similarity index 100%
rename from inlang/source-code/message-bundle-component/README.md
rename to inlang/source-code/bundle-component/README.md
diff --git a/inlang/source-code/message-bundle-component/package.json b/inlang/source-code/bundle-component/package.json
similarity index 84%
rename from inlang/source-code/message-bundle-component/package.json
rename to inlang/source-code/bundle-component/package.json
index 86eeaa44c0..8abff3323a 100644
--- a/inlang/source-code/message-bundle-component/package.json
+++ b/inlang/source-code/bundle-component/package.json
@@ -1,7 +1,7 @@
 {
-	"name": "@inlang/message-bundle-component",
+	"name": "@inlang/bundle-component",
 	"type": "module",
-	"version": "0.1.21",
+	"version": "0.0.1",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -22,8 +22,8 @@
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
-		"@inlang/marketplace-registry": "workspace:^",
 		"@inlang/marketplace-manifest": "workspace:^",
+		"@inlang/marketplace-registry": "workspace:^",
 		"@inlang/message-lint-rule": "workspace:^",
 		"@inlang/sdk": "workspace:^",
 		"@nx/storybook": "^18.0.4",
@@ -33,19 +33,22 @@
 		"@storybook/web-components": "^7.6.16",
 		"@storybook/web-components-vite": "^7.6.16",
 		"@types/chroma-js": "^2.4.4",
+		"@vitest/coverage-v8": "^0.33.0",
 		"esbuild": "^0.20.0",
 		"lit": "^3.1.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"storybook": "^7.6.16",
-		"vitest": "0.33.0",
-		"@vitest/coverage-v8": "^0.33.0"
+		"vitest": "0.33.0"
 	},
 	"dependencies": {
 		"@inlang/sdk": "workspace:^",
+		"@lexical/plain-text": "^0.16.1",
+		"@lexical/utils": "^0.16.1",
 		"@lit/task": "^1.0.0",
 		"@shoelace-style/shoelace": "2.14.0",
+		"@sinclair/typebox": "0.31.28",
 		"chroma-js": "^2.4.2",
-		"@sinclair/typebox": "0.31.28"
+		"lexical": "^0.16.1"
 	}
 }
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
new file mode 100644
index 0000000000..0f563d8fed
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest"
+import createInput from "./create.js"
+import { createMessageBundle } from "@inlang/sdk/v2"
+
+describe("createInput", () => {
+	it("Should create an input declarations", () => {
+		const messageBundle = createMessageBundle({
+			id: "bundleId",
+			messages: [
+				{
+					id: "testId1",
+					locale: "en",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+				{
+					id: "testId2",
+					locale: "de",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+			],
+		})
+
+		createInput({ messageBundle, inputName: "user_name" })
+
+		expect(messageBundle.messages[0]!.declarations.length).toBe(2)
+		expect(messageBundle.messages[0]!.declarations[1]!.name).toBe("user_name")
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/create.ts b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
new file mode 100644
index 0000000000..87aacf42fd
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
@@ -0,0 +1,34 @@
+import type { MessageBundle } from "@inlang/sdk/v2"
+
+/**
+ * Creates an input in all messages of a message bundle.
+ * The function mutates the message bundle.
+ * @param props.messageBundle The message bundle to create the input in.
+ * @param props.inputName The name of the input to create.
+ *
+ * @example
+ * createInput({ messageBundle, inputName: "myInput" })
+ */
+
+const createInput = (props: { messageBundle: MessageBundle; inputName: string }) => {
+	for (const message of props.messageBundle.messages) {
+		if (message.declarations.some((declaration) => declaration.name === props.inputName)) {
+			console.error("Input with name already exists")
+			return
+		} else {
+			message.declarations.push({
+				type: "input",
+				name: props.inputName,
+				value: {
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: props.inputName,
+					},
+				},
+			})
+		}
+	}
+}
+
+export default createInput
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
new file mode 100644
index 0000000000..c7826eb69e
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest"
+import deleteInput from "./delete.js"
+import { createMessageBundle } from "@inlang/sdk/v2"
+
+describe("deleteInput", () => {
+	it("Should delete a specific input declarations", () => {
+		const messageBundle = createMessageBundle({
+			id: "bundleId",
+			messages: [
+				{
+					id: "testId",
+					locale: "en",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+						{
+							type: "input",
+							name: "user_name",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "user_name",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+				{
+					id: "testId",
+					locale: "en",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+						{
+							type: "input",
+							name: "user_name",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "user_name",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+			],
+		})
+		const inputs = deleteInput({
+			messageBundle,
+			input: messageBundle.messages[0]!.declarations[0]!,
+		})
+		expect(messageBundle.messages[0]!.declarations.length).toBe(1)
+		expect(messageBundle.messages[1]!.declarations.length).toBe(1)
+		expect(messageBundle.messages[0]!.declarations[0]!.name).toBe("user_name")
+		expect(messageBundle.messages[1]!.declarations[0]!.name).toBe("user_name")
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
new file mode 100644
index 0000000000..32ef28717f
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
@@ -0,0 +1,21 @@
+import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
+
+/**
+ * Deletes an input from all messages of a message bundle.
+ * The function mutates the message bundle.
+ * @param props.messageBundle The message bundle to delete the input from.
+ * @param props.input The input to delete.
+ */
+
+const deleteInput = (props: { messageBundle: MessageBundle; input: Declaration }) => {
+	for (const message of props.messageBundle.messages) {
+		const index = message.declarations.findIndex((d) => d.name === props.input.name)
+		if (index === -1) {
+			continue
+		} else {
+			message.declarations.splice(index, 1)
+		}
+	}
+}
+
+export default deleteInput
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
new file mode 100644
index 0000000000..04b33a76c1
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest"
+import getInput from "./get.js"
+import { createMessageBundle } from "@inlang/sdk/v2"
+
+describe("getInput", () => {
+	it("Should return all found input declarations", () => {
+		const messageBundle = createMessageBundle({
+			id: "bundleId",
+			messages: [
+				{
+					id: "testId",
+					locale: "en",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+				{
+					id: "testId",
+					locale: "en",
+					selectors: [],
+					declarations: [
+						{
+							type: "input",
+							name: "count",
+							value: {
+								type: "expression",
+								arg: {
+									type: "variable",
+									name: "count",
+								},
+							},
+						},
+					],
+					variants: [],
+				},
+				{
+					id: "testId",
+					locale: "en",
+					selectors: [],
+					declarations: [],
+					variants: [],
+				},
+			],
+		})
+		const inputs = getInput({ messageBundle })
+		expect(inputs.length).toBe(1)
+		expect(inputs[0]!.name).toBe("count")
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/get.ts b/inlang/source-code/bundle-component/src/helper/crud/input/get.ts
new file mode 100644
index 0000000000..7c2b5c6995
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/get.ts
@@ -0,0 +1,21 @@
+import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
+
+/**
+ * Gets all inputs from a message bundle.
+ * @param props.messageBundle The message bundle to get the inputs from.
+ * @returns All inputs from the message bundle.
+ */
+
+const getInputs = (props: { messageBundle: MessageBundle }): Declaration[] => {
+	const inputs: Declaration[] = []
+	for (const message of props.messageBundle.messages) {
+		for (const declaration of message.declarations) {
+			if (declaration.type === "input" && !inputs.some((d) => d.name === declaration.name)) {
+				inputs.push(declaration)
+			}
+		}
+	}
+	return inputs
+}
+
+export default getInputs
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
new file mode 100644
index 0000000000..37764de52e
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest"
+import patternToString from "./patternToString.js"
+import type { Pattern } from "@inlang/sdk/v2"
+
+describe("patternToString", () => {
+	it("Should transform pattern to string", () => {
+		const pattern: Pattern = [
+			{
+				type: "text",
+				value: "Hello, ",
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "name",
+				},
+			},
+			{
+				type: "text",
+				value: "!",
+			},
+		]
+
+		const text = patternToString({ pattern })
+
+		const correspondingText = "Hello, {{name}}!"
+
+		expect(text).toStrictEqual(correspondingText)
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
new file mode 100644
index 0000000000..eaca0aee0e
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
@@ -0,0 +1,32 @@
+import type { Pattern } from "@inlang/sdk/v2"
+
+/**
+ * MVP version of the function
+ *
+ * Converts a pattern to a string.
+ * @param props.pattern The pattern to convert to a string.
+ * @returns The pattern as a string.
+ *
+ * @example
+ * patternToString({ pattern: [{ value: "Hello" }, { type: "expression", arg: { type: "variable", name: "name" } }] }) -> "Hello {{name}}"
+ */
+
+const patternToString = (props: { pattern: Pattern }): string => {
+	if (!props.pattern) {
+		return ""
+	}
+	return props.pattern
+		.map((p) => {
+			if ("value" in p) {
+				return p.value
+				// @ts-ignore
+			} else if (p.type === "expression" && p.arg.type === "variable") {
+				// @ts-ignore
+				return `{{${p.arg.name}}}`
+			}
+			return ""
+		})
+		.join("")
+}
+
+export default patternToString
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
new file mode 100644
index 0000000000..4fa19c8e85
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest"
+import stringToPattern from "./stringToPattern.js"
+import type { Pattern } from "@inlang/sdk/v2"
+
+describe("stringToPattern", () => {
+	it("Should transform string to pattern", () => {
+		const text = "Hello, {{name}}!"
+
+		const pattern = stringToPattern({ text })
+
+		const correspondingPattern: Pattern = [
+			{
+				type: "text",
+				value: "Hello, ",
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "name",
+				},
+			},
+			{
+				type: "text",
+				value: "!",
+			},
+		]
+		expect(pattern).toStrictEqual(correspondingPattern)
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
new file mode 100644
index 0000000000..abcb286d02
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
@@ -0,0 +1,52 @@
+import type { Pattern } from "@inlang/sdk/v2"
+
+/**
+ * MVP version of the function
+ *
+ * Converts a string to a pattern.
+ * @param props.text The text to convert to a pattern.
+ * @returns The pattern of the text.
+ *
+ * @example
+ * stringToPattern({ text: "Hello {{name}}" }) -> [{ value: "Hello" }, { type: "expression", arg: { type: "variable", name: "name" } }]
+ */
+
+const stringToPattern = (props: { text: string }): Pattern => {
+	const pattern: Pattern = []
+	const regex = /{{(.*?)}}/g
+	let lastIndex = 0
+	let match
+
+	while ((match = regex.exec(props.text)) !== null) {
+		// Add text node for text before the variable
+		if (match.index > lastIndex) {
+			pattern.push({
+				type: "text",
+				value: props.text.slice(lastIndex, match.index),
+			})
+		}
+		// Add variable node
+		if (match[1]) {
+			pattern.push({
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: match[1],
+				},
+			})
+			lastIndex = regex.lastIndex
+		}
+	}
+
+	// Add remaining text node after the last variable
+	if (lastIndex < props.text.length) {
+		pattern.push({
+			type: "text",
+			value: props.text.slice(lastIndex),
+		})
+	}
+
+	return pattern
+}
+
+export default stringToPattern
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
new file mode 100644
index 0000000000..9202159116
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
@@ -0,0 +1,37 @@
+import { type Expression, type Message } from "@inlang/sdk/v2"
+import { describe, expect, it } from "vitest"
+import addSelector from "./add.js"
+
+describe("addSelector", () => {
+	it("Should add selector", () => {
+		const message: Message = {
+			id: "testId",
+			locale: "en",
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: "count",
+					},
+				},
+			],
+			declarations: [],
+			variants: [],
+		}
+
+		const newSelector = {
+			type: "expression",
+			arg: {
+				type: "variable",
+				name: "name",
+			},
+		}
+
+		addSelector({ message, selector: newSelector as Expression })
+
+		expect(message.selectors.length).toBe(2)
+		// @ts-ignore
+		expect(message.selectors[1]!.arg.name).toBe("name")
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
new file mode 100644
index 0000000000..8cedf32752
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
@@ -0,0 +1,24 @@
+import { createVariant, type Expression, type Message } from "@inlang/sdk/v2"
+
+/**
+ * Adds a selector to a message.
+ * The function mutates the message.
+ * @param props.message The message to add the selector to.
+ * @param props.selector The selector to add.
+ *
+ * @example
+ * addSelector({ message, selector: { type: "expression", arg: { type: "variable", name: "mySelector" } } })
+ */
+
+const addSelector = (props: { message: Message; selector: Expression }) => {
+	props.message.selectors.push(props.selector)
+	if (props.message.variants.length !== 0) {
+		for (const variant of props.message.variants) {
+			variant.match.push("*")
+		}
+	} else {
+		props.message.variants.push(createVariant({ match: ["*"], text: "" }))
+	}
+}
+
+export default addSelector
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
new file mode 100644
index 0000000000..b662bb48ce
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
@@ -0,0 +1,36 @@
+import { type Message } from "@inlang/sdk/v2"
+import { describe, expect, it } from "vitest"
+import deleteSelector from "./delete.js"
+
+describe("deleteSelector", () => {
+	it("Should delete selector", () => {
+		const message: Message = {
+			id: "testId",
+			locale: "en",
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: "count",
+					},
+				},
+				{
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: "name",
+					},
+				},
+			],
+			declarations: [],
+			variants: [],
+		}
+
+		deleteSelector({ message, index: 0 })
+
+		expect(message.selectors.length).toBe(1)
+		// @ts-ignore
+		expect(message.selectors[0]!.arg.name).toBe("name")
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
new file mode 100644
index 0000000000..2d7840de14
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
@@ -0,0 +1,20 @@
+import type { Message } from "@inlang/sdk/v2"
+
+/**
+ * Deletes a selector from a message.
+ * The function mutates the message.
+ * @param props.message The message to delete the selector from.
+ * @param props.index The index of the selector to delete.
+ *
+ * @example
+ * deleteSelector({ message, index: 0 })
+ */
+
+const deleteSelector = (props: { message: Message; index: number }) => {
+	props.message.selectors.splice(props.index, 1)
+	for (const variant of props.message.variants) {
+		variant.match.splice(props.index, 1)
+	}
+}
+
+export default deleteSelector
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
new file mode 100644
index 0000000000..9c530e1b25
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
@@ -0,0 +1,23 @@
+import { type Message, createVariant } from "@inlang/sdk/v2"
+import { describe, expect, it } from "vitest"
+import deleteVariant from "./delete.js"
+
+describe("deleteVariant", () => {
+	it("Should delete variant", () => {
+		const message: Message = {
+			id: "testId",
+			locale: "en",
+			selectors: [],
+			declarations: [],
+			variants: [
+				createVariant({ id: "a", match: ["*"] }),
+				createVariant({ id: "b", match: ["one"] }),
+			],
+		}
+
+		deleteVariant({ message, variant: message.variants[1]! })
+
+		expect(message.variants.length).toBe(1)
+		expect(message.variants[0]!.id).toBe("a")
+	})
+})
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
similarity index 51%
rename from inlang/source-code/message-bundle-component/src/helper/crud/variant/delete.ts
rename to inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
index 9da2d0c397..02878502d9 100644
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
@@ -1,11 +1,15 @@
 import type { Message, Variant } from "@inlang/sdk/v2"
 
+/**
+ * Deletes a variant from a message.
+ * The function mutates the message.
+ * @param props.message The message to delete the variant from.
+ * @param props.variant The variant to delete.
+ */
+
 const deleteVariant = (props: { message: Message; variant: Variant }) => {
-	const uniqueMatch = props.variant.match
 	// index from array where the variant is located
-	const index = props.message.variants.findIndex(
-		(variant) => JSON.stringify(variant.match) === JSON.stringify(uniqueMatch)
-	)
+	const index = props.message.variants.findIndex((variant) => variant.id === props.variant.id)
 
 	if (index > -1) {
 		// Delete existing variant
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
new file mode 100644
index 0000000000..3817f62f38
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
@@ -0,0 +1,15 @@
+import { createVariant } from "@inlang/sdk/v2"
+import { describe, expect, it } from "vitest"
+import variantIsCatchAll from "./isCatchAll.js"
+
+describe("isCatchAll", () => {
+	it("Should return true if variant is catchAll", () => {
+		expect(variantIsCatchAll({ variant: createVariant({ match: ["*"] }) })).toBe(true)
+		expect(variantIsCatchAll({ variant: createVariant({ match: ["*", "*"] }) })).toBe(true)
+	})
+	it("Should return false if variant is not catchAll", () => {
+		expect(variantIsCatchAll({ variant: createVariant({ match: ["one"] }) })).toBe(false)
+		expect(variantIsCatchAll({ variant: createVariant({ match: ["*", "one"] }) })).toBe(false)
+		expect(variantIsCatchAll({ variant: createVariant({ match: ["one", "*"] }) })).toBe(false)
+	})
+})
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/isCatchAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
similarity index 62%
rename from inlang/source-code/message-bundle-component/src/helper/crud/variant/isCatchAll.ts
rename to inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
index eeb679d825..2108bbb60e 100644
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/isCatchAll.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
@@ -1,5 +1,10 @@
 import type { Variant } from "@inlang/sdk/v2"
 
+/**
+ * Returns true if the variant has a catch-all match.
+ * @param props.variant The variant to check.
+ * @returns True if the variant has a catch-all match.
+ */
 const variantIsCatchAll = (props: { variant: Variant }): boolean => {
 	if (props.variant.match.filter((match) => match !== "*").length === 0) {
 		return true
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
new file mode 100644
index 0000000000..40f5c508eb
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest"
+import sortAllVariants from "./sortAll.js"
+import { createVariant, type Variant } from "@inlang/sdk/v2"
+
+describe("sortAllVariants", () => {
+	it("should sort variants based on matches (desc-alphabetically)", () => {
+		const variants: Variant[] = [
+			createVariant({ id: "1", match: ["a"] }),
+			createVariant({ id: "2", match: ["b"] }),
+			createVariant({ id: "3", match: ["c"] }),
+		]
+		const ignoreVariantIds: string[] = []
+
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+
+		expect(sortedVariants).toEqual([
+			createVariant({ id: "3", match: ["c"] }),
+			createVariant({ id: "2", match: ["b"] }),
+			createVariant({ id: "1", match: ["a"] }),
+		])
+	})
+
+	it("should sort variants based on matches (desc-alphabetically) complex", () => {
+		const variants: Variant[] = [
+			createVariant({ id: "1", match: ["a", "b", "c"] }),
+			createVariant({ id: "2", match: ["b", "b", "b"] }),
+			createVariant({ id: "3", match: ["b", "a", "a"] }),
+		]
+		const ignoreVariantIds: string[] = []
+
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+
+		expect(sortedVariants).toEqual([
+			createVariant({ id: "2", match: ["b", "b", "b"] }),
+			createVariant({ id: "3", match: ["b", "a", "a"] }),
+			createVariant({ id: "1", match: ["a", "b", "c"] }),
+		])
+	})
+
+	it("should sort variants based on matches (desc-alphabetically) with ignoreVariantIds", () => {
+		const variants: Variant[] = [
+			createVariant({ id: "1", match: ["a", "b", "c"] }),
+			createVariant({ id: "2", match: ["b", "b", "b"] }),
+			createVariant({ id: "3", match: ["b", "a", "a"] }),
+			createVariant({ id: "4", match: ["z", "z", "z"] }),
+		]
+		const ignoreVariantIds: string[] = ["4"]
+
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+
+		expect(sortedVariants).toEqual([
+			createVariant({ id: "2", match: ["b", "b", "b"] }),
+			createVariant({ id: "3", match: ["b", "a", "a"] }),
+			createVariant({ id: "1", match: ["a", "b", "c"] }),
+			createVariant({ id: "4", match: ["z", "z", "z"] }),
+		])
+	})
+
+	it("should handle empty variants array", () => {
+		const variants: Variant[] = []
+		const ignoreVariantIds: string[] = []
+
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+
+		expect(sortedVariants).toEqual([])
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
new file mode 100644
index 0000000000..29b0189c6f
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
@@ -0,0 +1,34 @@
+import { type Variant } from "@inlang/sdk/v2"
+
+/**
+ * Sort all variants by their match values.
+ * The function does not mutate the variants array.
+ * @param props.variants The variants to sort. The variants will be sorted in place.
+ * @param props.ignoreVariantIds The ids of the variants to ignore in the sorting. These variants will be placed at the end of the list.
+ * @returns The sorted variants.
+ */
+const sortAllVariants = (props: { variants: Variant[]; ignoreVariantIds: string[] }): Variant[] => {
+	const sortedVariants: Variant[] = structuredClone(props.variants)
+	sortedVariants.sort((a, b) => {
+		return compareValues(a, b, 0, props.ignoreVariantIds)
+	})
+	return sortedVariants
+}
+
+const compareValues = (
+	a: Variant,
+	b: Variant,
+	index: number,
+	ignoreVariantIds: string[]
+): number => {
+	if (a.match[index] && b.match[index]) {
+		if (ignoreVariantIds.includes(a.id)) return 1
+		if (a.match[index]! < b.match[index]!) return 1
+		if (a.match[index]! > b.match[index]!) return -1
+	}
+	if (a.match.length === index + 1) return 0
+	if (index > 10) return 0
+	return compareValues(a, b, index + 1, ignoreVariantIds)
+}
+
+export default sortAllVariants
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
new file mode 100644
index 0000000000..71568c0304
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest"
+import updateMatch from "./updateMatch.js"
+import { createVariant, type Variant } from "@inlang/sdk/v2"
+
+describe("updateMatch", () => {
+	it("should update the value at the specified match index", () => {
+		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const matchIndex = 1
+		const value = "orange"
+
+		updateMatch({ variant, matchIndex, value })
+
+		expect(variant.match[matchIndex]).toBe(value)
+		expect(variant.match.length).toBe(3)
+	})
+
+	it("should not update the value if match index is out of range", () => {
+		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const matchIndex = 3
+		const value = "orange"
+
+		updateMatch({ variant, matchIndex, value })
+
+		expect(variant.match[matchIndex]).toBeUndefined()
+		expect(variant.match.length).toBe(3)
+	})
+
+	it("should not update the value if match index is negative", () => {
+		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const matchIndex = -1
+		const value = "orange"
+
+		updateMatch({ variant, matchIndex, value })
+
+		expect(variant.match[matchIndex]).toBeUndefined()
+		expect(variant.match.length).toBe(3)
+	})
+})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
new file mode 100644
index 0000000000..76dba7d78b
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
@@ -0,0 +1,17 @@
+import type { Variant } from "@inlang/sdk/v2"
+
+/**
+ * Update the match at the specified index with the new value.
+ * The function mutates the variant.
+ * @param props.variant The variant to update.
+ * @param props.matchIndex The index of the match to update.
+ * @param props.value The new value to set at the match index.
+ */
+
+const updateMatch = (props: { variant: Variant; matchIndex: number; value: string }) => {
+	// update the match at index matchIndex with value (mutates variant)
+	if (props.matchIndex < 0 || props.matchIndex >= props.variant.match.length) return
+	props.variant.match[props.matchIndex] = props.value
+}
+
+export default updateMatch
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
similarity index 62%
rename from inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.test.ts
rename to inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
index 08ccec9851..a5071f7844 100644
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
@@ -1,4 +1,5 @@
-import { createMessage, createMessageBundle } from "@inlang/sdk/v2"
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { createMessage, createMessageBundle, createVariant } from "@inlang/sdk/v2"
 import { describe, expect, it } from "vitest"
 import upsertVariant from "./upsert.js"
 
@@ -6,7 +7,17 @@ describe("upsertVariant", () => {
 	it("Should update existing variant", () => {
 		const bundle = createMessageBundle({
 			id: "bundle-id",
-			messages: [createMessage({ locale: "en", text: "Hello World", match: ["*"] })],
+			messages: [
+				{
+					id: "test_message_id",
+					locale: "en",
+					declarations: [],
+					selectors: [],
+					variants: [
+						createVariant({ id: "test_upsertVariant_id", match: ["*"], text: "Hello World" }),
+					],
+				},
+			],
 		})
 
 		expect(bundle.messages).toHaveLength(1)
@@ -16,7 +27,11 @@ describe("upsertVariant", () => {
 
 		upsertVariant({
 			message: bundle.messages[0]!,
-			variant: { match: ["*"], pattern: [{ type: "text", value: "Hello Universe" }] },
+			variant: {
+				id: "test_upsertVariant_id",
+				match: ["*"],
+				pattern: [{ type: "text", value: "Hello Universe" }],
+			},
 		})
 
 		expect(bundle.messages[0]?.variants).toHaveLength(1)
@@ -38,12 +53,16 @@ describe("upsertVariant", () => {
 
 		upsertVariant({
 			message: bundle.messages[0]!,
-			variant: { match: ["one"], pattern: [{ type: "text", value: "Hello Universe" }] },
+			variant: {
+				id: "test_upsertVariant_id",
+				match: ["one"],
+				pattern: [{ type: "text", value: "Hello Universe" }],
+			},
 		})
 
 		expect(bundle.messages[0]?.variants).toHaveLength(2)
 		// it's 0 because it's sorted alphabetically
-		expect(bundle.messages[0]?.variants[0]?.pattern).toStrictEqual([
+		expect(bundle.messages[0]?.variants[1]?.pattern).toStrictEqual([
 			{ type: "text", value: "Hello Universe" },
 		])
 	})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
new file mode 100644
index 0000000000..3428dc20be
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
@@ -0,0 +1,30 @@
+import type { Message, Variant } from "@inlang/sdk/v2"
+
+/**
+ * Upsert a variant into a message. If a variant with the same match already exists, it will be updated, otherwise a new variant will be added.
+ * The function mutates message.
+ * @param props.message The message to upsert the variant into.
+ * @param props.variant The variant to upsert.
+ */
+
+const upsertVariant = (props: { message: Message; variant: Variant }): Variant | undefined => {
+	const existingVariant = props.message.variants.find((variant) => variant.id === props.variant.id)
+
+	if (existingVariant) {
+		// Update existing variant
+		// check if pattern is different
+		if (JSON.stringify(existingVariant.pattern) !== JSON.stringify(props.variant.pattern)) {
+			existingVariant.pattern = props.variant.pattern
+			return existingVariant
+		} else {
+			// pattern is the same
+			return
+		}
+	} else {
+		// Insert new variant
+		props.message.variants.push(props.variant)
+		return props.variant
+	}
+}
+
+export default upsertVariant
diff --git a/inlang/source-code/message-bundle-component/src/helper/overridePrimitiveColors.test.ts b/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.test.ts
similarity index 100%
rename from inlang/source-code/message-bundle-component/src/helper/overridePrimitiveColors.test.ts
rename to inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.test.ts
diff --git a/inlang/source-code/message-bundle-component/src/helper/overridePrimitiveColors.ts b/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts
similarity index 100%
rename from inlang/source-code/message-bundle-component/src/helper/overridePrimitiveColors.ts
rename to inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts
diff --git a/inlang/source-code/message-bundle-component/src/helper/simplifyBundle.ts b/inlang/source-code/bundle-component/src/helper/simplifyBundle.ts
similarity index 100%
rename from inlang/source-code/message-bundle-component/src/helper/simplifyBundle.ts
rename to inlang/source-code/bundle-component/src/helper/simplifyBundle.ts
diff --git a/inlang/source-code/bundle-component/src/index.ts b/inlang/source-code/bundle-component/src/index.ts
new file mode 100644
index 0000000000..51a2ba1eac
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/index.ts
@@ -0,0 +1 @@
+export { default as InlangBundle } from "./stories/inlang-bundle.js"
diff --git a/inlang/source-code/bundle-component/src/inlang-bundle.mdx b/inlang/source-code/bundle-component/src/inlang-bundle.mdx
new file mode 100644
index 0000000000..e10e28cf75
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/inlang-bundle.mdx
@@ -0,0 +1,4 @@
+import { Meta, Primary, Controls, Story, Canvas, ArgTypes, Source } from '@storybook/blocks';
+import * as InlangBundle from './stories/inlang-bundle.stories';
+
+# Inlang Bundle
\ No newline at end of file
diff --git a/inlang/source-code/bundle-component/src/mock/lint.ts b/inlang/source-code/bundle-component/src/mock/lint.ts
new file mode 100644
index 0000000000..a4d13205e8
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/mock/lint.ts
@@ -0,0 +1,51 @@
+import type { LintReport } from "@inlang/sdk/v2"
+import {
+	createMockBundleLintReport,
+	createMockMessageLintReport,
+	createMockVariantLintReport,
+} from "@inlang/sdk/v2-mocks"
+
+export const mockMessageLintReports: LintReport[] = [
+	createMockMessageLintReport({
+		ruleId: "messageBundleLintRule.inlang.missingReference",
+		messageBundleId: "mock_bundle_human_id",
+		messageId: "mock_message_id_en",
+		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+	}),
+	createMockMessageLintReport({
+		ruleId: "messageBundleLintRule.inlang.missingReference",
+		messageBundleId: "mock_bundle_human_id",
+		messageId: "mock_message_id_en",
+		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+		level: "warning",
+	}),
+]
+
+export const mockVariantLintReports: LintReport[] = [
+	createMockVariantLintReport({
+		ruleId: "messageBundleLintRule.inlang.missingMessage",
+		messageBundleId: "mock_bundle_human_id",
+		messageId: "mock_message_id_de",
+		variantId: "mock_variant_id_de_one",
+		body: "Variant test for `de` to check if can be rendered correctly",
+	}),
+]
+
+export const mockInstalledLintRules = [
+	{
+		id: "messageBundleLintRule.inlang.missingMessage",
+		displayName: "Missing Message",
+		description: "Reports when a message is missing in a message bundle",
+		module:
+			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		level: "error",
+	},
+	{
+		id: "messageBundleLintRule.inlang.missingReference",
+		displayName: "Missing Reference",
+		description: "Reports when a reference message is missing in a message bundle",
+		module:
+			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		level: "warning",
+	},
+]
diff --git a/inlang/source-code/bundle-component/src/mock/messageBundle.ts b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
new file mode 100644
index 0000000000..6bf67460d7
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
@@ -0,0 +1,37 @@
+import type { MessageBundle } from "@inlang/sdk/v2"
+
+export const bundleWithoutSelectors: MessageBundle = {
+	id: "message-bundle-id",
+	messages: [
+		{
+			id: "message-id-en",
+			locale: "en",
+			selectors: [],
+			declarations: [],
+			variants: [
+				{
+					id: "variant-id-en-*",
+					match: [],
+					pattern: [{ type: "text", value: "{count} new messages" }],
+				},
+			],
+		},
+		{
+			id: "message-id-de",
+			locale: "de",
+			selectors: [],
+			declarations: [],
+			variants: [
+				{
+					id: "variant-id-de-*",
+					match: [],
+					pattern: [{ type: "text", value: "{count} neue Nachrichten" }],
+				},
+			],
+		},
+	],
+	alias: {},
+	// 	default: "frontend_button_text",
+	// 	ios: "frontendButtonText",
+	// },
+}
diff --git a/inlang/source-code/bundle-component/src/mock/settings.ts b/inlang/source-code/bundle-component/src/mock/settings.ts
new file mode 100644
index 0000000000..40d3612f40
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/mock/settings.ts
@@ -0,0 +1,42 @@
+import type { ProjectSettings2 } from "@inlang/sdk/v2"
+
+export const mockSettings: ProjectSettings2 = {
+	$schema: "https://inlang.com/schema/project-settings",
+	baseLocale: "en",
+	locales: ["en", "de", "nl"],
+	lintConfig: [
+		{
+			ruleId: "messageBundleLintRule.inlang.identicalPattern",
+			level: "error",
+		},
+	],
+	modules: [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+	],
+	"plugin.inlang.i18next": {
+		pathPattern: {
+			brain: "./frontend/public/locales/{languageTag}/brain.json",
+			chat: "./frontend/public/locales/{languageTag}/chat.json",
+			config: "./frontend/public/locales/{languageTag}/config.json",
+			contact: "./frontend/public/locales/{languageTag}/contact.json",
+			deleteOrUnsubscribeFormBrain:
+				"./frontend/public/locales/{languageTag}/deleteOrUnsubscribeFormBrain.json",
+			explore: "./frontend/public/locales/{languageTag}/explore.json",
+			external_api_definition:
+				"./frontend/public/locales/{languageTag}/external_api_definition.json",
+			home: "./frontend/public/locales/{languageTag}/home.json",
+			invitation: "./frontend/public/locales/{languageTag}/invitation.json",
+			knowledge: "./frontend/public/locales/{languageTag}/knowledge.json",
+			login: "./frontend/public/locales/{languageTag}/login.json",
+			logout: "./frontend/public/locales/{languageTag}/logout.json",
+			monetization: "./frontend/public/locales/{languageTag}/monetization.json",
+			translation: "./frontend/public/locales/{languageTag}/translation.json",
+			upload: "./frontend/public/locales/{languageTag}/upload.json",
+			user: "./frontend/public/locales/{languageTag}/user.json",
+		},
+	},
+}
diff --git a/inlang/source-code/bundle-component/src/stories/actions/inlang-bundle-action.ts b/inlang/source-code/bundle-component/src/stories/actions/inlang-bundle-action.ts
new file mode 100644
index 0000000000..8e10ab38ee
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/actions/inlang-bundle-action.ts
@@ -0,0 +1,47 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+import { baseStyling } from "../../styling/base.js"
+
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
+
+// in case an app defines it's own set of shoelace components, prevent double registering
+if (!customElements.get("sl-button")) customElements.define("sl-button", SlButton)
+
+@customElement("inlang-bundle-action")
+export default class InlangBundleAction extends LitElement {
+	static override styles = [
+		baseStyling,
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			sl-button::part(base) {
+				color: var(--sl-input-color);
+				background-color: var(--sl-input-background-color);
+				border: 1px solid var(--sl-input-border-color);
+				border-radius: 4px;
+				font-size: 13px;
+			}
+			sl-button::part(base):hover {
+				color: var(--sl-input-color-hover);
+				background-color: var(--sl-input-background-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+		`,
+	]
+
+	//props
+	@property()
+	actionTitle: string | undefined
+
+	override render() {
+		return html`<sl-menu-item>${this.actionTitle}</sl-menu-item>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-bundle-action": InlangBundleAction
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/actions/inlang-variant-action.ts b/inlang/source-code/bundle-component/src/stories/actions/inlang-variant-action.ts
new file mode 100644
index 0000000000..b43547ee32
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/actions/inlang-variant-action.ts
@@ -0,0 +1,54 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+import { baseStyling } from "../../styling/base.js"
+
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
+import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js"
+
+// in case an app defines it's own set of shoelace components, prevent double registering
+if (!customElements.get("sl-button")) customElements.define("sl-button", SlButton)
+if (!customElements.get("sl-tooltip")) customElements.define("sl-tooltip", SlTooltip)
+
+@customElement("inlang-variant-action")
+export default class InlangVariantAction extends LitElement {
+	static override styles = [
+		baseStyling,
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			sl-button::part(base) {
+				color: var(--sl-input-color);
+				background-color: var(--sl-input-background-color);
+				border: 1px solid var(--sl-input-border-color);
+				border-radius: 4px;
+				font-size: 13px;
+			}
+			sl-button::part(base):hover {
+				color: var(--sl-input-color-hover);
+				background-color: var(--sl-input-background-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+		`,
+	]
+
+	//props
+	@property()
+	actionTitle: string | undefined
+
+	@property()
+	tooltip: string | undefined
+
+	override render() {
+		return html`<sl-tooltip content=${this.tooltip}
+			><sl-button size="small">${this.actionTitle}</sl-button></sl-tooltip
+		>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-variant-action": InlangVariantAction
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-add-input.ts b/inlang/source-code/bundle-component/src/stories/inlang-add-input.ts
new file mode 100644
index 0000000000..4d75f9c960
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-add-input.ts
@@ -0,0 +1,157 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+
+import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js"
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js"
+
+@customElement("inlang-add-input")
+export default class InlangAddInput extends LitElement {
+	static override styles = [
+		css`
+			.button-wrapper {
+				height: 44px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.dropdown-container {
+				font-size: 13px;
+				width: 240px;
+				background-color: var(--sl-panel-background-color);
+				border: 1px solid var(--sl-input-border-color);
+				padding: 12px;
+				border-radius: 6px;
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+			}
+			.dropdown-item {
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+			}
+			.dropdown-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				color: var(--sl-input-color);
+				font-size: 12px;
+			}
+			.dropdown-title {
+				font-size: 12px;
+				font-weight: 500;
+				margin: 6px 0;
+			}
+			.help-text {
+				display: flex;
+				gap: 8px;
+				color: var(--sl-input-help-text-color);
+			}
+			.help-text p {
+				flex: 1;
+				margin: 0;
+				font-size: 12px;
+				line-height: 1.5;
+			}
+			.actions {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+		`,
+	]
+
+	//props
+	@property()
+	addInput: (inputName: string) => void = () => {}
+
+	//state
+	@state()
+	private _newInput: string | undefined
+
+	override async firstUpdated() {
+		await this.updateComplete
+		this._newInput = ""
+	}
+
+	override render() {
+		return html`
+			<sl-dropdown
+				distance="-4"
+				class="dropdown"
+				@sl-show=${(e: CustomEvent) => {
+					const dropdown = this.shadowRoot?.querySelector("sl-dropdown")
+					if (dropdown) {
+						if (e.target === dropdown) {
+							const input: SlInput | undefined | null = this.shadowRoot?.querySelector("sl-input")
+							setTimeout(() => {
+								if (input) input.focus()
+							})
+						}
+					}
+				}}
+			>
+				<div slot="trigger" class="button-wrapper">
+					<slot></slot>
+				</div>
+				<div class="dropdown-container">
+					<div class="dropdown-item">
+						<div class="dropdown-header">
+							<p class="dropdown-title">Add input</p>
+						</div>
+						<sl-input
+							size="small"
+							value=${this._newInput}
+							placeholder="Enter name"
+							@input=${(e: Event) => {
+								this._newInput = (e.target as HTMLInputElement).value
+							}}
+							@keydown=${(e: KeyboardEvent) => {
+								if (e.key === "Enter") {
+									if (this._newInput && this._newInput.trim() !== "") {
+										this.addInput(this._newInput)
+									}
+									this._newInput = ""
+									const dropdown = this.shadowRoot?.querySelector(".dropdown") as SlDropdown
+									dropdown.hide()
+								}
+							}}
+							><svg
+								slot="suffix"
+								xmlns="http://www.w3.org/2000/svg"
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+							>
+								<path
+									fill="currentColor"
+									d="M19 6a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H7.41l1.3-1.29a1 1 0 0 0-1.42-1.42l-3 3a1 1 0 0 0-.21.33a1 1 0 0 0 0 .76a1 1 0 0 0 .21.33l3 3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L7.41 14H17a3 3 0 0 0 3-3V7a1 1 0 0 0-1-1"
+								/></svg
+						></sl-input>
+					</div>
+					<div class="help-text">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24px"
+							height="24px"
+							viewBox="0 0 256 256"
+						>
+							<path
+								fill="currentColor"
+								d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+							/>
+						</svg>
+						<p>As soon as added this input can be used in all messages of the bundle.</p>
+					</div>
+				</div>
+			</sl-dropdown>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-add-input": InlangAddInput
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
new file mode 100644
index 0000000000..51966b0667
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
@@ -0,0 +1,295 @@
+import type {
+	Declaration,
+	LanguageTag,
+	Message,
+	MessageBundle,
+	ProjectSettings2,
+	Variant,
+} from "@inlang/sdk/v2"
+import { LitElement, css, html } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+import getInputs from "../helper/crud/input/get.js"
+import deleteInput from "../helper/crud/input/delete.js"
+
+@customElement("inlang-bundle-header")
+export default class InlangBundleHeader extends LitElement {
+	static override styles = [
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			.header {
+				display: flex;
+				justify-content: space-between;
+				background-color: var(--sl-color-neutral-300);
+				padding: 0 12px;
+				min-height: 44px;
+			}
+			.header-left {
+				font-weight: 600;
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				min-height: 44px;
+				color: var(--sl-input-color);
+			}
+			.header-right {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+				min-height: 44px;
+			}
+			.separator {
+				height: 20px;
+				width: 1px;
+				background-color: var(--sl-input-border-color-hover);
+				opacity: 0.7;
+				border-radius: 1px;
+			}
+			.slotted-menu-wrapper {
+				display: flex;
+				flex-direction: column;
+			}
+			.inputs-wrapper {
+				display: flex;
+				align-items: center;
+				min-height: 44px;
+				gap: 8px;
+				color: var(--sl-input-color);
+			}
+			.inputs {
+				display: flex;
+				align-items: center;
+				min-height: 44px;
+				gap: 1px;
+			}
+			.input-tag::part(base) {
+				height: 28px;
+				font-weight: 500;
+				cursor: pointer;
+			}
+			.text-button::part(base) {
+				background-color: transparent;
+				border: 1px solid transparent;
+			}
+			.text-button::part(base):hover {
+				background-color: var(--sl-panel-border-color);
+				border: 1px solid transparent;
+				color: var(--sl-input-color-hover);
+			}
+			.alias-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+			.alias {
+				font-weight: 400;
+				color: var(--sl-input-placeholder-color);
+			}
+			.alias-counter {
+				height: 20px;
+				width: 24px;
+				font-weight: 500;
+				font-size: 11px;
+				color: var(--sl-input-color-hover);
+				padding: 4px;
+				border-radius: 4px;
+				background-color: var(--sl-input-background-color-hover);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			sl-button::part(base) {
+				background-color: var(--sl-input-background-color);
+				color: var(--sl-input-color);
+				border: 1px solid var(--sl-input-border-color);
+				font-size: 13px;
+			}
+			sl-button::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+				color: var(--sl-input-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+			sl-menu-item::part(label) {
+				font-size: 14px;
+				padding-left: 12px;
+			}
+			sl-menu-item::part(base) {
+				color: var(--sl-input-color);
+			}
+			sl-menu-item::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			sl-menu-item::part(checked-icon) {
+				display: none;
+			}
+			.selector:hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+		`,
+	]
+
+	@property()
+	bundle: MessageBundle | undefined
+
+	@property()
+	settings: ProjectSettings2 | undefined
+
+	@property()
+	addInput: (input: Declaration) => void = () => {}
+
+	@property()
+	triggerSave: () => void = () => {}
+
+	@property()
+	triggerRefresh: () => void = () => {}
+
+	@state()
+	private _hasActions: boolean = false
+
+	dispatchOnUpdateMessage(message: Message, variants: Variant[]) {
+		const onUpdateMessage = new CustomEvent("update-message", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					message,
+					variants,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateMessage)
+	}
+
+	private _inputs = (): Declaration[] | undefined => {
+		return this.bundle ? getInputs({ messageBundle: this.bundle }) : undefined
+	}
+
+	override async firstUpdated() {
+		await this.updateComplete
+		this._hasActions = this.querySelector("[slot=bundle-action]") !== null
+	}
+
+	override render() {
+		return html`
+			<div class=${`header`} part="base">
+				<div class="header-left">
+					<span># ${this.bundle?.id}</span>
+					${this.bundle?.alias && Object.keys(this.bundle.alias).length > 0
+						? html` <div class="alias-wrapper">
+								<span class="alias">Alias: ${this.bundle?.alias?.default}</span>
+								${Object.keys(this.bundle.alias).length > 1
+									? html`<div class="alias-counter">
+											+${Object.keys(this.bundle.alias).length - 1}
+									  </div>`
+									: ``}
+						  </div>`
+						: ``}
+				</div>
+
+				<div class="header-right">
+					${this._inputs() && this._inputs()!.length > 0
+						? html`<div class="inputs-wrapper">
+								Inputs:
+								<div class="inputs">
+									${this._inputs()?.map(
+										(input) =>
+											html`<sl-dropdown
+												><sl-button slot="trigger" class="input-tag" variant="neutral" size="small"
+													>${input.name}</sl-button
+												><sl-menu>
+													<sl-menu-item
+														value="delete"
+														@click=${() => {
+															deleteInput({ messageBundle: this.bundle!, input })
+															// deleteSelector({ message, index })
+															this.requestUpdate()
+															for (const message of this.bundle!.messages) {
+																this.dispatchOnUpdateMessage(message, [])
+															}
+														}}
+														>Delete</sl-menu-item
+													>
+												</sl-menu>
+											</sl-dropdown>`
+									)}
+									<inlang-add-input
+										.addInput=${(x: any) => {
+											this.addInput(x)
+											this.requestUpdate()
+										}}
+									>
+										<sl-tooltip content="Add input to message bundle">
+											<sl-button class="text-button" variant="neutral" size="small"
+												><svg
+													viewBox="0 0 24 24"
+													width="18"
+													height="18"
+													style="margin: 0 -2px"
+													slot="prefix"
+												>
+													<path
+														fill="currentColor"
+														d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"
+													></path></svg
+											></sl-button>
+										</sl-tooltip>
+									</inlang-add-input>
+								</div>
+						  </div>`
+						: html`<div class="inputs-wrapper">
+								<inlang-add-input
+									.addInput=${(x: any) => {
+										this.addInput(x)
+										this.requestUpdate()
+									}}
+								>
+									<sl-tooltip content="Add input to message bundle">
+										<sl-button class="text-button" variant="text" size="small"
+											><svg
+												viewBox="0 0 24 24"
+												width="18"
+												height="18"
+												slot="prefix"
+												style="margin-right: -2px"
+											>
+												<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path></svg
+											>Input</sl-button
+										>
+									</sl-tooltip>
+								</inlang-add-input>
+						  </div>`}
+					${this._hasActions
+						? html`<div class="separator"></div>
+								<sl-dropdown class="bundle-actions">
+									<sl-button class="text-button" variant="text" size="small" slot="trigger"
+										><svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											slot="prefix"
+											style="margin: 0 -2px"
+										>
+											<path
+												fill="currentColor"
+												d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"
+											/></svg
+									></sl-button>
+									<sl-menu>
+										<slot name="bundle-action"></slot>
+									</sl-menu>
+								</sl-dropdown>`
+						: ``}
+				</div>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-bundle-header": InlangBundleHeader
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-root.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-root.ts
new file mode 100644
index 0000000000..f951c26029
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-root.ts
@@ -0,0 +1,33 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+import { baseStyling } from "../styling/base.js"
+
+@customElement("inlang-bundle-root")
+export default class InlangBundleRoot extends LitElement {
+	static override styles = [
+		baseStyling,
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			.messages-container {
+				width: 100%;
+				margin-bottom: 16px;
+			}
+		`,
+	]
+
+	override render() {
+		return html`<div>
+			<slot name="bundle-header"></slot>
+			<slot name="messages"></slot>
+		</div>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-bundle-root": InlangBundleRoot
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
new file mode 100644
index 0000000000..d2308882b0
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
@@ -0,0 +1,171 @@
+import "./inlang-bundle.ts"
+import "./testing/reactiveWrapper.ts"
+import type { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import {
+	mockInstalledLintRules,
+	mockMessageLintReports,
+	mockVariantLintReports,
+} from "../mock/lint.ts"
+import { mockSettings } from "../mock/settings.ts"
+import { bundleWithoutSelectors } from "../mock/messageBundle.ts"
+import { pluralBundle } from "@inlang/sdk/v2-mocks"
+
+import "./actions/inlang-bundle-action.ts"
+
+const meta: Meta = {
+	component: "inlang-bundle",
+	title: "Public/inlang-bundle",
+	argTypes: {
+		bundle: {
+			control: { type: "object" },
+			description: "Type MessageBundle: see sdk v2",
+		},
+		settings: {
+			control: { type: "object" },
+			description: "Type ProjectSettings2: see sdk v2",
+		},
+		installedLintRules: {
+			control: { type: "Array" },
+			description:
+				"Optional: Type InstalledLintRule[]: see sdk v2. If defined the reports will be shown with more meta data.",
+		},
+		filteredLocales: {
+			control: { type: "Array" },
+			description:
+				"Optional: Type LanguageTag[]. Pass it in when you want to filter the locales of the bundle. If not passed, all locales will be shown.",
+		},
+	},
+}
+
+export default meta
+
+export const Simple: StoryObj = {
+	render: () => {
+		return html`<inlang-bundle
+			.bundle=${bundleWithoutSelectors}
+			.settings=${mockSettings}
+			.filteredLocales=${["en", "de"]}
+			@change-bundle=${(data: any) => console.info("changeBundle", data.detail.argument)}
+			@machine-translate=${(data: any) =>
+				console.info("machine translate", JSON.stringify(data.detail.argument))}
+			@fix-lint=${(data: any) => console.info("fixLint", data.detail.argument)}
+		>
+		</inlang-bundle>`
+	},
+}
+
+export const Complex: StoryObj = {
+	render: () => {
+		return html`<inlang-bundle
+			.bundle=${pluralBundle}
+			.settings=${mockSettings}
+			.installedLintRules=${mockInstalledLintRules}
+			@update-bundle=${(data: any) => console.info("updateBundle", data.detail.argument)}
+			@insert-message=${(data: any) => console.info("insertMessage", data.detail.argument)}
+			@update-message=${(data: any) => console.info("updateMessage", data.detail.argument)}
+			@delete-message=${(data: any) => console.info("deleteMessage", data.detail.argument)}
+			@insert-variant=${(data: any) => console.info("insertVariant", data.detail.argument)}
+			@update-variant=${(data: any) => console.info("updateVariant", data.detail.argument)}
+			@delete-variant=${(data: any) => console.info("deleteVariant", data.detail.argument)}
+			@fix-lint=${(data: any) => console.info("fixLint", data.detail.argument)}
+		>
+			<inlang-bundle-action
+				actionTitle="Share"
+				@click=${() => console.log("Share")}
+			></inlang-bundle-action>
+			<inlang-bundle-action
+				actionTitle="Edit alias"
+				@click=${() => console.log("Edit alias")}
+			></inlang-bundle-action>
+		</inlang-bundle> `
+	},
+}
+
+export const Styled: StoryObj = {
+	render: () =>
+		html`
+			<style>
+				.inlang-pattern-editor-contenteditable {
+					background-color: #313131 !important;
+					color: #e0e0e0 !important;
+				}
+				.inlang-pattern-editor-contenteditable:hover {
+					background-color: #000 !important;
+					color: #ffffff !important;
+				}
+				.inlang-pattern-editor-placeholder {
+					color: #e0e0e0;
+				}
+				inlang-bundle-header::part(base) {
+					background-color: #000;
+				}
+
+				inlang-bundle-root {
+					--inlang-color-primary: #f97316;
+
+					/* input & button */
+					--sl-input-background-color: #313131;
+					--sl-input-background-color-hover: #000;
+					--sl-input-border-color: #606060;
+					--sl-input-border-color-hover: #646464;
+					--sl-input-color: #e0e0e0;
+					--sl-input-color-focus: #ffffff;
+					--sl-input-color-hover: #ffffff;
+					--sl-input-placeholder-color: #a0a0a0;
+					--sl-input-background-color-disabled: #242424;
+
+					/* focus ring */
+					--sl-input-focus-ring-color: var(--inlang-color-primary);
+					--sl-focus-ring-width: 2px;
+
+					/* tooltip */
+					--sl-tooltip-background-color: #000000;
+					--sl-tooltip-color: #e0e0e0;
+
+					/* panel */
+					--sl-panel-background-color: #242424;
+					--sl-input-help-text-color: #b0b0b0;
+					--sl-panel-border-color: #606060;
+				}
+
+				inlang-bundle-action {
+					--sl-input-background-color: #313131;
+					--sl-input-background-color-hover: #000;
+					--sl-input-border-color: #606060;
+					--sl-input-color: #e0e0e0;
+					--sl-input-color-hover: #ffffff;
+				}
+			</style>
+
+			<inlang-bundle
+				.bundle=${pluralBundle}
+				.settings=${mockSettings}
+				.lintReports=${[...mockMessageLintReports, ...mockVariantLintReports]}
+				.installedLintRules=${mockInstalledLintRules}
+				@change-message-bundle=${(data: any) =>
+					console.info("changeMessageBundle", data.detail.argument)}
+				@fix-lint=${(data: any) => console.info("fixLint", data.detail.argument)}
+			>
+				<inlang-bundle-action
+					actionTitle="Share"
+					@click=${() => console.log("Share")}
+				></inlang-bundle-action>
+				<inlang-bundle-action
+					actionTitle="Edit alias"
+					@click=${() => console.log("Edit alias")}
+				></inlang-bundle-action>
+			</inlang-bundle>
+		`,
+}
+
+export const ReactiveLints: StoryObj = {
+	render: () => {
+		return html`<inlang-reactive-wrapper
+			.bundle=${pluralBundle}
+			.settings=${mockSettings}
+			.installedLintRules=${mockInstalledLintRules}
+		>
+		</inlang-reactive-wrapper> `
+	},
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
new file mode 100644
index 0000000000..4aac487c91
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -0,0 +1,431 @@
+import { html, LitElement } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+import overridePrimitiveColors from "../helper/overridePrimitiveColors.js"
+import {
+	type MessageBundle,
+	type Message,
+	type Pattern,
+	type LanguageTag,
+	type LintReport,
+	type ProjectSettings2,
+	type Declaration,
+	createVariant,
+	createMessage,
+	type Variant,
+	type Expression,
+} from "@inlang/sdk/v2"
+import type { InstalledMessageLintRule } from "@inlang/sdk"
+
+//internal components
+import "./inlang-bundle-root.js"
+import "./inlang-bundle-header.js"
+import "./inlang-message.js"
+import "./inlang-variant.js"
+import "./pattern-editor/inlang-pattern-editor.js"
+import "./actions/inlang-variant-action.js"
+
+//shoelace components
+import SlTag from "@shoelace-style/shoelace/dist/components/tag/tag.component.js"
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js"
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
+import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js"
+import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js"
+import SlMenu from "@shoelace-style/shoelace/dist/components/menu/menu.component.js"
+import SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js"
+import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.component.js"
+import SlOption from "@shoelace-style/shoelace/dist/components/option/option.component.js"
+
+// in case an app defines it's own set of shoelace components, prevent double registering
+if (!customElements.get("sl-tag")) customElements.define("sl-tag", SlTag)
+if (!customElements.get("sl-input")) customElements.define("sl-input", SlInput)
+if (!customElements.get("sl-button")) customElements.define("sl-button", SlButton)
+if (!customElements.get("sl-tooltip")) customElements.define("sl-tooltip", SlTooltip)
+if (!customElements.get("sl-dropdown")) customElements.define("sl-dropdown", SlDropdown)
+if (!customElements.get("sl-menu")) customElements.define("sl-menu", SlMenu)
+if (!customElements.get("sl-menu-item")) customElements.define("sl-menu-item", SlMenuItem)
+if (!customElements.get("sl-select")) customElements.define("sl-select", SlSelect)
+if (!customElements.get("sl-option")) customElements.define("sl-option", SlOption)
+
+//helpers
+import getInputs from "../helper/crud/input/get.js"
+import createInput from "../helper/crud/input/create.js"
+import upsertVariant from "../helper/crud/variant/upsert.js"
+import patternToString from "../helper/crud/pattern/patternToString.js"
+import stringToPattern from "../helper/crud/pattern/stringToPattern.js"
+import sortAllVariants from "../helper/crud/variant/sortAll.js"
+import InlangBundleAction from "./actions/inlang-bundle-action.js"
+import deleteInput from "../helper/crud/input/delete.js"
+import deleteSelector from "../helper/crud/selector/delete.js"
+import addSelector from "../helper/crud/selector/add.js"
+import deleteVariant from "../helper/crud/variant/delete.js"
+import updateMatch from "../helper/crud/variant/updateMatch.js"
+
+@customElement("inlang-bundle")
+export default class InlangBundle extends LitElement {
+	//props
+	@property({ type: Object })
+	bundle: MessageBundle | undefined
+
+	@property({ type: Object })
+	settings: ProjectSettings2 | undefined
+
+	@property({ type: Array })
+	filteredLocales: LanguageTag[] | undefined
+
+	@property({ type: Array })
+	installedLintRules: InstalledMessageLintRule[] | undefined
+
+	//disable shadow root -> because of contenteditable selection API
+	override createRenderRoot() {
+		return this
+	}
+
+	// events
+	dispatchOnUpdateVariant(variant: Variant) {
+		const onUpdateVariant = new CustomEvent("update-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateVariant)
+	}
+
+	dispatchOnInsertVariant(variant: Variant) {
+		const onInsertVariant = new CustomEvent("insert-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onInsertVariant)
+	}
+
+	dispatchOnInsertMessage(message: Message, variants: Variant[]) {
+		const onInsertMessage = new CustomEvent("insert-message", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					message,
+					variants,
+				},
+			},
+		})
+		this.dispatchEvent(onInsertMessage)
+	}
+
+	dispatchOnUpdateMessage(message: Message, variants: Variant[]) {
+		const onUpdateMessage = new CustomEvent("update-message", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					message,
+					variants,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateMessage)
+	}
+
+	dispatchOnFixLint(lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) {
+		const onFixLint = new CustomEvent("fix-lint", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					lintReport,
+					fix,
+				},
+			},
+		})
+		this.dispatchEvent(onFixLint)
+	}
+
+	dispatchOnMachineTranslate(messageId?: string, variantId?: string) {
+		const onMachineTranslate = new CustomEvent("machine-translate", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					messageId,
+					variantId,
+				},
+			},
+		})
+		this.dispatchEvent(onMachineTranslate)
+	}
+
+	// internal variables/states
+	@state()
+	private _bundle: MessageBundle | undefined
+
+	@state()
+	private _freshlyAddedVariants: string[] = []
+
+	@state()
+	private _bundleActions: Element[] = []
+
+	//functions
+	private _triggerSave = () => {
+		if (this._bundle) {
+			//this.dispatchOnChangeMessageBundle(this._bundle)
+		}
+	}
+
+	private _addMessage = (message: Message) => {
+		if (this._bundle) {
+			this._bundle.messages.push(message)
+		}
+		this._triggerSave()
+		this._triggerRefresh()
+	}
+
+	private _addInput = (name: string) => {
+		if (this._bundle) {
+			createInput({ messageBundle: this._bundle, inputName: name })
+		}
+		for (const message of this._bundle?.messages || []) {
+			this.dispatchOnUpdateMessage(message, [])
+		}
+		this.requestUpdate()
+	}
+
+	private _triggerRefresh = () => {
+		this.requestUpdate()
+	}
+
+	private _resetFreshlyAddedVariants = (newArray: string[]) => {
+		this._freshlyAddedVariants = newArray
+	}
+
+	private _fixLint = (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => {
+		this.dispatchOnFixLint(lintReport, fix)
+	}
+
+	private _refLocale = (): LanguageTag | undefined => {
+		return this.settings?.baseLocale
+	}
+
+	private _filteredLocales = (): LanguageTag[] | undefined => {
+		if (!this.filteredLocales) return this.settings?.locales
+		if (this.filteredLocales && this.filteredLocales.length === 0) return this.filteredLocales
+		return this.filteredLocales
+	}
+
+	private _locales = (): LanguageTag[] | undefined => {
+		return this._filteredLocales() || undefined
+	}
+
+	private _inputs = (): Declaration[] | undefined => {
+		const _refLanguageTag = this._refLocale()
+		return _refLanguageTag && this._bundle ? getInputs({ messageBundle: this._bundle }) : undefined
+	}
+
+	private _getBundleActions = (): Element[] => {
+		return Array.from(this.children)
+			.filter((child) => child instanceof InlangBundleAction)
+			.map((child) => {
+				child.setAttribute("slot", "bundle-action")
+				const style = document.createElement("style")
+				style.textContent = `
+					sl-menu-item::part(label) {
+						font-size: 14px;
+						padding-left: 12px;
+					}
+					sl-menu-item::part(base) {
+						color: var(--sl-input-color);
+					}
+					sl-menu-item::part(base):hover {
+						background-color: var(--sl-input-background-color-hover);
+					}
+					sl-menu-item::part(checked-icon) {
+						display: none;
+					}
+                `
+				child.shadowRoot?.appendChild(style)
+				return child
+			})
+	}
+
+	// fill message with empty message if message is undefined to fix layout shift (will not be committed)
+	private _fillMessage = (message: Message | undefined, locale: LanguageTag): Message => {
+		if (message) {
+			if (message.variants.length === 0) {
+				message.variants.push(createVariant({ match: [] }))
+			}
+			return message
+		} else {
+			return createMessage({ locale: locale, text: "" })
+		}
+	}
+
+	private _handleUpdatePattern = (
+		message: Message | undefined,
+		variant: Variant | undefined,
+		newPattern: Pattern,
+		locale: LanguageTag
+	) => {
+		if (variant) {
+			if (!message) {
+				throw new Error("a variant cant exist without a message")
+			}
+
+			// update existing variant
+			const newVariant = { ...variant, pattern: newPattern }
+			const upsertedVariant = upsertVariant({
+				message: message!,
+				variant: newVariant,
+			})
+			if (upsertedVariant) {
+				this.dispatchOnUpdateVariant(upsertedVariant)
+			}
+		} else {
+			const newVariant = {
+				...createVariant({ match: [] }),
+				pattern: newPattern,
+			}
+
+			if (message) {
+				// A message object exists -> just add the new variant
+				upsertVariant({
+					message: message!,
+					variant: newVariant,
+				})
+				this.dispatchOnInsertVariant(newVariant)
+			} else {
+				// A message object does not exist yet -> create one that also contains the new variant
+				const newMessage = {
+					...createMessage({ locale: locale, text: "test" }),
+					selectors: [],
+					declarations: [],
+					locale: locale,
+					variants: [newVariant],
+				}
+				this._addMessage(newMessage)
+				this.dispatchOnInsertMessage(newMessage, [newVariant])
+				this.dispatchOnInsertVariant(newVariant)
+			}
+		}
+		this.requestUpdate()
+	}
+
+	// hooks
+	override updated(changedProperties: any) {
+		// works like useEffect
+		// In order to not mutate object references, we need to clone the object
+		// When the messageBundle prop changes, we update the internal state
+		if (changedProperties.has("bundle")) {
+			this._bundle = structuredClone(this.bundle)
+			this._bundleActions = this._getBundleActions()
+		}
+	}
+
+	override connectedCallback() {
+		super.connectedCallback()
+		this._bundle = structuredClone(this.bundle)
+	}
+
+	override async firstUpdated() {
+		await this.updateComplete
+		// override primitive colors to match the design system
+		overridePrimitiveColors()
+		this._bundle = structuredClone(this.bundle)
+	}
+
+	override render() {
+		return html`
+			<inlang-bundle-root>
+				<inlang-bundle-header
+					.bundle=${this._bundle}
+					.settings=${this.settings}
+					.addInput=${this._addInput}
+					.triggerSave=${this._triggerSave}
+					.triggerRefresh=${this._triggerRefresh}
+					slot="bundle-header"
+				>
+					${this._bundleActions.map((action) => {
+						return html`${action}`
+					})}
+				</inlang-bundle-header>
+				<div class="messages-container" slot="messages">
+					${this._locales() &&
+					this._locales()?.map((locale) => {
+						const message = this._bundle?.messages.find((message) => message.locale === locale)
+						const lintReports = this._bundle?.lintReports?.reports.filter(
+							(report) => report.messageId === message?.id
+						)
+						return html`<inlang-message
+							.locale=${locale}
+							.message=${message}
+							.lintReports=${lintReports}
+							.installedLintRules=${this.installedLintRules}
+							.settings=${this.settings}
+							.inputs=${this._inputs()}
+							.freshlyAddedVariants=${this._freshlyAddedVariants}
+							.addInput=${this._addInput}
+							.addMessage=${this._addMessage}
+							.resetFreshlyAddedVariants=${this._resetFreshlyAddedVariants}
+							.triggerSave=${this._triggerSave}
+							.triggerMessageBundleRefresh=${this._triggerRefresh}
+							.fixLint=${this._fixLint}
+						>
+							${sortAllVariants({
+								variants: this._fillMessage(structuredClone(message), locale).variants,
+								ignoreVariantIds: this._freshlyAddedVariants,
+							})?.map((fakevariant) => {
+								const variant = message?.variants.find((v) => v.id === fakevariant.id)
+								return html`<inlang-variant
+									slot="variant"
+									.variant=${variant}
+									.message=${message}
+									.inputs=${this._inputs()}
+									.triggerSave=${this._triggerSave}
+									.triggerMessageBundleRefresh=${this._triggerRefresh}
+									.addMessage=${this._addMessage}
+									.addInput=${this._addInput}
+									.locale=${locale}
+									.lintReports=${lintReports}
+									.installedLintRules=${this.installedLintRules}
+									.fixLint=${this._fixLint}
+								>
+									<inlang-pattern-editor
+										id=${variant?.id}
+										slot="pattern-editor"
+										.pattern=${variant?.pattern}
+										@change-pattern=${(event: { detail: { argument: Pattern } }) => {
+											this._handleUpdatePattern(message, variant, event.detail.argument, locale)
+										}}
+									></inlang-pattern-editor>
+									${patternToString({ pattern: variant?.pattern || [] }) === ""
+										? html`<inlang-variant-action
+												slot="variant-action"
+												actionTitle="Machine Translate"
+												tooltip="Machine Translate"
+												@click=${() => {
+													this.dispatchOnMachineTranslate(message?.id, variant?.id)
+												}}
+										  ></inlang-variant-action>`
+										: ``}
+								</inlang-variant>`
+							})}
+						</inlang-message>`
+					})}
+				</div>
+			</inlang-bundle-root>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-bundle": InlangBundle
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
new file mode 100644
index 0000000000..35fd5ee37b
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
@@ -0,0 +1,206 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+
+import type { InstalledLintRule, LintReport } from "@inlang/sdk/v2"
+
+@customElement("inlang-lint-report-tip")
+export default class InlangLintReportTip extends LitElement {
+	static override styles = [
+		css`
+			.lint-report-tip {
+				height: 29px;
+				width: 29px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 4px;
+				cursor: pointer;
+				color: var(--sl-input-color);
+			}
+			.lint-report-tip.error {
+				color: var(--sl-color-danger-700);
+			}
+			.lint-report-tip.warning {
+				color: var(--sl-color-warning-600);
+			}
+			.lint-report-tip:hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			.lint-report-tip.warning:hover {
+				color: var(--sl-color-warning-700);
+			}
+			.dropdown-container {
+				font-size: 13px;
+				width: 240px;
+				background-color: var(--sl-panel-background-color);
+				border: 1px solid var(--sl-panel-border-color);
+				border-radius: 6px;
+				display: flex;
+				flex-direction: column;
+			}
+			.dropdown-item {
+				display: flex;
+				flex-direction: row;
+				gap: 12px;
+				padding: 8px 12px;
+				border-top: 1px solid var(--sl-input-border-color);
+			}
+			.dropdown-item:first-child {
+				border-top: none;
+			}
+			.report-icon {
+				height: 29px;
+				width: 29px;
+				color: var(--sl-input-color);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.report-icon.error {
+				color: var(--sl-color-danger-700);
+			}
+			.report-icon.warning {
+				color: var(--sl-color-warning-500);
+			}
+			.report-content {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+			.report-title {
+				padding-top: 2px;
+				font-size: 12px;
+				font-weight: 500;
+				color: var(--sl-input-color);
+			}
+			.report-body {
+				font-size: 12px;
+				color: var(--sl-input-help-text-color);
+				line-break: anywhere;
+			}
+			.report-fixes {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				padding-top: 4px;
+			}
+			.fix-button {
+				width: 100%;
+			}
+			.fix-button::part(base) {
+				color: var(--sl-input-color);
+				background-color: var(--sl-input-background-color);
+				border: 1px solid var(--sl-input-border-color);
+			}
+			.fix-button::part(base):hover {
+				color: var(--sl-input-color-hover);
+				background-color: var(--sl-input-background-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+			p {
+				margin: 0;
+			}
+		`,
+	]
+
+	//props
+	@property()
+	lintReports: LintReport[] | undefined
+
+	@property()
+	installedLintRules: InstalledLintRule[] | undefined
+
+	@property()
+	fixLint: (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => void = () => {}
+
+	//functions
+	private _getLintReportLevelClass = () => {
+		if (this.lintReports?.some((report) => report.level === "error")) {
+			return "error"
+		}
+		if (this.lintReports?.some((report) => report.level === "warning")) {
+			return "warning"
+		}
+		return ""
+	}
+
+	private _getLintDisplayName = (ruleId: string) => {
+		const rule = this.installedLintRules?.find((rule) => rule.id === ruleId)
+
+		if (typeof rule?.displayName === "string") {
+			return rule.displayName
+		} else if (typeof rule === "object") {
+			return (rule?.displayName as { en: string }).en
+		} else {
+			return ruleId.split(".")[2]
+		}
+	}
+
+	override render() {
+		return html`<sl-dropdown
+			distance="4"
+			placement="bottom-start"
+			class="dropdown"
+			@sl-show=${(e: CustomEvent) => {
+				//console.log(e)
+			}}
+		>
+			<div slot="trigger" class=${"lint-report-tip " + this._getLintReportLevelClass()}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						d="M9 13h2v2H9v-2zm0-8h2v6H9V5zm1-5C4.47 0 0 4.5 0 10A10 10 0 1010 0zm0 18a8 8 0 110-16 8 8 0 010 16z"
+					></path>
+				</svg>
+			</div>
+			<div class="dropdown-container">
+				${this.lintReports?.map((lintReport) => {
+					return html`<div class="dropdown-item">
+						<div class=${"report-icon " + lintReport.level}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="18"
+								height="18"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									d="M9 13h2v2H9v-2zm0-8h2v6H9V5zm1-5C4.47 0 0 4.5 0 10A10 10 0 1010 0zm0 18a8 8 0 110-16 8 8 0 010 16z"
+								></path>
+							</svg>
+						</div>
+						<div class="report-content">
+							<p class="report-title">${this._getLintDisplayName(lintReport.ruleId)}</p>
+							<p class="report-body">${lintReport.body}</p>
+							<div class="report-fixes">
+								${lintReport.fixes?.map((fix) => {
+									return html`
+										<sl-button
+											@click=${() => {
+												this.fixLint(lintReport, fix.title)
+											}}
+											class="fix-button"
+											size="small"
+											>${fix.title}</sl-button
+										>
+									`
+								})}
+							</div>
+						</div>
+					</div>`
+				})}
+			</div>
+		</sl-dropdown>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-lint-report-tip": InlangLintReportTip
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
new file mode 100644
index 0000000000..09a631f84c
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -0,0 +1,381 @@
+import type { InstalledMessageLintRule, LanguageTag } from "@inlang/sdk"
+import type { Declaration, LintReport, Message, ProjectSettings2, Variant } from "@inlang/sdk/v2"
+import { createVariant } from "@inlang/sdk/v2"
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+import deleteSelector from "../helper/crud/selector/delete.js"
+import upsertVariant from "../helper/crud/variant/upsert.js"
+
+import "./inlang-variant.js"
+import "./inlang-selector-configurator.js"
+
+@customElement("inlang-message")
+export default class InlangMessage extends LitElement {
+	static override styles = [
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			:host {
+				position: relative;
+				display: flex;
+				min-height: 44px;
+				border: 1px solid var(--sl-input-border-color);
+				border-top: none;
+			}
+			.message:first-child {
+				border-top: 1px solid var(--sl-input-border-color);
+			}
+			.language-container {
+				font-weight: 500;
+				width: 80px;
+				min-height: 44px;
+				padding-top: 12px;
+				padding-left: 12px;
+				padding-right: 12px;
+				background-color: var(--sl-input-background-color-disabled);
+				border-right: 1px solid var(--sl-input-border-color);
+				color: var(--sl-input-color);
+			}
+			.message-body {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+			.message-header {
+				width: 100%;
+				min-height: 44px;
+				display: flex;
+				justify-content: space-between;
+				background-color: var(--sl-input-background-color-disabled);
+				color: var(--sl-input-color);
+				border-bottom: 1px solid var(--sl-input-border-color);
+			}
+			.no-bottom-border {
+				border-bottom: none;
+			}
+			.selector-container {
+				min-height: 44px;
+				display: flex;
+			}
+			.selector {
+				height: 44px;
+				width: 120px;
+				display: flex;
+				align-items: center;
+				padding: 12px;
+				border-right: 1px solid var(--sl-input-border-color);
+				font-weight: 500;
+				cursor: pointer;
+			}
+			sl-menu-item::part(label) {
+				font-size: 14px;
+				padding-left: 12px;
+			}
+			sl-menu-item::part(base) {
+				color: var(--sl-input-color);
+			}
+			sl-menu-item::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			sl-menu-item::part(checked-icon) {
+				display: none;
+			}
+			.selector:hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			.add-selector-container {
+				height: 44px;
+				width: 44px;
+				display: flex;
+				align-items: center;
+				padding: 12px;
+			}
+			.add-selector::part(base) {
+				height: 28px;
+				width: 28px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 4px;
+				cursor: pointer;
+				font-size: 13px;
+			}
+			.message-actions {
+				height: 44px;
+				display: flex;
+				align-items: center;
+				padding: 12px;
+				gap: 8px;
+			}
+			sl-button::part(base) {
+				background-color: var(--sl-input-background-color);
+				color: var(--sl-input-color);
+				border: 1px solid var(--sl-input-border-color);
+			}
+			sl-button::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+				color: var(--sl-input-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+			.variants-container {
+				width: 100%;
+				height: 44px;
+				display: flex;
+				flex-direction: column;
+				height: auto;
+			}
+			.new-variant {
+				box-sizing: border-box;
+				min-height: 44px;
+				width: 100%;
+				display: flex;
+				gap: 4px;
+				align-items: center;
+				padding-left: 12px;
+				margin: 0;
+				background-color: var(--sl-input-background-color);
+				color: var(--sl-input-placeholder-color);
+				border-top: 1px solid var(--sl-input-border-color);
+				cursor: pointer;
+				transitions: all 0.5s;
+			}
+			.new-variant:hover {
+				background-color: var(--sl-input-background-color-hover);
+				color: var(--sl-input-color-hover);
+			}
+			.ref-tag::part(base) {
+				background-color: var(--sl-input-placeholder-color);
+				color: var(--sl-input-background-color);
+				height: 22px;
+				border: none;
+			}
+		`,
+	]
+
+	@property()
+	locale: LanguageTag | undefined
+
+	@property()
+	message: Message | undefined
+
+	@property()
+	lintReports: LintReport[] | undefined
+
+	@property()
+	installedLintRules: InstalledMessageLintRule[] | undefined
+
+	@property({ type: Object })
+	settings: ProjectSettings2 | undefined
+
+	@property({ type: Array })
+	inputs: Declaration[] | undefined
+
+	@property({ type: Array })
+	freshlyAddedVariants: string[] = []
+
+	@property()
+	addInput: (name: string) => void = () => {}
+
+	@property()
+	addMessage: (message: Message) => void = () => {}
+
+	@property()
+	resetFreshlyAddedVariants: (newArray: string[]) => void = () => {}
+
+	@property()
+	triggerMessageBundleRefresh: () => void = () => {}
+
+	@property()
+	fixLint: (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => void = () => {}
+
+	dispatchOnInsertVariant(variant: Variant) {
+		const onInsertVariant = new CustomEvent("insert-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onInsertVariant)
+	}
+
+	private _refLocale = (): LanguageTag | undefined => {
+		return this.settings?.baseLocale
+	}
+
+	override render() {
+		return html`
+			<div class="language-container">
+				<span>${this.locale}</span>
+				${this._refLocale() === this.locale
+					? html`<sl-tag class="ref-tag" size="small" variant="neutral">ref</sl-tag>`
+					: ``}
+			</div>
+			<div class="message-body">
+				${(this.message && this.message.selectors.length > 0) ||
+				(this.message && this.message.variants.length > 1 && this.message.selectors.length === 0)
+					? html`<div
+							class=${`message-header` +
+							` ` +
+							(this.message.variants && this.message.variants.length === 0
+								? `no-bottom-border`
+								: ``)}
+					  >
+							<div class="selector-container">
+								${this.message.selectors.map(
+									(selector, index) => html`<sl-dropdown>
+										<div class="selector" slot="trigger">
+											${
+												// @ts-ignore
+												selector.arg.name
+											}
+										</div>
+										<sl-menu>
+											<sl-menu-item
+												value="delete"
+												@click=${() => {
+													deleteSelector({ message: this.message!, index })
+													this.triggerMessageBundleRefresh()
+												}}
+												><svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="18px"
+													height="18px"
+													viewBox="0 0 24 24"
+													slot="prefix"
+													style="margin-right: -4px; margin-left: 12px"
+												>
+													<g fill="none">
+														<path
+															d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+														/>
+														<path
+															fill="currentColor"
+															d="M20 5a1 1 0 1 1 0 2h-1l-.003.071l-.933 13.071A2 2 0 0 1 16.069 22H7.93a2 2 0 0 1-1.995-1.858l-.933-13.07L5 7H4a1 1 0 0 1 0-2zm-3.003 2H7.003l.928 13h8.138zM14 2a1 1 0 1 1 0 2h-4a1 1 0 0 1 0-2z"
+														/>
+													</g></svg
+												>Delete selector</sl-menu-item
+											>
+										</sl-menu>
+									</sl-dropdown>`
+								)}
+								<div class="add-selector-container">
+									<inlang-selector-configurator
+										.inputs=${this.inputs}
+										.message=${this.message}
+										.locale=${this.locale}
+										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
+										.addMessage=${this.addMessage}
+										.addInput=${this.addInput}
+									>
+										<sl-tooltip content="Add Selector to message"
+											><sl-button size="small" class="add-selector">
+												<svg
+													viewBox="0 0 24 24"
+													width="18"
+													height="18"
+													slot="prefix"
+													class="w-5 h-5 -mx-1"
+												>
+													<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
+												</svg>
+											</sl-button>
+										</sl-tooltip>
+									</inlang-selector-configurator>
+								</div>
+							</div>
+							<div class="message-actions">
+								${this.message
+									? this.freshlyAddedVariants.some((id) =>
+											this.message!.variants.map((variant) => variant.id).includes(id)
+									  )
+										? html`<sl-button
+												class="message-actions-button"
+												size="small"
+												@click=${() => {
+													const newArray = this.freshlyAddedVariants.filter(
+														(id) =>
+															!this.message!.variants.map((variant) => variant.id).includes(id)
+													)
+													this.resetFreshlyAddedVariants(newArray)
+													this.requestUpdate()
+													this.triggerMessageBundleRefresh()
+												}}
+												><svg
+													slot="prefix"
+													width="18"
+													height="18"
+													viewBox="0 0 20 20"
+													style="margin-right: -2px; opacity: 0.7"
+												>
+													<g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+														<path
+															d="M10.293 7.707a1 1 0 0 1 0-1.414l3-3a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0"
+														/>
+														<path
+															d="M17.707 7.707a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414l3 3a1 1 0 0 1 0 1.414"
+														/>
+														<path
+															d="M14 5a1 1 0 0 1 1 1v8a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1m-4.293 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0"
+														/>
+														<path
+															d="M2.293 12.293a1 1 0 0 1 1.414 0l3 3a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414"
+														/>
+														<path d="M6 15a1 1 0 0 1-1-1V6a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1" />
+													</g></svg
+												>Sort</sl-button
+										  >`
+										: ``
+									: ``}
+								${this.lintReports &&
+								this.lintReports.length > 0 &&
+								this.lintReports.some((report) => !report.variantId)
+									? html`<inlang-lint-report-tip
+											.lintReports=${this.lintReports.filter((report) => !report.variantId) ?? []}
+											.installedLintRules=${this.installedLintRules}
+											.fixLint=${this.fixLint}
+									  ></inlang-lint-report-tip>`
+									: ``}
+							</div>
+					  </div>`
+					: ``}
+				<div class="variants-container">
+					<slot name="variant"></slot>
+					${this.message?.selectors && this.message.selectors.length > 0
+						? html`<p
+								@click=${() => {
+									const variant = createVariant({
+										// combine the matches that are already present with the new category -> like a matrix
+										match: this.message?.selectors.map(() => "null"),
+									})
+									this.freshlyAddedVariants.push(variant.id)
+									upsertVariant({
+										message: this.message!,
+										variant: variant,
+									})
+									this.dispatchOnInsertVariant(variant)
+									this.triggerMessageBundleRefresh()
+								}}
+								class="new-variant"
+						  >
+								<svg viewBox="0 0 24 24" width="18" height="18" slot="prefix" class="w-5 h-5 -mx-1">
+									<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
+								</svg>
+								New variant
+						  </p>`
+						: ``}
+				</div>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-message": InlangMessage
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
new file mode 100644
index 0000000000..4d28e7cc6c
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
@@ -0,0 +1,609 @@
+import { LitElement, css, html } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+
+import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js"
+
+import {
+	type Declaration,
+	createMessage,
+	createVariant,
+	type LanguageTag,
+	type Message,
+	type Variant,
+} from "@inlang/sdk/v2"
+import addSelector from "../helper/crud/selector/add.js"
+import upsertVariant from "../helper/crud/variant/upsert.js"
+import "./inlang-add-input.js"
+
+@customElement("inlang-selector-configurator")
+export default class InlangSelectorConfigurator extends LitElement {
+	static override styles = [
+		css`
+			.button-wrapper {
+				height: 44px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			.dropdown-container {
+				font-size: 13px;
+				width: 240px;
+				background-color: var(--sl-panel-background-color);
+				border: 1px solid var(--sl-input-border-color);
+				padding: 12px;
+				border-radius: 6px;
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+			}
+			.dropdown-item {
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+			}
+			.dropdown-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				color: var(--sl-input-color);
+				font-size: 12px;
+			}
+			.dropdown-title {
+				font-size: 12px;
+				font-weight: 500;
+				margin: 6px 0;
+			}
+			.add-input::part(base) {
+				color: var(--sl-color-neutral-500);
+			}
+			.add-input::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+				color: var(--sl-input-color-hover);
+			}
+			sl-select::part(form-control-label) {
+				font-size: 13px;
+			}
+			sl-select::part(display-input) {
+				font-size: 13px;
+			}
+			sl-option::part(label) {
+				font-size: 14px;
+			}
+			sl-menu-item::part(label) {
+				font-size: 14px;
+				padding-left: 12px;
+			}
+			sl-menu-item::part(base) {
+				color: var(--sl-input-color);
+			}
+			sl-menu-item::part(base):hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			sl-menu-item::part(checked-icon) {
+				display: none;
+			}
+			.options-title {
+				font-size: 14px;
+				color: var(--sl-input-color);
+				background-color: var(--sl-input-background-color);
+				margin: 0;
+				padding-bottom: 4px;
+			}
+			.options-wrapper {
+				display: flex;
+				gap: 4px;
+				flex-wrap: wrap;
+				margin-top: 4px;
+			}
+			.option {
+				width: 100%;
+			}
+			.option::part(base) {
+				background-color: var(--sl-input-background-color-hover);
+				border-radius: var(--sl-input-border-radius-small);
+			}
+			.option {
+				width: 100%;
+				background-color: var(--sl-input-background-color-hover);
+			}
+			.delete-icon {
+				color: var(--sl-color-neutral-400);
+				cursor: pointer;
+			}
+			.delete-icon:hover {
+				color: var(--sl-input-color-hover);
+			}
+			.help-text {
+				display: flex;
+				gap: 8px;
+				color: var(--sl-input-help-text-color);
+			}
+			.help-text p {
+				flex: 1;
+				margin: 0;
+				font-size: 12px;
+				line-height: 1.5;
+			}
+			.empty-image {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-top: 12px;
+			}
+			.actions {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+			sl-input::part(base) {
+				font-size: 13px;
+			}
+		`,
+	]
+
+	@property()
+	inputs: Declaration[] | undefined
+
+	@property()
+	message?: Message | undefined
+
+	@property()
+	locale: LanguageTag | undefined
+
+	@property()
+	triggerMessageBundleRefresh: () => void = () => {}
+
+	@property()
+	triggerSave: () => void = () => {}
+
+	@property()
+	addMessage: (newMessage: Message) => void = () => {}
+
+	@property()
+	addInput: (inputName: string) => void = () => {}
+
+	@state()
+	private _input: string | undefined
+
+	@state()
+	private _function: string | undefined
+
+	@state()
+	private _matchers: string[] | undefined
+
+	@state()
+	private _isNewInput: boolean = false
+
+	@state()
+	private _newInputSting: string | undefined
+
+	// events
+	dispatchOnInsertMessage(message: Message, variants: Variant[]) {
+		const onInsertMessage = new CustomEvent("insert-message", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					message,
+					variants,
+				},
+			},
+		})
+		this.dispatchEvent(onInsertMessage)
+	}
+
+	dispatchOnUpdateMessage(message: Message, variants: Variant[]) {
+		const onUpdateMessage = new CustomEvent("update-message", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					message,
+					variants,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateMessage)
+	}
+
+	dispatchOnInsertVariant(variant: Variant) {
+		const onInsertVariant = new CustomEvent("insert-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onInsertVariant)
+	}
+
+	private _getPluralCategories = (): string[] | undefined => {
+		return this.locale
+			? [...new Intl.PluralRules(this.locale).resolvedOptions().pluralCategories, "*"]
+			: undefined
+	}
+
+	private _handleAddSelector = (newMatchers: string[]) => {
+		// get dropdown by "dropdown" class
+		const dropdown = this.shadowRoot?.querySelector(".dropdown") as SlDropdown
+		if (dropdown) dropdown.hide()
+
+		if (this._isNewInput && this._newInputSting && this._newInputSting.length > 0) {
+			this.addInput(this._newInputSting)
+			this._input = this._newInputSting
+		}
+
+		if (this._input) {
+			if (!this.message && this.locale) {
+				// create selector in not present message
+				const newMessage = createMessage({ locale: this.locale, text: "" })
+
+				// add selector
+				addSelector({
+					message: newMessage,
+					selector: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: this._input,
+						},
+						annotation: {
+							type: "function",
+							name: this._function || "plural",
+							options: [],
+						},
+					},
+				})
+
+				this._addVariants({
+					message: newMessage,
+					variantMatcherArrays: [],
+					newMatchers: newMatchers,
+				})
+				this.addMessage(newMessage)
+				this.dispatchOnInsertMessage(newMessage, newMessage.variants)
+				for (const variant of newMessage.variants) {
+					this.dispatchOnInsertVariant(variant)
+				}
+			} else if (this.message) {
+				// get variant matchers arrays
+				const _variants = structuredClone(this.message ? this.message.variants : [])
+				const _variantMatcherArrays = _variants.map((variant) => variant.match)
+
+				// add selector
+				addSelector({
+					message: this.message,
+					selector: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: this._input,
+						},
+						annotation: {
+							type: "function",
+							name: this._function || "plural",
+							options: [],
+						},
+					},
+				})
+
+				const updatedVariant = structuredClone(this.message.variants)
+				this.dispatchOnUpdateMessage(this.message, updatedVariant)
+
+				this._addVariants({
+					message: this.message,
+					variantMatcherArrays: _variantMatcherArrays,
+					newMatchers: newMatchers,
+				})
+
+				// only inserted variants should be dispatched -> show filter
+				const insertedVariants = this.message.variants.filter(
+					(variant) => !updatedVariant.find((v) => v.id === variant.id)
+				)
+				for (const variant of insertedVariants) {
+					this.dispatchOnInsertVariant(variant)
+				}
+			}
+
+			this.triggerSave()
+			this.triggerMessageBundleRefresh()
+		}
+	}
+
+	private _addVariants = (props: {
+		message: Message
+		variantMatcherArrays: string[][]
+		newMatchers: string[]
+	}) => {
+		const newMatchers = props.newMatchers.filter((category) => category !== "*")
+		if (newMatchers) {
+			if (props.variantMatcherArrays && props.variantMatcherArrays.length > 0) {
+				for (const variantMatcherArray of props.variantMatcherArrays) {
+					for (const category of newMatchers) {
+						upsertVariant({
+							message: props.message,
+							variant: createVariant({
+								// combine the matches that are already present with the new category -> like a matrix
+								match: [...variantMatcherArray, category],
+							}),
+						})
+					}
+				}
+			} else {
+				for (const category of newMatchers) {
+					upsertVariant({
+						message: props.message,
+						variant: createVariant({
+							// combine the matches that are already present with the new category -> like a matrix
+							match: [category],
+						}),
+					})
+				}
+			}
+		}
+	}
+
+	private _resetConfiguration = () => {
+		this._input = this.inputs && this.inputs[0] && this.inputs[0].name
+		this._function = "plural"
+		this._matchers = this._getPluralCategories() || ["*"]
+	}
+
+	override async firstUpdated() {
+		await this.updateComplete
+		this._input = this.inputs && this.inputs[0] && this.inputs[0].name
+		this._function = "plural"
+		this._matchers = this._getPluralCategories() || ["*"]
+	}
+
+	override render() {
+		return html`
+			<sl-dropdown
+				distance="-4"
+				class="dropdown"
+				@sl-show=${(e: CustomEvent) => {
+					const dropdown = this.shadowRoot?.querySelector("sl-dropdown")
+					if (dropdown) {
+						if (e.target === dropdown) {
+							this._input =
+								this.inputs && this.inputs.length > 0 && this.inputs[0]
+									? this.inputs[0].name
+									: undefined
+							if (this.inputs && this.inputs.length === 0) {
+								this._isNewInput = true
+							}
+						}
+					}
+				}}
+			>
+				<div slot="trigger" class="button-wrapper">
+					<slot></slot>
+				</div>
+				<div class="dropdown-container">
+					<div class="dropdown-item">
+						<div class="dropdown-header">
+							<p class="dropdown-title">Input</p>
+							${this._isNewInput && this.inputs && this.inputs.length > 0
+								? html`<sl-tooltip content="Show inputs">
+										<sl-button
+											class="add-input"
+											variant="text"
+											size="small"
+											@click=${() => {
+												this._isNewInput = false
+												this.requestUpdate()
+											}}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="18"
+												height="18"
+												viewBox="0 0 24 24"
+												slot="prefix"
+												style="margin: 0 -2px"
+											>
+												<path
+													fill="currentColor"
+													fill-rule="evenodd"
+													d="M3.25 7A.75.75 0 0 1 4 6.25h16a.75.75 0 0 1 0 1.5H4A.75.75 0 0 1 3.25 7m0 5a.75.75 0 0 1 .75-.75h11a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1-.75-.75m0 5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1-.75-.75"
+													clip-rule="evenodd"
+												/>
+											</svg>
+										</sl-button>
+								  </sl-tooltip>`
+								: ``}
+							${!this._isNewInput
+								? html`<sl-tooltip content="Add a new input">
+										<sl-button
+											class="add-input"
+											variant="text"
+											size="small"
+											@click=${() => {
+												this._isNewInput = true
+												this.requestUpdate()
+											}}
+											><svg
+												viewBox="0 0 24 24"
+												width="18"
+												height="18"
+												slot="prefix"
+												style="margin: 0 -2px"
+											>
+												<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path></svg
+										></sl-button>
+								  </sl-tooltip>`
+								: ``}
+						</div>
+						${!this._isNewInput
+							? html`<sl-select
+									@sl-change=${(e: CustomEvent) => {
+										const inputElement = e.target as HTMLInputElement
+										this._input = inputElement.value
+									}}
+									@sl-show=${(e: CustomEvent) => {
+										const inputElement = e.target as HTMLInputElement
+										this._input = inputElement.value
+									}}
+									size="small"
+									value=${this._input || this.inputs?.[0]}
+							  >
+									${this.inputs &&
+									this.inputs.map((input) => {
+										return html`<sl-option value=${input.name}>${input.name}</sl-option>`
+									})}
+							  </sl-select>`
+							: html`<sl-input 
+										size="small" 
+										placeholder="Enter input name ..." 
+										@sl-input=${(e: CustomEvent) => {
+											this._newInputSting = (e.target as HTMLInputElement).value
+										}}
+										</sl-input>`}
+					</div>
+					${this._isNewInput
+						? html`<div class="help-text">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24px"
+									height="24px"
+									viewBox="0 0 256 256"
+								>
+									<path
+										fill="currentColor"
+										d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+									/>
+								</svg>
+								<p>No input present. Add a new input to create a selector.</p>
+						  </div>`
+						: ``}
+					<div class="dropdown-item">
+						<div class="dropdown-header">
+							<p class="dropdown-title">Function</p>
+						</div>
+						<sl-select
+							size="small"
+							value="plural"
+							@sl-change=${(e: CustomEvent) => {
+								const option = (e.target as HTMLSelectElement).value as string
+								if (option === "string") {
+									this._function = "string"
+									this._matchers = ["*"]
+									this.requestUpdate()
+								} else if (option === "plural") {
+									this._function = "plural"
+									this._matchers = this._getPluralCategories() || ["*"]
+									this.requestUpdate()
+								}
+							}}
+						>
+							<sl-option value="plural">plural</sl-option>
+							<sl-option value="string">string</sl-option>
+						</sl-select>
+					</div>
+					<div class="options-container">
+						<div class="dropdown-header">
+							<p class="dropdown-title">Match</p>
+							<sl-tooltip content="Add a match to this selector">
+								<sl-button
+									class="add-input"
+									variant="text"
+									size="small"
+									@click=${() => {
+										this._matchers?.push("")
+										this.requestUpdate()
+										// get the last input element and focus it
+										setTimeout(() => {
+											const inputs = this.shadowRoot?.querySelectorAll(".option")
+											const lastInput = inputs && (inputs[inputs.length - 1] as HTMLInputElement)
+											lastInput?.focus(), 100
+										})
+									}}
+									><svg
+										viewBox="0 0 24 24"
+										width="18"
+										height="18"
+										slot="prefix"
+										style="margin: 0 -2px"
+									>
+										<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path></svg
+								></sl-button>
+							</sl-tooltip>
+						</div>
+						<div class="options-wrapper">
+							${this._matchers?.map((category, index) => {
+								return html`<sl-input
+									class="option"
+									size="small"
+									value=${category}
+									filled
+									@input=${(e: Event) => {
+										this._matchers = this._matchers || []
+										this._matchers[index] = (e.target as HTMLInputElement).value
+									}}
+									><svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="18px"
+										height="18px"
+										viewBox="0 0 24 24"
+										slot="suffix"
+										class="delete-icon"
+										style="margin-left: -4px; margin-right: 8px"
+										@click=${() => {
+											//delete with splic
+											this._matchers = this._matchers || []
+											this._matchers.splice(index, 1)
+											this.requestUpdate()
+										}}
+									>
+										<path
+											fill="currentColor"
+											d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+										/></svg
+								></sl-input>`
+							})}
+						</div>
+					</div>
+					<div class="help-text">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24px"
+							height="24px"
+							viewBox="0 0 256 256"
+						>
+							<path
+								fill="currentColor"
+								d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+							/>
+						</svg>
+						<p>The selector automatically adds the variants from the list of matchers.</p>
+					</div>
+					<div class="actions">
+						<sl-button
+							@click=${() => {
+								if (this._matchers) {
+									this._handleAddSelector(this._matchers)
+								} else {
+									console.info("No matchers present")
+								}
+								this._resetConfiguration()
+							}}
+							size="small"
+							variant="primary"
+							>Add selector</sl-button
+						>
+					</div>
+				</div>
+			</sl-dropdown>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-selector-configurator": InlangSelectorConfigurator
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
new file mode 100644
index 0000000000..c8e8e86f48
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -0,0 +1,426 @@
+import {
+	type Variant,
+	type Message,
+	type LanguageTag,
+	type LintReport,
+	type InstalledLintRule,
+	type Declaration,
+} from "@inlang/sdk/v2"
+import { LitElement, css, html } from "lit"
+import { customElement, property } from "lit/decorators.js"
+
+//helpers
+import deleteVariant from "../helper/crud/variant/delete.js"
+import updateMatch from "../helper/crud/variant/updateMatch.js"
+
+// internal components
+import "./inlang-lint-report-tip.js"
+import "./inlang-selector-configurator.js"
+import "./pattern-editor/inlang-pattern-editor.js"
+
+@customElement("inlang-variant")
+export default class InlangVariant extends LitElement {
+	static override styles = [
+		css`
+			div {
+				box-sizing: border-box;
+				font-size: 13px;
+			}
+			:host {
+				border-top: 1px solid var(--sl-input-border-color);
+			}
+			:host(:first-child) {
+				border-top: none;
+			}
+			.variant {
+				position: relative;
+				min-height: 44px;
+				width: 100%;
+				display: flex;
+				align-items: stretch;
+			}
+			.match {
+				min-height: 44px;
+				width: 120px;
+				background-color: var(--sl-input-background-color);
+				border-right: 1px solid var(--sl-input-border-color);
+				position: relative;
+				z-index: 0;
+			}
+			.match:focus-within {
+				z-index: 1;
+			}
+			.match::part(base) {
+				border: none;
+				border-radius: 0;
+				min-height: 44px;
+			}
+			.match::part(input) {
+				min-height: 44px;
+			}
+			.match::part(input):hover {
+				background-color: var(--sl-input-background-color-);
+			}
+			.pattern {
+				flex: 1;
+				background-color: none;
+				height: 44px;
+				position: relative;
+				z-index: 0;
+			}
+			.pattern:focus-within {
+				z-index: 1;
+			}
+			.pattern::part(base) {
+				border: none;
+				border-radius: 0;
+				min-height: 44px;
+				background-color: var(--sl-input-background-color);
+			}
+			.pattern::part(input) {
+				min-height: 44px;
+			}
+			.pattern::part(input):hover {
+				background-color: var(--sl-input-background-color-hover);
+			}
+			.pattern::part(input)::placeholder {
+				color: var(--sl-input-placeholder-color);
+				font-size: 13px;
+			}
+			.actions {
+				position: absolute;
+				top: 0;
+				right: 0;
+				height: 44px;
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				padding-right: 12px;
+				z-index: 1;
+			}
+			.add-selector::part(base) {
+				border-radius: 4px;
+				cursor: pointer;
+				font-size: 13px;
+			}
+			sl-button::part(base) {
+				color: var(--sl-input-color);
+				background-color: var(--sl-input-background-color);
+				border: 1px solid var(--sl-input-border-color);
+			}
+			sl-button::part(base):hover {
+				color: var(--sl-input-color-hover);
+				background-color: var(--sl-input-background-color-hover);
+				border: 1px solid var(--sl-input-border-color-hover);
+			}
+			.dynamic-actions {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				z-index: 2;
+			}
+			.hide-dynamic-actions {
+				display: none;
+			}
+			.variant:hover .dynamic-actions {
+				display: flex;
+			}
+			.dropdown-open.dynamic-actions {
+				display: flex;
+			}
+			sl-tooltip::part(base) {
+				background-color: var(--sl-tooltip-background-color);
+				color: var(--sl-tooltip-color);
+			}
+		`,
+	]
+
+	//props
+	@property()
+	message: Message | undefined
+
+	@property()
+	locale: LanguageTag | undefined
+
+	@property()
+	variant: Variant | undefined
+
+	@property()
+	inputs: Declaration[] | undefined
+
+	@property()
+	lintReports: LintReport[] | undefined
+
+	@property()
+	installedLintRules: InstalledLintRule[] | undefined
+
+	@property()
+	setHoveredVariantId: (variantId: string | undefined) => void = () => {}
+
+	@property()
+	addMessage: (newMessage: Message) => void = () => {}
+
+	@property()
+	addInput: (inputName: string) => void = () => {}
+
+	@property()
+	triggerMessageBundleRefresh: () => void = () => {}
+
+	@property()
+	triggerSave: () => void = () => {}
+
+	@property()
+	fixLint: (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => void = () => {}
+
+	// @property()
+	// revert: (messageId?: string, variantId?: string) => void = () => {}
+
+	dispatchOnDeleteVariant(variant: Variant) {
+		const onDeleteVariant = new CustomEvent("delete-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onDeleteVariant)
+	}
+
+	dispatchOnUpdateVariant(variant: Variant) {
+		const onUpdateVariant = new CustomEvent("update-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateVariant)
+	}
+
+	//functions
+	private _getLintReports = (): LintReport[] | undefined => {
+		// wether a lint report belongs to a variant or message and when they are shown
+		if (this.lintReports && this.lintReports.length > 0) {
+			if (
+				(this.message?.selectors && this.message.selectors.length === 0) ||
+				!this.message?.selectors
+			) {
+				// when there are no selectors the reports of the message and variant are shown on variant level
+				return this.lintReports
+			}
+			if (
+				this.message.selectors &&
+				this.message.selectors.length > 0 &&
+				this.lintReports.some((report) => report.variantId && report.variantId === this.variant?.id)
+			) {
+				// when selectors are present, only the reports of the variant are shown
+				return this.lintReports.filter(
+					(report) => report.variantId && report.variantId === this.variant?.id
+				)
+			}
+		}
+		return undefined
+	}
+
+	private _delete = () => {
+		if (this.message && this.variant) {
+			deleteVariant({
+				message: this.message,
+				variant: this.variant,
+			})
+			this.dispatchOnDeleteVariant(this.variant)
+			this.triggerMessageBundleRefresh()
+		}
+	}
+
+	private _updateMatch = (matchIndex: number, value: string) => {
+		//TODO improve this function
+		if (this.variant && this.message) {
+			updateMatch({
+				variant: this.variant,
+				matchIndex: matchIndex,
+				value,
+			})
+			const variantID = this.variant.id
+
+			const changedVariant = this.message.variants.find((v) => v.id === variantID)
+			if (changedVariant) {
+				changedVariant.match[matchIndex] = value
+			}
+
+			this.dispatchOnUpdateVariant(this.variant)
+			this.triggerMessageBundleRefresh()
+		}
+	}
+
+	// getter
+	private get _selectors(): string[] | undefined {
+		// @ts-ignore - just for prototyping
+		return this.message ? this.message.selectors.map((selector) => selector.arg.name) : undefined
+	}
+
+	private get _matches(): string[] | undefined {
+		// @ts-ignore - just for prototyping
+		return this._selectors
+			? this._selectors.map((_, index) => {
+					return this.variant && this.variant.match[index]
+			  })
+			: undefined
+	}
+
+	//hooks
+	override async firstUpdated() {
+		await this.updateComplete
+
+		// adds classes when dropdown is open, to keep it open when not hovering the variant
+		const selectorConfigurator = this.shadowRoot?.querySelector("inlang-selector-configurator")
+		const selectorDropdown = selectorConfigurator?.shadowRoot?.querySelector("sl-dropdown")
+		if (selectorDropdown) {
+			selectorDropdown.addEventListener("sl-show", (e) => {
+				if (e.target === selectorDropdown) {
+					//set parent class dropdown-open
+					selectorConfigurator?.parentElement?.classList.add("dropdown-open")
+				}
+			})
+			selectorDropdown.addEventListener("sl-hide", (e) => {
+				if (e.target === selectorDropdown) {
+					//remove parent class dropdown-open
+					selectorConfigurator?.parentElement?.classList.remove("dropdown-open")
+				}
+			})
+		}
+	}
+
+	// hooks
+	override updated(changedProperties: any) {
+		// works like useEffect
+		// In order to not mutate object references, we need to clone the object
+		// When the messageBundle prop changes, we update the internal state
+		if (changedProperties.has("lintReports")) {
+			// adds classes when dropdown is open, to keep it open when not hovering the variant
+			const lintReportsTip = this.shadowRoot?.querySelector("inlang-lint-report-tip")
+			const lintReportDropdown = lintReportsTip?.shadowRoot?.querySelector("sl-dropdown")
+			if (lintReportDropdown) {
+				const previousSibling = lintReportsTip?.previousSibling?.previousSibling?.previousSibling
+				lintReportDropdown.addEventListener("sl-show", (e) => {
+					if (e.target === lintReportDropdown) {
+						//set parent class dropdown-open
+						if (previousSibling instanceof HTMLElement) {
+							previousSibling.classList.add("dropdown-open")
+						}
+					}
+				})
+				lintReportDropdown.addEventListener("sl-hide", (e) => {
+					if (e.target === lintReportDropdown) {
+						//remove parent class dropdown-open
+						if (previousSibling instanceof HTMLElement) {
+							previousSibling.classList.remove("dropdown-open")
+						}
+					}
+				})
+			}
+		}
+	}
+
+	override render() {
+		return !(!this.variant && this.message && this.message?.selectors.length > 0)
+			? html`<div class="variant">
+					${this.variant && this._matches
+						? this._matches.map((match, index) => {
+								return html`
+									<sl-input
+										id="${this.message!.id}-${this.variant!.id}-${match}"
+										class="match"
+										size="small"
+										value=${match}
+										@sl-blur=${(e: Event) => {
+											const element = this.shadowRoot?.getElementById(
+												`${this.message!.id}-${this.variant!.id}-${match}`
+											)
+											if (element && e.target === element) {
+												this._updateMatch(index, (e.target as HTMLInputElement).value)
+											}
+										}}
+									></sl-input>
+								`
+						  })
+						: undefined}
+					<slot name="pattern-editor"></slot>
+					<div class="actions">
+						<div class="dynamic-actions hide-dynamic-actions">
+							<slot name="variant-action"></slot>
+							${(this.message?.selectors.length === 0 && this.message?.variants.length <= 1) ||
+							!this.message?.selectors
+								? html`<inlang-selector-configurator
+										.inputs=${this.inputs}
+										.message=${this.message}
+										.locale=${this.locale}
+										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
+										.triggerSave=${this.triggerSave}
+										.addMessage=${this.addMessage}
+										.addInput=${this.addInput}
+								  >
+										<sl-tooltip content="Add Selector to message"
+											><sl-button size="small" class="add-selector">
+												<svg
+													viewBox="0 0 24 24"
+													width="18"
+													height="18"
+													slot="prefix"
+													class="w-5 h-5 -mx-1"
+													style="margin-right: -3px"
+												>
+													<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
+												</svg>
+												Selector
+											</sl-button>
+										</sl-tooltip>
+								  </inlang-selector-configurator>`
+								: ``}
+							${(this.message && this.variant && this.message.selectors.length > 0) ||
+							(this.message && this.variant && this.message.variants.length > 1)
+								? html`<sl-tooltip content="Delete"
+										><sl-button size="small" @click=${() => this._delete()}
+											><svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="18px"
+												height="18px"
+												viewBox="0 0 24 24"
+												slot="prefix"
+												style="margin-right: -2px; margin-left: -2px"
+											>
+												<g fill="none">
+													<path
+														d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+													/>
+													<path
+														fill="currentColor"
+														d="M20 5a1 1 0 1 1 0 2h-1l-.003.071l-.933 13.071A2 2 0 0 1 16.069 22H7.93a2 2 0 0 1-1.995-1.858l-.933-13.07L5 7H4a1 1 0 0 1 0-2zm-3.003 2H7.003l.928 13h8.138zM14 2a1 1 0 1 1 0 2h-4a1 1 0 0 1 0-2z"
+													/>
+												</g></svg></sl-button
+								  ></sl-tooltip>`
+								: ``}
+						</div>
+
+						${this._getLintReports() && this._getLintReports()!.length > 0
+							? html`<inlang-lint-report-tip
+									.lintReports=${this._getLintReports()}
+									.installedLintRules=${this.installedLintRules}
+									.fixLint=${this.fixLint}
+							  ></inlang-lint-report-tip>`
+							: ``}
+					</div>
+			  </div> `
+			: undefined
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-variant": InlangVariant
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
new file mode 100644
index 0000000000..3860745e6d
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
@@ -0,0 +1,34 @@
+import "./inlang-pattern-editor.ts"
+import type { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { pluralBundle } from "@inlang/sdk/v2-mocks"
+import stringToPattern from "../../helper/crud/pattern/stringToPattern.ts"
+
+const meta: Meta = {
+	component: "inlang-pattern-editor",
+	title: "Public/inlang-pattern-editor",
+}
+
+export default meta
+
+export const Simple: StoryObj = {
+	render: () =>
+		html`
+			<inlang-pattern-editor
+				.pattern=${pluralBundle.messages[0].variants[2].pattern}
+				@change-pattern=${() => console.log("update")}
+			>
+			</inlang-pattern-editor>
+		`,
+}
+
+export const Empty: StoryObj = {
+	render: () =>
+		html`
+			<inlang-pattern-editor
+				.pattern=${stringToPattern({ text: "" })}
+				@change-pattern=${() => console.log("update")}
+			>
+			</inlang-pattern-editor>
+		`,
+}
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
new file mode 100644
index 0000000000..aa2aba8189
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
@@ -0,0 +1,173 @@
+import type { Pattern } from "@inlang/sdk/v2"
+import { LitElement, css, html } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+import { ref, createRef, type Ref } from "lit/directives/ref.js"
+import { createEditor } from "lexical"
+import { registerPlainText } from "@lexical/plain-text"
+import { $getRoot, $createParagraphNode, $createTextNode } from "lexical"
+import patternToString from "../../helper/crud/pattern/patternToString.js"
+import stringToPattern from "../../helper/crud/pattern/stringToPattern.js"
+
+//editor config
+const config = {
+	namespace: "MyEditor",
+	onError: console.error,
+}
+
+@customElement("inlang-pattern-editor")
+export default class InlangPatternEditor extends LitElement {
+	static override styles = [
+		css`
+			.editor-wrapper {
+				background-color: #f0f0f0;
+			}
+		`,
+	]
+
+	// refs
+	contentEditableElementRef: Ref<HTMLDivElement> = createRef()
+
+	// props
+	@property({ type: Array })
+	pattern: Pattern | undefined
+
+	//state
+	@state()
+	_editorTextContent: string = ""
+
+	// dispatch `change-pattern` event with the new pattern
+	dispatchOnChangePattern(pattern: Pattern) {
+		const onChangePattern = new CustomEvent("change-pattern", {
+			detail: {
+				argument: pattern,
+			},
+		})
+		this.dispatchEvent(onChangePattern)
+	}
+
+	//disable shadow root -> because of contenteditable selection API
+	override createRenderRoot() {
+		return this
+	}
+
+	// create editor
+	editor = createEditor(config)
+
+	// update editor when pattern changes
+	override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		if (changedProperties.has("pattern")) {
+			if (patternToString({ pattern: this.pattern! }) !== this._editorTextContent) {
+				this._setEditorState()
+			}
+		}
+	}
+
+	// set editor state
+	private _setEditorState = () => {
+		// only handling strings so far -> TODO: handle real patterns
+		this.editor.update(() => {
+			const root = $getRoot()
+			if (root.getChildren().length === 0) {
+				const paragraphNode = $createParagraphNode()
+				const textNode = $createTextNode(
+					this.pattern ? patternToString({ pattern: this.pattern }) : ""
+				)
+				paragraphNode.append(textNode)
+				root.append(paragraphNode)
+			} else {
+				const paragraphNode = root.getChildren()[0]!
+				paragraphNode.remove()
+				const newpParagraphNode = $createParagraphNode()
+				const textNode = $createTextNode(
+					this.pattern ? patternToString({ pattern: this.pattern }) : ""
+				)
+				newpParagraphNode.append(textNode)
+				root.append(newpParagraphNode)
+			}
+		})
+	}
+
+	override async firstUpdated() {
+		const contentEditableElement = this.contentEditableElementRef.value
+		if (contentEditableElement) {
+			// set root element of editor and register plain text
+			this.editor.setRootElement(contentEditableElement)
+			registerPlainText(this.editor)
+
+			// listen to text content changes and dispatch `change-pattern` event
+			this.editor.registerTextContentListener((textContent) => {
+				// The latest text content of the editor!
+
+				//check if something changed
+				this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
+				this._editorTextContent = textContent
+			})
+		}
+	}
+
+	override render() {
+		return html`
+			<style>
+				div {
+					box-sizing: border-box;
+					font-size: 13px;
+				}
+				p {
+					margin: 0;
+				}
+				inlang-pattern-editor {
+					width: 100%;
+				}
+				.inlang-pattern-editor-wrapper {
+					min-height: 44px;
+					width: 100%;
+					position: relative;
+				}
+				.inlang-pattern-editor-wrapper:focus-within {
+					z-index: 1;
+				}
+				.inlang-pattern-editor-contenteditable {
+					background-color: #ffffff;
+					padding: 14px 12px;
+					min-height: 44px;
+					width: 100%;
+					color: #242424;
+					outline: none;
+				}
+				.inlang-pattern-editor-contenteditable:focus {
+					box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+				}
+				.inlang-pattern-editor-contenteditable:hover {
+					background-color: #f9f9f9;
+					color: #000;
+				}
+				.inlang-pattern-editor-placeholder {
+					opacity: 0.5;
+					position: absolute;
+					top: 14px;
+					left: 12px;
+					font-size: 13px;
+					font-weight: 500;
+					pointer-events: none;
+					font-family: var(--sl-font-sans);
+				}
+			</style>
+			<div class="inlang-pattern-editor-wrapper">
+				<div
+					class="inlang-pattern-editor-contenteditable"
+					contenteditable
+					${ref(this.contentEditableElementRef)}
+				></div>
+				${this._editorTextContent === ""
+					? html`<p class="inlang-pattern-editor-placeholder">Enter pattern ...</p>`
+					: ""}
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-pattern-editor": InlangPatternEditor
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
new file mode 100644
index 0000000000..093b767230
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
@@ -0,0 +1,86 @@
+import { LitElement, html } from "lit"
+import { customElement, property, state } from "lit/decorators.js"
+
+import "./../inlang-bundle.js"
+import "./../actions/inlang-bundle-action.js"
+import type { LintReport, MessageBundle, ProjectSettings2 } from "@inlang/sdk/v2"
+import type { InstalledMessageLintRule } from "@inlang/sdk"
+import { pluralBundle } from "@inlang/sdk/v2-mocks"
+import {
+	mockInstalledLintRules,
+	mockMessageLintReports,
+	mockVariantLintReports,
+} from "../../mock/lint.js"
+import { mockSettings } from "../../mock/settings.js"
+
+@customElement("inlang-reactive-wrapper")
+export default class InlangReactiveWrapper extends LitElement {
+	@property({ type: Object })
+	bundle: MessageBundle | undefined
+
+	@property({ type: Object })
+	settings: ProjectSettings2 | undefined
+
+	@property({ type: Array })
+	installedLintRules: InstalledMessageLintRule[] | undefined
+
+	@state()
+	_lintReports: { hash: string; reports: LintReport[] } | undefined
+
+	//disable shadow root -> because of contenteditable selection API
+	override createRenderRoot() {
+		return this
+	}
+
+	override async firstUpdated() {
+		this._lintReports = {
+			hash: "hash",
+			reports: [],
+		}
+
+		setInterval(() => {
+			if (this._lintReports) {
+				this._lintReports = {
+					...this._lintReports,
+					reports: [...mockMessageLintReports, ...mockVariantLintReports],
+				}
+			}
+		}, 1900)
+
+		// setInterval(() => {
+		// 	if (this._lintReports) {
+		// 		this._lintReports = {
+		// 			...this._lintReports,
+		// 			reports: [],
+		// 		}
+		// 	}
+		// }, 3100)
+	}
+
+	override render() {
+		return html`<inlang-bundle
+			.bundle=${{ ...(this.bundle || pluralBundle), lintReports: this._lintReports }}
+			.settings=${this.settings || mockSettings}
+			.installedLintRules=${this.installedLintRules || mockInstalledLintRules}
+			@change-message-bundle=${(data: any) => {
+				this.bundle = data.detail.argument
+			}}
+			@fix-lint=${(data: any) => console.info("fixLint", data.detail.argument)}
+		>
+			<inlang-bundle-action
+				actionTitle="Share"
+				@click=${() => console.log("Share")}
+			></inlang-bundle-action>
+			<inlang-bundle-action
+				actionTitle="Edit alias"
+				@click=${() => console.log("Edit alias")}
+			></inlang-bundle-action>
+		</inlang-bundle> `
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-reactive-wrapper": InlangReactiveWrapper
+	}
+}
diff --git a/inlang/source-code/bundle-component/src/stories/x.ts b/inlang/source-code/bundle-component/src/stories/x.ts
new file mode 100644
index 0000000000..118516ca64
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/x.ts
@@ -0,0 +1,84 @@
+import { html } from "lit"
+
+function Component() {
+	let bundle: any
+
+	// 	return html`
+
+	//   <inlang-bundle-root .bundle=${bundle} @change=${updateBundle}>
+	//     <inlang-bundle-editor-action slot="bundle-action">
+	//     <inlang-bundle-editor-action slot="message-action">
+	//     <inlang-bundle-editor-action slot="bundle-action">
+	//   </inlang-bundle-editor>
+
+	// 	`
+
+	// const render = html`
+	//     <inlang-bundle-editor>
+	//           <inlang-bundle-editor-header>
+	//           ${bundle.messages.map(
+	//             (message) => html`
+	//             <inlang-editor-message .message=${message}>
+	//               ${message.variants.map(variant) => html`
+	//                 <inlang-editor-variant .variant=${variant}>
+	//                   <inlang-editor-variant-action new @click=${()}>
+	//                     Machine Translate
+	//                   </inlang-editor-variant-action>
+	//                   <inlang-editor-pattern .pattern=${variant.pattern} @change=${(pattern) => {
+	//                     console.log(`${message.id}, ${variant.id}, ${pattern}`)
+	//                   }}></inlang-editor-pattern>
+	//                 </inlang-editor-variant>
+	//               `}
+	//             </inlang-editor-message>
+	//             `
+	//       )}
+	// 		</inlang-editor-bundle>
+
+	// `
+
+	return html` <inlang-message-bundle @change-message-bundle=${() => {}}>
+		<inlang-message-bundle-header .bundle=${bundle}>
+			<inlang-message-bundle-action slot="bundle-action"></inlang-message-bundle-action>
+			<inlang-message-bundle-action slot="bundle-action"></inlang-message-bundle-action>
+		</inlang-message-bundle-header>
+		${bundle.messages.map(
+			(message: any) => html`
+				<inlang-message .message=${message}>
+					${message.variants.map(
+						(variant: any) => html`
+							<inlang-variant .variant=${variant}>
+								<inlang-variant-action
+									name="machine translate"
+									slot="variant-action"
+									@click=${() => {}}
+								></inlang-variant-action>
+								<inlang-pattern-editor
+									.messageId=${message.id}
+									.variantId=${variant.id}
+									.pattern=${variant.pattern}
+								></inlang-pattern-editor>
+							</inlang-variant>
+						`
+					)}
+				</inlang-message>
+			`
+		)}
+	</inlang-message-bundle>`
+}
+
+const render = html` <inlang-message-bundle @change-message-bundle=${() => {}}>
+	<inlang-message-bundle-header .bundle=${bundle}></inlang-message-bundle-header>
+	${bundle.messages.map(
+		(message: any) => html`
+			<inlang-message .settings=${settings} .filteredLocales=${filteredLocales} .message=${message}>
+				${message.variants.map(
+					(variant: any) => html`
+						<inlang-variant .variant=${variant}>
+							<inlang-pattern-editor evenet .pattern=${variant.pattern}></inlang-pattern-editor>
+						</inlang-variant>
+					`
+				)}
+			</inlang-message>
+		`
+	)}
+</inlang-message-bundle>`
diff --git a/inlang/source-code/message-bundle-component/src/styling/base.ts b/inlang/source-code/bundle-component/src/styling/base.ts
similarity index 99%
rename from inlang/source-code/message-bundle-component/src/styling/base.ts
rename to inlang/source-code/bundle-component/src/styling/base.ts
index 1804bb1b7c..bf84eecca7 100644
--- a/inlang/source-code/message-bundle-component/src/styling/base.ts
+++ b/inlang/source-code/bundle-component/src/styling/base.ts
@@ -1,8 +1,8 @@
 import { css } from "lit"
 
 /*
-* This gets into the published component
-*/
+ * This gets into the published component
+ */
 
 export const baseStyling = css`
 	:host {
@@ -429,7 +429,7 @@ export const baseStyling = css`
 		--sl-input-height-large: 3.125rem; /* 50px */
 
 		--sl-input-background-color: var(--sl-color-neutral-0);
-		--sl-input-background-color-hover: var(--sl-input-background-color);
+		--sl-input-background-color-hover: var(--sl-color-neutral-50);
 		--sl-input-background-color-focus: var(--sl-input-background-color);
 		--sl-input-background-color-disabled: var(--sl-color-neutral-100);
 		--sl-input-border-color: var(--sl-color-neutral-300);
diff --git a/inlang/source-code/message-bundle-component/src/styling/preview.css b/inlang/source-code/bundle-component/src/styling/preview.css
similarity index 100%
rename from inlang/source-code/message-bundle-component/src/styling/preview.css
rename to inlang/source-code/bundle-component/src/styling/preview.css
diff --git a/inlang/source-code/message-bundle-component/tsconfig.json b/inlang/source-code/bundle-component/tsconfig.json
similarity index 100%
rename from inlang/source-code/message-bundle-component/tsconfig.json
rename to inlang/source-code/bundle-component/tsconfig.json
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/input/get.ts b/inlang/source-code/message-bundle-component/src/helper/crud/input/get.ts
deleted file mode 100644
index 45dd6e9926..0000000000
--- a/inlang/source-code/message-bundle-component/src/helper/crud/input/get.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { MessageBundle } from "@inlang/sdk/v2"
-
-export const getInputs = (props: { messageBundle: MessageBundle }) => {
-	const inputs: string[] = []
-	for (const message of props.messageBundle.messages) {
-		for (const declaration of message.declarations) {
-			if (declaration.type === "input" && !inputs.includes(declaration.name)) {
-				inputs.push(declaration.name)
-			}
-		}
-	}
-	return inputs
-}
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/selector/add.ts b/inlang/source-code/message-bundle-component/src/helper/crud/selector/add.ts
deleted file mode 100644
index 26cf60d145..0000000000
--- a/inlang/source-code/message-bundle-component/src/helper/crud/selector/add.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Expression, Message } from "@inlang/sdk/v2"
-
-export const addSelector = (props: { message: Message; selector: Expression }) => {
-	props.message.selectors.push(props.selector)
-	for (const variant of props.message.variants) {
-		variant.match.push("*")
-	}
-}
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/sort.ts b/inlang/source-code/message-bundle-component/src/helper/crud/variant/sort.ts
deleted file mode 100644
index cc4a162b77..0000000000
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/sort.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Variant } from "@inlang/sdk/v2"
-
-export const getNewVariantPosition = (props: {
-	variants: Variant[]
-	newVariant: Variant
-}): number => {
-	const compareMatches = (variant: Variant, newVariant: Variant, index: number = 0): number => {
-		const variantMatch = variant.match[index]
-		const newVariantMatch = newVariant.match[index]
-		if (variantMatch && newVariantMatch && variantMatch.localeCompare(newVariantMatch) === -1) {
-			return -1
-		} else if (
-			variantMatch &&
-			newVariantMatch &&
-			variantMatch.localeCompare(newVariantMatch) === 0
-		) {
-			if (index < variant.match.length - 1) {
-				return compareMatches(variant, newVariant, index + 1)
-			} else {
-				return 0
-			}
-		} else {
-			return 1
-		}
-	}
-
-	for (let i = 0; i < props.variants.length; i++) {
-		const _variant = props.variants[i]
-		if (_variant) {
-			const comparisonResult = compareMatches(_variant, props.newVariant)
-			if (comparisonResult === -1) {
-				return i
-			}
-		}
-	}
-
-	return props.variants.length
-}
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/updateMatch.ts b/inlang/source-code/message-bundle-component/src/helper/crud/variant/updateMatch.ts
deleted file mode 100644
index 996b0a3060..0000000000
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/updateMatch.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Variant } from "@inlang/sdk/v2"
-
-const updateMatch = (props: { variant: Variant; matchIndex: number; value: string }) => {
-	// update the match at index matchIndex with value (mutates variant)
-	props.variant.match[props.matchIndex] = props.value
-}
-
-export default updateMatch
diff --git a/inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.ts b/inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.ts
deleted file mode 100644
index a3a4feaba3..0000000000
--- a/inlang/source-code/message-bundle-component/src/helper/crud/variant/upsert.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Message, Variant } from "@inlang/sdk/v2"
-import { getNewVariantPosition } from "./sort.js"
-
-/**
- * Upsert a variant into a message. If a variant with the same match already exists, it will be updated, otherwise a new variant will be added.
- * The function mutates message.
- * @param props.message The message to upsert the variant into.
- * @param props.variant The variant to upsert.
- */
-
-const upsertVariant = (props: { message: Message; variant: Variant }) => {
-	const uniqueMatch = props.variant.match
-	const existingVariant = props.message.variants.find(
-		(variant) => JSON.stringify(variant.match) === JSON.stringify(uniqueMatch)
-	)
-
-	if (existingVariant) {
-		// Update existing variant
-		existingVariant.pattern = props.variant.pattern
-	} else {
-		// Add new variant
-		const newpos = getNewVariantPosition({
-			variants: props.message.variants,
-			newVariant: props.variant,
-		})
-		insertItemAtIndex(props.message.variants, newpos, props.variant)
-	}
-}
-
-export default upsertVariant
-
-function insertItemAtIndex(variants: Variant[], index: number, newVariant: Variant) {
-	if (variants.length === 0) {
-		variants.push(newVariant)
-	} else {
-		variants.splice(index, 0, newVariant)
-	}
-}
diff --git a/inlang/source-code/message-bundle-component/src/index.ts b/inlang/source-code/message-bundle-component/src/index.ts
deleted file mode 100644
index ef2d433baa..0000000000
--- a/inlang/source-code/message-bundle-component/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as InlangMessageBundle } from "./stories/inlang-message-bundle.js"
diff --git a/inlang/source-code/message-bundle-component/src/inlang-message-bundle.mdx b/inlang/source-code/message-bundle-component/src/inlang-message-bundle.mdx
deleted file mode 100644
index 3caa5fb6b6..0000000000
--- a/inlang/source-code/message-bundle-component/src/inlang-message-bundle.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Meta, Primary, Controls, Story, Canvas, ArgTypes, Source } from '@storybook/blocks';
-import * as InlangMessageBundle from './stories/inlang-message-bundle.stories';
-
-<Meta of={InlangMessageBundle} />
-
-# Inlang Message Bundle
\ No newline at end of file
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-lint-report-tip.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-lint-report-tip.ts
deleted file mode 100644
index a8bd70efd7..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-lint-report-tip.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { LitElement, css, html } from "lit"
-import { customElement, property } from "lit/decorators.js"
-import type { MessageLintReport } from "@inlang/message-lint-rule"
-
-import SlToolTip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js"
-
-// in case an app defines it's own set of shoelace components, prevent double registering
-if (!customElements.get("sl-tooltip")) customElements.define("sl-tooltip", SlToolTip)
-
-@customElement("inlang-lint-report-tip")
-export default class InlangLintReportTip extends LitElement {
-	static override styles = [
-		css`
-			.lint-report-tip {
-				height: 29px;
-				width: 29px;
-				color: var(--sl-color-danger-700);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-radius: 4px;
-			}
-			.lint-report-tip:hover {
-				background-color: var(--sl-color-danger-200);
-			}
-		`,
-	]
-
-	@property()
-	lintReports: MessageLintReport[] | undefined
-
-	override render() {
-		return html`<sl-tooltip content=${JSON.stringify(this.lintReports)}>
-			<div class="lint-report-tip">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="18"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-				>
-					<path
-						d="M9 13h2v2H9v-2zm0-8h2v6H9V5zm1-5C4.47 0 0 4.5 0 10A10 10 0 1010 0zm0 18a8 8 0 110-16 8 8 0 010 16z"
-					></path>
-				</svg>
-			</div> 
-		</div>`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"inlang-lint-report-tip": InlangLintReportTip
-	}
-}
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.stories.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.stories.ts
deleted file mode 100644
index c358a5b916..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.stories.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import "./inlang-message-bundle.ts"
-import type { Meta, StoryObj } from "@storybook/web-components"
-import { html } from "lit"
-import { multipleMatcherBundle, pluralBundle } from "@inlang/sdk/v2-mocks"
-import { simplifyBundle } from "../helper/simplifyBundle.js"
-import { createMessage, type MessageBundle } from "@inlang/sdk/v2"
-import type { MessageLintReport } from "@inlang/message-lint-rule"
-import { ProjectSettings } from "@inlang/sdk"
-
-const meta: Meta = {
-	component: "inlang-message-bundle",
-	title: "Public/inlang-message-bundle",
-}
-
-const mockLintReports: MessageLintReport[] = [
-	{
-		ruleId: "messageLintRule.inlang.missingTranslation",
-		messageId: "message-id",
-		languageTag: "de",
-		body: "test message",
-		level: "error",
-	},
-]
-
-const mockSettings: ProjectSettings = {
-	$schema: "https://inlang.com/schema/project-settings",
-	sourceLanguageTag: "en",
-	languageTags: ["en", "de", "nl", "ru"],
-	messageLintRuleLevels: {
-		"messageLintRule.inlang.identicalPattern": "error",
-	},
-	modules: [
-		"https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@4/dist/index.js",
-		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
-		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
-		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
-		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
-	],
-	"plugin.inlang.i18next": {
-		pathPattern: {
-			brain: "./frontend/public/locales/{languageTag}/brain.json",
-			chat: "./frontend/public/locales/{languageTag}/chat.json",
-			config: "./frontend/public/locales/{languageTag}/config.json",
-			contact: "./frontend/public/locales/{languageTag}/contact.json",
-			deleteOrUnsubscribeFormBrain:
-				"./frontend/public/locales/{languageTag}/deleteOrUnsubscribeFormBrain.json",
-			explore: "./frontend/public/locales/{languageTag}/explore.json",
-			external_api_definition:
-				"./frontend/public/locales/{languageTag}/external_api_definition.json",
-			home: "./frontend/public/locales/{languageTag}/home.json",
-			invitation: "./frontend/public/locales/{languageTag}/invitation.json",
-			knowledge: "./frontend/public/locales/{languageTag}/knowledge.json",
-			login: "./frontend/public/locales/{languageTag}/login.json",
-			logout: "./frontend/public/locales/{languageTag}/logout.json",
-			monetization: "./frontend/public/locales/{languageTag}/monetization.json",
-			translation: "./frontend/public/locales/{languageTag}/translation.json",
-			upload: "./frontend/public/locales/{languageTag}/upload.json",
-			user: "./frontend/public/locales/{languageTag}/user.json",
-		},
-	},
-}
-
-const simplifiedBundle = simplifyBundle(multipleMatcherBundle)
-
-export default meta
-
-export const Props: StoryObj = {
-	render: () =>
-		html`<inlang-message-bundle
-			.messageBundle=${simplifiedBundle}
-			.settings=${mockSettings}
-			.lintReports=${mockLintReports}
-			@change-message-bundle=${(messageBundle: MessageBundle) =>
-				console.info("changeMessageBundle", messageBundle)}
-		></inlang-message-bundle> `,
-}
-
-const bundleWithoutSelectors: MessageBundle = {
-	id: "message-bundle-id",
-	messages: [
-		createMessage({ locale: "en", text: "Hello World!" }),
-		createMessage({ locale: "de", text: "Hallo Welt!" }),
-	],
-	alias: {
-		default: "alias",
-	},
-}
-
-export const Simple: StoryObj = {
-	render: () =>
-		html`<inlang-message-bundle
-			.messageBundle=${bundleWithoutSelectors}
-			.settings=${mockSettings}
-			.lintReports=${mockLintReports}
-			@change-message-bundle=${(messageBundle: MessageBundle) =>
-				console.info("changeMessageBundle", messageBundle)}
-		></inlang-message-bundle> `,
-}
-
-export const WithSelectors: StoryObj = {
-	render: () =>
-		html`<inlang-message-bundle
-			.messageBundle=${pluralBundle}
-			.settings=${mockSettings}
-			.lintReports=${mockLintReports}
-			@change-message-bundle=${(messageBundle: MessageBundle) =>
-				console.info("changeMessageBundle", messageBundle)}
-		></inlang-message-bundle> `,
-}
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.styles.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.styles.ts
deleted file mode 100644
index 8b353feba1..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.styles.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { css } from "lit"
-
-/*
- * This gets into the published component
- */
-
-export const messageBundleStyling = css`
-	div {
-		box-sizing: border-box;
-		font-size: 13px;
-	}
-	.header {
-		font-weight: 600;
-		background-color: var(--sl-color-neutral-300);
-		padding: 12px;
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		min-height: 44px;
-	}
-	.messages-container {
-		width: 100%;
-		margin-bottom: 16px;
-	}
-	.message {
-		position: relative;
-		display: flex;
-		min-height: 44px;
-		width: 100%;
-		border: 1px solid var(--sl-color-neutral-300);
-		border-top: none;
-	}
-	.message:first-child {
-		border-top: 1px solid var(--sl-color-neutral-300);
-	}
-	.language-container {
-		width: 80px;
-		min-height: 44px;
-		padding: 12px;
-		background-color: var(--sl-color-neutral-100);
-		border-right: 1px solid var(--sl-color-neutral-300);
-	}
-	.message-body {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-	}
-	.message-header {
-		width: 100%;
-		min-height: 44px;
-		display: flex;
-		justify-content: space-between;
-		background-color: var(--sl-color-neutral-100);
-		border-bottom: 1px solid var(--sl-color-neutral-300);
-	}
-	.no-bottom-border {
-		border-bottom: none;
-	}
-	.selector-container {
-		min-height: 44px;
-		display: flex;
-	}
-	.selector {
-		height: 44px;
-		width: 120px;
-		display: flex;
-		align-items: center;
-		padding: 12px;
-		border-right: 1px solid var(--sl-color-neutral-300);
-		font-weight: 600;
-	}
-	.add-selector-container {
-		height: 44px;
-		width: 44px;
-		display: flex;
-		align-items: center;
-		padding: 12px;
-	}
-	.add-selector {
-		height: 28px;
-		width: 28px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--sl-color-neutral-600);
-		border-radius: 4px;
-		border: 1px solid var(--sl-color-neutral-300);
-		background-color: var(--sl-color-neutral-0);
-		cursor: pointer;
-		font-size: 13px;
-	}
-	.add-selector:hover {
-		color: var(--sl-color-neutral-900);
-		background-color: var(--sl-color-neutral-200);
-		border: 1px solid var(--sl-color-neutral-400);
-	}
-	.message-actions {
-		height: 44px;
-		display: flex;
-		align-items: center;
-		padding: 12px;
-	}
-	.variants-container {
-		width: 100%;
-		height: 44px;
-		display: flex;
-		flex-direction: column;
-		height: auto;
-	}
-	.new-variant {
-		box-sizing: border-box;
-		min-height: 44px;
-		width: 100%;
-		display: flex;
-		gap: 4px;
-		align-items: center;
-		padding-left: 12px;
-		margin: 0;
-		background-color: var(--sl-color-neutral-0);
-		color: var(--sl-color-neutral-400);
-		border-top: 1px solid var(--sl-color-neutral-300);
-		cursor: pointer;
-		transitions: all 0.5s;
-	}
-	.new-variant:hover {
-		background-color: var(--sl-color-neutral-50);
-		color: var(--sl-color-neutral-700);
-	}
-`
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts
deleted file mode 100644
index 8505865948..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import { html, LitElement } from "lit"
-import { customElement, property } from "lit/decorators.js"
-import { baseStyling } from "../styling/base.js"
-import overridePrimitiveColors from "../helper/overridePrimitiveColors.js"
-import type { MessageBundle, Message, LanguageTag } from "@inlang/sdk/v2" // Import the types
-import { messageBundleStyling } from "./inlang-message-bundle.styles.js"
-import upsertVariant from "../helper/crud/variant/upsert.js"
-
-import "./inlang-variant.js"
-import "./inlang-lint-report-tip.js"
-import "./inlang-selector-configurator.js"
-
-import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js"
-import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
-import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js"
-import type { MessageLintReport, ProjectSettings } from "@inlang/sdk"
-import { getInputs } from "../helper/crud/input/get.js"
-
-// in case an app defines it's own set of shoelace components, prevent double registering
-if (!customElements.get("sl-input")) customElements.define("sl-input", SlInput)
-if (!customElements.get("sl-button")) customElements.define("sl-button", SlButton)
-if (!customElements.get("sl-tooltip")) customElements.define("sl-tooltip", SlTooltip)
-
-@customElement("inlang-message-bundle")
-export default class InlangMessageBundle extends LitElement {
-	static override styles = [baseStyling, messageBundleStyling]
-
-	@property({ type: Object })
-	messageBundle: MessageBundle | undefined
-
-	@property({ type: Object })
-	settings: ProjectSettings | undefined
-
-	@property({ type: Object })
-	lintReports: MessageLintReport[] | undefined
-
-	dispatchOnSetSettings(messageBundle: MessageBundle) {
-		const onChangeMessageBundle = new CustomEvent("change-message-bundle", {
-			detail: {
-				argument: messageBundle,
-			},
-		})
-		this.dispatchEvent(onChangeMessageBundle)
-	}
-
-	_triggerSave = () => {
-		if (this.messageBundle) {
-			this.dispatchOnSetSettings(this.messageBundle)
-		}
-	}
-
-	_addMessage = (message: Message) => {
-		if (this.messageBundle) {
-			this.messageBundle.messages.push(message)
-			this.requestUpdate()
-		}
-	}
-
-	_triggerRefresh = () => {
-		this.requestUpdate()
-	}
-
-	override async firstUpdated() {
-		await this.updateComplete
-		// override primitive colors to match the design system
-		overridePrimitiveColors()
-	}
-
-	private _refLanguageTag = (): LanguageTag | undefined => {
-		return this.settings?.sourceLanguageTag
-	}
-
-	private _languageTags = (): LanguageTag[] | undefined => {
-		return this.settings?.languageTags
-	}
-
-	private _fakeInputs = (): string[] | undefined => {
-		const _refLanguageTag = this._refLanguageTag()
-		return _refLanguageTag && this.messageBundle
-			? getInputs({ messageBundle: this.messageBundle })
-			: undefined
-	}
-
-	override render() {
-		return html`
-			<div class=${`header`}>
-				<span># ${this.messageBundle?.id}</span>
-				<span class="alias">@${this.messageBundle?.alias.default}</span>
-			</div>
-			<div class="messages-container">
-				${this._languageTags() &&
-				this._languageTags()?.map((languageTag) => {
-					const message = this.messageBundle?.messages.find(
-						(message) => message.locale === languageTag
-					)
-
-					return this._renderMessage(
-						languageTag,
-						message,
-						this.lintReports?.filter((report) => report.languageTag === languageTag)
-					)
-				})}
-			</div>
-		`
-	}
-
-	private _renderMessage(
-		languageTag: LanguageTag,
-		message?: Message,
-		messageLintReports?: MessageLintReport[]
-	) {
-		return html`
-			<div class="message">
-				<div class="language-container">
-					<span>${languageTag}</span>
-				</div>
-				<div class="message-body">
-					${message && message.selectors.length > 0
-						? html`<div
-								class=${`message-header` +
-								` ` +
-								(message.variants && message.variants.length === 0 ? `no-bottom-border` : ``)}
-						  >
-								<div class="selector-container">
-									${message.selectors.map(
-										// @ts-ignore
-										(selector) => html`<div class="selector">${selector.arg.name}</div>`
-									)}
-									<div class="add-selector-container">
-										<inlang-selector-configurator
-											.inputs=${this._fakeInputs()}
-											.message=${message}
-											.languageTag=${languageTag}
-											.triggerMessageBundleRefresh=${this._triggerRefresh}
-											.addMessage=${this._addMessage}
-										>
-											<sl-tooltip content="Add Selector to message"
-												><div class="add-selector">
-													<svg
-														viewBox="0 0 24 24"
-														width="18"
-														height="18"
-														slot="prefix"
-														class="w-5 h-5 -mx-1"
-													>
-														<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
-													</svg>
-												</div>
-											</sl-tooltip>
-										</inlang-selector-configurator>
-									</div>
-								</div>
-								<div class="message-actions">
-									${messageLintReports && messageLintReports.length > 0
-										? html`<inlang-lint-report-tip
-												.lintReports=${messageLintReports}
-										  ></inlang-lint-report-tip>`
-										: ``}
-								</div>
-						  </div>`
-						: ``}
-					<div class="variants-container">
-						${message
-							? message.variants.map(
-									(variant) =>
-										html`<inlang-variant
-											.variant=${variant}
-											.message=${message}
-											.inputs=${this._fakeInputs()}
-											.triggerSave=${this._triggerSave}
-											.triggerMessageBundleRefresh=${this._triggerRefresh}
-											.addMessage=${this._addMessage}
-											.languageTag=${languageTag}
-											.lintReports=${messageLintReports}
-										></inlang-variant>`
-							  )
-							: html`<inlang-variant
-									.message=${message}
-									.inputs=${this._fakeInputs()}
-									.triggerSave=${this._triggerSave}
-									.addMessage=${this._addMessage}
-									.triggerMessageBundleRefresh=${this._triggerRefresh}
-									.languageTag=${languageTag}
-									.lintReports=${messageLintReports}
-							  ></inlang-variant>`}
-						${message?.selectors && message.selectors.length > 0
-							? html`<p
-									@click=${() => {
-										upsertVariant({
-											message: message,
-											variant: {
-												// combine the matches that are already present with the new category -> like a matrix
-												match: message.selectors.map(() => "null"),
-												pattern: [
-													{
-														type: "text",
-														value: "",
-													},
-												],
-											},
-										})
-										this._triggerRefresh()
-									}}
-									class="new-variant"
-							  >
-									<svg
-										viewBox="0 0 24 24"
-										width="18"
-										height="18"
-										slot="prefix"
-										class="w-5 h-5 -mx-1"
-									>
-										<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
-									</svg>
-									New variant
-							  </p>`
-							: ``}
-					</div>
-				</div>
-			</div>
-		`
-	}
-}
-
-// add types
-declare global {
-	interface HTMLElementTagNameMap {
-		"inlang-message-bundle": InlangMessageBundle
-	}
-}
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-selector-configurator.ts
deleted file mode 100644
index 46bc0f9028..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-selector-configurator.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-import { LitElement, css, html } from "lit"
-import { customElement, property, state } from "lit/decorators.js"
-
-import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js"
-import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
-import SlSelect from "@shoelace-style/shoelace/dist/components/select/select.component.js"
-import SlOption from "@shoelace-style/shoelace/dist/components/option/option.component.js"
-import SlTag from "@shoelace-style/shoelace/dist/components/tag/tag.component.js"
-import { createMessage, type LanguageTag, type Message } from "@inlang/sdk/v2"
-import { addSelector } from "../helper/crud/selector/add.js"
-import upsertVariant from "../helper/crud/variant/upsert.js"
-
-// in case an app defines it's own set of shoelace components, prevent double registering
-if (!customElements.get("sl-dropdown")) customElements.define("sl-dropdown", SlDropdown)
-if (!customElements.get("sl-button")) customElements.define("sl-button", SlButton)
-if (!customElements.get("sl-select")) customElements.define("sl-select", SlSelect)
-if (!customElements.get("sl-option")) customElements.define("sl-option", SlOption)
-if (!customElements.get("sl-tag")) customElements.define("sl-tag", SlTag)
-
-@customElement("inlang-selector-configurator")
-export default class InlangSelectorConfigurator extends LitElement {
-	static override styles = [
-		css`
-			.button-wrapper {
-				height: 44px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-			.dropdown-container {
-				font-size: 13px;
-				width: 300px;
-				background-color: white;
-				border: 1px solid var(--sl-color-neutral-300);
-				padding: 16px;
-				border-radius: 6px;
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-			}
-			sl-select::part(form-control-label) {
-				font-size: 13px;
-				color: var(--sl-color-neutral-700);
-			}
-			.dropdown-title {
-				font-size: 14px;
-				font-weight: 600;
-				margin: 0;
-			}
-			.options-container {
-			}
-			.options-title {
-				font-size: 13px;
-				color: var(--sl-color-neutral-700);
-				margin: 0;
-				padding-bottom: 4px;
-			}
-			.options-wrapper {
-				display: flex;
-				gap: 4px;
-				flex-wrap: wrap;
-			}
-			.actions {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
-			}
-		`,
-	]
-
-	@property()
-	inputs: string[] | undefined
-
-	@property()
-	message?: Message | undefined
-
-	@property()
-	languageTag: LanguageTag | undefined
-
-	@property()
-	triggerMessageBundleRefresh: () => void = () => {}
-
-	@property()
-	addMessage: (newMessage: Message) => void = () => {}
-
-	@state()
-	private _input: string | undefined
-
-	private _getPluralCategories = (): string[] | undefined => {
-		return this.languageTag
-			? new Intl.PluralRules(this.languageTag).resolvedOptions().pluralCategories
-			: undefined
-	}
-
-	private _handleAddSelector = (addVariants: boolean) => {
-		if (this._input) {
-			if (!this.message && this.languageTag) {
-				// create selector in not present message
-				const newMessage = createMessage({ locale: this.languageTag, text: "" })
-
-				// add selector
-				addSelector({
-					message: newMessage,
-					selector: {
-						type: "expression",
-						arg: {
-							type: "variable",
-							name: this._input,
-						},
-						annotation: {
-							type: "function",
-							name: "plural",
-							options: [],
-						},
-					},
-				})
-
-				if (addVariants) {
-					this._addVariants({ message: newMessage, variantMatcherArrays: [] })
-				}
-
-				this.addMessage(newMessage)
-			} else if (this.message) {
-				// get variant matchers arrays
-				const _variants = structuredClone(this.message ? this.message.variants : [])
-				const _variantMatcherArrays = _variants.map((variant) => variant.match)
-
-				// add selector
-				addSelector({
-					message: this.message,
-					selector: {
-						type: "expression",
-						arg: {
-							type: "variable",
-							name: this._input,
-						},
-						annotation: {
-							type: "function",
-							name: "plural",
-							options: [],
-						},
-					},
-				})
-
-				// add plural options if present
-				// TODO: for now always present
-				if (addVariants) {
-					this._addVariants({ message: this.message, variantMatcherArrays: _variantMatcherArrays })
-				}
-			}
-
-			this.triggerMessageBundleRefresh()
-		}
-	}
-
-	private _addVariants = (props: { message: Message; variantMatcherArrays: string[][] }) => {
-		const _categories = this._getPluralCategories()
-
-		if (_categories) {
-			if (props.variantMatcherArrays && props.variantMatcherArrays.length > 0) {
-				for (const variantMatcherArray of props.variantMatcherArrays) {
-					for (const category of _categories) {
-						upsertVariant({
-							message: props.message,
-							variant: {
-								// combine the matches that are already present with the new category -> like a matrix
-								match: [...variantMatcherArray, category],
-								pattern: [
-									{
-										type: "text",
-										value: "",
-									},
-								],
-							},
-						})
-					}
-				}
-			} else {
-				for (const category of _categories) {
-					upsertVariant({
-						message: props.message,
-						variant: {
-							// combine the matches that are already present with the new category -> like a matrix
-							match: [category],
-							pattern: [
-								{
-									type: "text",
-									value: "",
-								},
-							],
-						},
-					})
-				}
-			}
-		}
-	}
-
-	override async firstUpdated() {
-		await this.updateComplete
-		this._input = this.inputs && this.inputs[0]
-	}
-
-	override render() {
-		return html`
-			<sl-dropdown distance="-4">
-				<div slot="trigger" class="button-wrapper">
-					<slot></slot>
-				</div>
-				<div class="dropdown-container">
-					<sl-select
-						@sl-change=${(e: CustomEvent) => {
-							const inputElement = e.target as HTMLInputElement
-							this._input = inputElement.value
-						}}
-						@sl-show=${(e: CustomEvent) => {
-							const inputElement = e.target as HTMLInputElement
-							this._input = inputElement.value
-						}}
-						label="Input"
-						size="small"
-						value=${this.inputs && this.inputs[0]}
-					>
-						${this.inputs &&
-						this.inputs.map((inputs) => {
-							return html`<sl-option value=${inputs}>${inputs}</sl-option>`
-						})}
-					</sl-select>
-					<sl-select label="Function" size="small" value="plural">
-						<sl-option value="plural">plural</sl-option>
-					</sl-select>
-					<div class="options-container">
-						<p class="options-title">Plural Categories</p>
-						<div class="options-wrapper">
-							${this._getPluralCategories()?.map((category) => {
-								return html`<sl-tag size="small" type="info">${category}</sl-tag>`
-							})}
-						</div>
-					</div>
-					<div class="actions">
-						<sl-button
-							@click=${() => {
-								this._handleAddSelector(false)
-							}}
-							size="small"
-							variant="primary"
-							>Add selector</sl-button
-						>
-						<sl-button
-							@click=${() => {
-								this._handleAddSelector(true)
-							}}
-							size="small"
-							>Add selector with default variants</sl-button
-						>
-					</div>
-				</div>
-			</sl-dropdown>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"inlang-selector-configurator": InlangSelectorConfigurator
-	}
-}
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts
deleted file mode 100644
index c3100ee2f3..0000000000
--- a/inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-import { type Variant, type Message, createMessage, type LanguageTag } from "@inlang/sdk/v2"
-import { LitElement, css, html } from "lit"
-import { customElement, property, state } from "lit/decorators.js"
-import upsertVariant from "../helper/crud/variant/upsert.js"
-import deleteVariant from "../helper/crud/variant/delete.js"
-import { getNewVariantPosition } from "../helper/crud/variant/sort.js"
-import type { MessageLintReport } from "@inlang/message-lint-rule"
-
-import "./inlang-lint-report-tip.js"
-import "./inlang-selector-configurator.js"
-import variantIsCatchAll from "../helper/crud/variant/isCatchAll.js"
-import updateMatch from "../helper/crud/variant/updateMatch.js"
-
-import SlTag from "@shoelace-style/shoelace/dist/components/tag/tag.component.js"
-
-// in case an app defines it's own set of shoelace components, prevent double registering
-if (!customElements.get("sl-tag")) customElements.define("sl-tag", SlTag)
-
-@customElement("inlang-variant")
-export default class InlangVariant extends LitElement {
-	static override styles = [
-		css`
-			div {
-				box-sizing: border-box;
-				font-size: 13px;
-			}
-			:host {
-				border-top: 1px solid var(--sl-color-neutral-300);
-			}
-			:host(:first-child) {
-				border-top: none;
-			}
-			.variant {
-				position: relative;
-				min-height: 44px;
-				width: 100%;
-				display: flex;
-				align-items: center;
-			}
-			.match {
-				height: 44px;
-				width: 120px;
-				background-color: none;
-				border-right: 1px solid var(--sl-color-neutral-300);
-			}
-			.match::part(base) {
-				border: none;
-				border-radius: 0;
-				min-height: 44px;
-			}
-			.match::part(input) {
-				min-height: 44px;
-			}
-			.pattern {
-				flex: 1;
-				background-color: none;
-				height: 44px;
-			}
-			.pattern::part(base) {
-				border: none;
-				border-radius: 0;
-				min-height: 44px;
-			}
-			.pattern::part(input) {
-				min-height: 44px;
-			}
-			.pattern::part(input)::placeholder {
-				color: var(--sl-color-neutral-400);
-				font-size: 13px;
-			}
-			.actions {
-				position: absolute;
-				top: 0;
-				right: 0;
-				height: 44px;
-				display: flex;
-				align-items: center;
-				gap: 6px;
-				padding-right: 12px;
-			}
-			.add-selector {
-				height: 30px;
-				padding-right: 8px;
-				padding-left: 6px;
-				display: flex;
-				gap: 4px;
-				align-items: center;
-				justify-content: center;
-				color: var(--sl-color-neutral-600);
-				border-radius: 4px;
-				border: 1px solid var(--sl-color-neutral-300);
-				background-color: var(--sl-color-neutral-0);
-				cursor: pointer;
-				font-size: 13px;
-			}
-			.add-selector:hover {
-				color: var(--sl-color-neutral-900);
-				background-color: var(--sl-color-neutral-200);
-				border: 1px solid var(--sl-color-neutral-400);
-			}
-			.hide-when-not-active {
-				display: none;
-				align-items: center;
-				gap: 6px;
-			}
-			sl-button::part(base):hover {
-				color: var(--sl-color-neutral-900);
-				background-color: var(--sl-color-neutral-100);
-				border: 1px solid var(--sl-color-neutral-400);
-			}
-			.variant:hover .hide-when-not-active {
-				display: flex;
-			}
-		`,
-	]
-
-	@property()
-	message: Message | undefined
-
-	@property()
-	languageTag: LanguageTag | undefined
-
-	@property()
-	variant: Variant | undefined
-
-	@property()
-	inputs: string[] | undefined
-
-	@property()
-	lintReports: MessageLintReport[] | undefined
-
-	@property()
-	addMessage: (newMessage: Message) => void = () => {}
-
-	@property()
-	triggerMessageBundleRefresh: () => void = () => {}
-
-	@property()
-	triggerSave: () => void = () => {}
-
-	@state()
-	private _pattern: string | undefined = undefined
-
-	@state()
-	private _isActive: boolean = false
-
-	_save = () => {
-		if (this.message && this.variant && this._pattern) {
-			// upsert variant
-			upsertVariant({
-				message: this.message,
-				variant: {
-					match: this.variant.match,
-					pattern: [
-						{
-							type: "text",
-							value: this._pattern,
-						},
-					],
-				},
-			})
-			this.triggerSave()
-		} else {
-			// new message
-			if (this.languageTag && this._pattern) {
-				//TODO: only text pattern supported
-				this.addMessage(createMessage({ locale: this.languageTag, text: this._pattern }))
-				this.triggerSave()
-			}
-		}
-	}
-
-	_delete = () => {
-		if (this.message && this.variant) {
-			// upsert variant
-			deleteVariant({
-				message: this.message,
-				variant: this.variant,
-			})
-			this.triggerSave()
-			this.triggerMessageBundleRefresh()
-		}
-	}
-
-	_updateMatch = (matchIndex: number, value: string) => {
-		//TODO improve this function
-		if (this.variant && this.message) {
-			this._pattern =
-				this.variant?.pattern
-					.map((p) => {
-						if ("value" in p) {
-							return p.value
-						} else if (p.type === "expression" && p.arg.type === "variable") {
-							return p.arg.name
-						}
-						return ""
-					})
-					.join(" ") || ""
-			updateMatch({
-				variant: this.variant,
-				matchIndex: matchIndex,
-				value,
-			})
-			const variant = structuredClone(this.variant)
-			//get index of this.varinat in message and delete it
-			const deleteIndex = this.message.variants.indexOf(this.variant)
-			this.message.variants.splice(deleteIndex, 1)
-
-			//get sort index of new variant
-			const newpos = getNewVariantPosition({
-				variants: this.message.variants,
-				newVariant: variant,
-			})
-
-			//insert variant at new position
-			this.message.variants.splice(newpos, 0, variant)
-
-			this._save()
-			this.triggerMessageBundleRefresh()
-		}
-	}
-
-	private get _selectors(): string[] | undefined {
-		// @ts-ignore - just for prototyping
-		return this.message ? this.message.selectors.map((selector) => selector.arg.name) : undefined
-	}
-
-	private get _matches(): string[] | undefined {
-		// @ts-ignore - just for prototyping
-		return this._selectors.map((selector) => {
-			const matchIndex = this._selectors ? this._selectors.indexOf(selector) : undefined
-			return this.variant && typeof matchIndex === "number" ? this.variant.match[matchIndex] : ""
-		})
-	}
-
-	override render() {
-		return html`<div class="variant">
-			${this.variant && this._matches
-				? this._matches.map(
-						(match, index) =>
-							html`
-								<sl-input
-									class="match"
-									size="small"
-									value=${match}
-									@sl-blur=${(e: Event) => {
-										this._updateMatch(index, (e.target as HTMLInputElement).value)
-									}}
-								></sl-input>
-							`
-				  )
-				: undefined}
-			<sl-input
-				class="pattern"
-				size="small"
-				placeholder="Enter pattern ..."
-				value=${this.variant
-					? this.variant.pattern
-							.map((p) => {
-								if ("value" in p) {
-									return p.value
-								} else if (p.type === "expression" && p.arg.type === "variable") {
-									return p.arg.name
-								}
-								return ""
-							})
-							.join(" ")
-					: ""}
-				@input=${(e: Event) => {
-					this._pattern = (e.target as HTMLInputElement).value
-				}}
-				@sl-blur=${(e: Event) => {
-					this._pattern = (e.target as HTMLInputElement).value
-					this._save()
-				}}
-			></sl-input>
-			<div class="actions">
-				<div class="hide-when-not-active">
-					<!-- <sl-button size="small" @click=${() => this._save()}>Save</sl-button> -->
-					${this.message?.selectors.length === 0 || !this.message?.selectors
-						? html`<inlang-selector-configurator
-								.inputs=${this.inputs}
-								.message=${this.message}
-								.languageTag=${this.languageTag}
-								.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
-								.addMessage=${this.addMessage}
-						  >
-								<sl-tooltip content="Add Selector to message"
-									><div class="add-selector">
-										<svg
-											viewBox="0 0 24 24"
-											width="18"
-											height="18"
-											slot="prefix"
-											class="w-5 h-5 -mx-1"
-										>
-											<path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z"></path>
-										</svg>
-										Selector
-									</div>
-								</sl-tooltip>
-						  </inlang-selector-configurator>`
-						: ``}
-					${this.message && this.variant && !variantIsCatchAll({ variant: this.variant })
-						? html`<sl-button size="small" @click=${() => this._delete()}>Delete</sl-button>`
-						: ``}
-				</div>
-				${this.lintReports &&
-				this.lintReports.length > 0 &&
-				this.message?.selectors &&
-				this.message.selectors.length === 0
-					? html`<inlang-lint-report-tip .lintReports=${this.lintReports}></inlang-lint-report-tip>`
-					: ``}
-			</div>
-		</div> `
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"inlang-variant": InlangVariant
-	}
-}

From 1114ca5d9c1732211b3cf2d23f1e79d491bc44fc Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 10:10:02 +0200
Subject: [PATCH 04/35] WIP lifting bundle-component to sdk v2

---
 .../source-code/bundle-component/package.json |  3 +-
 .../src/helper/crud/input/create.test.ts      |  6 +-
 .../src/helper/crud/input/create.ts           |  4 +-
 .../src/helper/crud/input/delete.test.ts      |  6 +-
 .../src/helper/crud/input/delete.ts           |  4 +-
 .../src/helper/crud/input/get.test.ts         |  7 +-
 .../src/helper/crud/input/get.ts              |  4 +-
 .../crud/pattern/patternToString.test.ts      |  2 +-
 .../helper/crud/pattern/patternToString.ts    |  2 +-
 .../crud/pattern/stringToPattern.test.ts      |  2 +-
 .../helper/crud/pattern/stringToPattern.ts    |  2 +-
 .../src/helper/crud/selector/add.test.ts      |  7 +-
 .../src/helper/crud/selector/add.ts           |  8 +-
 .../src/helper/crud/selector/delete.test.ts   |  5 +-
 .../src/helper/crud/selector/delete.ts        |  4 +-
 .../src/helper/crud/variant/delete.test.ts    | 12 +--
 .../src/helper/crud/variant/delete.ts         |  4 +-
 .../helper/crud/variant/isCatchAll.test.ts    | 22 +++--
 .../src/helper/crud/variant/isCatchAll.ts     |  2 +-
 .../src/helper/crud/variant/sortAll.test.ts   | 42 +++++-----
 .../src/helper/crud/variant/sortAll.ts        |  2 +-
 .../helper/crud/variant/updateMatch.test.ts   | 20 ++++-
 .../src/helper/crud/variant/updateMatch.ts    |  2 +-
 .../src/helper/crud/variant/upsert.test.ts    | 20 +++--
 .../src/helper/crud/variant/upsert.ts         |  7 +-
 .../src/helper/simplifyBundle.ts              |  4 +-
 .../bundle-component/src/mock/lint.ts         |  2 +-
 .../src/mock/messageBundle.ts                 |  8 +-
 .../src/stories/inlang-bundle-header.ts       |  6 +-
 .../src/stories/inlang-bundle.ts              | 18 ++--
 .../src/stories/inlang-message.ts             |  2 +-
 .../stories/inlang-selector-configurator.ts   | 20 ++---
 .../src/stories/inlang-variant.ts             |  2 +-
 .../src/stories/testing/reactiveWrapper.ts    |  4 +-
 .../bundle-component/src/stories/x.ts         | 84 -------------------
 35 files changed, 157 insertions(+), 192 deletions(-)
 delete mode 100644 inlang/source-code/bundle-component/src/stories/x.ts

diff --git a/inlang/source-code/bundle-component/package.json b/inlang/source-code/bundle-component/package.json
index 8abff3323a..a05253a7dd 100644
--- a/inlang/source-code/bundle-component/package.json
+++ b/inlang/source-code/bundle-component/package.json
@@ -25,7 +25,6 @@
 		"@inlang/marketplace-manifest": "workspace:^",
 		"@inlang/marketplace-registry": "workspace:^",
 		"@inlang/message-lint-rule": "workspace:^",
-		"@inlang/sdk": "workspace:^",
 		"@nx/storybook": "^18.0.4",
 		"@storybook/addon-essentials": "^7.6.16",
 		"@storybook/addon-links": "^7.6.16",
@@ -42,7 +41,7 @@
 		"vitest": "0.33.0"
 	},
 	"dependencies": {
-		"@inlang/sdk": "workspace:^",
+		"@inlang/sdk-v2": "workspace:^",
 		"@lexical/plain-text": "^0.16.1",
 		"@lexical/utils": "^0.16.1",
 		"@lit/task": "^1.0.0",
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
index 0f563d8fed..55ced403de 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/create.test.ts
@@ -1,13 +1,14 @@
 import { describe, expect, it } from "vitest"
 import createInput from "./create.js"
-import { createMessageBundle } from "@inlang/sdk/v2"
+import { createBundle } from "@inlang/sdk-v2"
 
 describe("createInput", () => {
 	it("Should create an input declarations", () => {
-		const messageBundle = createMessageBundle({
+		const messageBundle = createBundle({
 			id: "bundleId",
 			messages: [
 				{
+					bundleId: "bundleId",
 					id: "testId1",
 					locale: "en",
 					selectors: [],
@@ -27,6 +28,7 @@ describe("createInput", () => {
 					variants: [],
 				},
 				{
+					bundleId: "bundleId",
 					id: "testId2",
 					locale: "de",
 					selectors: [],
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/create.ts b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
index 87aacf42fd..5a7e98aad1 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
@@ -1,4 +1,4 @@
-import type { MessageBundle } from "@inlang/sdk/v2"
+import type { NestedBundle } from "@inlang/sdk-v2"
 
 /**
  * Creates an input in all messages of a message bundle.
@@ -10,7 +10,7 @@ import type { MessageBundle } from "@inlang/sdk/v2"
  * createInput({ messageBundle, inputName: "myInput" })
  */
 
-const createInput = (props: { messageBundle: MessageBundle; inputName: string }) => {
+const createInput = (props: { messageBundle: NestedBundle; inputName: string }) => {
 	for (const message of props.messageBundle.messages) {
 		if (message.declarations.some((declaration) => declaration.name === props.inputName)) {
 			console.error("Input with name already exists")
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
index c7826eb69e..bb175303a7 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/delete.test.ts
@@ -1,13 +1,14 @@
 import { describe, expect, it } from "vitest"
 import deleteInput from "./delete.js"
-import { createMessageBundle } from "@inlang/sdk/v2"
+import { createBundle } from "@inlang/sdk-v2"
 
 describe("deleteInput", () => {
 	it("Should delete a specific input declarations", () => {
-		const messageBundle = createMessageBundle({
+		const messageBundle = createBundle({
 			id: "bundleId",
 			messages: [
 				{
+					bundleId: "bundleId",
 					id: "testId",
 					locale: "en",
 					selectors: [],
@@ -38,6 +39,7 @@ describe("deleteInput", () => {
 					variants: [],
 				},
 				{
+					bundleId: "bundleId",
 					id: "testId",
 					locale: "en",
 					selectors: [],
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
index 32ef28717f..a2e9f5e70c 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
@@ -1,4 +1,4 @@
-import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
+import type { Declaration, NestedBundle } from "@inlang/sdk-v2"
 
 /**
  * Deletes an input from all messages of a message bundle.
@@ -7,7 +7,7 @@ import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
  * @param props.input The input to delete.
  */
 
-const deleteInput = (props: { messageBundle: MessageBundle; input: Declaration }) => {
+const deleteInput = (props: { messageBundle: NestedBundle; input: Declaration }) => {
 	for (const message of props.messageBundle.messages) {
 		const index = message.declarations.findIndex((d) => d.name === props.input.name)
 		if (index === -1) {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts b/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
index 04b33a76c1..d8462501d3 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/get.test.ts
@@ -1,13 +1,14 @@
 import { describe, expect, it } from "vitest"
 import getInput from "./get.js"
-import { createMessageBundle } from "@inlang/sdk/v2"
+import { createBundle } from "@inlang/sdk-v2"
 
 describe("getInput", () => {
 	it("Should return all found input declarations", () => {
-		const messageBundle = createMessageBundle({
+		const messageBundle = createBundle({
 			id: "bundleId",
 			messages: [
 				{
+					bundleId: "bundleId",
 					id: "testId",
 					locale: "en",
 					selectors: [],
@@ -27,6 +28,7 @@ describe("getInput", () => {
 					variants: [],
 				},
 				{
+					bundleId: "bundleId",
 					id: "testId",
 					locale: "en",
 					selectors: [],
@@ -46,6 +48,7 @@ describe("getInput", () => {
 					variants: [],
 				},
 				{
+					bundleId: "bundleId",
 					id: "testId",
 					locale: "en",
 					selectors: [],
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/get.ts b/inlang/source-code/bundle-component/src/helper/crud/input/get.ts
index 7c2b5c6995..e9e507bce0 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/get.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/get.ts
@@ -1,4 +1,4 @@
-import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
+import type { Declaration, NestedBundle } from "@inlang/sdk-v2"
 
 /**
  * Gets all inputs from a message bundle.
@@ -6,7 +6,7 @@ import type { Declaration, MessageBundle } from "@inlang/sdk/v2"
  * @returns All inputs from the message bundle.
  */
 
-const getInputs = (props: { messageBundle: MessageBundle }): Declaration[] => {
+const getInputs = (props: { messageBundle: NestedBundle }): Declaration[] => {
 	const inputs: Declaration[] = []
 	for (const message of props.messageBundle.messages) {
 		for (const declaration of message.declarations) {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
index 37764de52e..a0e465e767 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 import patternToString from "./patternToString.js"
-import type { Pattern } from "@inlang/sdk/v2"
+import type { Pattern } from "@inlang/sdk-v2"
 
 describe("patternToString", () => {
 	it("Should transform pattern to string", () => {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
index eaca0aee0e..c5e3555a9a 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/patternToString.ts
@@ -1,4 +1,4 @@
-import type { Pattern } from "@inlang/sdk/v2"
+import type { Pattern } from "@inlang/sdk-v2"
 
 /**
  * MVP version of the function
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
index 4fa19c8e85..741f5b82e9 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 import stringToPattern from "./stringToPattern.js"
-import type { Pattern } from "@inlang/sdk/v2"
+import type { Pattern } from "@inlang/sdk-v2"
 
 describe("stringToPattern", () => {
 	it("Should transform string to pattern", () => {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
index abcb286d02..2cd94e6953 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/pattern/stringToPattern.ts
@@ -1,4 +1,4 @@
-import type { Pattern } from "@inlang/sdk/v2"
+import type { Pattern } from "@inlang/sdk-v2"
 
 /**
  * MVP version of the function
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
index 9202159116..d2efdc6faa 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/add.test.ts
@@ -1,10 +1,11 @@
-import { type Expression, type Message } from "@inlang/sdk/v2"
+import { type Expression, type NestedMessage } from "@inlang/sdk-v2"
 import { describe, expect, it } from "vitest"
 import addSelector from "./add.js"
 
 describe("addSelector", () => {
 	it("Should add selector", () => {
-		const message: Message = {
+		const message: NestedMessage = {
+			bundleId: "testId",
 			id: "testId",
 			locale: "en",
 			selectors: [
@@ -17,7 +18,7 @@ describe("addSelector", () => {
 				},
 			],
 			declarations: [],
-			variants: [],
+			variants: []
 		}
 
 		const newSelector = {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
index 8cedf32752..9bc5dfe3a7 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
@@ -1,4 +1,4 @@
-import { createVariant, type Expression, type Message } from "@inlang/sdk/v2"
+import { createVariant, type Expression, type NestedMessage } from "@inlang/sdk-v2"
 
 /**
  * Adds a selector to a message.
@@ -10,14 +10,16 @@ import { createVariant, type Expression, type Message } from "@inlang/sdk/v2"
  * addSelector({ message, selector: { type: "expression", arg: { type: "variable", name: "mySelector" } } })
  */
 
-const addSelector = (props: { message: Message; selector: Expression }) => {
+const addSelector = (props: { message: NestedMessage; selector: Expression }) => {
 	props.message.selectors.push(props.selector)
 	if (props.message.variants.length !== 0) {
 		for (const variant of props.message.variants) {
 			variant.match.push("*")
 		}
 	} else {
-		props.message.variants.push(createVariant({ match: ["*"], text: "" }))
+		props.message.variants.push(
+			createVariant({ messageId: props.message.id, match: ["*"], text: "" })
+		)
 	}
 }
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
index b662bb48ce..d153292e2d 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
@@ -1,10 +1,11 @@
-import { type Message } from "@inlang/sdk/v2"
+import { type NestedMessage } from "@inlang/sdk-v2"
 import { describe, expect, it } from "vitest"
 import deleteSelector from "./delete.js"
 
 describe("deleteSelector", () => {
 	it("Should delete selector", () => {
-		const message: Message = {
+		const message: NestedMessage = {
+			bundleId: "bundleTestId",
 			id: "testId",
 			locale: "en",
 			selectors: [
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
index 2d7840de14..4ec56f1e26 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
@@ -1,4 +1,4 @@
-import type { Message } from "@inlang/sdk/v2"
+import type { NestedMessage } from "@inlang/sdk-v2"
 
 /**
  * Deletes a selector from a message.
@@ -10,7 +10,7 @@ import type { Message } from "@inlang/sdk/v2"
  * deleteSelector({ message, index: 0 })
  */
 
-const deleteSelector = (props: { message: Message; index: number }) => {
+const deleteSelector = (props: { message: NestedMessage; index: number }) => {
 	props.message.selectors.splice(props.index, 1)
 	for (const variant of props.message.variants) {
 		variant.match.splice(props.index, 1)
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
index 9c530e1b25..882b9b9aba 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
@@ -1,17 +1,19 @@
-import { type Message, createVariant } from "@inlang/sdk/v2"
+import { type NestedMessage, createVariant } from "@inlang/sdk-v2"
 import { describe, expect, it } from "vitest"
 import deleteVariant from "./delete.js"
 
 describe("deleteVariant", () => {
 	it("Should delete variant", () => {
-		const message: Message = {
-			id: "testId",
+		const messageId = "testId"
+		const message: NestedMessage = {
+			bundleId: "testBundleId",
+			id: messageId,
 			locale: "en",
 			selectors: [],
 			declarations: [],
 			variants: [
-				createVariant({ id: "a", match: ["*"] }),
-				createVariant({ id: "b", match: ["one"] }),
+				createVariant({ messageId, id: "a", match: ["*"] }),
+				createVariant({ messageId, id: "b", match: ["one"] }),
 			],
 		}
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
index 02878502d9..46e38ad6c4 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.ts
@@ -1,4 +1,4 @@
-import type { Message, Variant } from "@inlang/sdk/v2"
+import type { NestedMessage, Variant } from "@inlang/sdk-v2"
 
 /**
  * Deletes a variant from a message.
@@ -7,7 +7,7 @@ import type { Message, Variant } from "@inlang/sdk/v2"
  * @param props.variant The variant to delete.
  */
 
-const deleteVariant = (props: { message: Message; variant: Variant }) => {
+const deleteVariant = (props: { message: NestedMessage; variant: Variant }) => {
 	// index from array where the variant is located
 	const index = props.message.variants.findIndex((variant) => variant.id === props.variant.id)
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
index 3817f62f38..3a715c90b5 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
@@ -1,15 +1,25 @@
-import { createVariant } from "@inlang/sdk/v2"
+import { createVariant } from "@inlang/sdk-v2"
 import { describe, expect, it } from "vitest"
 import variantIsCatchAll from "./isCatchAll.js"
 
 describe("isCatchAll", () => {
 	it("Should return true if variant is catchAll", () => {
-		expect(variantIsCatchAll({ variant: createVariant({ match: ["*"] }) })).toBe(true)
-		expect(variantIsCatchAll({ variant: createVariant({ match: ["*", "*"] }) })).toBe(true)
+		expect(
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*"] }) })
+		).toBe(true)
+		expect(
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*", "*"] }) })
+		).toBe(true)
 	})
 	it("Should return false if variant is not catchAll", () => {
-		expect(variantIsCatchAll({ variant: createVariant({ match: ["one"] }) })).toBe(false)
-		expect(variantIsCatchAll({ variant: createVariant({ match: ["*", "one"] }) })).toBe(false)
-		expect(variantIsCatchAll({ variant: createVariant({ match: ["one", "*"] }) })).toBe(false)
+		expect(
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["one"] }) })
+		).toBe(false)
+		expect(
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*", "one"] }) })
+		).toBe(false)
+		expect(
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["one", "*"] }) })
+		).toBe(false)
 	})
 })
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
index 2108bbb60e..b4f205dbea 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
@@ -1,4 +1,4 @@
-import type { Variant } from "@inlang/sdk/v2"
+import type { Variant } from "@inlang/sdk-v2"
 
 /**
  * Returns true if the variant has a catch-all match.
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
index 40f5c508eb..0ebad80454 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
@@ -1,58 +1,58 @@
 import { describe, expect, it } from "vitest"
 import sortAllVariants from "./sortAll.js"
-import { createVariant, type Variant } from "@inlang/sdk/v2"
+import { createVariant, type Variant } from "@inlang/sdk-v2"
 
 describe("sortAllVariants", () => {
 	it("should sort variants based on matches (desc-alphabetically)", () => {
 		const variants: Variant[] = [
-			createVariant({ id: "1", match: ["a"] }),
-			createVariant({ id: "2", match: ["b"] }),
-			createVariant({ id: "3", match: ["c"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["c"] }),
 		]
 		const ignoreVariantIds: string[] = []
 
 		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ id: "3", match: ["c"] }),
-			createVariant({ id: "2", match: ["b"] }),
-			createVariant({ id: "1", match: ["a"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["c"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a"] }),
 		])
 	})
 
 	it("should sort variants based on matches (desc-alphabetically) complex", () => {
 		const variants: Variant[] = [
-			createVariant({ id: "1", match: ["a", "b", "c"] }),
-			createVariant({ id: "2", match: ["b", "b", "b"] }),
-			createVariant({ id: "3", match: ["b", "a", "a"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
 		]
 		const ignoreVariantIds: string[] = []
 
 		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ id: "2", match: ["b", "b", "b"] }),
-			createVariant({ id: "3", match: ["b", "a", "a"] }),
-			createVariant({ id: "1", match: ["a", "b", "c"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
 		])
 	})
 
 	it("should sort variants based on matches (desc-alphabetically) with ignoreVariantIds", () => {
 		const variants: Variant[] = [
-			createVariant({ id: "1", match: ["a", "b", "c"] }),
-			createVariant({ id: "2", match: ["b", "b", "b"] }),
-			createVariant({ id: "3", match: ["b", "a", "a"] }),
-			createVariant({ id: "4", match: ["z", "z", "z"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
+			createVariant({ messageId: "testId", id: "4", match: ["z", "z", "z"] }),
 		]
 		const ignoreVariantIds: string[] = ["4"]
 
 		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ id: "2", match: ["b", "b", "b"] }),
-			createVariant({ id: "3", match: ["b", "a", "a"] }),
-			createVariant({ id: "1", match: ["a", "b", "c"] }),
-			createVariant({ id: "4", match: ["z", "z", "z"] }),
+			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
+			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
+			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
+			createVariant({ messageId: "testId", id: "4", match: ["z", "z", "z"] }),
 		])
 	})
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
index 29b0189c6f..7f02a8ff1b 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
@@ -1,4 +1,4 @@
-import { type Variant } from "@inlang/sdk/v2"
+import { type Variant } from "@inlang/sdk-v2"
 
 /**
  * Sort all variants by their match values.
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
index 71568c0304..f86d5b34db 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
@@ -1,10 +1,14 @@
 import { describe, expect, it } from "vitest"
 import updateMatch from "./updateMatch.js"
-import { createVariant, type Variant } from "@inlang/sdk/v2"
+import { createVariant, type Variant } from "@inlang/sdk-v2"
 
 describe("updateMatch", () => {
 	it("should update the value at the specified match index", () => {
-		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const variant: Variant = createVariant({
+			messageId: "testId",
+			id: "test-id",
+			match: ["apple", "banana", "cherry"],
+		})
 		const matchIndex = 1
 		const value = "orange"
 
@@ -15,7 +19,11 @@ describe("updateMatch", () => {
 	})
 
 	it("should not update the value if match index is out of range", () => {
-		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const variant: Variant = createVariant({
+			messageId: "testId",
+			id: "test-id",
+			match: ["apple", "banana", "cherry"],
+		})
 		const matchIndex = 3
 		const value = "orange"
 
@@ -26,7 +34,11 @@ describe("updateMatch", () => {
 	})
 
 	it("should not update the value if match index is negative", () => {
-		const variant: Variant = createVariant({ id: "test-id", match: ["apple", "banana", "cherry"] })
+		const variant: Variant = createVariant({
+			messageId: "testId",
+			id: "test-id",
+			match: ["apple", "banana", "cherry"],
+		})
 		const matchIndex = -1
 		const value = "orange"
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
index 76dba7d78b..47f211a51c 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
@@ -1,4 +1,4 @@
-import type { Variant } from "@inlang/sdk/v2"
+import type { Variant } from "@inlang/sdk-v2"
 
 /**
  * Update the match at the specified index with the new value.
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
index a5071f7844..1184f7deec 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
@@ -1,20 +1,26 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { createMessage, createMessageBundle, createVariant } from "@inlang/sdk/v2"
+import { createMessage, createBundle, createVariant } from "@inlang/sdk-v2"
 import { describe, expect, it } from "vitest"
 import upsertVariant from "./upsert.js"
 
 describe("upsertVariant", () => {
 	it("Should update existing variant", () => {
-		const bundle = createMessageBundle({
+		const bundle = createBundle({
 			id: "bundle-id",
 			messages: [
 				{
+					bundleId: "bundle-id",
 					id: "test_message_id",
 					locale: "en",
 					declarations: [],
 					selectors: [],
 					variants: [
-						createVariant({ id: "test_upsertVariant_id", match: ["*"], text: "Hello World" }),
+						createVariant({
+							messageId: "testId",
+							id: "test_upsertVariant_id",
+							match: ["*"],
+							text: "Hello World",
+						}),
 					],
 				},
 			],
@@ -28,6 +34,7 @@ describe("upsertVariant", () => {
 		upsertVariant({
 			message: bundle.messages[0]!,
 			variant: {
+				messageId: bundle.messages[0]!.id,
 				id: "test_upsertVariant_id",
 				match: ["*"],
 				pattern: [{ type: "text", value: "Hello Universe" }],
@@ -41,9 +48,11 @@ describe("upsertVariant", () => {
 	})
 
 	it("Should create a new variant", () => {
-		const bundle = createMessageBundle({
+		const bundle = createBundle({
 			id: "bundle-id",
-			messages: [createMessage({ locale: "en", text: "Hello World", match: ["*"] })],
+			messages: [
+				createMessage({ bundleId: "bundle-id", locale: "en", text: "Hello World", match: ["*"] }),
+			],
 		})
 
 		expect(bundle.messages).toHaveLength(1)
@@ -54,6 +63,7 @@ describe("upsertVariant", () => {
 		upsertVariant({
 			message: bundle.messages[0]!,
 			variant: {
+				messageId: bundle.messages[0]!.id,
 				id: "test_upsertVariant_id",
 				match: ["one"],
 				pattern: [{ type: "text", value: "Hello Universe" }],
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
index 3428dc20be..92e822282c 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.ts
@@ -1,4 +1,4 @@
-import type { Message, Variant } from "@inlang/sdk/v2"
+import type { NestedMessage, Variant } from "@inlang/sdk-v2"
 
 /**
  * Upsert a variant into a message. If a variant with the same match already exists, it will be updated, otherwise a new variant will be added.
@@ -7,7 +7,10 @@ import type { Message, Variant } from "@inlang/sdk/v2"
  * @param props.variant The variant to upsert.
  */
 
-const upsertVariant = (props: { message: Message; variant: Variant }): Variant | undefined => {
+const upsertVariant = (props: {
+	message: NestedMessage
+	variant: Variant
+}): Variant | undefined => {
 	const existingVariant = props.message.variants.find((variant) => variant.id === props.variant.id)
 
 	if (existingVariant) {
diff --git a/inlang/source-code/bundle-component/src/helper/simplifyBundle.ts b/inlang/source-code/bundle-component/src/helper/simplifyBundle.ts
index 8b1458d9d7..54dd074d0a 100644
--- a/inlang/source-code/bundle-component/src/helper/simplifyBundle.ts
+++ b/inlang/source-code/bundle-component/src/helper/simplifyBundle.ts
@@ -1,6 +1,6 @@
-import type { MessageBundle } from "@inlang/sdk/v2"
+import type { NestedBundle } from "@inlang/sdk-v2"
 
-export const simplifyBundle = (bundle: MessageBundle) => {
+export const simplifyBundle = (bundle: NestedBundle) => {
 	// all patterns should become a single text pattern that is randomized
 	for (const message of bundle.messages) {
 		for (const variant of message.variants) {
diff --git a/inlang/source-code/bundle-component/src/mock/lint.ts b/inlang/source-code/bundle-component/src/mock/lint.ts
index a4d13205e8..2455b4380a 100644
--- a/inlang/source-code/bundle-component/src/mock/lint.ts
+++ b/inlang/source-code/bundle-component/src/mock/lint.ts
@@ -1,4 +1,4 @@
-import type { LintReport } from "@inlang/sdk/v2"
+import type { LintReport } from "@inlang/sdk-v2"
 import {
 	createMockBundleLintReport,
 	createMockMessageLintReport,
diff --git a/inlang/source-code/bundle-component/src/mock/messageBundle.ts b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
index 6bf67460d7..a7df8948fc 100644
--- a/inlang/source-code/bundle-component/src/mock/messageBundle.ts
+++ b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
@@ -1,15 +1,17 @@
-import type { MessageBundle } from "@inlang/sdk/v2"
+import type { NestedBundle } from "@inlang/sdk-v2"
 
-export const bundleWithoutSelectors: MessageBundle = {
+export const bundleWithoutSelectors: NestedBundle = {
 	id: "message-bundle-id",
 	messages: [
 		{
+			bundleId: "message-bundle-id",
 			id: "message-id-en",
 			locale: "en",
 			selectors: [],
 			declarations: [],
 			variants: [
 				{
+					messageId: "message-id-en",
 					id: "variant-id-en-*",
 					match: [],
 					pattern: [{ type: "text", value: "{count} new messages" }],
@@ -17,12 +19,14 @@ export const bundleWithoutSelectors: MessageBundle = {
 			],
 		},
 		{
+			bundleId: "message-bundle-id",
 			id: "message-id-de",
 			locale: "de",
 			selectors: [],
 			declarations: [],
 			variants: [
 				{
+					messageId: "message-id-de",
 					id: "variant-id-de-*",
 					match: [],
 					pattern: [{ type: "text", value: "{count} neue Nachrichten" }],
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
index 51966b0667..d4e9aea9b6 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
@@ -2,10 +2,10 @@ import type {
 	Declaration,
 	LanguageTag,
 	Message,
-	MessageBundle,
+	NestedBundle,
 	ProjectSettings2,
 	Variant,
-} from "@inlang/sdk/v2"
+} from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import getInputs from "../helper/crud/input/get.js"
@@ -131,7 +131,7 @@ export default class InlangBundleHeader extends LitElement {
 	]
 
 	@property()
-	bundle: MessageBundle | undefined
+	bundle: NestedBundle | undefined
 
 	@property()
 	settings: ProjectSettings2 | undefined
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index 4aac487c91..4c23b5c5ce 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -2,7 +2,7 @@ import { html, LitElement } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import overridePrimitiveColors from "../helper/overridePrimitiveColors.js"
 import {
-	type MessageBundle,
+	type Bundle,
 	type Message,
 	type Pattern,
 	type LanguageTag,
@@ -13,8 +13,8 @@ import {
 	createMessage,
 	type Variant,
 	type Expression,
-} from "@inlang/sdk/v2"
-import type { InstalledMessageLintRule } from "@inlang/sdk"
+} from "@inlang/sdk-v2"
+import type { InstalledMessageLintRule, NestedBundle, NestedMessage } from "@inlang/sdk-v2"
 
 //internal components
 import "./inlang-bundle-root.js"
@@ -64,7 +64,7 @@ import updateMatch from "../helper/crud/variant/updateMatch.js"
 export default class InlangBundle extends LitElement {
 	//props
 	@property({ type: Object })
-	bundle: MessageBundle | undefined
+	bundle: Bundle | undefined
 
 	@property({ type: Object })
 	settings: ProjectSettings2 | undefined
@@ -165,7 +165,7 @@ export default class InlangBundle extends LitElement {
 
 	// internal variables/states
 	@state()
-	private _bundle: MessageBundle | undefined
+	private _bundle: NestedBundle | undefined
 
 	@state()
 	private _freshlyAddedVariants: string[] = []
@@ -180,7 +180,7 @@ export default class InlangBundle extends LitElement {
 		}
 	}
 
-	private _addMessage = (message: Message) => {
+	private _addMessage = (message: NestedMessage) => {
 		if (this._bundle) {
 			this._bundle.messages.push(message)
 		}
@@ -230,7 +230,7 @@ export default class InlangBundle extends LitElement {
 	}
 
 	private _getBundleActions = (): Element[] => {
-		return Array.from(this.children)
+		return [...this.children]
 			.filter((child) => child instanceof InlangBundleAction)
 			.map((child) => {
 				child.setAttribute("slot", "bundle-action")
@@ -256,10 +256,10 @@ export default class InlangBundle extends LitElement {
 	}
 
 	// fill message with empty message if message is undefined to fix layout shift (will not be committed)
-	private _fillMessage = (message: Message | undefined, locale: LanguageTag): Message => {
+	private _fillMessage = (message: NestedMessage | undefined, locale: LanguageTag): NestedMessage => {
 		if (message) {
 			if (message.variants.length === 0) {
-				message.variants.push(createVariant({ match: [] }))
+				message.variants.push(createVariant({ messageId: message.id, match: [] }))
 			}
 			return message
 		} else {
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
index 09a631f84c..ba5333f018 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-message.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -1,6 +1,6 @@
 import type { InstalledMessageLintRule, LanguageTag } from "@inlang/sdk"
 import type { Declaration, LintReport, Message, ProjectSettings2, Variant } from "@inlang/sdk/v2"
-import { createVariant } from "@inlang/sdk/v2"
+import { createVariant } from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property } from "lit/decorators.js"
 import deleteSelector from "../helper/crud/selector/delete.js"
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
index 4d28e7cc6c..14f078729a 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
@@ -10,7 +10,7 @@ import {
 	type LanguageTag,
 	type Message,
 	type Variant,
-} from "@inlang/sdk/v2"
+} from "@inlang/sdk-v2"
 import addSelector from "../helper/crud/selector/add.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
 import "./inlang-add-input.js"
@@ -367,15 +367,13 @@ export default class InlangSelectorConfigurator extends LitElement {
 				class="dropdown"
 				@sl-show=${(e: CustomEvent) => {
 					const dropdown = this.shadowRoot?.querySelector("sl-dropdown")
-					if (dropdown) {
-						if (e.target === dropdown) {
-							this._input =
-								this.inputs && this.inputs.length > 0 && this.inputs[0]
-									? this.inputs[0].name
-									: undefined
-							if (this.inputs && this.inputs.length === 0) {
-								this._isNewInput = true
-							}
+					if (dropdown && e.target === dropdown) {
+						this._input =
+							this.inputs && this.inputs.length > 0 && this.inputs[0]
+								? this.inputs[0].name
+								: undefined
+						if (this.inputs && this.inputs.length === 0) {
+							this._isNewInput = true
 						}
 					}
 				}}
@@ -518,7 +516,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 										// get the last input element and focus it
 										setTimeout(() => {
 											const inputs = this.shadowRoot?.querySelectorAll(".option")
-											const lastInput = inputs && (inputs[inputs.length - 1] as HTMLInputElement)
+											const lastInput = inputs && (inputs.at(-1) as HTMLInputElement)
 											lastInput?.focus(), 100
 										})
 									}}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index c8e8e86f48..bd5e906aa8 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -5,7 +5,7 @@ import {
 	type LintReport,
 	type InstalledLintRule,
 	type Declaration,
-} from "@inlang/sdk/v2"
+} from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property } from "lit/decorators.js"
 
diff --git a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
index 093b767230..73239d8409 100644
--- a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
+++ b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js"
 
 import "./../inlang-bundle.js"
 import "./../actions/inlang-bundle-action.js"
-import type { LintReport, MessageBundle, ProjectSettings2 } from "@inlang/sdk/v2"
+import type { LintReport, NestedBundle, ProjectSettings2 } from "@inlang/sdk-v2"
 import type { InstalledMessageLintRule } from "@inlang/sdk"
 import { pluralBundle } from "@inlang/sdk/v2-mocks"
 import {
@@ -16,7 +16,7 @@ import { mockSettings } from "../../mock/settings.js"
 @customElement("inlang-reactive-wrapper")
 export default class InlangReactiveWrapper extends LitElement {
 	@property({ type: Object })
-	bundle: MessageBundle | undefined
+	bundle: NestedBundle | undefined
 
 	@property({ type: Object })
 	settings: ProjectSettings2 | undefined
diff --git a/inlang/source-code/bundle-component/src/stories/x.ts b/inlang/source-code/bundle-component/src/stories/x.ts
deleted file mode 100644
index 118516ca64..0000000000
--- a/inlang/source-code/bundle-component/src/stories/x.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { html } from "lit"
-
-function Component() {
-	let bundle: any
-
-	// 	return html`
-
-	//   <inlang-bundle-root .bundle=${bundle} @change=${updateBundle}>
-	//     <inlang-bundle-editor-action slot="bundle-action">
-	//     <inlang-bundle-editor-action slot="message-action">
-	//     <inlang-bundle-editor-action slot="bundle-action">
-	//   </inlang-bundle-editor>
-
-	// 	`
-
-	// const render = html`
-	//     <inlang-bundle-editor>
-	//           <inlang-bundle-editor-header>
-	//           ${bundle.messages.map(
-	//             (message) => html`
-	//             <inlang-editor-message .message=${message}>
-	//               ${message.variants.map(variant) => html`
-	//                 <inlang-editor-variant .variant=${variant}>
-	//                   <inlang-editor-variant-action new @click=${()}>
-	//                     Machine Translate
-	//                   </inlang-editor-variant-action>
-	//                   <inlang-editor-pattern .pattern=${variant.pattern} @change=${(pattern) => {
-	//                     console.log(`${message.id}, ${variant.id}, ${pattern}`)
-	//                   }}></inlang-editor-pattern>
-	//                 </inlang-editor-variant>
-	//               `}
-	//             </inlang-editor-message>
-	//             `
-	//       )}
-	// 		</inlang-editor-bundle>
-
-	// `
-
-	return html` <inlang-message-bundle @change-message-bundle=${() => {}}>
-		<inlang-message-bundle-header .bundle=${bundle}>
-			<inlang-message-bundle-action slot="bundle-action"></inlang-message-bundle-action>
-			<inlang-message-bundle-action slot="bundle-action"></inlang-message-bundle-action>
-		</inlang-message-bundle-header>
-		${bundle.messages.map(
-			(message: any) => html`
-				<inlang-message .message=${message}>
-					${message.variants.map(
-						(variant: any) => html`
-							<inlang-variant .variant=${variant}>
-								<inlang-variant-action
-									name="machine translate"
-									slot="variant-action"
-									@click=${() => {}}
-								></inlang-variant-action>
-								<inlang-pattern-editor
-									.messageId=${message.id}
-									.variantId=${variant.id}
-									.pattern=${variant.pattern}
-								></inlang-pattern-editor>
-							</inlang-variant>
-						`
-					)}
-				</inlang-message>
-			`
-		)}
-	</inlang-message-bundle>`
-}
-
-const render = html` <inlang-message-bundle @change-message-bundle=${() => {}}>
-	<inlang-message-bundle-header .bundle=${bundle}></inlang-message-bundle-header>
-	${bundle.messages.map(
-		(message: any) => html`
-			<inlang-message .settings=${settings} .filteredLocales=${filteredLocales} .message=${message}>
-				${message.variants.map(
-					(variant: any) => html`
-						<inlang-variant .variant=${variant}>
-							<inlang-pattern-editor evenet .pattern=${variant.pattern}></inlang-pattern-editor>
-						</inlang-variant>
-					`
-				)}
-			</inlang-message>
-		`
-	)}
-</inlang-message-bundle>`

From f33bf714779e737e64db6974f4825e0ccdd580b6 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 11:27:10 +0200
Subject: [PATCH 05/35] updates bundle-component to sdk-v2

---
 .../src/helper/overridePrimitiveColors.ts     |  2 +-
 .../bundle-component/src/mock/lint.ts         | 57 +++++++++----------
 .../bundle-component/src/mock/settings.ts     |  2 +-
 .../src/stories/inlang-bundle.stories.ts      | 23 +++-----
 .../src/stories/inlang-bundle.ts              | 51 +++++++++++------
 .../src/stories/inlang-lint-report-tip.ts     |  2 +-
 .../src/stories/inlang-message.ts             | 18 +++---
 .../stories/inlang-selector-configurator.ts   | 19 +++++--
 .../src/stories/inlang-variant.ts             | 33 ++++++-----
 .../inlang-pattern-editor.stories.ts          |  2 +-
 .../pattern-editor/inlang-pattern-editor.ts   | 11 ++--
 .../src/stories/testing/reactiveWrapper.ts    | 42 +++++++-------
 12 files changed, 147 insertions(+), 115 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts b/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts
index 0a7e8e60ae..474506badf 100644
--- a/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts
+++ b/inlang/source-code/bundle-component/src/helper/overridePrimitiveColors.ts
@@ -22,7 +22,7 @@ const overridePrimitiveColors = () => {
 const appendCSSProperties = (
 	colorShades: Record<number, string>,
 	primitive: string,
-	element: HTMLElement
+	element: Element
 ) => {
 	let textContent = Object.entries(colorShades)
 		.map(([index, shade]) => `--sl-color-${primitive}-${index}: ${shade} !important;`)
diff --git a/inlang/source-code/bundle-component/src/mock/lint.ts b/inlang/source-code/bundle-component/src/mock/lint.ts
index 2455b4380a..b4ea1691fd 100644
--- a/inlang/source-code/bundle-component/src/mock/lint.ts
+++ b/inlang/source-code/bundle-component/src/mock/lint.ts
@@ -1,35 +1,34 @@
 import type { LintReport } from "@inlang/sdk-v2"
-import {
-	createMockBundleLintReport,
-	createMockMessageLintReport,
-	createMockVariantLintReport,
-} from "@inlang/sdk/v2-mocks"
+import // createMockBundleLintReport,
+// createMockMessageLintReport,
+// createMockVariantLintReport,
+"@inlang/sdk-v2"
 
-export const mockMessageLintReports: LintReport[] = [
-	createMockMessageLintReport({
-		ruleId: "messageBundleLintRule.inlang.missingReference",
-		messageBundleId: "mock_bundle_human_id",
-		messageId: "mock_message_id_en",
-		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
-	}),
-	createMockMessageLintReport({
-		ruleId: "messageBundleLintRule.inlang.missingReference",
-		messageBundleId: "mock_bundle_human_id",
-		messageId: "mock_message_id_en",
-		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
-		level: "warning",
-	}),
-]
+// export const mockMessageLintReports: LintReport[] = [
+// 	createMockMessageLintReport({
+// 		ruleId: "messageBundleLintRule.inlang.missingReference",
+// 		messageBundleId: "mock_bundle_human_id",
+// 		messageId: "mock_message_id_en",
+// 		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+// 	}),
+// 	createMockMessageLintReport({
+// 		ruleId: "messageBundleLintRule.inlang.missingReference",
+// 		messageBundleId: "mock_bundle_human_id",
+// 		messageId: "mock_message_id_en",
+// 		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+// 		level: "warning",
+// 	}),
+// ]
 
-export const mockVariantLintReports: LintReport[] = [
-	createMockVariantLintReport({
-		ruleId: "messageBundleLintRule.inlang.missingMessage",
-		messageBundleId: "mock_bundle_human_id",
-		messageId: "mock_message_id_de",
-		variantId: "mock_variant_id_de_one",
-		body: "Variant test for `de` to check if can be rendered correctly",
-	}),
-]
+// export const mockVariantLintReports: LintReport[] = [
+// 	createMockVariantLintReport({
+// 		ruleId: "messageBundleLintRule.inlang.missingMessage",
+// 		messageBundleId: "mock_bundle_human_id",
+// 		messageId: "mock_message_id_de",
+// 		variantId: "mock_variant_id_de_one",
+// 		body: "Variant test for `de` to check if can be rendered correctly",
+// 	}),
+// ]
 
 export const mockInstalledLintRules = [
 	{
diff --git a/inlang/source-code/bundle-component/src/mock/settings.ts b/inlang/source-code/bundle-component/src/mock/settings.ts
index 40d3612f40..549fa96e33 100644
--- a/inlang/source-code/bundle-component/src/mock/settings.ts
+++ b/inlang/source-code/bundle-component/src/mock/settings.ts
@@ -1,4 +1,4 @@
-import type { ProjectSettings2 } from "@inlang/sdk/v2"
+import type { ProjectSettings2 } from "@inlang/sdk-v2"
 
 export const mockSettings: ProjectSettings2 = {
 	$schema: "https://inlang.com/schema/project-settings",
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
index d2308882b0..4f6ac0960d 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
@@ -2,14 +2,14 @@ import "./inlang-bundle.ts"
 import "./testing/reactiveWrapper.ts"
 import type { Meta, StoryObj } from "@storybook/web-components"
 import { html } from "lit"
-import {
-	mockInstalledLintRules,
-	mockMessageLintReports,
-	mockVariantLintReports,
-} from "../mock/lint.ts"
+// import {
+// 	mockInstalledLintRules,
+// 	mockMessageLintReports,
+// 	mockVariantLintReports,
+// } from "../mock/lint.ts"
 import { mockSettings } from "../mock/settings.ts"
 import { bundleWithoutSelectors } from "../mock/messageBundle.ts"
-import { pluralBundle } from "@inlang/sdk/v2-mocks"
+import { pluralBundle } from "@inlang/sdk-v2"
 
 import "./actions/inlang-bundle-action.ts"
 
@@ -60,7 +60,7 @@ export const Complex: StoryObj = {
 		return html`<inlang-bundle
 			.bundle=${pluralBundle}
 			.settings=${mockSettings}
-			.installedLintRules=${mockInstalledLintRules}
+			.installedLintRules=${[]}
 			@update-bundle=${(data: any) => console.info("updateBundle", data.detail.argument)}
 			@insert-message=${(data: any) => console.info("insertMessage", data.detail.argument)}
 			@update-message=${(data: any) => console.info("updateMessage", data.detail.argument)}
@@ -141,8 +141,7 @@ export const Styled: StoryObj = {
 			<inlang-bundle
 				.bundle=${pluralBundle}
 				.settings=${mockSettings}
-				.lintReports=${[...mockMessageLintReports, ...mockVariantLintReports]}
-				.installedLintRules=${mockInstalledLintRules}
+				.lintReports=${[]}
 				@change-message-bundle=${(data: any) =>
 					console.info("changeMessageBundle", data.detail.argument)}
 				@fix-lint=${(data: any) => console.info("fixLint", data.detail.argument)}
@@ -161,11 +160,7 @@ export const Styled: StoryObj = {
 
 export const ReactiveLints: StoryObj = {
 	render: () => {
-		return html`<inlang-reactive-wrapper
-			.bundle=${pluralBundle}
-			.settings=${mockSettings}
-			.installedLintRules=${mockInstalledLintRules}
-		>
+		return html`<inlang-reactive-wrapper .bundle=${pluralBundle} .settings=${mockSettings}>
 		</inlang-reactive-wrapper> `
 	},
 }
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index 4c23b5c5ce..a14e980958 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -14,7 +14,7 @@ import {
 	type Variant,
 	type Expression,
 } from "@inlang/sdk-v2"
-import type { InstalledMessageLintRule, NestedBundle, NestedMessage } from "@inlang/sdk-v2"
+import type { InstalledLintRule, NestedBundle, NestedMessage } from "@inlang/sdk-v2"
 
 //internal components
 import "./inlang-bundle-root.js"
@@ -64,7 +64,7 @@ import updateMatch from "../helper/crud/variant/updateMatch.js"
 export default class InlangBundle extends LitElement {
 	//props
 	@property({ type: Object })
-	bundle: Bundle | undefined
+	bundle: NestedBundle | undefined
 
 	@property({ type: Object })
 	settings: ProjectSettings2 | undefined
@@ -73,7 +73,7 @@ export default class InlangBundle extends LitElement {
 	filteredLocales: LanguageTag[] | undefined
 
 	@property({ type: Array })
-	installedLintRules: InstalledMessageLintRule[] | undefined
+	installedLintRules: InstalledLintRule[] | undefined
 
 	//disable shadow root -> because of contenteditable selection API
 	override createRenderRoot() {
@@ -230,6 +230,7 @@ export default class InlangBundle extends LitElement {
 	}
 
 	private _getBundleActions = (): Element[] => {
+		// @ts-ignore -- @NilsJacobsen check why this produces a ts error
 		return [...this.children]
 			.filter((child) => child instanceof InlangBundleAction)
 			.map((child) => {
@@ -256,19 +257,23 @@ export default class InlangBundle extends LitElement {
 	}
 
 	// fill message with empty message if message is undefined to fix layout shift (will not be committed)
-	private _fillMessage = (message: NestedMessage | undefined, locale: LanguageTag): NestedMessage => {
+	private _fillMessage = (
+		bundleId: string,
+		message: NestedMessage | undefined,
+		locale: LanguageTag
+	): NestedMessage => {
 		if (message) {
 			if (message.variants.length === 0) {
 				message.variants.push(createVariant({ messageId: message.id, match: [] }))
 			}
 			return message
 		} else {
-			return createMessage({ locale: locale, text: "" })
+			return createMessage({ bundleId, locale: locale, text: "" })
 		}
 	}
 
 	private _handleUpdatePattern = (
-		message: Message | undefined,
+		message: NestedMessage | undefined,
 		variant: Variant | undefined,
 		newPattern: Pattern,
 		locale: LanguageTag
@@ -288,12 +293,12 @@ export default class InlangBundle extends LitElement {
 				this.dispatchOnUpdateVariant(upsertedVariant)
 			}
 		} else {
-			const newVariant = {
-				...createVariant({ match: [] }),
-				pattern: newPattern,
-			}
-
 			if (message) {
+				const newVariant = {
+					...createVariant({ messageId: message!.id, match: [] }),
+					pattern: newPattern,
+				}
+
 				// A message object exists -> just add the new variant
 				upsertVariant({
 					message: message!,
@@ -301,9 +306,20 @@ export default class InlangBundle extends LitElement {
 				})
 				this.dispatchOnInsertVariant(newVariant)
 			} else {
+				const messageWithoutVariant = createMessage({
+					bundleId: this.bundle!.id,
+					locale: locale,
+					text: "test",
+				})
+
+				const newVariant = {
+					...createVariant({ messageId: messageWithoutVariant!.id, match: [] }),
+					pattern: newPattern,
+				}
+
 				// A message object does not exist yet -> create one that also contains the new variant
 				const newMessage = {
-					...createMessage({ locale: locale, text: "test" }),
+					...messageWithoutVariant,
 					selectors: [],
 					declarations: [],
 					locale: locale,
@@ -359,9 +375,11 @@ export default class InlangBundle extends LitElement {
 					${this._locales() &&
 					this._locales()?.map((locale) => {
 						const message = this._bundle?.messages.find((message) => message.locale === locale)
-						const lintReports = this._bundle?.lintReports?.reports.filter(
-							(report) => report.messageId === message?.id
-						)
+						// TODO SDK-v2 lint reports
+						const lintReports = [] as any[]
+						// const lintReports = this._bundle?.lintReports?.reports.filter(
+						// 	(report) => report.messageId === message?.id
+						// )
 						return html`<inlang-message
 							.locale=${locale}
 							.message=${message}
@@ -378,7 +396,8 @@ export default class InlangBundle extends LitElement {
 							.fixLint=${this._fixLint}
 						>
 							${sortAllVariants({
-								variants: this._fillMessage(structuredClone(message), locale).variants,
+								variants: this._fillMessage(this._bundle!.id, structuredClone(message), locale)
+									.variants,
 								ignoreVariantIds: this._freshlyAddedVariants,
 							})?.map((fakevariant) => {
 								const variant = message?.variants.find((v) => v.id === fakevariant.id)
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
index 35fd5ee37b..d63df8a8cb 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit"
 import { customElement, property } from "lit/decorators.js"
 
-import type { InstalledLintRule, LintReport } from "@inlang/sdk/v2"
+import type { InstalledLintRule, LintReport } from "@inlang/sdk-v2"
 
 @customElement("inlang-lint-report-tip")
 export default class InlangLintReportTip extends LitElement {
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
index ba5333f018..88bbc1e139 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-message.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -1,5 +1,5 @@
-import type { InstalledMessageLintRule, LanguageTag } from "@inlang/sdk"
-import type { Declaration, LintReport, Message, ProjectSettings2, Variant } from "@inlang/sdk/v2"
+import type { InstalledLintRule, LanguageTag, NestedMessage } from "@inlang/sdk-v2"
+import type { Declaration, LintReport, Message, ProjectSettings2, Variant } from "@inlang/sdk-v2"
 import { createVariant } from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property } from "lit/decorators.js"
@@ -158,13 +158,13 @@ export default class InlangMessage extends LitElement {
 	locale: LanguageTag | undefined
 
 	@property()
-	message: Message | undefined
+	message: NestedMessage | undefined
 
 	@property()
 	lintReports: LintReport[] | undefined
 
 	@property()
-	installedLintRules: InstalledMessageLintRule[] | undefined
+	installedLintRules: InstalledLintRule[] | undefined
 
 	@property({ type: Object })
 	settings: ProjectSettings2 | undefined
@@ -179,7 +179,7 @@ export default class InlangMessage extends LitElement {
 	addInput: (name: string) => void = () => {}
 
 	@property()
-	addMessage: (message: Message) => void = () => {}
+	addMessage: (message: NestedMessage) => void = () => {}
 
 	@property()
 	resetFreshlyAddedVariants: (newArray: string[]) => void = () => {}
@@ -266,6 +266,7 @@ export default class InlangMessage extends LitElement {
 								<div class="add-selector-container">
 									<inlang-selector-configurator
 										.inputs=${this.inputs}
+										.bundleId=${this.message.bundleId}
 										.message=${this.message}
 										.locale=${this.locale}
 										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
@@ -333,9 +334,11 @@ export default class InlangMessage extends LitElement {
 									: ``}
 								${this.lintReports &&
 								this.lintReports.length > 0 &&
-								this.lintReports.some((report) => !report.variantId)
+								this.lintReports.some((report) => !report.target.variantId)
 									? html`<inlang-lint-report-tip
-											.lintReports=${this.lintReports.filter((report) => !report.variantId) ?? []}
+											.lintReports=${this.lintReports.filter(
+												(report) => !report.target.variantId
+											) ?? []}
 											.installedLintRules=${this.installedLintRules}
 											.fixLint=${this.fixLint}
 									  ></inlang-lint-report-tip>`
@@ -349,6 +352,7 @@ export default class InlangMessage extends LitElement {
 						? html`<p
 								@click=${() => {
 									const variant = createVariant({
+										messageId: this.message!.id,
 										// combine the matches that are already present with the new category -> like a matrix
 										match: this.message?.selectors.map(() => "null"),
 									})
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
index 14f078729a..fdf88b60ab 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
@@ -10,6 +10,7 @@ import {
 	type LanguageTag,
 	type Message,
 	type Variant,
+	type NestedMessage,
 } from "@inlang/sdk-v2"
 import addSelector from "../helper/crud/selector/add.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
@@ -147,7 +148,10 @@ export default class InlangSelectorConfigurator extends LitElement {
 	inputs: Declaration[] | undefined
 
 	@property()
-	message?: Message | undefined
+	bundleId: string | undefined
+
+	@property()
+	message?: NestedMessage | undefined
 
 	@property()
 	locale: LanguageTag | undefined
@@ -159,7 +163,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 	triggerSave: () => void = () => {}
 
 	@property()
-	addMessage: (newMessage: Message) => void = () => {}
+	addMessage: (newMessage: NestedMessage) => void = () => {}
 
 	@property()
 	addInput: (inputName: string) => void = () => {}
@@ -240,7 +244,11 @@ export default class InlangSelectorConfigurator extends LitElement {
 		if (this._input) {
 			if (!this.message && this.locale) {
 				// create selector in not present message
-				const newMessage = createMessage({ locale: this.locale, text: "" })
+				const newMessage = createMessage({
+					bundleId: this.bundleId!,
+					locale: this.locale,
+					text: "",
+				})
 
 				// add selector
 				addSelector({
@@ -315,7 +323,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 	}
 
 	private _addVariants = (props: {
-		message: Message
+		message: NestedMessage
 		variantMatcherArrays: string[][]
 		newMatchers: string[]
 	}) => {
@@ -327,6 +335,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 						upsertVariant({
 							message: props.message,
 							variant: createVariant({
+								messageId: props.message.id,
 								// combine the matches that are already present with the new category -> like a matrix
 								match: [...variantMatcherArray, category],
 							}),
@@ -338,6 +347,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 					upsertVariant({
 						message: props.message,
 						variant: createVariant({
+							messageId: props.message.id,
 							// combine the matches that are already present with the new category -> like a matrix
 							match: [category],
 						}),
@@ -516,6 +526,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 										// get the last input element and focus it
 										setTimeout(() => {
 											const inputs = this.shadowRoot?.querySelectorAll(".option")
+											// @ts-ignore -- .at seems not to be available in the type? @NilsJacobsen
 											const lastInput = inputs && (inputs.at(-1) as HTMLInputElement)
 											lastInput?.focus(), 100
 										})
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index bd5e906aa8..6007b31b6a 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -1,6 +1,6 @@
 import {
 	type Variant,
-	type Message,
+	type NestedMessage,
 	type LanguageTag,
 	type LintReport,
 	type InstalledLintRule,
@@ -137,7 +137,7 @@ export default class InlangVariant extends LitElement {
 
 	//props
 	@property()
-	message: Message | undefined
+	message: NestedMessage | undefined
 
 	@property()
 	locale: LanguageTag | undefined
@@ -158,7 +158,7 @@ export default class InlangVariant extends LitElement {
 	setHoveredVariantId: (variantId: string | undefined) => void = () => {}
 
 	@property()
-	addMessage: (newMessage: Message) => void = () => {}
+	addMessage: (newMessage: NestedMessage) => void = () => {}
 
 	@property()
 	addInput: (inputName: string) => void = () => {}
@@ -215,11 +215,13 @@ export default class InlangVariant extends LitElement {
 			if (
 				this.message.selectors &&
 				this.message.selectors.length > 0 &&
-				this.lintReports.some((report) => report.variantId && report.variantId === this.variant?.id)
+				this.lintReports.some(
+					(report) => report.target.variantId && report.target.variantId === this.variant?.id
+				)
 			) {
 				// when selectors are present, only the reports of the variant are shown
 				return this.lintReports.filter(
-					(report) => report.variantId && report.variantId === this.variant?.id
+					(report) => report.target.variantId && report.target.variantId === this.variant?.id
 				)
 			}
 		}
@@ -307,19 +309,19 @@ export default class InlangVariant extends LitElement {
 			if (lintReportDropdown) {
 				const previousSibling = lintReportsTip?.previousSibling?.previousSibling?.previousSibling
 				lintReportDropdown.addEventListener("sl-show", (e) => {
-					if (e.target === lintReportDropdown) {
-						//set parent class dropdown-open
-						if (previousSibling instanceof HTMLElement) {
-							previousSibling.classList.add("dropdown-open")
-						}
+					if (
+						e.target === lintReportDropdown && //set parent class dropdown-open
+						previousSibling instanceof HTMLElement
+					) {
+						previousSibling.classList.add("dropdown-open")
 					}
 				})
 				lintReportDropdown.addEventListener("sl-hide", (e) => {
-					if (e.target === lintReportDropdown) {
-						//remove parent class dropdown-open
-						if (previousSibling instanceof HTMLElement) {
-							previousSibling.classList.remove("dropdown-open")
-						}
+					if (
+						e.target === lintReportDropdown && //remove parent class dropdown-open
+						previousSibling instanceof HTMLElement
+					) {
+						previousSibling.classList.remove("dropdown-open")
 					}
 				})
 			}
@@ -357,6 +359,7 @@ export default class InlangVariant extends LitElement {
 							!this.message?.selectors
 								? html`<inlang-selector-configurator
 										.inputs=${this.inputs}
+										.bundleId=${this.message!.bundleId}
 										.message=${this.message}
 										.locale=${this.locale}
 										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
index 3860745e6d..487c473489 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
@@ -1,7 +1,7 @@
 import "./inlang-pattern-editor.ts"
 import type { Meta, StoryObj } from "@storybook/web-components"
 import { html } from "lit"
-import { pluralBundle } from "@inlang/sdk/v2-mocks"
+import { pluralBundle } from "@inlang/sdk-v2"
 import stringToPattern from "../../helper/crud/pattern/stringToPattern.ts"
 
 const meta: Meta = {
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
index aa2aba8189..1f281881cd 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
@@ -1,4 +1,4 @@
-import type { Pattern } from "@inlang/sdk/v2"
+import type { Pattern } from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import { ref, createRef, type Ref } from "lit/directives/ref.js"
@@ -55,10 +55,11 @@ export default class InlangPatternEditor extends LitElement {
 
 	// update editor when pattern changes
 	override updated(changedProperties: Map<string | number | symbol, unknown>) {
-		if (changedProperties.has("pattern")) {
-			if (patternToString({ pattern: this.pattern! }) !== this._editorTextContent) {
-				this._setEditorState()
-			}
+		if (
+			changedProperties.has("pattern") &&
+			patternToString({ pattern: this.pattern! }) !== this._editorTextContent
+		) {
+			this._setEditorState()
 		}
 	}
 
diff --git a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
index 73239d8409..548f05acac 100644
--- a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
+++ b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
@@ -3,13 +3,14 @@ import { customElement, property, state } from "lit/decorators.js"
 
 import "./../inlang-bundle.js"
 import "./../actions/inlang-bundle-action.js"
-import type { LintReport, NestedBundle, ProjectSettings2 } from "@inlang/sdk-v2"
-import type { InstalledMessageLintRule } from "@inlang/sdk"
-import { pluralBundle } from "@inlang/sdk/v2-mocks"
+import type { InstalledLintRule, LintReport, NestedBundle, ProjectSettings2 } from "@inlang/sdk-v2"
+// import type { InstalledMessageLintRule } from "@inlang/sdk-v2"
+import { pluralBundle } from "@inlang/sdk-v2"
+
 import {
 	mockInstalledLintRules,
-	mockMessageLintReports,
-	mockVariantLintReports,
+	// mockMessageLintReports,
+	// mockVariantLintReports,
 } from "../../mock/lint.js"
 import { mockSettings } from "../../mock/settings.js"
 
@@ -22,7 +23,7 @@ export default class InlangReactiveWrapper extends LitElement {
 	settings: ProjectSettings2 | undefined
 
 	@property({ type: Array })
-	installedLintRules: InstalledMessageLintRule[] | undefined
+	installedLintRules: InstalledLintRule[] | undefined
 
 	@state()
 	_lintReports: { hash: string; reports: LintReport[] } | undefined
@@ -33,20 +34,19 @@ export default class InlangReactiveWrapper extends LitElement {
 	}
 
 	override async firstUpdated() {
-		this._lintReports = {
-			hash: "hash",
-			reports: [],
-		}
-
-		setInterval(() => {
-			if (this._lintReports) {
-				this._lintReports = {
-					...this._lintReports,
-					reports: [...mockMessageLintReports, ...mockVariantLintReports],
-				}
-			}
-		}, 1900)
-
+		// TODO SDK-v2 lint reports - mock
+		// this._lintReports = {
+		// 	hash: "hash",
+		// 	reports: [],
+		// }
+		// setInterval(() => {
+		// 	if (this._lintReports) {
+		// 		this._lintReports = {
+		// 			...this._lintReports,
+		// 			reports: [...mockMessageLintReports, ...mockVariantLintReports],
+		// 		}
+		// 	}
+		// }, 1900)
 		// setInterval(() => {
 		// 	if (this._lintReports) {
 		// 		this._lintReports = {
@@ -61,7 +61,7 @@ export default class InlangReactiveWrapper extends LitElement {
 		return html`<inlang-bundle
 			.bundle=${{ ...(this.bundle || pluralBundle), lintReports: this._lintReports }}
 			.settings=${this.settings || mockSettings}
-			.installedLintRules=${this.installedLintRules || mockInstalledLintRules}
+			.installedLintRules=${[] /*this.installedLintRules || mockInstalledLintRules*/}
 			@change-message-bundle=${(data: any) => {
 				this.bundle = data.detail.argument
 			}}

From e9e24c9fbd07f687dc1796f7624cd2c534fafa87 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 12:29:33 +0200
Subject: [PATCH 06/35] WIP SDKv2 added, sample app misses crud still

---
 inlang/source-code/sdk-v2/package.json        |   8 +-
 .../sdk-v2/sample-app/package.json            |   2 +-
 .../sample-app/src/MessageBundleView.tsx      |  24 +-
 .../sdk-v2/sample-app/src/main.tsx            |   2 +-
 .../sdk-v2/sample-app/src/mainView.tsx        |  25 +-
 .../sample-app/src/messageBundleListReact.tsx |  20 +-
 .../src/messageBundleListSummary.tsx          |   6 +-
 .../sdk-v2/src/dev-modules/lint-rule.js       |  16 +-
 .../dev-modules/missing-selector-lint-rule.ts |   8 +-
 .../sdk-v2/src/dev-modules/missingCatchall.ts |  12 +-
 .../dev-modules/opral-uppercase-lint-rule.ts  |  20 +-
 .../sdk-v2/src/env-variables/.gitignore       |   1 +
 .../sdk-v2/src/env-variables/.prettierignore  |   1 +
 .../src/env-variables/createIndexFile.js      |  28 +
 .../sdk-v2/src/env-variables/index.d.ts       |  13 +
 inlang/source-code/sdk-v2/src/helper.ts       |  70 ++
 inlang/source-code/sdk-v2/src/index.ts        |   4 +
 inlang/source-code/sdk-v2/src/lint/host.ts    |  46 +-
 inlang/source-code/sdk-v2/src/lint/import.ts  |   4 +-
 .../sdk-v2/src/lint/populateLintLevel.ts      |  24 +-
 .../source-code/sdk-v2/src/loadProjectOpfs.ts | 260 ++---
 inlang/source-code/sdk-v2/src/mock/index.ts   |   3 +
 .../sdk-v2/src/mock/lintRports/mockCreate.ts  |  81 ++
 .../source-code/sdk-v2/src/mock/mockhelper.ts |  60 +-
 .../sdk-v2/src/mock/plural/bundle.test.ts     |  19 +
 .../sdk-v2/src/mock/plural/bundle.ts          | 209 ++++
 .../source-code/sdk-v2/src/newProjectOpfs.ts  |   1 -
 .../sdk-v2/src/resolve-modules/errors.ts      |   1 -
 .../{import.test.ts => import.test.tstemp}    |   0
 .../{index.ts => index.tstemp}                |   1 -
 .../message-lint-rules/errors.ts              |   9 -
 .../resolveMessageLintRules.ts                |  27 -
 .../plugins/resolvePlugins.test.ts            | 301 ------
 .../resolve-modules/plugins/resolvePlugins.ts | 129 ---
 .../src/resolve-modules/plugins/types.test.ts |  11 +-
 .../src/resolve-modules/plugins/types.ts      |  25 +-
 .../resolve-modules/resolveModules.test.ts    | 224 ----
 .../src/resolve-modules/resolveModules.ts     | 113 ---
 .../sdk-v2/src/resolve-modules/types.ts       |  72 --
 .../validateModuleSettings.test.ts            |  85 --
 .../validatedModuleSettings.ts                |  19 -
 .../sdk-v2/src/resolveModules2.test.ts        | 224 ----
 .../source-code/sdk-v2/src/resolvePlugins2.ts |  45 +-
 inlang/source-code/sdk-v2/src/types/index.ts  |   3 +-
 inlang/source-code/sdk-v2/src/types/lint.ts   |  26 +-
 .../source-code/sdk-v2/src/types/project.ts   |  42 +-
 inlang/source-code/sdk-v2/src/types/schema.ts |  44 +-
 .../source-code/sdk-v2/src/types/sdkTypes.ts  |   9 -
 inlang/source-code/sdk-v2/src/x.ts            |  42 -
 pnpm-lock.yaml                                | 956 ++++++++++++++----
 pnpm-workspace.yaml                           |   2 -
 51 files changed, 1558 insertions(+), 1819 deletions(-)
 create mode 100644 inlang/source-code/sdk-v2/src/env-variables/.gitignore
 create mode 100644 inlang/source-code/sdk-v2/src/env-variables/.prettierignore
 create mode 100644 inlang/source-code/sdk-v2/src/env-variables/createIndexFile.js
 create mode 100644 inlang/source-code/sdk-v2/src/env-variables/index.d.ts
 create mode 100644 inlang/source-code/sdk-v2/src/helper.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/index.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/lintRports/mockCreate.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/plural/bundle.test.ts
 create mode 100644 inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
 rename inlang/source-code/sdk-v2/src/resolve-modules/{import.test.ts => import.test.tstemp} (100%)
 rename inlang/source-code/sdk-v2/src/resolve-modules/{index.ts => index.tstemp} (54%)
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/types.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolveModules2.test.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/types/sdkTypes.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/x.ts

diff --git a/inlang/source-code/sdk-v2/package.json b/inlang/source-code/sdk-v2/package.json
index a3379542a7..9dab3734a6 100644
--- a/inlang/source-code/sdk-v2/package.json
+++ b/inlang/source-code/sdk-v2/package.json
@@ -21,10 +21,10 @@
 		"./src"
 	],
 	"scripts": {
-		"build": "npm run prepare-env-variables && tsc --build",
-		"dev": "npm run prepare-env-variables && tsc --watch",
+		"build": "pnpm run prepare-env-variables && tsc --build",
+		"dev": "pnpm run prepare-env-variables && tsc --watch",
 		"prepare-env-variables": "node ./src/env-variables/createIndexFile.js",
-		"test": "npm run prepare-env-variables && tsc --noEmit && vitest run --passWithNoTests --coverage",
+		"test": "pnpm run prepare-env-variables && tsc --noEmit && vitest run --passWithNoTests --coverage",
 		"lint": "eslint ./src --fix",
 		"format": "prettier ./src --write",
 		"clean": "rm -rf ./dist ./node_modules"
@@ -38,8 +38,10 @@
 		"@inlang/json-types": "workspace:*",
 		"@inlang/translatable": "workspace:*",
 		"@inlang/plugin": "workspace:*",
+		"@lix-js/fs": "workspace:*",
 		"@sqlite.org/sqlite-wasm": "^3.46.0-build2",
 		"deepmerge-ts": "^5.1.0",
+		"dedent": "1.5.1",
 		"kysely": "^0.27.4",
 		"sqlocal": "^0.10.1",
 		"rxjs": "7.8.1",
diff --git a/inlang/source-code/sdk-v2/sample-app/package.json b/inlang/source-code/sdk-v2/sample-app/package.json
index dc356ab546..d445a123f9 100644
--- a/inlang/source-code/sdk-v2/sample-app/package.json
+++ b/inlang/source-code/sdk-v2/sample-app/package.json
@@ -34,7 +34,7 @@
 		"comlink": "^4.4.1",
 		"@types/react-dom": "^18.3.0",
 		"@inlang/sdk-v2": "workspace:*",
-		"@inlang/message-bundle-component": "workspace:*",
+		"@inlang/bundle-component": "workspace:*",
 		"@inlang/settings-component": "workspace:*"
 	}
 }
diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
index b9719cb936..75a834137f 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -1,23 +1,28 @@
 import React, { useEffect, useState } from "react"
 import { createComponent } from "@lit/react"
-import { InlangMessageBundle } from "@inlang/message-bundle-component"
-import { BundleWithMessages } from "../../src/types/sdkTypes.js"
+import { InlangBundle } from "@inlang/bundle-component"
 import { ProjectSettings2 } from "../../src/types/project-settings.js"
 import { InlangProject } from "../../src/types/project.js"
 import { LintReport } from "../../src/types/lint.js"
 import { LanguageTag } from "../../src/types/language-tag.js"
+import { NestedBundle } from "../../src/index.js"
 
 export const MessageBundleComponent = createComponent({
-	tagName: "inlang-message-bundle",
-	elementClass: InlangMessageBundle,
+	tagName: "inlang-bundle",
+	elementClass: InlangBundle,
 	react: React,
 	events: {
 		changeMessageBundle: "change-message-bundle",
+		insertMessage: "insert-message",
+		updateMessage: "update-message",
+
+		insertVariant: "insert-variant",
+		updateVariant: "update-variant",
 		fixLint: "fix-lint",
 	},
 })
 type MessageBundleViewProps = {
-	bundle: BundleWithMessages // TODO SDK2 make SDK Bundle a reactive query that delivers the bundle instead
+	bundle: NestedBundle // TODO SDK2 make SDK Bundle a reactive query that delivers the bundle instead
 	// reports: Subject<LintReport[]>
 	projectSettings: ProjectSettings2
 	project: InlangProject
@@ -46,18 +51,23 @@ function MessageBundleView({
 		// }
 	}, [bundle])
 
-	const onBundleChange = (messageBundle: { detail: { argument: BundleWithMessages } }) => {
+	const onBundleChange = (messageBundle: { detail: { argument: NestedBundle } }) => {
 		// eslint-disable-next-line no-console
 		// TODO SDK-V2 check how we update the bundle in v2 sql
 		// project.messageBundleCollection?.upsert(messageBundle.detail.argument)
 	}
 
+	const onMesageInsert = (event: { detail: { argument: NestedBundle } }) => {
+		debugger
+	}
+
 	return (
 		<MessageBundleComponent
 			key={bundle.id}
-			messageBundle={currentBundle as any}
+			bundle={currentBundle}
 			settings={projectSettings}
 			changeMessageBundle={onBundleChange as any}
+			insertMessage={onMesageInsert as any}
 			filteredLocales={filteredLocales.length > 0 ? filteredLocales : undefined}
 			fixLint={(e: any) => {
 				const { fix, lintReport } = e.detail.argument as {
diff --git a/inlang/source-code/sdk-v2/sample-app/src/main.tsx b/inlang/source-code/sdk-v2/sample-app/src/main.tsx
index cca656126b..f70fa8cf7a 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/main.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/main.tsx
@@ -3,7 +3,7 @@ import "./style.css"
 import { createRoot } from "react-dom/client"
 import { PageView } from "./PageView.js"
 
-import "@inlang/message-bundle-component"
+import "@inlang/bundle-component"
 
 document.querySelector<HTMLDivElement>(
 	"#app"
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
index 2824f0755e..08a559590a 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
@@ -1,13 +1,10 @@
-import { useEffect, useState } from "react"
-import { pluralBundle } from "../../src/v2/mocks/index.js"
-import { randomHumanId } from "../../src/storage/human-id/human-readable-id.js"
-import { createMessage, createMessageBundle } from "../../src/v2/helper.js"
+import { useState } from "react"
 import { MessageBundleList } from "./messageBundleListReact.js"
 import { type InlangProject2, MessageBundle, getFs, loadProject } from "../../dist/v2/index.js"
 import { SettingsView } from "./settingsView.js"
-import { BundleWithMessages } from "../../src/types/sdkTypes.js"
-import { createBundle } from "../../src/mock/mockhelper.js"
-import { InlangProject } from "../../src/types/index.js"
+
+import { createMockBundle } from "../../src/mock/mockhelper.js"
+import { InlangProject, NestedBundle, NestedBundle } from "../../src/types/index.js"
 
 export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
 	const [currentView, setCurrentView] = useState<"overview" | "messageList" | "settings">(
@@ -15,21 +12,21 @@ export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
 	)
 
 	const insertNMessageBundles = async (project: InlangProject, n: number) => {
-		const messagesToAdd = [] as BundleWithMessages[]
+		const messagesToAdd = [] as NestedBundle[]
 		for (let i = 0; i < n; i++) {
-			const newBundle = createBundle({
+			const newBundle = createMockBundle({
 				languageTags: ["de"],
 				nInputs: 3,
 				nSelectors: 2,
 				nExpressions: 3,
 			})
 
-			messagesToAdd.push(newBundle)
-		}
+			// messagesToAdd.push(newBundle)
 
-		console.time("inserting " + n + " messageBundles")
-		await project.bundle.insert(messagesToAdd)
-		console.timeEnd("inserting " + n + " messageBundles")
+			console.time("inserting " + n + " messageBundles")
+			await project.bundle.insert(newBundle).execute()
+			console.timeEnd("inserting " + n + " messageBundles")
+		}
 	}
 
 	return (
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
index b5807a6718..8f0d87f254 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
@@ -2,15 +2,15 @@ import { useCallback, useEffect, useRef, useState } from "react"
 
 import {
 	InlangProject,
-	BundleWithMessages,
 	LintReport,
 	LanguageTag,
 	ProjectSettings2,
+	NestedBundle,
 } from "../../src/types/index.js"
 import { VariableSizeList as List } from "react-window"
 import { MessageBundleViewMemoed } from "./MessageBundleView.js"
 import { MessageBundleListSummary } from "./messageBundleListSummary.js"
-import { InlangProject2 } from "../../../sdk/dist/v2/types/index.js"
+import { populateMessages } from "../../src/loadProjectOpfs.js"
 
 type MessageBundleListProps = {
 	project: InlangProject
@@ -18,7 +18,7 @@ type MessageBundleListProps = {
 
 export function MessageBundleList({ project }: MessageBundleListProps) {
 	const [bundles, setBundles] = useState([] as RxDocument<MessageBundle>[])
-	const [currentListBundles, setCrurrentListBundles] = useState([] as BundleWithMessages[])
+	const [currentListBundles, setCrurrentListBundles] = useState([] as NestedBundle[])
 
 	const [lintReports, setLintReports] = useState([] as LintReport[])
 	const [projectSettings, setProjectSettings] = useState<ProjectSettings2 | undefined>(undefined)
@@ -30,8 +30,7 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 
 	useEffect(() => {
 		// TODO SDK-v2 setup query that filters by active language, reported lints, bundle ids and searches text within the filtered variants
-		project.bundle
-			.select()
+		populateMessages(project.bundle.select)
 			.execute()
 			.then((freshBundles: any) => {
 				setCrurrentListBundles(freshBundles)
@@ -43,11 +42,12 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 
 		inlangProject = project
 
-		inlangProject.settings.subscribe({
-			next: (settings) => {
-				setProjectSettings(settings)
-			},
-		})
+		// inlangProject.settings.subscribe({
+		// 	next: (settings) => {
+		// 		setProjectSettings(settings)
+		// 	},
+		// })
+		setProjectSettings(inlangProject.settings.get())
 
 		return () => {
 			// unsubscribe inlangProject?.settings()
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
index 48b6021e16..28562797e3 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListSummary.tsx
@@ -5,13 +5,13 @@ import {
 	ProjectSettings2,
 	LintReport,
 	LanguageTag,
-	BundleWithMessages,
+	NestedBundle
 } from "../../src/types/index.js"
 
 type MessageBundleListSummaryProps = {
 	project: InlangProject
 	projectSettings: ProjectSettings2
-	bundles: BundleWithMessages[]
+	bundles: NestedBundle[]
 	reports: LintReport[]
 	activeLanguages: LanguageTag[]
 	onActiveLanguagesChange: (locales: LanguageTag[]) => void
@@ -49,7 +49,7 @@ export function MessageBundleListSummary({
 				}
 
 				for (const report of reports) {
-					if (bundleIds.has(report.messageBundleId)) {
+					if (bundleIds.has(report.target.bundleId)) {
 						mapped[report.ruleId]?.push(report)
 					}
 				}
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js b/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
index af7dfae72c..51b6436462 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
+++ b/inlang/source-code/sdk-v2/src/dev-modules/lint-rule.js
@@ -15,9 +15,11 @@ const lintRule = {
 			// no messages in any language -> delete
 			report({
 				body: `No languages are present`,
-				messageId: undefined,
-				variantId: undefined,
-				messageBundleId: messageBundle.id,
+				target: {
+					messageId: undefined,
+					variantId: undefined,
+					bundleId: messageBundle.id,
+				},
 				fixes: [],
 			})
 			return
@@ -28,9 +30,11 @@ const lintRule = {
 			report({
 				// locale: missingLanguageTag,
 				body: `Missing language tag '${missingLanguageTag}'.`,
-				messageId: undefined,
-				variantId: undefined,
-				messageBundleId: messageBundle.id,
+				target: {
+					messageId: undefined,
+					variantId: undefined,
+					bundleId: messageBundle.id,
+				},
 				fixes: [],
 			})
 		}
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
index 1161f4362c..2d82e56c70 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
@@ -35,9 +35,11 @@ const missingSelectorLintRule: MessageBundleLintRule = {
 			report({
 				// locale: message.locale,
 				body: `Missing selector(s): ${[...missing].join(", ")}`,
-				messageId: undefined,
-				variantId: undefined,
-				messageBundleId: messageBundle.id,
+				target: {
+					messageId: undefined,
+					variantId: undefined,
+					bundleId: messageBundle.id,
+				},
 				fixes: [],
 			})
 
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
index f0b5fe140a..72e5b77dfd 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
@@ -14,9 +14,11 @@ const missingCatchallLintRule: MessageBundleLintRule = {
 			if (!hasCatchall) {
 				report({
 					body: `The message ${message.id} is missing a catchall variant`,
-					messageBundleId: messageBundle.id,
-					messageId: message.id,
-					variantId: undefined,
+					target: {
+						bundleId: messageBundle.id,
+						messageId: message.id,
+						variantId: undefined,
+					},
 					// locale: message.locale,
 					fixes: [
 						{
@@ -29,9 +31,9 @@ const missingCatchallLintRule: MessageBundleLintRule = {
 		}
 	},
 	fix: ({ report, messageBundle }) => {
-		const message = messageBundle.messages.find((msg) => msg.id === report.messageId)
+		const message = messageBundle.messages.find((msg) => msg.id === report.target.messageId)
 		if (!message)
-			throw new Error(`message ${report.messageId} not found on bundle ${messageBundle.id}`)
+			throw new Error(`message ${report.target.messageId} not found on bundle ${messageBundle.id}`)
 
 		// TODO SDK-v2
 		// const catchallVariant = createVariant({
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
index d9c12abee9..c542d61cf3 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
@@ -35,9 +35,11 @@ const makeOpralUppercase: MessageBundleLintRule = {
 
 				report({
 					body: `The OPRAL brand name is not uppercase`,
-					messageBundleId: messageBundle.id,
-					messageId: message.id,
-					variantId: variant.id,
+					target: {
+						bundleId: messageBundle.id,
+						messageId: message.id,
+						variantId: variant.id,
+					},
 					// locale: message.locale,
 					fixes: [fix],
 				})
@@ -47,14 +49,16 @@ const makeOpralUppercase: MessageBundleLintRule = {
 	fix: async ({ report, fix, messageBundle }) => {
 		if (fix.title !== "Make OPRAL uppercase") return messageBundle
 
-		if (!report.variantId || !report.messageId)
+		if (!report.target.variantId || !report.target.messageId)
 			throw new Error("report must have variantId and messageId")
 
-		const msg = messageBundle.messages.find((msg) => msg.id === report.messageId)
-		if (!msg) throw new Error(`message ${report.messageId} not found on bundle ${messageBundle.id}`)
+		const msg = messageBundle.messages.find((msg) => msg.id === report.target.messageId)
+		if (!msg)
+			throw new Error(`message ${report.target.messageId} not found on bundle ${messageBundle.id}`)
 
-		const variant = msg.variants.find((variant) => variant.id === report.variantId)
-		if (!variant) throw new Error(`variant ${report.variantId} not found on message ${msg.id}`)
+		const variant = msg.variants.find((variant) => variant.id === report.target.variantId)
+		if (!variant)
+			throw new Error(`variant ${report.target.variantId} not found on message ${msg.id}`)
 
 		variant.pattern = variant.pattern.map((el) => {
 			if (el.type !== "text") return el
diff --git a/inlang/source-code/sdk-v2/src/env-variables/.gitignore b/inlang/source-code/sdk-v2/src/env-variables/.gitignore
new file mode 100644
index 0000000000..a2e78d7482
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/env-variables/.gitignore
@@ -0,0 +1 @@
+index.ts
\ No newline at end of file
diff --git a/inlang/source-code/sdk-v2/src/env-variables/.prettierignore b/inlang/source-code/sdk-v2/src/env-variables/.prettierignore
new file mode 100644
index 0000000000..945ce43a90
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/env-variables/.prettierignore
@@ -0,0 +1 @@
+index.js
\ No newline at end of file
diff --git a/inlang/source-code/sdk-v2/src/env-variables/createIndexFile.js b/inlang/source-code/sdk-v2/src/env-variables/createIndexFile.js
new file mode 100644
index 0000000000..eeb7391c25
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/env-variables/createIndexFile.js
@@ -0,0 +1,28 @@
+/* eslint-disable no-restricted-imports */
+/* eslint-disable no-undef */
+/**
+ * This script writes public environment variables
+ * to an importable env file.
+ *
+ * - The SDK must bundle this file with the rest of the SDK
+ * - This scripts avoids the need for a bundler
+ * - Must be ran before building the SDK
+ */
+
+import fs from "node:fs/promises"
+import url from "node:url"
+import path from "node:path"
+
+const dirname = path.dirname(url.fileURLToPath(import.meta.url))
+
+await fs.writeFile(
+	dirname + "/index.ts",
+	`
+export const ENV_VARIABLES = {
+  PUBLIC_POSTHOG_TOKEN: "${process.env.PUBLIC_POSTHOG_TOKEN}",
+}
+`
+)
+
+// eslint-disable-next-line no-console
+console.log("✅ Created env variable index file.")
diff --git a/inlang/source-code/sdk-v2/src/env-variables/index.d.ts b/inlang/source-code/sdk-v2/src/env-variables/index.d.ts
new file mode 100644
index 0000000000..39ca46834f
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/env-variables/index.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Avoiding TypeScript errors before the `createIndexFile` script
+ * is invoked by defining the type ahead of time.
+ */
+
+/**
+ * Env variables that are available at runtime.
+ *
+ * - assume that each env variable might be undefined (to ease development/contributions)
+ */
+export declare const ENV_VARIABLES: Partial<{
+	PUBLIC_POSTHOG_TOKEN: string
+}>
diff --git a/inlang/source-code/sdk-v2/src/helper.ts b/inlang/source-code/sdk-v2/src/helper.ts
new file mode 100644
index 0000000000..b3edb874f0
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/helper.ts
@@ -0,0 +1,70 @@
+import { randomHumanId } from "./human-id/human-readable-id.js"
+import { v4 as uuid } from "uuid"
+import type { LanguageTag, NestedBundle, NestedMessage, Text, Variant } from "./types/index.js"
+
+/**
+ * create v2 Bundle with a random human ID
+ * @example createBundle({
+ *   messages: [
+ * 		 createMessage({locale: "en", text: "Hello world!"})
+ * 		 createMessage({locale: "de", text: "Hallo Welt!"})
+ *   ]
+ * })
+ */
+export function createBundle(args: {
+	id?: string
+	messages: NestedMessage[]
+	alias?: NestedBundle["alias"]
+}): NestedBundle {
+	return {
+		id: args.id ?? randomHumanId(),
+		alias: args.alias ?? {},
+		messages: args.messages,
+	}
+}
+
+/**
+ * create v2 Messsage AST with a randomId, and text-only pattern
+ * @example createMessage({locale: "en", text: "Hello world"})
+ */
+export function createMessage(args: {
+	bundleId: string
+	locale: LanguageTag
+	text: string
+	match?: Array<string>
+}): NestedMessage {
+	const messageId = uuid()
+	return {
+		bundleId: args.bundleId,
+		id: messageId,
+		locale: args.locale,
+		declarations: [],
+		selectors: [],
+		variants: [createVariant({ messageId: messageId, text: args.text, match: args.match })],
+	}
+}
+
+/**
+ * create v2 Variant AST with text-only pattern
+ * @example createVariant({match: ["*"], text: "Hello world"})
+ */
+export function createVariant(args: {
+	messageId: string
+	id?: string
+	text?: string
+	match?: Array<string>
+}): Variant {
+	return {
+		messageId: args.messageId,
+		id: args.id ? args.id : uuid(),
+		match: args.match ? args.match : [],
+		pattern: [toTextElement(args.text ?? "")],
+	}
+}
+
+export function toTextElement(text: string): Text {
+	return {
+		type: "text",
+		value: text,
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/index.ts b/inlang/source-code/sdk-v2/src/index.ts
index 7c40cbd49b..9a34bd5fce 100644
--- a/inlang/source-code/sdk-v2/src/index.ts
+++ b/inlang/source-code/sdk-v2/src/index.ts
@@ -1,5 +1,9 @@
 export * from "./loadProjectOpfs.js"
 export * from "./newProjectOpfs.js"
+export * from "./types/index.js"
+export * from "./helper.js"
+export * from "./mock/index.js"
+
 // export * from "./mock/mockhelper";
 // export { newProject } from "./newProject";
 // export * from "./helper/index";
diff --git a/inlang/source-code/sdk-v2/src/lint/host.ts b/inlang/source-code/sdk-v2/src/lint/host.ts
index 3ce10a128b..4e598c2b8a 100644
--- a/inlang/source-code/sdk-v2/src/lint/host.ts
+++ b/inlang/source-code/sdk-v2/src/lint/host.ts
@@ -1,26 +1,26 @@
-import * as Comlink from "comlink"
-import type { createLinter as createLinterType } from "./worker.js"
-import type { NodeishFilesystemSubset } from "@inlang/plugin"
-import { WorkerPrototype as Worker, adapter } from "comlink-node"
-import type { ProjectSettings2 } from "../types/project-settings.js"
+// import * as Comlink from "comlink"
+// import type { createLinter as createLinterType } from "./worker.js"
+// import type { NodeishFilesystemSubset } from "@inlang/plugin"
+// import { WorkerPrototype as Worker, adapter } from "comlink-node"
+// import type { ProjectSettings2 } from "../types/project-settings.js"
 
-/**
- * Starts a web worker that can be used to lint messages.
- */
-export async function createLintWorker(
-	projectPath: string,
-	settings: ProjectSettings2,
-	fs: Pick<NodeishFilesystemSubset, "readFile" | "readdir" | "mkdir">
-) {
-	const worker = new Worker(new URL("./linter.js", import.meta.url), { type: "module" })
-	const createLinter = Comlink.wrap<typeof createLinterType>(adapter(worker))
+// /**
+//  * Starts a web worker that can be used to lint messages.
+//  */
+// export async function createLintWorker(
+// 	projectPath: string,
+// 	settings: ProjectSettings2,
+// 	fs: Pick<NodeishFilesystemSubset, "readFile" | "readdir" | "mkdir">
+// ) {
+// 	const worker = new Worker(new URL("./linter.js", import.meta.url), { type: "module" })
+// 	const createLinter = Comlink.wrap<typeof createLinterType>(adapter(worker))
 
-	const fsProxy = Comlink.proxy(fs)
-	const linter = await createLinter(projectPath, settings, fsProxy)
+// 	const fsProxy = Comlink.proxy(fs)
+// 	const linter = await createLinter(projectPath, settings, fsProxy)
 
-	return {
-		lint: (settings: ProjectSettings2) => linter.lint(settings),
-		fix: linter.fix,
-		terminate: () => worker.terminate(),
-	}
-}
+// 	return {
+// 		lint: (settings: ProjectSettings2) => linter.lint(settings),
+// 		fix: linter.fix,
+// 		terminate: () => worker.terminate(),
+// 	}
+// }
diff --git a/inlang/source-code/sdk-v2/src/lint/import.ts b/inlang/source-code/sdk-v2/src/lint/import.ts
index d33a8316f4..4606201713 100644
--- a/inlang/source-code/sdk-v2/src/lint/import.ts
+++ b/inlang/source-code/sdk-v2/src/lint/import.ts
@@ -1,8 +1,8 @@
 import dedent from "dedent"
 import type { NodeishFilesystemSubset } from "@inlang/plugin"
 import { tryCatch } from "@inlang/result"
-import { withReadOnlyCache } from "../../resolve-modules/cache.js"
-import { ModuleImportError } from "../../resolve-modules/errors.js"
+import { withReadOnlyCache } from "../resolve-modules/cache.js"
+import { ModuleImportError } from "../resolve-modules/errors.js"
 
 // TODO deduplicate this module
 
diff --git a/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
index 84ad04ba23..8cf2b726fe 100644
--- a/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
+++ b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
@@ -20,19 +20,21 @@ export function populateLevel(
 	return { ...report, level: "error" }
 }
 
-const keys = [
-	["ruleId", "ruleId"],
-	["bundleId", "messageBundleId"],
-	["messageId", "messageId"],
-	["variantId", "variantId"], // ["messageLocale"], // , "locale"],
-	// ,
-] as const satisfies [keyof LintConfig, keyof LintReport][]
+// TODO SDK-v2 loris - discuss how we want this to be implemented
+// const keys = [
+// 	["ruleId", "ruleId"],
+// 	["bundleId", "bundleId"],
+// 	["messageId", "messageId"],
+// 	["variantId", "variantId"], // ["messageLocale"], // , "locale"],
+// 	// ,
+// ] as const satisfies [keyof LintConfig, keyof LintReport][]
 
 function configMatches(report: Omit<LintReport, "level">, config: LintConfig): boolean {
-	for (const [configKey, reportKey] of keys) {
-		if (config[configKey] === undefined) continue
-		if (config[configKey] !== report[reportKey]) return false
-	}
+	// TODO SDK-v2 loris - discuss how we want this to be implemented
+	// for (const [configKey, reportKey] of keys) {
+	// 	if (config[configKey] === undefined) continue
+	// 	if (config[configKey] !== report[reportKey]) return false
+	// }
 
 	return true
 }
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index e7aede4d7c..b7fd917ccb 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -1,6 +1,21 @@
-import { Kysely, ParseJSONResultsPlugin, sql, type RawBuilder, type SelectQueryBuilder } from "kysely"
+import {
+	Kysely,
+	ParseJSONResultsPlugin,
+	sql,
+	type RawBuilder,
+	type SelectQueryBuilder,
+} from "kysely"
 import { SQLocalKysely } from "sqlocal/kysely"
-import type { Bundle, BundleNested, Database, LintReport, Message, NestedBundle, NestedMessage, NewBundle, NewMessage, NewVariant, Variant } from "./types/schema.js"
+import type {
+	Bundle,
+	Database,
+	Message,
+	NestedBundle,
+	NewBundle,
+	NewMessage,
+	NewVariant,
+	Variant,
+} from "./types/schema.js"
 import { jsonArrayFrom } from "kysely/helpers/sqlite"
 import { loadSettings } from "./settings.js"
 import { BehaviorSubject, combineLatest, from, switchMap, tap } from "rxjs"
@@ -14,8 +29,6 @@ import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
 import { resolveModules } from "./resolveModules2.js"
 import type { InstalledLintRule, ProjectSettings2 } from "./types/project-settings.js"
 import type { InlangProject } from "./types/project.js"
-import type { BundleWithMessages } from "./types/sdkTypes.js"
-import { observeNotification } from "rxjs/internal/Notification"
 
 // extend the SQLocalKysely class to expose a rawSql function
 // needed for non parametrized queries
@@ -37,7 +50,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 
 	const projectDir = await opfsRoot.getDirectoryHandle(args.inlangFolderPath)
 
-  // loading the settings from opfs
+	// loading the settings from opfs
 	const settingsFilePath = "settings.json"
 	const settingsFileHandle = await projectDir.getFileHandle(settingsFilePath)
 	const settingsFile = await settingsFileHandle.getFile()
@@ -49,7 +62,6 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 
 	// TODO SDK-v2 listen to changes on the settings file - how do multiple instance of a project get informed about changes?
 	const projectSettings$ = new BehaviorSubject(projectSettings)
-  
 
 	const _import = importSequence(
 		createDebugImport({
@@ -86,7 +98,8 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 							displayName: rule.displayName,
 							description: rule.description,
 							module:
-								(modules as any).meta.find((m) => m.id.includes(rule.id))?.module ??
+								(modules as any).meta.find((m: { id: string | any[] }) => m.id.includes(rule.id))
+									?.module ??
 								"Unknown module. You stumbled on a bug in inlang's source code. Please open an issue.",
 							// default to warning, see https://github.com/opral/monorepo/issues/1254
 							level: "warning", // TODO SDK2 settings.messageLintRuleLevels?.[rule.id] ?? "warning",
@@ -123,132 +136,132 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			plugins: [],
 		},
 		settings: {
-      get: () => projectSettings$.getValue(),
-      set: async (settings: ProjectSettings2) => { 
-        // TODO SDK-v2 implement
-      },
-      subscribe: projectSettings$.asObservable().subscribe,
-    },
-    bundle: {
-      select: db.selectFrom("bundle"),
-      insert: (bundle: Bundle) => {
-        return db.insertInto("bundle").values({
-          id: bundle.id,
-          alias: json(bundle.alias) as any // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        })
-      },
-      update: (bundle: Partial<Bundle> & { id: string }) => {
-        const bundleProperties = structuredClone(bundle as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        delete bundleProperties.id
-        if (bundle.alias) {
-          bundleProperties.alias = json(bundle.alias) as any
-        } 
-        return db.updateTable("bundle").set(bundleProperties).where('bundle.id', '=', bundle.id)
-      },
-      delete: (bundle: Bundle) => {
-        return db.deleteFrom("bundle").where('bundle.id', '=', bundle.id)
-      }
-    },
-    message: {
-      select: db.selectFrom("message"),
-      insert: (message: Message) => {
-        return db.insertInto("message").values({
-          id: message.id,
-          bundleId: message.bundleId,
-          locale: message.locale,
-          declarations: json(message.declarations) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-          selectors: json(message.selectors) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        })
-      },
-      update: (message: Partial<Message> & { id: string }) => {
-        
-        const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        delete messageProperties.id
-        if (message.declarations) {
-          messageProperties.declarations = json(message.declarations) as any
-        } 
-        if (message.selectors) {
-          // TODO SDK-v2 shall we structure clone here?
-          messageProperties.selectors = json(message.selectors) as any
-        } 
-
-        return db.updateTable("message").set(messageProperties).where('message.id', '=', message.id)
-      },
-      delete: (message: Message) => {
-        return db.deleteFrom("message").where('message.id', '=', message.id)
-      }
-    },
-    variant: {
-      select: db.selectFrom("variant"),
-      insert: (variant: Variant) => {
-        return db.insertInto("variant").values({
-          id: variant.id,
-          messageId: variant.messageId,
-          match: json(variant.match) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-          pattern: json(variant.pattern) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        })
-      },
-      update: (variant: Partial<Variant> & { id: string } ) => {
-        
-        const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-        delete variantProperties.id
-        if (variant.match) {
-          variantProperties.declarations = json(variant.match) as any
-        } 
-        if (variant.pattern) {
-          // TODO SDK-v2 shall we structure clone here?
-          variantProperties.selectors = json(variant.pattern) as any
-        } 
-
-        return db.updateTable("variant").set(variantProperties).where('variant.id', '=', variant.id)
-      },
-      delete: (variant: Variant) => {
-        return db.deleteFrom("variant").where('variant.id', '=', variant.id)
-      }
-    },
-		fix: async (report: LintReport, fix: Fix<LintReport>) => {
-			// TODO SDK-v2 implement fix
-			// const fixed = await linter.fix(report, fix)
-			// await database.collections.messageBundles.upsert(fixed)
+			get: () => projectSettings$.getValue(),
+			set: async (settings: ProjectSettings2) => {
+				// TODO SDK-v2 implement
+			},
+			subscribe: projectSettings$.asObservable().subscribe,
 		},
+		bundle: {
+			select: db.selectFrom("bundle"),
+			insert: (bundle: Bundle) => {
+				return db.insertInto("bundle").values({
+					id: bundle.id,
+					alias: json(bundle.alias) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				})
+			},
+			update: (bundle: Partial<Bundle> & { id: string }) => {
+				const bundleProperties = structuredClone(bundle as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				delete bundleProperties.id
+				if (bundle.alias) {
+					bundleProperties.alias = json(bundle.alias) as any
+				}
+				return db.updateTable("bundle").set(bundleProperties).where("bundle.id", "=", bundle.id)
+			},
+			delete: (bundle: Bundle) => {
+				return db.deleteFrom("bundle").where("bundle.id", "=", bundle.id)
+			},
+		},
+		message: {
+			select: db.selectFrom("message"),
+			insert: (message: Message) => {
+				return db.insertInto("message").values({
+					id: message.id,
+					bundleId: message.bundleId,
+					locale: message.locale,
+					declarations: json(message.declarations) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					selectors: json(message.selectors) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				})
+			},
+			update: (message: Partial<Message> & { id: string }) => {
+				const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				delete messageProperties.id
+				if (message.declarations) {
+					messageProperties.declarations = json(message.declarations) as any
+				}
+				if (message.selectors) {
+					// TODO SDK-v2 shall we structure clone here?
+					messageProperties.selectors = json(message.selectors) as any
+				}
+
+				return db.updateTable("message").set(messageProperties).where("message.id", "=", message.id)
+			},
+			delete: (message: Message) => {
+				return db.deleteFrom("message").where("message.id", "=", message.id)
+			},
+		},
+		variant: {
+			select: db.selectFrom("variant"),
+			insert: (variant: Variant) => {
+				return db.insertInto("variant").values({
+					id: variant.id,
+					messageId: variant.messageId,
+					match: json(variant.match) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					pattern: json(variant.pattern) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				})
+			},
+			update: (variant: Partial<Variant> & { id: string }) => {
+				const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				delete variantProperties.id
+				if (variant.match) {
+					variantProperties.declarations = json(variant.match) as any
+				}
+				if (variant.pattern) {
+					// TODO SDK-v2 shall we structure clone here?
+					variantProperties.selectors = json(variant.pattern) as any
+				}
+
+				return db.updateTable("variant").set(variantProperties).where("variant.id", "=", variant.id)
+			},
+			delete: (variant: Variant) => {
+				return db.deleteFrom("variant").where("variant.id", "=", variant.id)
+			},
+		},
+		// fix: async (report: LintReport, fix: Fix<LintReport>) => {
+		// 	// TODO SDK-v2 implement fix
+		// 	// const fixed = await linter.fix(report, fix)
+		// 	// await database.collections.messageBundles.upsert(fixed)
+		// },
 		close: () => {
 			// TODO SDK-v2 close database again
 		},
 	}
 }
 
-
-
 export const populateMessages = (bundleSelect: SelectQueryBuilder<Database, "bundle", object>) => {
 	return bundleSelect.select((eb) => [
-			// select all columns from bundle
-			"id",
-			"alias",
-			// select all columns from messages as "messages"
-			jsonArrayFrom(
-				populateVariants(eb.selectFrom("message"))
-					.whereRef("message.bundleId", "=", ("bundle.id" as any)) // TODO SDK-v2 check how get aliases into populateVariants
-			).as("messages"),
-		])
+		// select all columns from bundle
+		"id",
+		"alias",
+		// select all columns from messages as "messages"
+		jsonArrayFrom(
+			populateVariants(eb.selectFrom("message")).whereRef(
+				"message.bundleId",
+				"=",
+				"bundle.id" as any
+			) // TODO SDK-v2 check how get aliases into populateVariants
+		).as("messages"),
+	])
 }
 
-export const populateVariants = (messageSelect: SelectQueryBuilder<Database, "message", object>) => {
-	return messageSelect
-  .select((eb) => [
-    // select all columns from message
-    "id",
-    "bundleId",
-    "locale",
-    "declarations",
-    "selectors",
-    // select all columns from variants as "variants"
-    jsonArrayFrom(
-      eb
-        .selectFrom("variant")
-        .select(["id", "messageId", "match", "pattern"])
-        .whereRef("variant.messageId", "=", "message.id")
-    ).as("variants"),
-  ])
+export const populateVariants = (
+	messageSelect: SelectQueryBuilder<Database, "message", object>
+) => {
+	return messageSelect.select((eb) => [
+		// select all columns from message
+		"id",
+		"bundleId",
+		"locale",
+		"declarations",
+		"selectors",
+		// select all columns from variants as "variants"
+		jsonArrayFrom(
+			eb
+				.selectFrom("variant")
+				.select(["id", "messageId", "match", "pattern"])
+				.whereRef("variant.messageId", "=", "message.id")
+		).as("variants"),
+	])
 }
 
 function json<T>(value: T): RawBuilder<T> {
@@ -259,7 +272,7 @@ function json<T>(value: T): RawBuilder<T> {
 }
 
 const insertBundles = (db: Kysely<Database>) => {
-	return async (bundleToInsert: BundleWithMessages[]) => {
+	return async (bundleToInsert: NestedBundle[]) => {
 		let bundles: NewBundle[] = []
 		let messages: NewMessage[] = []
 		let variants: NewVariant[] = []
@@ -301,7 +314,6 @@ const insertBundles = (db: Kysely<Database>) => {
 
 				// manual batching to avoid too many db operations
 				if (bundles.length > 300) {
-					console.log("Bundles created: " + i)
 					const now = new Date().getTime()
 					console.time("Creating " + bundles.length + " Bundles/Messages/Variants " + now)
 
diff --git a/inlang/source-code/sdk-v2/src/mock/index.ts b/inlang/source-code/sdk-v2/src/mock/index.ts
new file mode 100644
index 0000000000..147a3b602b
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/index.ts
@@ -0,0 +1,3 @@
+export * from "./lintRports/mockCreate.js"
+export * from "./mockhelper.js"
+export * from "./plural/bundle.js"
diff --git a/inlang/source-code/sdk-v2/src/mock/lintRports/mockCreate.ts b/inlang/source-code/sdk-v2/src/mock/lintRports/mockCreate.ts
new file mode 100644
index 0000000000..49bc8780b7
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/lintRports/mockCreate.ts
@@ -0,0 +1,81 @@
+import type { LintReport } from "../../types/lint.js"
+
+export const createMockBundleLintReport = (props: {
+	ruleId?: LintReport["ruleId"]
+	messageBundleId?: string
+	// locale?: LintReport["locale"]
+	level?: LintReport["level"]
+	body?: string
+}): LintReport => {
+	return {
+		ruleId: props.ruleId || "messageBundleLintRule.namespace.exampleRule",
+		target: {
+			bundleId: props.messageBundleId || "mock_bundle_human_id",
+			messageId: undefined,
+			variantId: undefined,
+		},
+		fixes: [],
+		// locale: props.locale || "en",
+		level: props.level || "error",
+		body: props.body || "mock lint report body",
+	}
+}
+
+export const createMockMessageLintReport = (props: {
+	ruleId?: LintReport["ruleId"]
+	messageBundleId?: string
+	messageId?: string
+	// locale?: LintReport["locale"]
+	level?: LintReport["level"]
+	body?: string
+}): LintReport => {
+	return {
+		ruleId: props.ruleId || "messageBundleLintRule.namespace.exampleRule",
+		target: {
+			bundleId: props.messageBundleId || "mock_bundle_human_id",
+			messageId: props.messageId || "mock_message_id",
+			variantId: undefined,
+		},
+		fixes: [
+			{
+				key: "nope",
+				title: "Ignore",
+			},
+		],
+		// locale: props.locale || "en",
+		level: props.level || "error",
+		body: props.body || "mock lint report body",
+	}
+}
+
+export const createMockVariantLintReport = (props: {
+	ruleId?: LintReport["ruleId"]
+	messageBundleId?: string
+	messageId?: string
+	variantId?: string
+	// locale?: LintReport["locale"]
+	level?: LintReport["level"]
+	body?: string
+}): LintReport => {
+	return {
+		ruleId: props.ruleId || "messageBundleLintRule.namespace.exampleRule",
+		target: {
+			bundleId: props.messageBundleId || "mock_bundle_human_id",
+			messageId: props.messageId || "mock_message_id",
+			variantId: props.variantId || "mock_variant_id",
+		},
+		fixes: [
+			{
+				key: "nope",
+				title: "Mock fix variant",
+			},
+			{
+				key: "nope",
+				title: "Ignore",
+			},
+		],
+		// locale: props.locale || "en",
+		level: props.level || "error",
+		body: props.body || "mock lint report body",
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/mock/mockhelper.ts b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
index e4159d30fd..82857cf939 100644
--- a/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
+++ b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
@@ -1,9 +1,15 @@
-import type { Declaration, Expression, LintReport, Pattern } from "../types/schema.js"
-import type { BundleWithMessages, MessageWithVariants } from "../types/sdkTypes.js"
-
-import { inputNames, inputsWithSelectors, simpleInputs, translations } from "./mockdata"
+import type {
+	Declaration,
+	Expression,
+	NestedBundle,
+	NestedMessage,
+	Pattern,
+} from "../types/schema.js"
+
+import { inputNames, inputsWithSelectors, simpleInputs, translations } from "./mockdata.js"
 import { v4 } from "uuid"
 import { randomHumanId } from "../human-id/human-readable-id.js"
+import type { LintReport } from "../types/lint.js"
 
 export function generateUUID() {
 	return v4()
@@ -41,7 +47,7 @@ function generateCombinations(variants: string[][]): string[][] {
  * @param nSelectors number of selectors to add like plural forms or numbers
  * @param nExpressions number of expressens to add to the variant patterns (like name placeholders)
  */
-export function createBundle(args: {
+export function createMockBundle(args: {
 	languageTags: string[]
 	nInputs: number
 	nSelectors: number
@@ -64,7 +70,7 @@ export function createBundle(args: {
 			inputs.push(inputsWithSelectors.gender("gender").inputDeclaration)
 			matchers.push(inputsWithSelectors.gender("gender").matcher)
 		} else {
-			const inputName: string = inputNames[i]
+			const inputName: string = inputNames[i]!
 			selectors.push(inputsWithSelectors.number(inputName).selector)
 			inputs.push(inputsWithSelectors.number(inputName).inputDeclaration)
 			matchers.push(inputsWithSelectors.number(inputName).matcher)
@@ -73,7 +79,7 @@ export function createBundle(args: {
 
 	// fill up the remaining inputs with simple inputs (no selector function and matchers)
 	for (let i = inputs.length; i < args.nInputs; i++) {
-		const inputName: string = inputNames[i] // TODO generate a selector name
+		const inputName: string = inputNames[i]! // TODO generate a selector name
 		if (i === 0) {
 			inputs.push(simpleInputs.string(inputName).inputDeclaration)
 		} else {
@@ -86,14 +92,13 @@ export function createBundle(args: {
 		args.languageTags,
 		inputs,
 		selectors,
-		generateCombinations(matchers),
-		args.nExpressions
+		generateCombinations(matchers)
 	)
 	return {
 		id: bundleId,
 		alias: bundleAlias,
 		messages: messages,
-	} as BundleWithMessages
+	} as NestedBundle
 }
 
 function createMessages(
@@ -101,10 +106,9 @@ function createMessages(
 	languageTags: string[],
 	inputs: Declaration[],
 	selectors: Expression[],
-	variants: string[][],
-	nExpressions: number
+	variants: string[][]
 ) {
-	const messagesByLanguage: Record<string, MessageWithVariants> = {}
+	const messagesByLanguage: Record<string, NestedMessage> = {}
 
 	for (const lanugageTag of languageTags) {
 		const messageId = generateUUID()
@@ -121,11 +125,11 @@ function createMessages(
 	for (const variant of variants) {
 		const patternsByLanguage = createPattern(inputs, languageTags)
 		for (const lanugageTag of languageTags) {
-			messagesByLanguage[lanugageTag].variants.push({
+			messagesByLanguage[lanugageTag]!.variants.push({
 				id: generateUUID(),
 				match: variant,
-				messageId: messagesByLanguage[lanugageTag].id,
-				pattern: patternsByLanguage[lanugageTag],
+				messageId: messagesByLanguage[lanugageTag]!.id,
+				pattern: patternsByLanguage[lanugageTag]!,
 			})
 		}
 	}
@@ -141,19 +145,19 @@ function createPattern(inputs: Declaration[], languageTags: string[]) {
 		patterns[lanugageTag] = []
 	}
 
-	const textIndex = Math.floor(Math.random() * translations["en-US"].length)
+	const textIndex = Math.floor(Math.random() * translations["en-US"]!.length)
 	for (const lanugageTag of languageTags) {
-		patterns[lanugageTag].push({ type: "text", value: translations[lanugageTag][textIndex] })
+		patterns[lanugageTag]!.push({ type: "text", value: translations[lanugageTag]![textIndex]! })
 	}
 
 	for (const input of inputs) {
-		const textIndex = Math.floor(Math.random() * translations["en-US"].length)
+		const textIndex = Math.floor(Math.random() * translations["en-US"]!.length)
 		for (const lanugageTag of languageTags) {
-			patterns[lanugageTag].push({ type: "text", value: translations[lanugageTag][textIndex] })
+			patterns[lanugageTag]!.push({ type: "text", value: translations[lanugageTag]![textIndex]! })
 		}
 
 		for (const lanugageTag of languageTags) {
-			patterns[lanugageTag].push({
+			patterns[lanugageTag]!.push({
 				type: "expression",
 				arg: { type: "variable", name: input.name },
 			})
@@ -163,12 +167,12 @@ function createPattern(inputs: Declaration[], languageTags: string[]) {
 	return patterns
 }
 
-export function mockReports(messageBundle: ReturnType<typeof createBundle>) {
+export function mockReports(messageBundle: ReturnType<typeof createMockBundle>) {
 	const lintReports: LintReport[] = []
 	lintReports.push({
-		ruleId: "uniqueAlias",
+		ruleId: "messageBundleLintRule.test.uniqueAlias",
 		target: {
-			messageBundleId: messageBundle.id,
+			bundleId: messageBundle.id,
 			messageId: undefined,
 			variantId: undefined,
 		},
@@ -184,9 +188,9 @@ export function mockReports(messageBundle: ReturnType<typeof createBundle>) {
 
 	for (const message of messageBundle.messages) {
 		lintReports.push({
-			ruleId: "outdatedTranslation",
+			ruleId: "messageBundleLintRule.test.outdatedTranslation",
 			target: {
-				messageBundleId: messageBundle.id,
+				bundleId: messageBundle.id,
 				messageId: message.id,
 				variantId: undefined,
 			},
@@ -202,9 +206,9 @@ export function mockReports(messageBundle: ReturnType<typeof createBundle>) {
 
 		for (const variant of message.variants) {
 			lintReports.push({
-				ruleId: "opralLowerCase",
+				ruleId: "messageBundleLintRule.test.opralLowerCase",
 				target: {
-					messageBundleId: messageBundle.id,
+					bundleId: messageBundle.id,
 					messageId: message.id,
 					variantId: variant.id,
 				},
diff --git a/inlang/source-code/sdk-v2/src/mock/plural/bundle.test.ts b/inlang/source-code/sdk-v2/src/mock/plural/bundle.test.ts
new file mode 100644
index 0000000000..6ae876099a
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/plural/bundle.test.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { describe, it, expect } from "vitest"
+import { pluralBundle } from "./bundle.js"
+// import { MessageBundle } from "../../types/index.js"
+// import { Value } from "@sinclair/typebox/value"
+
+describe("mock plural messageBundle", () => {
+	it("is valid", () => {
+		// const messageBundle: unknown = pluralBundle
+		// TODO SDK-v2 check if we want to typecheck message bundle? - we currently don't have a type box support
+		// expect(Value.Check(MessageBundle, messageBundle)).toBe(true)
+
+		expect(pluralBundle.messages.length).toBe(2)
+		expect(pluralBundle.messages[0]!.declarations.length).toBe(3)
+		expect(pluralBundle.messages[0]!.selectors.length).toBe(1)
+		expect(pluralBundle.messages[0]!.variants.length).toBe(3)
+	})
+})
diff --git a/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
new file mode 100644
index 0000000000..522ace4bde
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
@@ -0,0 +1,209 @@
+import type { NestedBundle } from "../../types/index.js"
+import {
+	createMockBundleLintReport,
+	createMockMessageLintReport,
+	createMockVariantLintReport,
+} from "../lintRports/mockCreate.js"
+
+export const pluralBundle: NestedBundle = {
+	id: "mock_bundle_human_id",
+	alias: {
+		default: "mock_bundle_alias",
+	},
+	messages: [
+		{
+			bundleId: "mock_bundle_human_id",
+			id: "mock_message_id_de",
+			locale: "de",
+			declarations: [
+				{
+					type: "input",
+					name: "numProducts",
+					value: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: "numProducts",
+						},
+					},
+				},
+				{
+					type: "input",
+					name: "count",
+					value: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: "count",
+						},
+					},
+				},
+				{
+					type: "input",
+					name: "projectCount",
+					value: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: "projectCount",
+						},
+					},
+				},
+			],
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: "numProducts",
+					},
+					annotation: {
+						type: "function",
+						name: "plural",
+						options: [],
+					},
+				},
+			],
+			variants: [
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_de_zero",
+					match: ["zero"],
+					pattern: [
+						{
+							type: "text",
+							value: "Keine Produkte",
+						},
+					],
+				},
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_de_one",
+					match: ["one"],
+					pattern: [
+						{
+							type: "text",
+							value: "Ein Produkt",
+						},
+					],
+				},
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_de_other",
+					match: ["other"],
+					pattern: [
+						{
+							type: "expression",
+							arg: {
+								type: "variable",
+								name: "numProducts",
+							},
+						},
+						{
+							type: "text",
+							value: " Produkte",
+						},
+					],
+				},
+			],
+		},
+		{
+			bundleId: "mock_bundle_human_id",
+			id: "mock_message_id_en",
+			locale: "en",
+			declarations: [
+				{
+					type: "input",
+					name: "numProducts",
+					value: {
+						type: "expression",
+						arg: {
+							type: "variable",
+							name: "numProducts",
+						},
+					},
+				},
+			],
+			selectors: [
+				{
+					type: "expression",
+					arg: {
+						type: "variable",
+						name: "numProducts",
+					},
+					annotation: {
+						type: "function",
+						name: "plural",
+						options: [],
+					},
+				},
+			],
+			variants: [
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_en_zero",
+					match: ["zero"],
+					pattern: [
+						{
+							type: "text",
+							value: "No Products",
+						},
+					],
+				},
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_en_one",
+					match: ["one"],
+					pattern: [
+						{
+							type: "text",
+							value: "A product",
+						},
+					],
+				},
+				{
+					messageId: "mock_message_id_de",
+					id: "mock_variant_id_en_other",
+					match: ["other"],
+					pattern: [
+						{
+							type: "expression",
+							arg: {
+								type: "variable",
+								name: "numProducts",
+							},
+						},
+						{
+							type: "text",
+							value: " products",
+						},
+					],
+				},
+			],
+		},
+	] /*, TODO SDK-v2 lint reports
+	lintReports: {
+		hash: "testHash",
+		reports: [
+			createMockBundleLintReport({
+				ruleId: "messageBundleLintRule.inlang.missingMessage",
+				messageBundleId: "mock_bundle_human_id",
+				body: "The bundle `mock_bundle_human_id` is missing message for the locale `de`",
+			}),
+			createMockMessageLintReport({
+				ruleId: "messageBundleLintRule.inlang.missingReference",
+				messageBundleId: "mock_bundle_human_id",
+				messageId: "mock_message_id_en",
+				body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+			}),
+			createMockVariantLintReport({
+				ruleId: "messageBundleLintRule.inlang.missingReference",
+				messageBundleId: "mock_bundle_human_id",
+				messageId: "mock_message_id_en",
+				body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+				variantId: "mock_variant_id_en_other",
+				level: "warning",
+			}),
+		],
+	},*/,
+}
diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
index 47ab9d6b02..6ceaa2c277 100644
--- a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
@@ -46,7 +46,6 @@ export async function newProjectOpfs(args: {
     selectors TEXT NOT NULL
   );
 
-  
   CREATE TABLE Variant (
     id TEXT PRIMARY KEY, 
     messageId TEXT NOT NULL,
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
index c4bf89d2ca..655788d7c1 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
@@ -1,6 +1,5 @@
 import type { ValueError } from "@sinclair/typebox/errors"
 export * from "./plugins/errors.js"
-export * from "./message-lint-rules/errors.js"
 
 export class ModuleError extends Error {
 	public readonly module: string
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/import.test.tstemp
similarity index 100%
rename from inlang/source-code/sdk-v2/src/resolve-modules/import.test.ts
rename to inlang/source-code/sdk-v2/src/resolve-modules/import.test.tstemp
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/index.ts b/inlang/source-code/sdk-v2/src/resolve-modules/index.tstemp
similarity index 54%
rename from inlang/source-code/sdk-v2/src/resolve-modules/index.ts
rename to inlang/source-code/sdk-v2/src/resolve-modules/index.tstemp
index dffd3278d1..41ea63b3b2 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/index.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/index.tstemp
@@ -1,2 +1 @@
-export { resolveModules } from "./resolveModules.js"
 export { type ImportFunction, createImport } from "./import.js"
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
deleted file mode 100644
index 0be277db74..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/errors.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { MessageLintRule } from "@inlang/message-lint-rule"
-import type { ValueError } from "@sinclair/typebox/errors"
-
-export class MessageLintRuleIsInvalidError extends Error {
-	constructor(options: { id: MessageLintRule["id"]; errors: ValueError[] }) {
-		super(`The message lint rule "${options.id}" is invalid:\n\n${options.errors.join("\n")}`)
-		this.name = "MessageLintRuleIsInvalidError"
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts b/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
deleted file mode 100644
index 0a3c691e4c..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/message-lint-rules/resolveMessageLintRules.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Value } from "@sinclair/typebox/value"
-import { MessageLintRule } from "@inlang/message-lint-rule"
-import { MessageLintRuleIsInvalidError } from "./errors.js"
-
-export const resolveMessageLintRules = (args: { messageLintRules: Array<MessageLintRule> }) => {
-	const result = {
-		data: [] as Array<MessageLintRule>,
-		errors: [] as MessageLintRuleIsInvalidError[],
-	}
-	for (const rule of args.messageLintRules) {
-		if (Value.Check(MessageLintRule, rule) === false) {
-			const errors = [...Value.Errors(MessageLintRule, rule)]
-			result.errors.push(
-				new MessageLintRuleIsInvalidError({
-					// @ts-ignore
-					id: rule.id,
-					errors,
-				})
-			)
-			continue
-		} else {
-			result.data.push(rule)
-		}
-	}
-
-	return result
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
deleted file mode 100644
index 558af97618..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.test.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { describe, expect, it } from "vitest"
-import { resolvePlugins } from "./resolvePlugins.js"
-import {
-	PluginLoadMessagesFunctionAlreadyDefinedError,
-	PluginSaveMessagesFunctionAlreadyDefinedError,
-	PluginHasInvalidIdError,
-	PluginReturnedInvalidCustomApiError,
-	PluginsDoNotProvideLoadOrSaveMessagesError,
-} from "./errors.js"
-import type { Plugin } from "@inlang/plugin"
-import type { ProjectSettings } from "@inlang/project-settings"
-
-it("should return an error if a plugin uses an invalid id", async () => {
-	const mockPlugin: Plugin = {
-		// @ts-expect-error - invalid id
-		id: "no-namespace",
-		description: { en: "My plugin description" },
-		displayName: { en: "My plugin" },
-		loadMessages: () => undefined as any,
-		saveMessages: () => undefined as any,
-	}
-
-	const resolved = await resolvePlugins({
-		plugins: [mockPlugin],
-		settings: {} as any as any,
-		nodeishFs: {} as any,
-	})
-
-	expect(resolved.errors[0]).toBeInstanceOf(PluginHasInvalidIdError)
-})
-
-it("should expose the project settings including the plugin settings", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["en", "de"],
-		modules: [],
-		"plugin.namespace.placeholder": {
-			myPluginSetting: "value",
-		},
-	}
-	const mockPlugin: Plugin = {
-		id: "plugin.namespace.placeholder",
-		description: { en: "My plugin description" },
-		displayName: { en: "My plugin" },
-		saveMessages: async ({ settings }) => {
-			expect(settings).toStrictEqual(settings)
-		},
-		addCustomApi: ({ settings }) => {
-			expect(settings).toStrictEqual(settings)
-			return {}
-		},
-		loadMessages: async ({ settings }) => {
-			expect(settings).toStrictEqual(settings)
-			return []
-		},
-	}
-	const resolved = await resolvePlugins({
-		plugins: [mockPlugin],
-		settings: settings,
-		nodeishFs: {} as any,
-	})
-	await resolved.data.loadMessages!({ settings, nodeishFs: {} as any })
-	await resolved.data.saveMessages!({ settings, messages: [], nodeishFs: {} as any })
-})
-
-describe("loadMessages", () => {
-	it("should load messages from a local source", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namespace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			loadMessages: async () => [
-				{ id: "test", alias: {}, expressions: [], selectors: [], variants: [] },
-			],
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(
-			await resolved.data.loadMessages!({
-				settings: {} as any,
-				nodeishFs: {} as any,
-			})
-		).toEqual([{ id: "test", alias: {}, expressions: [], selectors: [], variants: [] }])
-	})
-
-	it("should collect an error if function is defined twice in multiple plugins", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namepsace.loadMessagesFirst",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-
-			loadMessages: async () => undefined as any,
-		}
-		const mockPlugin2: Plugin = {
-			id: "plugin.namepsace.loadMessagesSecond",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-
-			loadMessages: async () => undefined as any,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin, mockPlugin2],
-			nodeishFs: {} as any,
-			settings: {} as any,
-		})
-
-		expect(resolved.errors[0]).toBeInstanceOf(PluginLoadMessagesFunctionAlreadyDefinedError)
-	})
-
-	it("should return an error if no plugin defines loadMessages", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namepsace.loadMessagesFirst",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-
-			saveMessages: async () => undefined as any,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			nodeishFs: {} as any,
-			settings: {} as any,
-		})
-
-		expect(resolved.errors).toHaveLength(1)
-		expect(resolved.errors[0]).toBeInstanceOf(PluginsDoNotProvideLoadOrSaveMessagesError)
-	})
-})
-
-describe("saveMessages", () => {
-	it("should save messages to a local source", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namespace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			loadMessages: async () => undefined as any,
-			saveMessages: async () => undefined as any,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			nodeishFs: {} as any,
-			settings: {} as any,
-		})
-
-		expect(resolved.errors).toHaveLength(0)
-	})
-
-	it("should collect an error if function is defined twice in multiple plugins", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namepsace.saveMessages",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			saveMessages: async () => undefined as any,
-		}
-		const mockPlugin2: Plugin = {
-			id: "plugin.namepsace.saveMessages2",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			saveMessages: async () => undefined as any,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin, mockPlugin2],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(resolved.errors[0]).toBeInstanceOf(PluginSaveMessagesFunctionAlreadyDefinedError)
-	})
-
-	it("should return an error if no plugin defines saveMessages", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namepsace.loadMessagesFirst",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-
-			loadMessages: async () => undefined as any,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			nodeishFs: {} as any,
-			settings: {} as any,
-		})
-		expect(resolved.errors).toHaveLength(1)
-		expect(resolved.errors[0]).toBeInstanceOf(PluginsDoNotProvideLoadOrSaveMessagesError)
-	})
-})
-
-describe("addCustomApi", () => {
-	it("it should resolve app specific api", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namespace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			addCustomApi: () => ({
-				"my-app": {
-					messageReferenceMatcher: () => undefined as any,
-				},
-			}),
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(resolved.data.customApi).toHaveProperty("my-app")
-	})
-
-	it("it should resolve multiple app specific apis", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namespace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			addCustomApi: () => ({
-				"my-app-1": {
-					functionOfMyApp1: () => undefined as any,
-				},
-				"my-app-2": {
-					functionOfMyApp2: () => undefined as any,
-				},
-			}),
-		}
-		const mockPlugin2: Plugin = {
-			id: "plugin.namespace.placeholder2",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			addCustomApi: () => ({
-				"my-app-3": {
-					functionOfMyApp3: () => undefined as any,
-				},
-			}),
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin, mockPlugin2],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(resolved.data.customApi).toHaveProperty("my-app-1")
-		expect(resolved.data.customApi).toHaveProperty("my-app-2")
-		expect(resolved.data.customApi).toHaveProperty("my-app-3")
-	})
-
-	it("it should throw an error if return value is not an object", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namespace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			// @ts-expect-error - invalid return type
-			addCustomApi: () => undefined,
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(resolved.errors[0]).toBeInstanceOf(PluginReturnedInvalidCustomApiError)
-	})
-
-	it("it should throw an error if the passed options are not defined inside customApi", async () => {
-		const mockPlugin: Plugin = {
-			id: "plugin.namepsace.placeholder",
-			description: { en: "My plugin description" },
-			displayName: { en: "My plugin" },
-			addCustomApi: () => ({
-				"app.inlang.placeholder": {
-					messageReferenceMatcher: () => {
-						return { hello: "world" }
-					},
-				},
-			}),
-		}
-
-		const resolved = await resolvePlugins({
-			plugins: [mockPlugin],
-			settings: {} as any,
-			nodeishFs: {} as any,
-		})
-
-		expect(resolved.data.customApi).toHaveProperty("app.inlang.placeholder")
-		expect(
-			(resolved.data.customApi?.["app.inlang.placeholder"] as any).messageReferenceMatcher()
-		).toEqual({
-			hello: "world",
-		})
-	})
-})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
deleted file mode 100644
index 3de9c55760..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/resolvePlugins.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import type { ResolvePluginsFunction } from "./types.js"
-import { Plugin } from "@inlang/plugin"
-import {
-	PluginReturnedInvalidCustomApiError,
-	PluginLoadMessagesFunctionAlreadyDefinedError,
-	PluginSaveMessagesFunctionAlreadyDefinedError,
-	PluginsDoNotProvideLoadOrSaveMessagesError,
-	PluginHasInvalidIdError,
-	PluginHasInvalidSchemaError,
-} from "./errors.js"
-import { deepmerge } from "deepmerge-ts"
-import { TypeCompiler } from "@sinclair/typebox/compiler"
-import { tryCatch } from "@inlang/result"
-
-import _debug from "debug"
-const debug = _debug("sdk:resolvePlugins")
-
-// @ts-ignore - type mismatch error
-const PluginCompiler = TypeCompiler.Compile(Plugin)
-
-export const resolvePlugins: ResolvePluginsFunction = async (args) => {
-	const result: Awaited<ReturnType<ResolvePluginsFunction>> = {
-		data: {
-			loadMessages: undefined as any,
-			saveMessages: undefined as any,
-			customApi: {},
-		},
-		errors: [],
-	}
-
-	const experimentalPersistence = !!args.settings.experimental?.persistence
-	if (experimentalPersistence) {
-		debug("Using experimental persistence")
-	}
-
-	for (const plugin of args.plugins) {
-		const errors = [...PluginCompiler.Errors(plugin)]
-
-		/**
-		 * -------------- RESOLVE PLUGIN --------------
-		 */
-
-		// -- INVALID ID in META --
-		const hasInvalidId = errors.some((error) => error.path === "/id")
-		if (hasInvalidId) {
-			result.errors.push(new PluginHasInvalidIdError({ id: plugin.id }))
-		}
-
-		// -- USES INVALID SCHEMA --
-		if (errors.length > 0) {
-			result.errors.push(
-				new PluginHasInvalidSchemaError({
-					id: plugin.id,
-					errors: errors,
-				})
-			)
-		}
-
-		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
-		if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
-			result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		}
-
-		if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
-			result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		}
-
-		// --- ADD APP SPECIFIC API ---
-		if (typeof plugin.addCustomApi === "function") {
-			// TODO: why do we call this function 2 times (here for validation and later for retrieving the actual value)?
-			const { data: customApi, error } = tryCatch(() =>
-				plugin.addCustomApi!({
-					settings: args.settings,
-				})
-			)
-			if (error) {
-				result.errors.push(new PluginReturnedInvalidCustomApiError({ id: plugin.id, cause: error }))
-			} else if (typeof customApi !== "object") {
-				result.errors.push(
-					new PluginReturnedInvalidCustomApiError({
-						id: plugin.id,
-						cause: new Error(`The return value must be an object. Received "${typeof customApi}".`),
-					})
-				)
-			}
-		}
-
-		// -- CONTINUE IF ERRORS --
-		if (result.errors.length > 0) {
-			continue
-		}
-
-		/**
-		 * -------------- BEGIN ADDING TO RESULT --------------
-		 */
-
-		if (typeof plugin.loadMessages === "function") {
-			result.data.loadMessages = plugin.loadMessages
-		}
-
-		if (typeof plugin.saveMessages === "function") {
-			result.data.saveMessages = plugin.saveMessages
-		}
-
-		if (typeof plugin.addCustomApi === "function") {
-			const { data: customApi } = tryCatch(() =>
-				plugin.addCustomApi!({
-					settings: args.settings,
-				})
-			)
-			if (customApi) {
-				result.data.customApi = deepmerge(result.data.customApi, customApi)
-			}
-		}
-	}
-
-	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
-
-	if (
-		!experimentalPersistence &&
-		(typeof result.data.loadMessages !== "function" ||
-			typeof result.data.saveMessages !== "function")
-	) {
-		result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
-	}
-
-	return result
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
index 066426cc1a..be5b6bd1cb 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
@@ -1,8 +1,8 @@
-import { ProjectSettings } from "@inlang/project-settings"
 import { Value } from "@sinclair/typebox/value"
 import { describe, test, expect } from "vitest"
 import { expectType } from "tsd"
 import { Plugin } from "@inlang/plugin"
+import { ProjectSettings2 } from "../../types/project-settings.js"
 
 describe("Plugin", () => {
 	test("meta.id should enforce plugin.namespace.* patterns", () => {
@@ -36,16 +36,17 @@ describe("Plugin", () => {
 	})
 
 	test("meta.id should be a valid inlang.config.setting key", () => {
-		const settings: ProjectSettings = {
-			sourceLanguageTag: "en",
-			languageTags: ["en", "de"],
+		const settings: ProjectSettings2 = {
+			baseLocale: "en",
+			locales: ["en", "de"],
 			modules: [],
+			lintConfig: [],
 		}
 		const cases = ["plugin.namespace.helloWorld", "plugin.namespace.i18n"]
 
 		for (const _case of cases) {
 			const mergedSettings = { ...settings, [_case]: {} }
-			expect(Value.Check(ProjectSettings, mergedSettings)).toBe(true)
+			expect(Value.Check(ProjectSettings2, mergedSettings)).toBe(true)
 			// @ts-ignore - type mismatch error. fix after refactor
 			expect(Value.Check(Plugin["properties"]["id"], _case)).toBe(true)
 		}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
index a13820e105..b9f442cc3e 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
@@ -7,9 +7,9 @@ import type {
 	PluginHasInvalidSchemaError,
 	PluginsDoNotProvideLoadOrSaveMessagesError,
 } from "./errors.js"
-import type { Message } from "@inlang/message"
+
 import type { CustomApiInlangIdeExtension, Plugin } from "@inlang/plugin"
-import type { ProjectSettings } from "@inlang/project-settings"
+import type { ProjectSettings2 } from "../../types/project-settings.js"
 
 /**
  * The filesystem is a subset of project lisa's nodeish filesystem.
@@ -26,7 +26,7 @@ export type NodeishFilesystemSubset = Pick<
  */
 export type ResolvePluginsFunction = (args: {
 	plugins: Array<Plugin>
-	settings: ProjectSettings
+	settings: ProjectSettings2
 	nodeishFs: NodeishFilesystemSubset
 }) => Promise<{
 	data: ResolvedPluginApi
@@ -44,15 +44,16 @@ export type ResolvePluginsFunction = (args: {
  * The API after resolving the plugins.
  */
 export type ResolvedPluginApi = {
-	loadMessages: (args: {
-		settings: ProjectSettings
-		nodeishFs: NodeishFilesystemSubset
-	}) => Promise<Message[]> | Message[]
-	saveMessages: (args: {
-		settings: ProjectSettings
-		messages: Message[]
-		nodeishFs: NodeishFilesystemSubset
-	}) => Promise<void> | void
+	// TODO SDK-v2 needed implement importer exporter?
+	// loadMessages: (args: {
+	// 	settings: ProjectSettings2
+	// 	nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<Message[]> | Message[]
+	// saveMessages: (args: {
+	// 	settings: ProjectSettings
+	// 	messages: Message[]
+	// 	nodeishFs: NodeishFilesystemSubset
+	// }) => Promise<void> | void
 	/**
 	 * App specific APIs.
 	 *
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
deleted file mode 100644
index 0808d3e4f3..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.test.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import type { MessageLintRule } from "@inlang/message-lint-rule"
-import type { Plugin } from "@inlang/plugin"
-import { expect, it } from "vitest"
-import {
-	ModuleError,
-	ModuleExportIsInvalidError,
-	ModuleHasNoExportsError,
-	ModuleImportError,
-	ModuleSettingsAreInvalidError,
-} from "./errors.js"
-import { resolveModules } from "./resolveModules.js"
-import type { ProjectSettings } from "@inlang/project-settings"
-import type { InlangModule } from "@inlang/module"
-import { Type } from "@sinclair/typebox"
-
-it("should return an error if a plugin cannot be imported", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		nodeishFs: {} as any,
-		_import: () => {
-			throw new ModuleImportError({
-				module: settings.modules[0]!,
-				cause: new Error("Could not import"),
-			})
-		},
-	})
-
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
-})
-
-it("should resolve plugins and message lint rules successfully", async () => {
-	// Define mock data
-	const mockPlugin: Plugin = {
-		id: "plugin.namespace.mock",
-		description: { en: "Mock plugin description" },
-		displayName: { en: "Mock Plugin" },
-
-		loadMessages: () => undefined as any,
-		saveMessages: () => undefined as any,
-		addCustomApi: () => ({
-			"app.inlang.ideExtension": {
-				messageReferenceMatcher: () => undefined as any,
-			},
-		}),
-	}
-
-	const mockMessageLintRule: MessageLintRule = {
-		id: "messageLintRule.namespace.mock",
-		description: { en: "Mock lint rule description" },
-		displayName: { en: "Mock Lint Rule" },
-
-		run: () => undefined,
-	}
-
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["lint-rule.js", "plugin.js"],
-	}
-
-	const _import = async (name: string) => {
-		if (name === "lint-rule.js") {
-			return {
-				default: mockMessageLintRule,
-			}
-		} else {
-			return {
-				default: mockPlugin,
-			}
-		}
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors).toHaveLength(0)
-	// Check for the meta data of the plugin
-	expect(resolved.plugins.some((module) => module.id === mockPlugin.id)).toBeDefined()
-	// Check for the app specific api
-	expect(resolved.resolvedPluginApi["customApi"]?.["app.inlang.ideExtension"]).toBeDefined()
-	// Check for the lint rule
-	expect(resolved.messageLintRules[0]?.id).toBe(mockMessageLintRule.id)
-})
-
-it("should return an error if a module cannot be imported", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => {
-		throw new ModuleImportError({
-			module: settings.modules[0]!,
-			cause: new Error(),
-		})
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
-})
-
-it("should return an error if a module does not export anything", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => ({})
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleHasNoExportsError)
-})
-
-it("should return an error if a module exports an invalid plugin or lint rule", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-	const _import = async () =>
-		({
-			// @ts-expect-error - invalid meta of a plugin
-			default: {
-				id: "plugin.namespace.mock",
-				description: { en: "Mock plugin description" },
-			},
-		} satisfies InlangModule)
-
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleExportIsInvalidError)
-})
-
-it("should handle other unhandled errors during plugin resolution", async () => {
-	const errorMessage = "Unhandled error during plugin resolution"
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => {
-		throw new Error(errorMessage)
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleError)
-})
-it("should return an error if a moduleSettings are invalid", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["plugin.js"],
-		"plugin.namespace.mock": {
-			ignore: ["invalid"],
-		},
-	}
-
-	const _import = async () => ({
-		default: {
-			id: "plugin.namespace.mock",
-			description: { en: "Mock plugin description" },
-			displayName: { en: "Mock Plugin" },
-			settingsSchema: Type.Object({
-				ignore: Type.String(),
-			}),
-		},
-	})
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleSettingsAreInvalidError)
-})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts b/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
deleted file mode 100644
index 537f9b8967..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/resolveModules.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import type { ResolveModuleFunction } from "./types.js"
-import { InlangModule } from "@inlang/module"
-import {
-	ModuleError,
-	ModuleImportError,
-	ModuleHasNoExportsError,
-	ModuleExportIsInvalidError,
-	ModuleSettingsAreInvalidError,
-} from "./errors.js"
-import { tryCatch } from "@inlang/result"
-import { resolveMessageLintRules } from "./message-lint-rules/resolveMessageLintRules.js"
-import { createImport } from "./import.js"
-import { resolvePlugins } from "./plugins/resolvePlugins.js"
-import { TypeCompiler } from "@sinclair/typebox/compiler"
-import { validatedModuleSettings } from "./validatedModuleSettings.js"
-import type { Plugin } from "@inlang/plugin"
-import type { MessageBundleLintRule } from "../types/lint.js"
-
-const ModuleCompiler = TypeCompiler.Compile(InlangModule)
-
-export const resolveModules: ResolveModuleFunction = async (args) => {
-	const _import = args._import ?? createImport(args.projectPath, args.nodeishFs)
-
-	const allPlugins: Array<Plugin> = []
-	const allMessageLintRules: Array<MessageLintRule> = []
-	const meta: Awaited<ReturnType<ResolveModuleFunction>>["meta"] = []
-	const moduleErrors: Array<ModuleError> = []
-
-	async function resolveModule(module: string) {
-		const importedModule = await tryCatch<InlangModule>(() => _import(module))
-
-		// -- FAILED TO IMPORT --
-		if (importedModule.error) {
-			moduleErrors.push(
-				new ModuleImportError({
-					module: module,
-					cause: importedModule.error as Error,
-				})
-			)
-			return
-		}
-
-		// -- MODULE DOES NOT EXPORT ANYTHING --
-		if (importedModule.data?.default === undefined) {
-			moduleErrors.push(
-				new ModuleHasNoExportsError({
-					module: module,
-				})
-			)
-			return
-		}
-
-		// -- CHECK IF MODULE IS SYNTACTIALLY VALID
-		const isValidModule = ModuleCompiler.Check(importedModule.data)
-		if (isValidModule === false) {
-			const errors = [...ModuleCompiler.Errors(importedModule.data)]
-			moduleErrors.push(
-				new ModuleExportIsInvalidError({
-					module: module,
-					errors,
-				})
-			)
-
-			return
-		}
-
-		// -- VALIDATE MODULE SETTINGS
-
-		const result = validatedModuleSettings({
-			settingsSchema: importedModule.data.default.settingsSchema,
-			moduleSettings: args.settings[importedModule.data.default.id],
-		})
-		if (result !== "isValid") {
-			moduleErrors.push(new ModuleSettingsAreInvalidError({ module: module, errors: result }))
-			return
-		}
-
-		meta.push({
-			module: module,
-			id: importedModule.data.default.id,
-		})
-
-		if (importedModule.data.default.id.startsWith("plugin.")) {
-			allPlugins.push(importedModule.data.default as Plugin)
-		} else if (importedModule.data.default.id.startsWith("messageLintRule.")) {
-			allMessageLintRules.push(importedModule.data.default as MessageLintRule)
-		} else {
-			moduleErrors.push(
-				new ModuleError(
-					`Unimplemented module type ${importedModule.data.default.id}.The module has not been installed.`,
-					{ module: module }
-				)
-			)
-		}
-	}
-
-	await Promise.all(args.settings.modules.map(resolveModule))
-	const resolvedPlugins = await resolvePlugins({
-		plugins: allPlugins,
-		settings: args.settings,
-		nodeishFs: args.nodeishFs,
-	})
-
-	const resolvedLintRules = resolveMessageLintRules({ messageLintRules: allMessageLintRules })
-
-	return {
-		meta,
-		messageLintRules: allMessageLintRules,
-		plugins: allPlugins,
-		resolvedPluginApi: resolvedPlugins.data,
-		errors: [...moduleErrors, ...resolvedLintRules.errors, ...resolvedPlugins.errors],
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/types.ts b/inlang/source-code/sdk-v2/src/resolve-modules/types.ts
deleted file mode 100644
index 7e1d75c01b..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/types.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { MessageLintRule } from "@inlang/message-lint-rule"
-import type { Plugin } from "@inlang/plugin"
-import type {
-	NodeishFilesystemSubset,
-	ResolvePluginsFunction,
-	ResolvedPluginApi,
-} from "./plugins/types.js"
-import type { ModuleHasNoExportsError, ModuleImportError } from "./errors.js"
-import type { ImportFunction } from "./import.js"
-import type { resolveMessageLintRules } from "./message-lint-rules/resolveMessageLintRules.js"
-import type { ProjectSettings } from "@inlang/project-settings"
-
-/**
- * Function that resolves modules from the config.
- *
- * Pass a custom `_import` function to override the default import function.
- */
-export type ResolveModuleFunction = (args: {
-	projectPath: string
-	settings: ProjectSettings
-	nodeishFs: NodeishFilesystemSubset
-	_import?: ImportFunction
-}) => Promise<{
-	/**
-	 * Metadata about the resolved module.
-	 *
-	 * @example
-	 * [{
-	 * 	  id: "plugin.inlang.json",
-	 * 	  module: "https://myplugin.com/index.js"
-	 * }]
-	 */
-	meta: Array<{
-		/**
-		 * The module link.
-		 *
-		 * @example "https://myplugin.com/index.js"
-		 */
-		module: string
-		/**
-		 * The resolved item id of the module.
-		 */
-		id: Plugin["id"] | MessageLintRule["id"]
-	}>
-	/**
-	 * The resolved plugins.
-	 */
-	plugins: Array<Plugin>
-	/**
-	 * The resolved message lint rules.
-	 */
-	messageLintRules: Array<MessageLintRule>
-	/**
-	 * The resolved api provided by plugins.
-	 */
-	resolvedPluginApi: ResolvedPluginApi
-	/**
-	 * Errors during the resolution process.
-	 *
-	 * This includes errors from:
-	 * - importing module
-	 * - resolving plugins
-	 * - resolving lint rules
-	 * - resolving the runtime plugin api
-	 */
-	errors: Array<
-		| ModuleHasNoExportsError
-		| ModuleImportError
-		| Awaited<ReturnType<ResolvePluginsFunction>>["errors"][number]
-		| Awaited<ReturnType<typeof resolveMessageLintRules>>["errors"][number]
-	>
-}>
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts b/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
deleted file mode 100644
index dd3db1eaed..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/validateModuleSettings.test.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { expect, test } from "vitest"
-import { Plugin, MessageLintRule } from "../index.js"
-// import { createNodeishMemoryFs } from "@lix-js/fs"
-import { Type } from "@sinclair/typebox"
-import { validatedModuleSettings } from "./validatedModuleSettings.js"
-
-const mockPluginSchema: Plugin["settingsSchema"] = Type.Object({
-	pathPattern: Type.Union([
-		Type.String({
-			pattern: "^(\\./|\\../|/)[^*]*\\{languageTag\\}[^*]*\\.json",
-			description: "The pathPattern must contain `{languageTag}` and end with `.json`.",
-		}),
-		Type.Record(
-			Type.String({
-				pattern: "^[^.]+$",
-				description: "Dots are not allowd ",
-				examples: ["website", "app", "homepage"],
-			}),
-			Type.String({
-				pattern: "^(\\./|\\../|/)[^*]*\\{languageTag\\}[^*]*\\.json",
-				description: "The pathPattern must contain `{languageTag}` and end with `.json`.",
-			})
-		),
-	]),
-	variableReferencePattern: Type.Array(Type.String()),
-})
-
-const mockMessageLintRuleSchema: MessageLintRule["settingsSchema"] = Type.Object({
-	ignore: Type.Array(
-		Type.String({
-			pattern: '([^"]*)',
-			description: "All items in the array need quotaion marks at the end and beginning",
-		})
-	),
-})
-
-test("if PluginSchema does match with the moduleSettings", async () => {
-	const isValid = await validatedModuleSettings({
-		settingsSchema: mockPluginSchema,
-		moduleSettings: {
-			pathPattern: "./examples/example01/{languageTag}.json",
-			variableReferencePattern: ["{", "}"],
-		},
-	})
-
-	expect(isValid).toBe("isValid")
-})
-
-test("if namespace settings are valide", async () => {
-	const isValid = validatedModuleSettings({
-		settingsSchema: mockPluginSchema,
-		moduleSettings: {
-			pathPattern: {
-				website: "./{languageTag}examplerFolder/ExampleFile.json",
-				app: "../{languageTag}examplerFolder/ExampleFile.json",
-				footer: "./{languageTag}examplerFolder/ExampleFile.json",
-			},
-			variableReferencePattern: ["{", "}"],
-		},
-	})
-	expect(isValid).toBe("isValid")
-})
-
-test(" if MessageLintRuleSchema  match with the settings", async () => {
-	const isValid = await validatedModuleSettings({
-		settingsSchema: mockMessageLintRuleSchema,
-		moduleSettings: {
-			ignore: ["example", "warning"],
-		},
-	})
-
-	expect(isValid).toBe("isValid")
-})
-
-test("if  messageLintRule settings are not matching to the settingsSchema would pass ", async () => {
-	const isValid = validatedModuleSettings({
-		settingsSchema: mockMessageLintRuleSchema,
-		moduleSettings: {
-			ignore: "example",
-		},
-	})
-
-	expect(isValid).not.toBe("isValid")
-})
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts b/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
deleted file mode 100644
index 2ebb79fb02..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/validatedModuleSettings.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { InlangModule } from "@inlang/module"
-import type { TSchema } from "@sinclair/typebox"
-import { Value, type ValueError } from "@sinclair/typebox/value"
-
-export const validatedModuleSettings = (args: {
-	settingsSchema: InlangModule["default"]["settingsSchema"]
-	moduleSettings: unknown
-}): "isValid" | ValueError[] => {
-	if (args.settingsSchema && args.moduleSettings) {
-		const hasValidSettings = Value.Check(args.settingsSchema as TSchema, args.moduleSettings)
-
-		if (hasValidSettings === false) {
-			const errors = [...Value.Errors(args.settingsSchema as TSchema, args.moduleSettings)]
-
-			return errors
-		}
-	}
-	return "isValid"
-}
diff --git a/inlang/source-code/sdk-v2/src/resolveModules2.test.ts b/inlang/source-code/sdk-v2/src/resolveModules2.test.ts
deleted file mode 100644
index c5e9f96bcd..0000000000
--- a/inlang/source-code/sdk-v2/src/resolveModules2.test.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import type { MessageLintRule } from "@inlang/message-lint-rule"
-import type { Plugin } from "@inlang/plugin"
-import { expect, it } from "vitest"
-import {
-	ModuleError,
-	ModuleExportIsInvalidError,
-	ModuleHasNoExportsError,
-	ModuleImportError,
-	ModuleSettingsAreInvalidError,
-} from "../resolve-modules/errors.js"
-import { resolveModules } from "../resolve-modules/resolveModules.js"
-import type { ProjectSettings } from "@inlang/project-settings"
-import type { InlangModule } from "@inlang/module"
-import { Type } from "@sinclair/typebox"
-
-it("should return an error if a plugin cannot be imported", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		nodeishFs: {} as any,
-		_import: () => {
-			throw new ModuleImportError({
-				module: settings.modules[0]!,
-				cause: new Error("Could not import"),
-			})
-		},
-	})
-
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
-})
-
-it("should resolve plugins and message lint rules successfully", async () => {
-	// Define mock data
-	const mockPlugin: Plugin = {
-		id: "plugin.namespace.mock",
-		description: { en: "Mock plugin description" },
-		displayName: { en: "Mock Plugin" },
-
-		loadMessages: () => undefined as any,
-		saveMessages: () => undefined as any,
-		addCustomApi: () => ({
-			"app.inlang.ideExtension": {
-				messageReferenceMatcher: () => undefined as any,
-			},
-		}),
-	}
-
-	const mockMessageLintRule: MessageLintRule = {
-		id: "messageLintRule.namespace.mock",
-		description: { en: "Mock lint rule description" },
-		displayName: { en: "Mock Lint Rule" },
-
-		run: () => undefined,
-	}
-
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["lint-rule.js", "plugin.js"],
-	}
-
-	const _import = async (name: string) => {
-		if (name === "lint-rule.js") {
-			return {
-				default: mockMessageLintRule,
-			}
-		} else {
-			return {
-				default: mockPlugin,
-			}
-		}
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors).toHaveLength(0)
-	// Check for the meta data of the plugin
-	expect(resolved.plugins.some((module) => module.id === mockPlugin.id)).toBeDefined()
-	// Check for the app specific api
-	expect(resolved.resolvedPluginApi["customApi"]?.["app.inlang.ideExtension"]).toBeDefined()
-	// Check for the lint rule
-	expect(resolved.messageLintRules[0]?.id).toBe(mockMessageLintRule.id)
-})
-
-it("should return an error if a module cannot be imported", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => {
-		throw new ModuleImportError({
-			module: settings.modules[0]!,
-			cause: new Error(),
-		})
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleImportError)
-})
-
-it("should return an error if a module does not export anything", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => ({})
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleHasNoExportsError)
-})
-
-it("should return an error if a module exports an invalid plugin or lint rule", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-	const _import = async () =>
-		({
-			// @ts-expect-error - invalid meta of a plugin
-			default: {
-				id: "plugin.namespace.mock",
-				description: { en: "Mock plugin description" },
-			},
-		} satisfies InlangModule)
-
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleExportIsInvalidError)
-})
-
-it("should handle other unhandled errors during plugin resolution", async () => {
-	const errorMessage = "Unhandled error during plugin resolution"
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["https://myplugin.com/index.js"],
-	}
-
-	const _import = async () => {
-		throw new Error(errorMessage)
-	}
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleError)
-})
-it("should return an error if a moduleSettings are invalid", async () => {
-	const settings: ProjectSettings = {
-		sourceLanguageTag: "en",
-		languageTags: ["de", "en"],
-		modules: ["plugin.js"],
-		"plugin.namespace.mock": {
-			ignore: ["invalid"],
-		},
-	}
-
-	const _import = async () => ({
-		default: {
-			id: "plugin.namespace.mock",
-			description: { en: "Mock plugin description" },
-			displayName: { en: "Mock Plugin" },
-			settingsSchema: Type.Object({
-				ignore: Type.String(),
-			}),
-		},
-	})
-
-	// Call the function
-	const resolved = await resolveModules({
-		projectPath: "/project.inlang",
-		settings,
-		_import,
-		nodeishFs: {} as any,
-	})
-
-	// Assert results
-	expect(resolved.errors[0]).toBeInstanceOf(ModuleSettingsAreInvalidError)
-})
diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
index f959b27ffb..def3009fe2 100644
--- a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -19,8 +19,8 @@ const PluginCompiler = TypeCompiler.Compile(Plugin)
 export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 	const result: Awaited<ReturnType<ResolvePlugins2Function>> = {
 		data: {
-			loadMessages: undefined as any,
-			saveMessages: undefined as any,
+			// loadMessages: undefined as any,
+			// saveMessages: undefined as any,
 			customApi: {},
 		},
 		errors: [],
@@ -55,13 +55,14 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		}
 
 		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
-		if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
-			result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		}
+		// TODO SDK-v2 check if we can reuse this for export/import
+		// if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
+		// 	result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		// }
 
-		if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
-			result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		}
+		// if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
+		// 	result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
+		// }
 
 		// --- ADD APP SPECIFIC API ---
 		if (typeof plugin.addCustomApi === "function") {
@@ -92,13 +93,14 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		 * -------------- BEGIN ADDING TO RESULT --------------
 		 */
 
-		if (typeof plugin.loadMessages === "function") {
-			result.data.loadMessages = plugin.loadMessages
-		}
+		// TODO SDK-v2 we remove load/save Message for now
+		// if (typeof plugin.loadMessages === "function") {
+		// 	result.data.loadMessages = plugin.loadMessages
+		// }
 
-		if (typeof plugin.saveMessages === "function") {
-			result.data.saveMessages = plugin.saveMessages
-		}
+		// if (typeof plugin.saveMessages === "function") {
+		// 	result.data.saveMessages = plugin.saveMessages
+		// }
 
 		if (typeof plugin.addCustomApi === "function") {
 			const { data: customApi } = tryCatch(() =>
@@ -114,13 +116,14 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 
 	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
 
-	if (
-		!experimentalPersistence &&
-		(typeof result.data.loadMessages !== "function" ||
-			typeof result.data.saveMessages !== "function")
-	) {
-		result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
-	}
+	// TODO SDK-v2 check if we can use that for exporter importer
+	// if (
+	// 	!experimentalPersistence &&
+	// 	(typeof result.data.loadMessages !== "function" ||
+	// 		typeof result.data.saveMessages !== "function")
+	// ) {
+	// 	result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
+	// }
 
 	return result
 }
diff --git a/inlang/source-code/sdk-v2/src/types/index.ts b/inlang/source-code/sdk-v2/src/types/index.ts
index c9c423a829..d8dbf3d22c 100644
--- a/inlang/source-code/sdk-v2/src/types/index.ts
+++ b/inlang/source-code/sdk-v2/src/types/index.ts
@@ -5,7 +5,8 @@ export * from "./language-tag.js"
 export * from "./lint.js"
 // export * from "./message-bundle.js"
 export * from "./plugin.js"
+export * from "./schema.js"
 export * from "./project-settings.js"
 export * from "./project.js"
-export * from "./sdkTypes.js"
+
 // export * from "./module.js"
diff --git a/inlang/source-code/sdk-v2/src/types/lint.ts b/inlang/source-code/sdk-v2/src/types/lint.ts
index 8d082e19df..c38d136146 100644
--- a/inlang/source-code/sdk-v2/src/types/lint.ts
+++ b/inlang/source-code/sdk-v2/src/types/lint.ts
@@ -11,7 +11,7 @@ import type { JSONObject } from "@inlang/json-types"
 // import type { MessageBundle } from "./message-bundle.js"
 import { LanguageTag } from "./language-tag.js"
 import type { ExternalProjectSettings, ProjectSettings2 } from "./project-settings.js"
-import type { BundleWithMessages } from "./sdkTypes.js"
+import type { NestedBundle } from "./schema.js"
 
 // export type LintResult = {
 // 	// TODO SDK 2 add property for report type - if is not specific for lint results?
@@ -76,11 +76,11 @@ export const LintReport = Type.Object({
 	ruleId: Type.String(),
 
 	// TODO SDK2 check if we should provide a lint target
-	// target: Type.Object({
-	messageBundleId: Type.String(),
-	messageId: Type.Optional(Type.String()),
-	variantId: Type.Optional(Type.String()),
-	// }),
+	target: Type.Object({
+		bundleId: Type.String(),
+		messageId: Type.Optional(Type.String()),
+		variantId: Type.Optional(Type.String()),
+	}),
 
 	level: MessageLintLevel,
 	body: Translatable(Type.String()),
@@ -96,9 +96,11 @@ export type LintReport<Fixes extends LintFix[] = LintFix[]> = {
 	ruleId: MessageBundleLintRule["id"]
 
 	// TODO SDK2 check if we should provide a lint target
-	messageBundleId: string
-	messageId: string | undefined
-	variantId: string | undefined
+	target: {
+		bundleId: string
+		messageId: string | undefined
+		variantId: string | undefined
+	}
 	// locale: LanguageTag | undefined
 
 	level: MessageLintLevel
@@ -138,7 +140,7 @@ export type MessageBundleLintRule<
 	settingsSchema?: TObject
 
 	run: (args: {
-		messageBundle: BundleWithMessages
+		messageBundle: NestedBundle
 		settings: ProjectSettings2 & ExternalSettings
 		report: (args: Omit<LintReport, "ruleId" | "level">) => void
 	}) => MaybePromise<void>
@@ -147,8 +149,8 @@ export type MessageBundleLintRule<
 		report: Report
 		fix: Fix<Report>
 		settings: ProjectSettings2 & ExternalSettings
-		messageBundle: BundleWithMessages
-	}) => MaybePromise<BundleWithMessages>
+		messageBundle: NestedBundle
+	}) => MaybePromise<NestedBundle>
 }
 export const MessageBundleLintRule = Type.Object({
 	id: _MessageBundleLintRuleId,
diff --git a/inlang/source-code/sdk-v2/src/types/project.ts b/inlang/source-code/sdk-v2/src/types/project.ts
index b38cfa442d..c92d5482dc 100644
--- a/inlang/source-code/sdk-v2/src/types/project.ts
+++ b/inlang/source-code/sdk-v2/src/types/project.ts
@@ -1,9 +1,7 @@
-import type { BehaviorSubject, Observable, Observer, Subscribable, Subscription } from "rxjs"
+import type { BehaviorSubject, Observer, Subscription } from "rxjs"
 import type {
-	Fix,
 	InstalledLintRule,
 	InstalledPlugin,
-	LintReport,
 	ProjectSettings2,
 	// LintResult,
 	// Message,
@@ -13,7 +11,15 @@ import type {
 	// ProjectSettings2,
 } from "./index.js"
 import type { Bundle, Database, Message, NestedBundle, NestedMessage, Variant } from "./schema.js"
-import type { DeleteQueryBuilder, DeleteResult, InsertQueryBuilder, InsertResult, SelectQueryBuilder, UpdateQueryBuilder, UpdateResult } from "kysely"
+import type {
+	DeleteQueryBuilder,
+	DeleteResult,
+	InsertQueryBuilder,
+	InsertResult,
+	SelectQueryBuilder,
+	UpdateQueryBuilder,
+	UpdateResult,
+} from "kysely"
 
 export type InlangProject = {
 	/**#
@@ -29,29 +35,37 @@ export type InlangProject = {
 	settings: {
 		get: () => ProjectSettings2
 		set: (settings: ProjectSettings2) => Promise<void>
-		subscribe: (observerOrNext?: Partial<Observer<ProjectSettings2>> | ((value: ProjectSettings2) => void), error?: (error: any) => void, complete?: () => void) => Subscription
+		subscribe: (
+			observerOrNext?: Partial<Observer<ProjectSettings2>> | ((value: ProjectSettings2) => void),
+			error?: (error: any) => void,
+			complete?: () => void
+		) => Subscription
 	}
 	bundle: {
 		select: SelectQueryBuilder<Database, "bundle", object>
 		insert: (bundle: NestedBundle) => InsertQueryBuilder<Database, "bundle", InsertResult>
-		update: (bundle: Partial<Bundle> & { id: string }) => UpdateQueryBuilder<Database, "bundle", "bundle", UpdateResult>
-		delete: (bundle: Bundle) =>  DeleteQueryBuilder<Database, "bundle", DeleteResult>
+		update: (
+			bundle: Partial<Bundle> & { id: string }
+		) => UpdateQueryBuilder<Database, "bundle", "bundle", UpdateResult>
+		delete: (bundle: Bundle) => DeleteQueryBuilder<Database, "bundle", DeleteResult>
 	}
 	message: {
 		select: SelectQueryBuilder<Database, "message", object>
 		insert: (message: NestedMessage) => InsertQueryBuilder<Database, "message", InsertResult>
-		update: (message: Partial<Message> & { id: string }) => UpdateQueryBuilder<Database, "message", "message", UpdateResult>
-		delete: (message: Message) =>  DeleteQueryBuilder<Database, "message", DeleteResult>
+		update: (
+			message: Partial<Message> & { id: string }
+		) => UpdateQueryBuilder<Database, "message", "message", UpdateResult>
+		delete: (message: Message) => DeleteQueryBuilder<Database, "message", DeleteResult>
 	}
 	variant: {
 		select: SelectQueryBuilder<Database, "variant", object>
 		insert: (variant: Variant) => InsertQueryBuilder<Database, "variant", InsertResult>
 		update: (variant: Variant) => UpdateQueryBuilder<Database, "variant", "variant", UpdateResult>
-		delete: (bundle: Variant) =>  DeleteQueryBuilder<Database, "variant", DeleteResult>
-	}
-	reports: {
-		select: any
+		delete: (bundle: Variant) => DeleteQueryBuilder<Database, "variant", DeleteResult>
 	}
+	// reports: {
+	// 	select: any
+	// }
 	// js libraries containing lint rules, importers, exporters, code matchers, registries (icu2)
 	// modules: {
 	// 	// TODO provide import exporter plugins: Subscribable<InstalledPlugin[]>
@@ -70,6 +84,6 @@ export type InlangProject = {
 	// 	selectNested:
 	// }
 
-	fix: <Report extends LintReport>(lintReport: Report, fix: Fix<Report>) => Promise<void>
+	// fix: <Report extends LintReport>(lintReport: Report, fix: Fix<Report>) => Promise<void>
 	close: () => void
 }
diff --git a/inlang/source-code/sdk-v2/src/types/schema.ts b/inlang/source-code/sdk-v2/src/types/schema.ts
index 4eb39b9d69..e62ce1dfe9 100644
--- a/inlang/source-code/sdk-v2/src/types/schema.ts
+++ b/inlang/source-code/sdk-v2/src/types/schema.ts
@@ -1,41 +1,17 @@
 import type { Insertable, JSONColumnType, Selectable, Updateable } from "kysely"
 
+import type { LintReport } from "./lint.js"
+
 export type Database = {
 	bundle: BundleTable
 	message: MessageTable
 	variant: VariantTable
 
-	LintReport: LintReport
+	lintReport: LintReport
 	// todo - move out of database
 	settings: Settings
 }
 
-export type MessageLintLevel = "error" | "warning" | "off"
-
-type LintFix = { key: string; title: string }
-
-/**
- * The basis of a lint report (required to contruct a lint report union type)
- */
-export type LintReport = {
-	ruleId: string
-
-	target: {
-		messageBundleId: string
-		messageId?: string
-		variantId?: string
-	}
-
-	level: MessageLintLevel
-	body: string
-
-	/**
-	 * The available fixes that can be automatically applied
-	 * Empty array = no automatic fixes
-	 */
-	fixes: LintFix[]
-}
-
 type AliasMap = {
 	[key: string]: string
 }
@@ -69,7 +45,6 @@ type VariantTable = {
 
 export type Bundle = Selectable<BundleTable>
 
-
 export type NestedMessage = Message & {
 	variants: Variant[]
 }
@@ -78,7 +53,6 @@ export type NestedBundle = Bundle & {
 	messages: NestedMessage[]
 }
 
-
 export type NewBundle = Insertable<BundleTable>
 export type UpdatedBundle = Updateable<BundleTable>
 
@@ -118,6 +92,18 @@ export type InputDeclaration = {
 export type Expression = {
 	type: "expression"
 	arg: VariableReference | Literal
+	annotation?: FunctionAnnotation
+}
+
+export type FunctionAnnotation = {
+	type: "function"
+	name: string
+	options: Option[]
+}
+
+export type Option = {
+	name: string
+	value: Literal | VariableReference
 }
 
 export type Settings = {
diff --git a/inlang/source-code/sdk-v2/src/types/sdkTypes.ts b/inlang/source-code/sdk-v2/src/types/sdkTypes.ts
deleted file mode 100644
index 9a5716b1da..0000000000
--- a/inlang/source-code/sdk-v2/src/types/sdkTypes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Bundle, Message, Variant } from "./schema.js"
-
-export type MessageWithVariants = Message & {
-	variants: Variant[]
-}
-
-export type BundleWithMessages = Bundle & {
-	messages: MessageWithVariants[]
-}
diff --git a/inlang/source-code/sdk-v2/src/x.ts b/inlang/source-code/sdk-v2/src/x.ts
deleted file mode 100644
index 0ffe730a24..0000000000
--- a/inlang/source-code/sdk-v2/src/x.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-const project = loadProjectV1()
-
-
-
-
-type Bundle = {
-	id: string
-	alias: Record<string, string>
-}
-
-type Bundle2 = {
-	identifier: string
-	alias: Record<string, string>
-}
-
-type BundleApp = {
-  id: string
-	alias: Record<string, string>
-}
-
-// @deprecated
-project.bundle.select().where("id", "=", "blabla")
-
-// inlang sdk 1.6 -> computed virtual table
-project.bundle2.select().where("identifier", "=", "blabla")
-
-// inlang sdk 1.6 -> map "identifier" -> "id"
-project.bundle2.insert().where("identifier", "=", "blabla")
-
-// inlang sdk 2.0
-project.bundle2.select().where("identifier", "=", "blabla")
-project.bundle2.insert().where("identifier", "=", "blabla")
-
-
-project.bundleapp.select().where("id", "=", "blabla")
-
-// inlang sdk 1.6
-project.bundle.get()
-project.bundle2.get()
-
-// inlang sdk 2.0
-project.bundle2.get()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e511f9496a..eb03dba489 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -203,6 +203,85 @@ importers:
         specifier: 0.34.6
         version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.2.2))
 
+  inlang/source-code/bundle-component:
+    dependencies:
+      '@inlang/sdk-v2':
+        specifier: workspace:^
+        version: link:../sdk-v2
+      '@lexical/plain-text':
+        specifier: ^0.16.1
+        version: 0.16.1
+      '@lexical/utils':
+        specifier: ^0.16.1
+        version: 0.16.1
+      '@lit/task':
+        specifier: ^1.0.0
+        version: 1.0.1
+      '@shoelace-style/shoelace':
+        specifier: 2.14.0
+        version: 2.14.0(@types/react@18.3.3)
+      '@sinclair/typebox':
+        specifier: 0.31.28
+        version: 0.31.28
+      chroma-js:
+        specifier: ^2.4.2
+        version: 2.4.2
+      lexical:
+        specifier: ^0.16.1
+        version: 0.16.1
+    devDependencies:
+      '@inlang/marketplace-manifest':
+        specifier: workspace:^
+        version: link:../versioned-interfaces/marketplace-manifest
+      '@inlang/marketplace-registry':
+        specifier: workspace:^
+        version: link:../marketplace-registry
+      '@inlang/message-lint-rule':
+        specifier: workspace:^
+        version: link:../versioned-interfaces/message-lint-rule
+      '@nx/storybook':
+        specifier: ^18.0.4
+        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+      '@storybook/addon-essentials':
+        specifier: ^7.6.16
+        version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/addon-links':
+        specifier: ^7.6.16
+        version: 7.6.19(react@18.3.1)
+      '@storybook/blocks':
+        specifier: ^7.6.16
+        version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/web-components':
+        specifier: ^7.6.16
+        version: 7.6.19(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/web-components-vite':
+        specifier: ^7.6.16
+        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@types/chroma-js':
+        specifier: ^2.4.4
+        version: 2.4.4
+      '@vitest/coverage-v8':
+        specifier: 0.34.6
+        version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))
+      esbuild:
+        specifier: ^0.20.0
+        version: 0.20.2
+      lit:
+        specifier: ^3.1.2
+        version: 3.1.4
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      storybook:
+        specifier: ^7.6.16
+        version: 7.6.19
+      vitest:
+        specifier: 0.34.6
+        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
+
   inlang/source-code/cli:
     dependencies:
       esbuild-wasm:
@@ -1099,76 +1178,6 @@ importers:
         specifier: 5.2.2
         version: 5.2.2
 
-  inlang/source-code/message-bundle-component:
-    dependencies:
-      '@inlang/sdk':
-        specifier: workspace:^
-        version: link:../sdk
-      '@lit/task':
-        specifier: ^1.0.0
-        version: 1.0.1
-      '@shoelace-style/shoelace':
-        specifier: 2.14.0
-        version: 2.14.0(@types/react@18.3.3)
-      '@sinclair/typebox':
-        specifier: 0.31.28
-        version: 0.31.28
-      chroma-js:
-        specifier: ^2.4.2
-        version: 2.4.2
-    devDependencies:
-      '@inlang/marketplace-manifest':
-        specifier: workspace:^
-        version: link:../versioned-interfaces/marketplace-manifest
-      '@inlang/marketplace-registry':
-        specifier: workspace:^
-        version: link:../marketplace-registry
-      '@inlang/message-lint-rule':
-        specifier: workspace:^
-        version: link:../versioned-interfaces/message-lint-rule
-      '@nx/storybook':
-        specifier: ^18.0.4
-        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
-      '@storybook/addon-essentials':
-        specifier: ^7.6.16
-        version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/addon-links':
-        specifier: ^7.6.16
-        version: 7.6.19(react@18.2.0)
-      '@storybook/blocks':
-        specifier: ^7.6.16
-        version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/web-components':
-        specifier: ^7.6.16
-        version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/web-components-vite':
-        specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
-      '@types/chroma-js':
-        specifier: ^2.4.4
-        version: 2.4.4
-      '@vitest/coverage-v8':
-        specifier: 0.34.6
-        version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))
-      esbuild:
-        specifier: ^0.20.0
-        version: 0.20.2
-      lit:
-        specifier: ^3.1.2
-        version: 3.1.4
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      storybook:
-        specifier: ^7.6.16
-        version: 7.6.19
-      vitest:
-        specifier: 0.34.6
-        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
-
   inlang/source-code/message-lint-rules/camelCaseId:
     dependencies:
       '@inlang/message-lint-rule':
@@ -2482,12 +2491,18 @@ importers:
       '@inlang/translatable':
         specifier: workspace:*
         version: link:../versioned-interfaces/translatable
+      '@lix-js/fs':
+        specifier: workspace:*
+        version: link:../../../lix/packages/fs
       '@sinclair/typebox':
         specifier: ^0.31.17
         version: 0.31.28
       '@sqlite.org/sqlite-wasm':
         specifier: ^3.46.0-build2
         version: 3.46.0-build2
+      dedent:
+        specifier: 1.5.1
+        version: 1.5.1
       deepmerge-ts:
         specifier: ^5.1.0
         version: 5.1.0
@@ -2552,9 +2567,9 @@ importers:
       '@esbuild-plugins/node-modules-polyfill':
         specifier: ^0.2.2
         version: 0.2.2(esbuild@0.21.5)
-      '@inlang/message-bundle-component':
+      '@inlang/bundle-component':
         specifier: workspace:*
-        version: link:../../message-bundle-component
+        version: link:../../bundle-component
       '@inlang/sdk-v2':
         specifier: workspace:*
         version: link:..
@@ -2614,53 +2629,6 @@ importers:
         specifier: 1.4.1
         version: 1.4.1(@swc/helpers@0.5.5)(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.9)(terser@5.31.1))
 
-  inlang/source-code/sdk/load-test:
-    dependencies:
-      '@inlang/cli':
-        specifier: workspace:*
-        version: link:../../cli
-      '@inlang/sdk':
-        specifier: workspace:*
-        version: link:..
-      '@lix-js/client':
-        specifier: workspace:*
-        version: link:../../../../lix/packages/client
-      debug:
-        specifier: ^4.3.4
-        version: 4.3.5
-      i18next:
-        specifier: ^23.10.0
-        version: 23.11.5
-      throttle-debounce:
-        specifier: ^5.0.0
-        version: 5.0.0
-    devDependencies:
-      '@types/debug':
-        specifier: ^4.1.12
-        version: 4.1.12
-      '@types/node':
-        specifier: ^20.11.20
-        version: 20.14.2
-      '@types/throttle-debounce':
-        specifier: 5.0.0
-        version: 5.0.0
-      tsx:
-        specifier: ^4.7.1
-        version: 4.12.0
-
-  inlang/source-code/sdk/multi-project-test:
-    dependencies:
-      '@inlang/cli':
-        specifier: workspace:*
-        version: link:../../cli
-    devDependencies:
-      '@types/node':
-        specifier: ^20.12.6
-        version: 20.14.2
-      vitest:
-        specifier: 0.34.6
-        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
-
   inlang/source-code/server:
     dependencies:
       '@inlang/badge':
@@ -2754,7 +2722,7 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
@@ -5599,6 +5567,27 @@ packages:
   '@juggle/resize-observer@3.4.0':
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
+  '@lexical/clipboard@0.16.1':
+    resolution: {integrity: sha512-0dWs/SwKS5KPpuf6fUVVt9vSCl6HAqcDGhSITw/okv0rrIlXTUT6WhVsMJtXfFxTyVvwMeOecJHvQH3i/jRQtA==}
+
+  '@lexical/html@0.16.1':
+    resolution: {integrity: sha512-vbtAdCvQ3PaAqa5mFmtmrvbiAvjCu1iXBAJ0bsHqFXCF2Sba5LwHVe8dUAOTpfEZEMbiHfjul6b5fj4vNPGF2A==}
+
+  '@lexical/list@0.16.1':
+    resolution: {integrity: sha512-i9YhLAh5N6YO9dP+R1SIL9WEdCKeTiQQYVUzj84vDvX5DIBxMPUjTmMn3LXu9T+QO3h1s2L/vJusZASrl45eAw==}
+
+  '@lexical/plain-text@0.16.1':
+    resolution: {integrity: sha512-GjY4ylrBZIaAVIF8IFnmW0XGyHAuRmWA6gKB8iTTlsjgFrCHFIYC74EeJSp309O0Hflg9rRBnKoX1TYruFHVwA==}
+
+  '@lexical/selection@0.16.1':
+    resolution: {integrity: sha512-+nK3RvXtyQvQDq7AZ46JpphmM33pwuulwiRfeXR5T9iFQTtgWOEjsAi/KKX7vGm70BxACfiSxy5QCOgBWFwVJg==}
+
+  '@lexical/table@0.16.1':
+    resolution: {integrity: sha512-GWb0/MM1sVXpi1p2HWWOBldZXASMQ4c6WRNYnRmq7J/aB5N66HqQgJGKp3m66Kz4k1JjhmZfPs7F018qIBhnFQ==}
+
+  '@lexical/utils@0.16.1':
+    resolution: {integrity: sha512-BVyJxDQi/rIxFTDjf2zE7rMDKSuEaeJ4dybHRa/hRERt85gavGByQawSLeQlTjLaYLVsy+x7wCcqh2fNhlLf0g==}
+
   '@lit-labs/react@1.2.1':
     resolution: {integrity: sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==}
 
@@ -12027,9 +12016,6 @@ packages:
   i18next@22.5.1:
     resolution: {integrity: sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==}
 
-  i18next@23.11.5:
-    resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
-
   iconify-icon@1.0.8:
     resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==}
 
@@ -12831,6 +12817,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lexical@0.16.1:
+    resolution: {integrity: sha512-+R05d3+N945OY8pTUjTqQrWoApjC+ctzvjnmNETtx9WmVAaiW0tQVG+AYLt5pDGY8dQXtd4RPorvnxBTECt9SA==}
+
   lie@3.1.1:
     resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
 
@@ -19002,13 +18991,6 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-react-jsx-development@7.24.7':
-    dependencies:
-      '@babel/plugin-transform-react-jsx': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-react-jsx-development@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -19033,17 +19015,6 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-react-jsx@7.24.7':
-    dependencies:
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.21.4)
-      '@babel/types': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -19605,6 +19576,10 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@esbuild-kit/cjs-loader@2.4.4':
     dependencies:
       '@esbuild-kit/core-utils': 3.3.2
@@ -20098,6 +20073,12 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.6.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@floating-ui/utils@0.2.2': {}
 
   '@gmrchk/cli-testing-library@0.1.2':
@@ -20345,6 +20326,48 @@ snapshots:
 
   '@juggle/resize-observer@3.4.0': {}
 
+  '@lexical/clipboard@0.16.1':
+    dependencies:
+      '@lexical/html': 0.16.1
+      '@lexical/list': 0.16.1
+      '@lexical/selection': 0.16.1
+      '@lexical/utils': 0.16.1
+      lexical: 0.16.1
+
+  '@lexical/html@0.16.1':
+    dependencies:
+      '@lexical/selection': 0.16.1
+      '@lexical/utils': 0.16.1
+      lexical: 0.16.1
+
+  '@lexical/list@0.16.1':
+    dependencies:
+      '@lexical/utils': 0.16.1
+      lexical: 0.16.1
+
+  '@lexical/plain-text@0.16.1':
+    dependencies:
+      '@lexical/clipboard': 0.16.1
+      '@lexical/selection': 0.16.1
+      '@lexical/utils': 0.16.1
+      lexical: 0.16.1
+
+  '@lexical/selection@0.16.1':
+    dependencies:
+      lexical: 0.16.1
+
+  '@lexical/table@0.16.1':
+    dependencies:
+      '@lexical/utils': 0.16.1
+      lexical: 0.16.1
+
+  '@lexical/utils@0.16.1':
+    dependencies:
+      '@lexical/list': 0.16.1
+      '@lexical/selection': 0.16.1
+      '@lexical/table': 0.16.1
+      lexical: 0.16.1
+
   '@lit-labs/react@1.2.1': {}
 
   '@lit-labs/ssr-dom-shim@1.2.0': {}
@@ -20436,6 +20459,12 @@ snapshots:
       '@types/react': 18.3.3
       react: 18.2.0
 
+  '@mdx-js/react@2.3.0(react@18.3.1)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 18.3.3
+      react: 18.3.1
+
   '@microsoft/api-extractor-model@7.28.13(@types/node@20.14.2)':
     dependencies:
       '@microsoft/tsdoc': 0.14.2
@@ -21380,27 +21409,6 @@ snapshots:
       - supports-color
     optional: true
 
-  '@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/plugin-transform-react-jsx': 7.24.7
-      '@babel/plugin-transform-react-jsx-development': 7.24.7
-      '@prefresh/vite': 2.4.6(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
-      '@rollup/pluginutils': 4.2.1
-      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.7)
-      debug: 4.3.5
-      kolorist: 1.8.0
-      magic-string: 0.30.5
-      node-html-parser: 6.1.13
-      resolve: 1.22.8
-      source-map: 0.7.4
-      stack-trace: 1.0.0-pre2
-      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
-    transitivePeerDependencies:
-      - preact
-      - supports-color
-    optional: true
-
   '@prefresh/babel-plugin@0.5.1':
     optional: true
 
@@ -21540,6 +21548,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-collection@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21553,6 +21571,19 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21560,6 +21591,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21567,6 +21605,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-direction@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21574,6 +21619,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-direction@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21588,6 +21640,20 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21595,6 +21661,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21607,6 +21680,18 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-id@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21615,6 +21700,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-id@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-popper@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21634,6 +21727,25 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/rect': 1.0.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-portal@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21644,6 +21756,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21654,6 +21776,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21672,6 +21804,24 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-select@1.2.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21702,6 +21852,36 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-select@1.2.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.5(@types/react@18.3.3)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-separator@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21712,6 +21892,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21720,6 +21910,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21736,6 +21934,22 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21748,6 +21962,18 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21764,6 +21990,22 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21771,6 +22013,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21779,6 +22028,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21787,6 +22044,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21794,6 +22059,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-previous@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21801,6 +22073,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-previous@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21809,6 +22088,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/rect': 1.0.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-use-size@1.0.1(@types/react@18.3.3)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21817,6 +22104,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-use-size@1.0.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -21827,6 +22122,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/rect@1.0.1':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -22450,6 +22755,19 @@ snapshots:
       - react-dom
       - supports-color
 
+  '@storybook/addon-controls@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@storybook/blocks': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lodash: 4.17.21
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - react
+      - react-dom
+      - supports-color
+
   '@storybook/addon-docs@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@jest/transform': 29.7.0
@@ -22479,6 +22797,35 @@ snapshots:
       - encoding
       - supports-color
 
+  '@storybook/addon-docs@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@jest/transform': 29.7.0
+      '@mdx-js/react': 2.3.0(react@18.3.1)
+      '@storybook/blocks': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/client-logger': 7.6.19
+      '@storybook/components': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/csf-plugin': 7.6.19
+      '@storybook/csf-tools': 7.6.19
+      '@storybook/global': 5.0.0
+      '@storybook/mdx2-csf': 1.1.0
+      '@storybook/node-logger': 7.6.19
+      '@storybook/postinstall': 7.6.19
+      '@storybook/preview-api': 7.6.19
+      '@storybook/react-dom-shim': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/theming': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/types': 7.6.19
+      fs-extra: 11.2.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      remark-external-links: 8.0.0
+      remark-slug: 6.1.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/addon-essentials@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/addon-actions': 7.6.19
@@ -22503,6 +22850,30 @@ snapshots:
       - encoding
       - supports-color
 
+  '@storybook/addon-essentials@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@storybook/addon-actions': 7.6.19
+      '@storybook/addon-backgrounds': 7.6.19
+      '@storybook/addon-controls': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/addon-docs': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/addon-highlight': 7.6.19
+      '@storybook/addon-measure': 7.6.19
+      '@storybook/addon-outline': 7.6.19
+      '@storybook/addon-toolbars': 7.6.19
+      '@storybook/addon-viewport': 7.6.19
+      '@storybook/core-common': 7.6.19
+      '@storybook/manager-api': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/node-logger': 7.6.19
+      '@storybook/preview-api': 7.6.19
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/addon-highlight@7.6.19':
     dependencies:
       '@storybook/global': 5.0.0
@@ -22515,6 +22886,14 @@ snapshots:
     optionalDependencies:
       react: 18.2.0
 
+  '@storybook/addon-links@7.6.19(react@18.3.1)':
+    dependencies:
+      '@storybook/csf': 0.1.8
+      '@storybook/global': 5.0.0
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      react: 18.3.1
+
   '@storybook/addon-measure@7.6.19':
     dependencies:
       '@storybook/global': 5.0.0
@@ -22564,6 +22943,39 @@ snapshots:
       - encoding
       - supports-color
 
+  '@storybook/blocks@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@storybook/channels': 7.6.19
+      '@storybook/client-logger': 7.6.19
+      '@storybook/components': 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/core-events': 7.6.19
+      '@storybook/csf': 0.1.8
+      '@storybook/docs-tools': 7.6.19
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/preview-api': 7.6.19
+      '@storybook/theming': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/types': 7.6.19
+      '@types/lodash': 4.17.4
+      color-convert: 2.0.1
+      dequal: 2.0.3
+      lodash: 4.17.21
+      markdown-to-jsx: 7.4.7(react@18.3.1)
+      memoizerific: 1.11.3
+      polished: 4.3.1
+      react: 18.3.1
+      react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      telejson: 7.2.0
+      tocbot: 4.28.2
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - encoding
+      - supports-color
+
   '@storybook/builder-manager@7.6.19':
     dependencies:
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
@@ -22612,32 +23024,6 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
-    dependencies:
-      '@storybook/channels': 7.6.19
-      '@storybook/client-logger': 7.6.19
-      '@storybook/core-common': 7.6.19
-      '@storybook/csf-plugin': 7.6.19
-      '@storybook/node-logger': 7.6.19
-      '@storybook/preview': 7.6.19
-      '@storybook/preview-api': 7.6.19
-      '@storybook/types': 7.6.19
-      '@types/find-cache-dir': 3.2.1
-      browser-assert: 1.2.1
-      es-module-lexer: 0.9.3
-      express: 4.19.2
-      find-cache-dir: 3.3.2
-      fs-extra: 11.2.0
-      magic-string: 0.30.10
-      rollup: 3.29.1
-      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
-    optionalDependencies:
-      '@preact/preset-vite': 2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
-      typescript: 5.5.2
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
   '@storybook/channels@7.6.19':
     dependencies:
       '@storybook/client-logger': 7.6.19
@@ -22736,6 +23122,24 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  '@storybook/components@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/client-logger': 7.6.19
+      '@storybook/csf': 0.1.8
+      '@storybook/global': 5.0.0
+      '@storybook/theming': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/types': 7.6.19
+      memoizerific: 1.11.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-resize-observer: 9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      util-deprecate: 1.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   '@storybook/core-client@7.6.19':
     dependencies:
       '@storybook/client-logger': 7.6.19
@@ -22889,6 +23293,26 @@ snapshots:
       - react
       - react-dom
 
+  '@storybook/manager-api@7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@storybook/channels': 7.6.19
+      '@storybook/client-logger': 7.6.19
+      '@storybook/core-events': 7.6.19
+      '@storybook/csf': 0.1.8
+      '@storybook/global': 5.0.0
+      '@storybook/router': 7.6.19
+      '@storybook/theming': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/types': 7.6.19
+      dequal: 2.0.3
+      lodash: 4.17.21
+      memoizerific: 1.11.3
+      store2: 2.14.3
+      telejson: 7.2.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
   '@storybook/manager@7.6.19': {}
 
   '@storybook/mdx2-csf@1.1.0': {}
@@ -22921,6 +23345,11 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/react-dom-shim@7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@storybook/router@7.6.19':
     dependencies:
       '@storybook/client-logger': 7.6.19
@@ -22950,6 +23379,15 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@storybook/theming@7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
+      '@storybook/client-logger': 7.6.19
+      '@storybook/global': 5.0.0
+      memoizerific: 1.11.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@storybook/types@7.6.19':
     dependencies:
       '@storybook/channels': 7.6.19
@@ -22977,12 +23415,12 @@ snapshots:
       - vite
       - vite-plugin-glimmerx
 
-  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
-      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@storybook/core-server': 7.6.19
       '@storybook/node-logger': 7.6.19
-      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       magic-string: 0.30.10
     transitivePeerDependencies:
       - '@preact/preset-vite'
@@ -23015,6 +23453,24 @@ snapshots:
       - react-dom
       - supports-color
 
+  '@storybook/web-components@7.6.19(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@storybook/client-logger': 7.6.19
+      '@storybook/core-client': 7.6.19
+      '@storybook/docs-tools': 7.6.19
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 7.6.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/preview-api': 7.6.19
+      '@storybook/types': 7.6.19
+      lit: 3.1.4
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - encoding
+      - react
+      - react-dom
+      - supports-color
+
   '@sveltejs/adapter-auto@2.1.1(@sveltejs/kit@1.30.4(svelte@3.59.2)(vite@4.5.2(@types/node@20.14.9)(terser@5.31.1)))':
     dependencies:
       '@sveltejs/kit': 1.30.4(svelte@3.59.2)(vite@4.5.2(@types/node@20.14.9)(terser@5.31.1))
@@ -23768,7 +24224,7 @@ snapshots:
 
   '@types/node-fetch@2.6.11':
     dependencies:
-      '@types/node': 18.19.39
+      '@types/node': 20.14.9
       form-data: 4.0.0
 
   '@types/node@12.20.55': {}
@@ -23862,7 +24318,7 @@ snapshots:
   '@types/send@0.17.4':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.8.4
+      '@types/node': 20.14.9
 
   '@types/serve-static@1.15.7':
     dependencies:
@@ -23906,7 +24362,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
     optional: true
 
   '@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0(eslint@8.57.0)(typescript@5.3.2))(eslint@8.57.0)(typescript@5.3.2)':
@@ -24783,7 +25239,7 @@ snapshots:
       '@wdio/utils': 8.38.2
       decamelize: 6.0.0
       deepmerge-ts: 5.1.0
-      glob: 10.4.1
+      glob: 10.4.2
       import-meta-resolve: 4.1.0
     transitivePeerDependencies:
       - supports-color
@@ -24894,7 +25350,7 @@ snapshots:
 
   '@wdio/types@8.38.2':
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
     optional: true
 
   '@wdio/types@8.39.0':
@@ -27544,8 +28000,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.41.0)
       eslint-plugin-react: 7.34.2(eslint@8.41.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.41.0)
@@ -27624,13 +28080,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0):
     dependencies:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.41.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -27652,14 +28108,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
+      eslint: 8.41.0
+      eslint-import-resolver-node: 0.3.9
     transitivePeerDependencies:
       - supports-color
 
@@ -27701,7 +28167,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -27711,7 +28177,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -27722,7 +28188,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -29630,10 +30096,6 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.7
 
-  i18next@23.11.5:
-    dependencies:
-      '@babel/runtime': 7.24.7
-
   iconify-icon@1.0.8:
     dependencies:
       '@iconify/types': 2.0.0
@@ -30445,6 +30907,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lexical@0.16.1: {}
+
   lie@3.1.1:
     dependencies:
       immediate: 3.0.6
@@ -30789,6 +31253,10 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  markdown-to-jsx@7.4.7(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   match-url-wildcard@0.0.4:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -31764,7 +32232,7 @@ snapshots:
 
   mlly@1.7.1:
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.12.0
       pathe: 1.1.2
       pkg-types: 1.1.1
       ufo: 1.5.3
@@ -33527,6 +33995,11 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  react-colorful@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-dom@18.2.0(react@18.2.0):
     dependencies:
       loose-envify: 1.4.0
@@ -33570,6 +34043,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-remove-scroll-bar@2.3.6(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
+      tslib: 2.6.3
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   react-remove-scroll@2.5.5(@types/react@18.3.3)(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -33581,6 +34062,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-remove-scroll@2.5.5(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
+      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
+      tslib: 2.6.3
+      use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.2.0):
     dependencies:
       get-nonce: 1.0.1
@@ -33590,6 +34082,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.3.1
+      tslib: 2.6.3
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   react-window@1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.24.7
@@ -35757,8 +36258,8 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 20.14.9
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.12.0
+      acorn-walk: 8.3.3
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
@@ -35777,8 +36278,8 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 20.14.9
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.12.0
+      acorn-walk: 8.3.3
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
@@ -36522,12 +37023,25 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  use-callback-ref@1.3.2(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.3
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   use-resize-observer@9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@juggle/resize-observer': 3.4.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  use-resize-observer@9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   use-sidecar@1.1.2(@types/react@18.3.3)(react@18.2.0):
     dependencies:
       detect-node-es: 1.1.0
@@ -36536,6 +37050,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.6.3
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   userhome@1.0.0: {}
 
   utf8-byte-length@1.0.5: {}
@@ -37297,7 +37819,7 @@ snapshots:
 
   webdriver@8.38.2:
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
       '@types/ws': 8.5.10
       '@wdio/config': 8.38.2
       '@wdio/logger': 8.38.0
@@ -37316,7 +37838,7 @@ snapshots:
 
   webdriver@8.39.0:
     dependencies:
-      '@types/node': 20.14.7
+      '@types/node': 20.14.9
       '@types/ws': 8.5.10
       '@wdio/config': 8.39.0
       '@wdio/logger': 8.38.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a01f296d67..ead8a59e1c 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -13,6 +13,4 @@ packages:
   - 'inlang/source-code/templates/*'
   - 'inlang/source-code/message-lint-rules/*'
   - 'inlang/source-code/versioned-interfaces/*'
-  - 'inlang/source-code/sdk/load-test'
-  - 'inlang/source-code/sdk/multi-project-test'
   - 'inlang/source-code/sdk-v2/sample-app'

From 2dbed052a977fc94c638c6e883736f2ca716757b Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Mon, 22 Jul 2024 14:03:52 +0200
Subject: [PATCH 07/35] feat: add reactive pattern test story

---
 .../inlang-pattern-editor.stories.ts          |  6 +++
 .../testing/reactivePatternEditorWrapper.ts   | 45 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 inlang/source-code/bundle-component/src/stories/testing/reactivePatternEditorWrapper.ts

diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
index 487c473489..92569b1d19 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.stories.ts
@@ -1,4 +1,5 @@
 import "./inlang-pattern-editor.ts"
+import "./../testing/reactivePatternEditorWrapper.ts"
 import type { Meta, StoryObj } from "@storybook/web-components"
 import { html } from "lit"
 import { pluralBundle } from "@inlang/sdk-v2"
@@ -32,3 +33,8 @@ export const Empty: StoryObj = {
 			</inlang-pattern-editor>
 		`,
 }
+
+export const Reactive: StoryObj = {
+	render: () =>
+		html` <inlang-reactive-pattern-editor-wrapper></inlang-reactive-pattern-editor-wrapper> `,
+}
diff --git a/inlang/source-code/bundle-component/src/stories/testing/reactivePatternEditorWrapper.ts b/inlang/source-code/bundle-component/src/stories/testing/reactivePatternEditorWrapper.ts
new file mode 100644
index 0000000000..a58ae76caf
--- /dev/null
+++ b/inlang/source-code/bundle-component/src/stories/testing/reactivePatternEditorWrapper.ts
@@ -0,0 +1,45 @@
+import { LitElement, html } from "lit"
+import { customElement, state } from "lit/decorators.js"
+import "./../pattern-editor/inlang-pattern-editor.js"
+import type { Pattern } from "@inlang/sdk-v2"
+
+@customElement("inlang-reactive-pattern-editor-wrapper")
+export default class InlangReactivePatternEditorWrapper extends LitElement {
+	@state()
+	_pattern: Pattern = [
+		{
+			type: "text",
+			value: "0",
+		},
+	]
+
+	//disable shadow root -> because of contenteditable selection API
+	override createRenderRoot() {
+		return this
+	}
+
+	override async firstUpdated() {
+		setInterval(() => {
+			this._pattern = [
+				{
+					type: "text",
+					value: Number(Math.random() * 100).toFixed(0),
+				},
+			]
+		}, 4000)
+	}
+
+	override render() {
+		console.log("render-wrapper", this._pattern)
+		return html`<inlang-pattern-editor
+			.pattern=${this._pattern}
+			@change-pattern=${(pattern: any) => console.log("update", pattern.detail.argument)}
+		></inlang-pattern-editor>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"inlang-reactive-pattern-editor-wrapper": InlangReactivePatternEditorWrapper
+	}
+}

From e9c3a0d7ac3e8bf1680951b60a921443bcf5b3f0 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 14:19:29 +0200
Subject: [PATCH 08/35] fixes on change

---
 .../src/stories/inlang-bundle.ts              |  7 +-
 .../src/stories/inlang-variant.ts             |  4 +-
 .../pattern-editor/inlang-pattern-editor.ts   | 70 ++++++++++++-------
 .../sample-app/src/MessageBundleView.tsx      | 14 +++-
 4 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index a14e980958..981f99a2c0 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -396,8 +396,11 @@ export default class InlangBundle extends LitElement {
 							.fixLint=${this._fixLint}
 						>
 							${sortAllVariants({
-								variants: this._fillMessage(this._bundle!.id, structuredClone(message), locale)
-									.variants,
+								variants: this._fillMessage(
+									this._bundle?.id ? this._bundle?.id : "WHATTT", // TODO SDK-v2 @nils check how we deal with undefined
+									structuredClone(message),
+									locale
+								).variants,
 								ignoreVariantIds: this._freshlyAddedVariants,
 							})?.map((fakevariant) => {
 								const variant = message?.variants.find((v) => v.id === fakevariant.id)
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 6007b31b6a..29a950f07d 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -359,7 +359,9 @@ export default class InlangVariant extends LitElement {
 							!this.message?.selectors
 								? html`<inlang-selector-configurator
 										.inputs=${this.inputs}
-										.bundleId=${this.message!.bundleId}
+										.bundleId=${this.message?.bundleId
+											? this.message?.bundleId
+											: "TODO SDK-v2 @nils check how we deal with undefined"}
 										.message=${this.message}
 										.locale=${this.locale}
 										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
index 1f281881cd..af3d3248c1 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
@@ -65,27 +65,43 @@ export default class InlangPatternEditor extends LitElement {
 
 	// set editor state
 	private _setEditorState = () => {
+		this._removeTextContentListener?.()
 		// only handling strings so far -> TODO: handle real patterns
-		this.editor.update(() => {
-			const root = $getRoot()
-			if (root.getChildren().length === 0) {
-				const paragraphNode = $createParagraphNode()
-				const textNode = $createTextNode(
-					this.pattern ? patternToString({ pattern: this.pattern }) : ""
-				)
-				paragraphNode.append(textNode)
-				root.append(paragraphNode)
-			} else {
-				const paragraphNode = root.getChildren()[0]!
-				paragraphNode.remove()
-				const newpParagraphNode = $createParagraphNode()
-				const textNode = $createTextNode(
-					this.pattern ? patternToString({ pattern: this.pattern }) : ""
-				)
-				newpParagraphNode.append(textNode)
-				root.append(newpParagraphNode)
+		this.editor.update(
+			() => {
+				const root = $getRoot()
+				if (root.getChildren().length === 0) {
+					const paragraphNode = $createParagraphNode()
+					const textNode = $createTextNode(
+						this.pattern ? patternToString({ pattern: this.pattern }) : ""
+					)
+					paragraphNode.append(textNode)
+					root.append(paragraphNode)
+				} else {
+					const paragraphNode = root.getChildren()[0]!
+					paragraphNode.remove()
+					const newpParagraphNode = $createParagraphNode()
+					const textNode = $createTextNode(
+						this.pattern ? patternToString({ pattern: this.pattern }) : ""
+					)
+					newpParagraphNode.append(textNode)
+					root.append(newpParagraphNode)
+				}
+			},
+			{
+				discrete: true,
 			}
-		})
+		)
+
+		this._removeTextContentListener = this.editor.registerTextContentListener(
+			(textContent: any) => {
+				// The latest text content of the editor!
+
+				//check if something changed
+				this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
+				this._editorTextContent = textContent
+			}
+		)
 	}
 
 	override async firstUpdated() {
@@ -96,16 +112,20 @@ export default class InlangPatternEditor extends LitElement {
 			registerPlainText(this.editor)
 
 			// listen to text content changes and dispatch `change-pattern` event
-			this.editor.registerTextContentListener((textContent) => {
-				// The latest text content of the editor!
+			this._removeTextContentListener = this.editor.registerTextContentListener(
+				(textContent: any) => {
+					// The latest text content of the editor!
 
-				//check if something changed
-				this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
-				this._editorTextContent = textContent
-			})
+					//check if something changed
+					this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
+					this._editorTextContent = textContent
+				}
+			)
 		}
 	}
 
+	private _removeTextContentListener: undefined | (() => void)
+
 	override render() {
 		return html`
 			<style>
diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
index 75a834137f..26de78fffd 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -58,7 +58,16 @@ function MessageBundleView({
 	}
 
 	const onMesageInsert = (event: { detail: { argument: NestedBundle } }) => {
-		debugger
+		console.log("onMesageInsert", event)
+	}
+	const onMesageUpdate = (event: { detail: { argument: NestedBundle } }) => {
+		console.log("onMesageUpdate", event)
+	}
+	const onVariantInsert = (event: { detail: { argument: NestedBundle } }) => {
+		console.log("onVariantInsert", event)
+	}
+	const onVariantUpdate = (event: { detail: { argument: NestedBundle } }) => {
+		console.log("onVariantUpdate", event)
 	}
 
 	return (
@@ -68,6 +77,9 @@ function MessageBundleView({
 			settings={projectSettings}
 			changeMessageBundle={onBundleChange as any}
 			insertMessage={onMesageInsert as any}
+			updateMessage={onMesageUpdate as any}
+			insertVariant={onVariantInsert as any}
+			updateVariant={onVariantUpdate as any}
 			filteredLocales={filteredLocales.length > 0 ? filteredLocales : undefined}
 			fixLint={(e: any) => {
 				const { fix, lintReport } = e.detail.argument as {

From 0b9d4a6e4ebff47d0aead35bc98727adc2fe0784 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 15:52:03 +0200
Subject: [PATCH 09/35] fixes reactivty of pattern editor

---
 .../pattern-editor/inlang-pattern-editor.ts   | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
index af3d3248c1..04f7c9a09c 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
@@ -1,5 +1,5 @@
 import type { Pattern } from "@inlang/sdk-v2"
-import { LitElement, css, html } from "lit"
+import { LitElement, css, html, type PropertyValues } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import { ref, createRef, type Ref } from "lit/directives/ref.js"
 import { createEditor } from "lexical"
@@ -33,10 +33,11 @@ export default class InlangPatternEditor extends LitElement {
 
 	//state
 	@state()
-	_editorTextContent: string = ""
+	_patternState: Pattern | undefined
 
 	// dispatch `change-pattern` event with the new pattern
 	dispatchOnChangePattern(pattern: Pattern) {
+		debugger
 		const onChangePattern = new CustomEvent("change-pattern", {
 			detail: {
 				argument: pattern,
@@ -53,11 +54,10 @@ export default class InlangPatternEditor extends LitElement {
 	// create editor
 	editor = createEditor(config)
 
-	// update editor when pattern changes
-	override updated(changedProperties: Map<string | number | symbol, unknown>) {
+	override updated(changedProperties: PropertyValues<this>) {
 		if (
 			changedProperties.has("pattern") &&
-			patternToString({ pattern: this.pattern! }) !== this._editorTextContent
+			JSON.stringify(this.pattern as any) !== JSON.stringify(this._patternState)
 		) {
 			this._setEditorState()
 		}
@@ -66,6 +66,8 @@ export default class InlangPatternEditor extends LitElement {
 	// set editor state
 	private _setEditorState = () => {
 		this._removeTextContentListener?.()
+
+		this._patternState = this.pattern
 		// only handling strings so far -> TODO: handle real patterns
 		this.editor.update(
 			() => {
@@ -93,15 +95,17 @@ export default class InlangPatternEditor extends LitElement {
 			}
 		)
 
+		// if (reAddEventListner) {
 		this._removeTextContentListener = this.editor.registerTextContentListener(
 			(textContent: any) => {
 				// The latest text content of the editor!
-
+				this._patternState = stringToPattern({ text: textContent })
+				// this.requestUpdate("pattern")
 				//check if something changed
-				this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
-				this._editorTextContent = textContent
+				this.dispatchOnChangePattern(this._patternState)
 			}
 		)
+		// }
 	}
 
 	override async firstUpdated() {
@@ -111,14 +115,19 @@ export default class InlangPatternEditor extends LitElement {
 			this.editor.setRootElement(contentEditableElement)
 			registerPlainText(this.editor)
 
+			console.log("registering event first time")
 			// listen to text content changes and dispatch `change-pattern` event
 			this._removeTextContentListener = this.editor.registerTextContentListener(
 				(textContent: any) => {
 					// The latest text content of the editor!
+					console.log("textContent:", textContent)
+
+					//check if something changed
 
+					this._patternState = stringToPattern({ text: textContent })
+					// this.requestUpdate("pattern")
 					//check if something changed
-					this.dispatchOnChangePattern(stringToPattern({ text: textContent }))
-					this._editorTextContent = textContent
+					this.dispatchOnChangePattern(this._patternState)
 				}
 			)
 		}
@@ -179,7 +188,7 @@ export default class InlangPatternEditor extends LitElement {
 					contenteditable
 					${ref(this.contentEditableElementRef)}
 				></div>
-				${this._editorTextContent === ""
+				${this.pattern === undefined || this.pattern?.length === 0
 					? html`<p class="inlang-pattern-editor-placeholder">Enter pattern ...</p>`
 					: ""}
 			</div>

From 28cc8f196b9c84e3e72822fe2cd455be9366d640 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Mon, 22 Jul 2024 19:40:06 +0200
Subject: [PATCH 10/35] WIP - non reactivity Version of crud working

---
 .../src/stories/inlang-bundle.ts              |   1 +
 .../src/stories/inlang-variant.ts             |   7 +-
 .../pattern-editor/inlang-pattern-editor.ts   |  15 +-
 .../sample-app/src/MessageBundleView.tsx      |  28 ++--
 .../sdk-v2/sample-app/src/mainViewIframe.tsx  | 136 ------------------
 .../sample-app/src/messageBundleListReact.tsx |  16 +--
 .../source-code/sdk-v2/src/loadProjectOpfs.ts |   7 +-
 .../source-code/sdk-v2/src/newProjectOpfs.ts  |   1 +
 8 files changed, 43 insertions(+), 168 deletions(-)
 delete mode 100644 inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index 981f99a2c0..a2e52d1e68 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -407,6 +407,7 @@ export default class InlangBundle extends LitElement {
 								return html`<inlang-variant
 									slot="variant"
 									.variant=${variant}
+									.bundleId=${this.bundle!.id}
 									.message=${message}
 									.inputs=${this._inputs()}
 									.triggerSave=${this._triggerSave}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 29a950f07d..0664755663 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -135,6 +135,9 @@ export default class InlangVariant extends LitElement {
 		`,
 	]
 
+	@property()
+	bundleId: string | undefined
+
 	//props
 	@property()
 	message: NestedMessage | undefined
@@ -359,9 +362,7 @@ export default class InlangVariant extends LitElement {
 							!this.message?.selectors
 								? html`<inlang-selector-configurator
 										.inputs=${this.inputs}
-										.bundleId=${this.message?.bundleId
-											? this.message?.bundleId
-											: "TODO SDK-v2 @nils check how we deal with undefined"}
+										.bundleId=${this.message?.bundleId ? this.message?.bundleId : this.bundleId!}
 										.message=${this.message}
 										.locale=${this.locale}
 										.triggerMessageBundleRefresh=${this.triggerMessageBundleRefresh}
diff --git a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
index 04f7c9a09c..c4c7d06e4a 100644
--- a/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
+++ b/inlang/source-code/bundle-component/src/stories/pattern-editor/inlang-pattern-editor.ts
@@ -37,7 +37,6 @@ export default class InlangPatternEditor extends LitElement {
 
 	// dispatch `change-pattern` event with the new pattern
 	dispatchOnChangePattern(pattern: Pattern) {
-		debugger
 		const onChangePattern = new CustomEvent("change-pattern", {
 			detail: {
 				argument: pattern,
@@ -63,6 +62,17 @@ export default class InlangPatternEditor extends LitElement {
 		}
 	}
 
+	// // update editor when pattern changes
+	// override updated(changedProperties: Map<string | number | symbol, unknown>) {
+	// 	if (
+	// 		changedProperties.has("pattern")
+	// 		// TODO how do wset the pettern?
+	// 	) {
+	// 		// debugger
+	// 		this._setEditorState()
+	// 	}
+	// }
+
 	// set editor state
 	private _setEditorState = () => {
 		this._removeTextContentListener?.()
@@ -115,13 +125,10 @@ export default class InlangPatternEditor extends LitElement {
 			this.editor.setRootElement(contentEditableElement)
 			registerPlainText(this.editor)
 
-			console.log("registering event first time")
 			// listen to text content changes and dispatch `change-pattern` event
 			this._removeTextContentListener = this.editor.registerTextContentListener(
 				(textContent: any) => {
 					// The latest text content of the editor!
-					console.log("textContent:", textContent)
-
 					//check if something changed
 
 					this._patternState = stringToPattern({ text: textContent })
diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
index 26de78fffd..a3b69b7be9 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -5,7 +5,7 @@ import { ProjectSettings2 } from "../../src/types/project-settings.js"
 import { InlangProject } from "../../src/types/project.js"
 import { LintReport } from "../../src/types/lint.js"
 import { LanguageTag } from "../../src/types/language-tag.js"
-import { NestedBundle } from "../../src/index.js"
+import { NestedBundle, NestedMessage, Variant } from "../../src/index.js"
 
 export const MessageBundleComponent = createComponent({
 	tagName: "inlang-bundle",
@@ -18,6 +18,7 @@ export const MessageBundleComponent = createComponent({
 
 		insertVariant: "insert-variant",
 		updateVariant: "update-variant",
+		deleteVariant: "delete-variant",
 		fixLint: "fix-lint",
 	},
 })
@@ -57,17 +58,25 @@ function MessageBundleView({
 		// project.messageBundleCollection?.upsert(messageBundle.detail.argument)
 	}
 
-	const onMesageInsert = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onMesageInsert", event)
+	const onMesageInsert = (event: { detail: { argument: { message: NestedMessage } } }) => {
+		const insertedMessage = event.detail.argument.message
+		const dbPromise = project.message.insert(insertedMessage).execute()
 	}
-	const onMesageUpdate = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onMesageUpdate", event)
+	const onMesageUpdate = (event: { detail: { argument: { message: NestedMessage } } }) => {
+		const updatedMessage = event.detail.argument.message
+		const dbPromise = project.message.update(updatedMessage).execute()
 	}
-	const onVariantInsert = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onVariantInsert", event)
+	const onVariantInsert = (event: { detail: { argument: { variant: Variant } } }) => {
+		const insertedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.insert(insertedVariant).execute()
 	}
-	const onVariantUpdate = (event: { detail: { argument: NestedBundle } }) => {
-		console.log("onVariantUpdate", event)
+	const onVariantUpdate = (event: { detail: { argument: { variant: Variant } } }) => {
+		const updatedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.update(updatedVariant).execute()
+	}
+	const onVariantDelete = (event: { detail: { argument: { variant: Variant } } }) => {
+		const deletedVariant = event.detail.argument.variant
+		const dbPromise = project.variant.delete(deletedVariant).execute()
 	}
 
 	return (
@@ -80,6 +89,7 @@ function MessageBundleView({
 			updateMessage={onMesageUpdate as any}
 			insertVariant={onVariantInsert as any}
 			updateVariant={onVariantUpdate as any}
+			deleteVariant={onVariantDelete as any}
 			filteredLocales={filteredLocales.length > 0 ? filteredLocales : undefined}
 			fixLint={(e: any) => {
 				const { fix, lintReport } = e.detail.argument as {
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx
deleted file mode 100644
index 0874fdf177..0000000000
--- a/inlang/source-code/sdk-v2/sample-app/src/mainViewIframe.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useEffect, useState } from "react"
-import { pluralBundle } from "../../src/v2/mocks/index.js"
-import { randomHumanId } from "../../src/storage/human-id/human-readable-id.js"
-import { createMessage, createMessageBundle } from "../../src/v2/helper.js"
-import { MessageBundleList } from "./messageBundleListReact.js"
-import { type InlangProject2, MessageBundle, getFs, loadProject } from "../../dist/v2/index.js"
-import { SettingsView } from "./settingsView.js"
-import * as Comlink from "comlink"
-
-export const isInIframe = window.self !== window.top
-const fs = getFs(Comlink.windowEndpoint(window.parent))
-const repo = {
-	nodeishFs: fs,
-	getFirstCommitHash: () => "dummy_first_hash",
-} as any
-
-export function MainViewIframe({ projectPath }: { projectPath: string }) {
-	const [currentProject, setCurrentProject] = useState<InlangProject2 | undefined>(undefined)
-
-	useEffect(() => {
-		loadProject({
-			projectPath,
-			repo: repo,
-		}).then((project) => {
-			setCurrentProject(project)
-		})
-	}, [])
-
-	const [currentView, setCurrentView] = useState<"overview" | "messageList" | "settings">(
-		"settings"
-	)
-
-	const insertNMessageBundles = async (project: InlangProject2, n: number) => {
-		const messagesToAdd = [] as MessageBundle[]
-		for (let i = 0; i < n; i++) {
-			const newMessage = createMessage({
-				locale: "de",
-				text: "new",
-			})
-
-			const messageBundle = createMessageBundle({
-				alias: {},
-				messages: [newMessage],
-			})
-			messagesToAdd.push(messageBundle)
-		}
-
-		const messageBundles = project.messageBundleCollection
-		if (n === 1) {
-			const temp = structuredClone(pluralBundle)
-			temp.id = randomHumanId()
-			temp.messages[0].id = randomHumanId()
-			temp.messages[1].id = randomHumanId()
-
-			await messageBundles.insert(temp as any)
-			return
-		}
-
-		console.time("inserting " + n + " messageBundles")
-
-		await project.messageBundleCollection.bulkInsert(messagesToAdd)
-		console.timeEnd("inserting " + n + " messageBundles")
-	}
-
-	return (
-		<div>
-			<h3>{isInIframe ? "inIframe" : "Fink 2"}</h3>
-			<div>
-				{currentProject && (
-					<>
-						<br />
-						<h2>Actions</h2>
-						Add Message Bundles
-						<button
-							style={{ marginLeft: 10 }}
-							id="btnAdd1"
-							onClick={() => {
-								insertNMessageBundles(currentProject, 1)
-							}}
-						>
-							+ 1{" "}
-						</button>
-						<button
-							id="btnAdd100"
-							onClick={() => {
-								insertNMessageBundles(currentProject, 100)
-							}}
-						>
-							+ 100{" "}
-						</button>
-						<button
-							id="btnAdd1000"
-							onClick={() => {
-								insertNMessageBundles(currentProject, 1000)
-							}}
-						>
-							+ 1000{" "}
-						</button>
-						<br />
-						<div className="tab-container">
-							<div
-								className={`tab ${currentView === "overview" ? "active" : ""}`}
-								onClick={() => setCurrentView("overview")}
-							>
-								Overview
-							</div>
-							<div
-								className={`tab ${currentView === "messageList" ? "active" : ""}`}
-								onClick={() => setCurrentView("messageList")}
-							>
-								MessageList
-							</div>
-							<div
-								className={`tab ${currentView === "settings" ? "active" : ""}`}
-								onClick={() => setCurrentView("settings")}
-							>
-								Settings
-							</div>
-						</div>
-						{currentView === "settings" && (
-							<SettingsView
-								project={{
-									projectPath: projectPath,
-									inlangProject: currentProject,
-								}}
-							></SettingsView>
-						)}
-						{currentView === "messageList" && (
-							<MessageBundleList project={currentProject}></MessageBundleList>
-						)}
-					</>
-				)}
-			</div>
-		</div>
-	)
-}
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
index 8f0d87f254..cedf9d8347 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
@@ -21,7 +21,7 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	const [currentListBundles, setCrurrentListBundles] = useState([] as NestedBundle[])
 
 	const [lintReports, setLintReports] = useState([] as LintReport[])
-	const [projectSettings, setProjectSettings] = useState<ProjectSettings2 | undefined>(undefined)
+	const [projectSettings, setProjectSettings] = useState<ProjectSettings2>(project.settings.get())
 	const [messageBundleCollection, setMessageBundleCollection] = useState<any>()
 
 	const [activeLocales, setActiveLocales] = useState<LanguageTag[]>([])
@@ -38,19 +38,9 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	}, [textSearch, activeLocales])
 
 	useEffect(() => {
-		let inlangProject: InlangProject | undefined = undefined
-
-		inlangProject = project
-
-		// inlangProject.settings.subscribe({
-		// 	next: (settings) => {
-		// 		setProjectSettings(settings)
-		// 	},
-		// })
-		setProjectSettings(inlangProject.settings.get())
-
+		const settingsSubscription = project.settings.subscribe(setProjectSettings)
 		return () => {
-			// unsubscribe inlangProject?.settings()
+			settingsSubscription.unsubscribe()
 		}
 	}, [])
 
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index b7fd917ccb..9c4542c170 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -140,7 +140,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			set: async (settings: ProjectSettings2) => {
 				// TODO SDK-v2 implement
 			},
-			subscribe: projectSettings$.asObservable().subscribe,
+			subscribe: () => projectSettings$.subscribe(),
 		},
 		bundle: {
 			select: db.selectFrom("bundle"),
@@ -176,6 +176,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			update: (message: Partial<Message> & { id: string }) => {
 				const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete messageProperties.id
+				delete messageProperties.variants
 				if (message.declarations) {
 					messageProperties.declarations = json(message.declarations) as any
 				}
@@ -204,11 +205,11 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 				const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete variantProperties.id
 				if (variant.match) {
-					variantProperties.declarations = json(variant.match) as any
+					variantProperties.match = json(variant.match) as any
 				}
 				if (variant.pattern) {
 					// TODO SDK-v2 shall we structure clone here?
-					variantProperties.selectors = json(variant.pattern) as any
+					variantProperties.pattern = json(variant.pattern) as any
 				}
 
 				return db.updateTable("variant").set(variantProperties).where("variant.id", "=", variant.id)
diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
index 6ceaa2c277..d4896fd169 100644
--- a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
@@ -29,6 +29,7 @@ export async function newProjectOpfs(args: {
 	await writableStream.close()
 
 	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
+	await projectDir.removeEntry("inlang.sqlite")
 	const { sql, destroy } = new SQLocal(sqliteDbFilePath)
 
 	await sql`

From a5eb2aa92359629a72ea8057ff3165e375f1f18a Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Wed, 24 Jul 2024 14:36:53 +0200
Subject: [PATCH 11/35] cleanup

---
 .../stories/inlang-selector-configurator.ts   | 23 ++++++++++++++---
 .../sdk-v2/sample-app/src/mainView.tsx        | 12 +++++++++
 .../source-code/sdk-v2/src/loadProjectOpfs.ts | 25 +++++++++++++++++--
 .../source-code/sdk-v2/src/newProjectOpfs.ts  |  2 +-
 inlang/source-code/sdk-v2/src/settings.ts     |  2 +-
 inlang/source-code/sdk-v2/src/types/lint.ts   |  6 ++---
 .../sdk-v2/src/types/project-settings.ts      |  2 +-
 7 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
index fdf88b60ab..1d4c41def1 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
@@ -225,6 +225,19 @@ export default class InlangSelectorConfigurator extends LitElement {
 		this.dispatchEvent(onInsertVariant)
 	}
 
+	dispatchOnUpdateVariant(variant: Variant) {
+		const onUpdateVariant = new CustomEvent("update-variant", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				argument: {
+					variant,
+				},
+			},
+		})
+		this.dispatchEvent(onUpdateVariant)
+	}
+
 	private _getPluralCategories = (): string[] | undefined => {
 		return this.locale
 			? [...new Intl.PluralRules(this.locale).resolvedOptions().pluralCategories, "*"]
@@ -299,8 +312,8 @@ export default class InlangSelectorConfigurator extends LitElement {
 					},
 				})
 
-				const updatedVariant = structuredClone(this.message.variants)
-				this.dispatchOnUpdateMessage(this.message, updatedVariant)
+				const updatedVariants = structuredClone(this.message.variants)
+				this.dispatchOnUpdateMessage(this.message, updatedVariants)
 
 				this._addVariants({
 					message: this.message,
@@ -310,11 +323,15 @@ export default class InlangSelectorConfigurator extends LitElement {
 
 				// only inserted variants should be dispatched -> show filter
 				const insertedVariants = this.message.variants.filter(
-					(variant) => !updatedVariant.find((v) => v.id === variant.id)
+					(variant) => !updatedVariants.find((v) => v.id === variant.id)
 				)
 				for (const variant of insertedVariants) {
 					this.dispatchOnInsertVariant(variant)
 				}
+
+				for (const updatedVariant of updatedVariants) {
+					this.dispatchOnUpdateVariant(updatedVariant)
+				}
 			}
 
 			this.triggerSave()
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
index 08a559590a..33875584f7 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
@@ -90,7 +90,19 @@ export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
 					></SettingsView>
 				)} */}
 				{currentView === "messageList" && (
+					<>
+{/* 
+	We need to filter:
+	- languages (languageTag) message.locale in (...languageTag)
+	- lint reports (lint id) reports.lintId in (...reportIds)
+	- bundles (bundle id) bundles.id in (...bundleIds)
+	- 
+	
+	 and search by 					
+						<!-- search/filter component --> 
+*/}
 					<MessageBundleList project={inlangProject}></MessageBundleList>
+					</>
 				)}
 			</div>
 		</div>
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 9c4542c170..513754d2da 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -29,6 +29,7 @@ import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
 import { resolveModules } from "./resolveModules2.js"
 import type { InstalledLintRule, ProjectSettings2 } from "./types/project-settings.js"
 import type { InlangProject } from "./types/project.js"
+import type { LanguageTag } from "@inlang/plugin"
 
 // extend the SQLocalKysely class to expose a rawSql function
 // needed for non parametrized queries
@@ -60,9 +61,10 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 		settingsFileContent: settingsFileContent,
 	})
 
-	// TODO SDK-v2 listen to changes on the settings file - how do multiple instance of a project get informed about changes?
+	// TODO SDK-v2 LIX listen to changes on the settings file - how do multiple instance of a project get informed about changes?
 	const projectSettings$ = new BehaviorSubject(projectSettings)
 
+	// TODO SDK-v2 LIX how to deal with plugins we want to load?
 	const _import = importSequence(
 		createDebugImport({
 			"sdk-dev:lint-rule.js": lintRule,
@@ -90,7 +92,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 		.pipe(
 			switchMap(([modules]) => {
 				lifecycle$.next("resolvingModules")
-				// TODO SDK2 handle module load errors
+				// TODO SDK-v2 handle module load errors
 				const rules = (modules as any).messageBundleLintRules.map(
 					(rule: any) =>
 						({
@@ -142,7 +144,26 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			},
 			subscribe: () => projectSettings$.subscribe(),
 		},
+		
 		bundle: {
+			/*
+			search: (args: { lintRulesIds: string[], locales: LanguageTag[], bundleIds: string[], text: string }): string[] {
+				const query = // my fancy search query
+				return {
+					result: async () => {
+
+					}
+					subscribe: (cb) => {
+						
+						return {
+							unsubscribe: () => {
+
+							}
+						}
+					}
+				}
+			},
+			*/
 			select: db.selectFrom("bundle"),
 			insert: (bundle: Bundle) => {
 				return db.insertInto("bundle").values({
diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
index d4896fd169..1cbe00969d 100644
--- a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
@@ -29,7 +29,7 @@ export async function newProjectOpfs(args: {
 	await writableStream.close()
 
 	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
-	await projectDir.removeEntry("inlang.sqlite")
+	await projectDir.removeEntry("sqliteDbFilePath")
 	const { sql, destroy } = new SQLocal(sqliteDbFilePath)
 
 	await sql`
diff --git a/inlang/source-code/sdk-v2/src/settings.ts b/inlang/source-code/sdk-v2/src/settings.ts
index cfaa36448b..6f4aaf2a0e 100644
--- a/inlang/source-code/sdk-v2/src/settings.ts
+++ b/inlang/source-code/sdk-v2/src/settings.ts
@@ -60,6 +60,6 @@ const parseSettings = (settings: unknown) => {
 		})
 	}
 
-	// TODO SDK2 check migration (the new project settings changes to locales and baseLocale!)
+	// TODO SDK-v2 check migration (the new project settings changes to locales and baseLocale!)
 	return settings as unknown as ProjectSettings2
 }
diff --git a/inlang/source-code/sdk-v2/src/types/lint.ts b/inlang/source-code/sdk-v2/src/types/lint.ts
index c38d136146..d31f80aed4 100644
--- a/inlang/source-code/sdk-v2/src/types/lint.ts
+++ b/inlang/source-code/sdk-v2/src/types/lint.ts
@@ -51,7 +51,7 @@ export const MessageLintLevel = _MessageLintRuleLevel
  * Lint configuration for a given bundle/message/variant
  */
 export const LintConfig = Type.Object({
-	// TODO SDK2 Rename to LintSettings
+	// TODO SDK-v2 Rename to LintSettings
 	id: Type.Optional(Type.String({ description: "id of the lint config entry" })),
 	ruleId: _MessageBundleLintRuleId,
 	// TODO disable this for now - to only reach feature parity for now - this is purly experimental
@@ -75,7 +75,7 @@ const LintFix = Type.Object({
 export const LintReport = Type.Object({
 	ruleId: Type.String(),
 
-	// TODO SDK2 check if we should provide a lint target
+	// TODO SDK-v2 check if we should provide a lint target
 	target: Type.Object({
 		bundleId: Type.String(),
 		messageId: Type.Optional(Type.String()),
@@ -95,7 +95,7 @@ export const LintReport = Type.Object({
 export type LintReport<Fixes extends LintFix[] = LintFix[]> = {
 	ruleId: MessageBundleLintRule["id"]
 
-	// TODO SDK2 check if we should provide a lint target
+	// TODO SDK-v2 check if we should provide a lint target
 	target: {
 		bundleId: string
 		messageId: string | undefined
diff --git a/inlang/source-code/sdk-v2/src/types/project-settings.ts b/inlang/source-code/sdk-v2/src/types/project-settings.ts
index dec7e48321..aed28dffbe 100644
--- a/inlang/source-code/sdk-v2/src/types/project-settings.ts
+++ b/inlang/source-code/sdk-v2/src/types/project-settings.ts
@@ -8,7 +8,7 @@ import type { Plugin2 } from "./plugin.js"
  * ---------------- Specific Language Tag field meta information ----------------
  */
 
-// TODO SDK2 naming?
+// TODO SDK-v2 naming?
 const BaseLocale = LanguageTag
 BaseLocale.title = "Source language tag"
 BaseLocale.description =

From 2cd68ce73bd0334f56174e3a84a7147d9d7565f3 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Wed, 24 Jul 2024 14:53:51 +0200
Subject: [PATCH 12/35] fixes new project call

---
 inlang/source-code/sdk-v2/src/newProjectOpfs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
index 1cbe00969d..d4896fd169 100644
--- a/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/newProjectOpfs.ts
@@ -29,7 +29,7 @@ export async function newProjectOpfs(args: {
 	await writableStream.close()
 
 	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
-	await projectDir.removeEntry("sqliteDbFilePath")
+	await projectDir.removeEntry("inlang.sqlite")
 	const { sql, destroy } = new SQLocal(sqliteDbFilePath)
 
 	await sql`

From 97a8492fc1987c046495605fb48c507c61e04ab0 Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Wed, 24 Jul 2024 15:43:18 +0200
Subject: [PATCH 13/35] adds polling to list messages query

---
 .../sample-app/src/MessageBundleView.tsx      | 12 +--
 .../sample-app/src/messageBundleListReact.tsx | 74 ++++++-------------
 2 files changed, 22 insertions(+), 64 deletions(-)

diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
index a3b69b7be9..1d08c65f0b 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -29,7 +29,7 @@ type MessageBundleViewProps = {
 	project: InlangProject
 	filteredLocales: LanguageTag[]
 }
-function MessageBundleView({
+export function MessageBundleView({
 	bundle,
 	// reports,
 	projectSettings,
@@ -38,7 +38,6 @@ function MessageBundleView({
 }: MessageBundleViewProps) {
 	const [currentBundle, setBundle] = useState(bundle)
 
-	console.log("render MessageBundle View")
 	useEffect(() => {
 		// Assume bundle$ is an RxJS Subject or Observable
 		// const subscription = bundle.$.subscribe((updatedBundle) => {
@@ -102,12 +101,3 @@ function MessageBundleView({
 		/>
 	)
 }
-// Custom comparison function to compare the logical contents of the bundle
-const areEqual = (prevProps: MessageBundleViewProps, nextProps: MessageBundleViewProps) => {
-	console.log("check")
-	// Assuming bundle has an id property to identify the logical record
-	return (
-		prevProps.bundle.id === nextProps.bundle.id && true // deepEqual(prevProps.filteredLocales, nextProps.filteredLocales)
-	)
-}
-export const MessageBundleViewMemoed = React.memo(MessageBundleView, areEqual)
diff --git a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
index cedf9d8347..c561a6c8d1 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/messageBundleListReact.tsx
@@ -8,7 +8,7 @@ import {
 	NestedBundle,
 } from "../../src/types/index.js"
 import { VariableSizeList as List } from "react-window"
-import { MessageBundleViewMemoed } from "./MessageBundleView.js"
+import { MessageBundleView, MessageBundleViewMemoed } from "./MessageBundleView.js"
 import { MessageBundleListSummary } from "./messageBundleListSummary.js"
 import { populateMessages } from "../../src/loadProjectOpfs.js"
 
@@ -29,12 +29,20 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	const [textSearch, setTextSearch] = useState("")
 
 	useEffect(() => {
-		// TODO SDK-v2 setup query that filters by active language, reported lints, bundle ids and searches text within the filtered variants
 		populateMessages(project.bundle.select)
 			.execute()
 			.then((freshBundles: any) => {
 				setCrurrentListBundles(freshBundles)
 			})
+		// TODO SDK-v2 setup query that filters by active language, reported lints, bundle ids and searches text within the filtered variants
+		const intervalId = setInterval(() => {
+			populateMessages(project.bundle.select)
+				.execute()
+				.then((freshBundles: any) => {
+					setCrurrentListBundles(freshBundles)
+				})
+		}, 1000)
+		return () => clearInterval(intervalId)
 	}, [textSearch, activeLocales])
 
 	useEffect(() => {
@@ -47,48 +55,6 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 	const listRef = useRef<List>(null)
 	const itemSizeMap = useRef<Record<number, number>>({})
 
-	const getItemSize = (index: number) => {
-		// Default to a standard size if not yet measured
-		return itemSizeMap.current[index] || 100
-	}
-
-	const setItemSize = useCallback((index: number, size: number) => {
-		if (size !== 0 && listRef.current && itemSizeMap.current[index] !== size) {
-			itemSizeMap.current[index] = size
-
-			listRef.current.resetAfterIndex(index)
-		}
-	}, [])
-
-	const renderRow = ({ index, style }) => {
-		const bundle = currentListBundles[index]
-
-		// Use a ref callback to measure the component's height
-		const measureRef = (el: HTMLDivElement | null) => {
-			if (el) {
-				setTimeout(() => {
-					const height = el.getBoundingClientRect().height
-					// console.log("size for index:" + index + " " + height)
-					setItemSize(index, height)
-				}, 10)
-			}
-		}
-
-		return (
-			<div style={style}>
-				<div ref={measureRef}>
-					<MessageBundleViewMemoed
-						key={bundle.id}
-						bundle={bundle}
-						projectSettings={projectSettings!}
-						filteredLocales={activeLocales}
-						project={project}
-					/>
-				</div>
-			</div>
-		)
-	}
-
 	return (
 		<div>
 			<div>
@@ -114,15 +80,17 @@ export function MessageBundleList({ project }: MessageBundleListProps) {
 						activeLanguages={activeLocales}
 						onActiveLanguagesChange={(actives) => setActiveLocales(actives)}
 					/>
-					<List
-						height={900} // Adjust based on your requirements
-						itemCount={currentListBundles.length}
-						itemSize={getItemSize}
-						width={"100%"}
-						ref={listRef}
-					>
-						{renderRow}
-					</List>
+					{currentListBundles.map((bundle) => {
+						return (
+							<MessageBundleView
+								key={bundle.id}
+								bundle={bundle}
+								projectSettings={projectSettings!}
+								filteredLocales={activeLocales}
+								project={project}
+							/>
+						)
+					})}
 				</>
 			)}
 			{!projectSettings && <>loading</>}

From d22696416729f31c115a346a2172ab220b531a57 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Thu, 25 Jul 2024 15:19:25 +0200
Subject: [PATCH 14/35] feat: add new type for match & adjust component

---
 .../src/helper/crud/selector/add.ts           |   8 +-
 .../src/helper/crud/selector/delete.ts        |   6 +-
 .../src/helper/crud/variant/delete.test.ts    |   4 +-
 .../helper/crud/variant/isCatchAll.test.ts    |  18 +-
 .../src/helper/crud/variant/isCatchAll.ts     |   2 +-
 .../src/helper/crud/variant/sortAll.test.ts   | 197 ++++++++--
 .../src/helper/crud/variant/sortAll.ts        |  27 +-
 .../helper/crud/variant/updateMatch.test.ts   |  37 +-
 .../src/helper/crud/variant/updateMatch.ts    |  12 +-
 .../src/helper/crud/variant/upsert.test.ts    |  13 +-
 .../src/mock/messageBundle.ts                 |   4 +-
 .../src/stories/inlang-bundle.ts              |   7 +-
 .../src/stories/inlang-message.ts             |   8 +-
 .../stories/inlang-selector-configurator.ts   |  20 +-
 .../src/stories/inlang-variant.ts             |  28 +-
 .../sdk-v2/sample-app/src/PageView.tsx        |   2 +-
 .../sdk-v2/sample-app/src/mainView.tsx        |   4 +-
 .../sdk-v2/src/dev-modules/missingCatchall.ts |   4 +-
 inlang/source-code/sdk-v2/src/helper.ts       |  15 +-
 .../source-code/sdk-v2/src/mock/mockhelper.ts |  18 +-
 .../sdk-v2/src/mock/plural/bundle.ts          |  12 +-
 inlang/source-code/sdk-v2/src/types/schema.ts |   2 +-
 .../settings-component/package.json           |   3 +-
 pnpm-lock.yaml                                | 367 ++++++++++++++++--
 24 files changed, 649 insertions(+), 169 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
index 9bc5dfe3a7..4cf1f5b6ea 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/add.ts
@@ -14,11 +14,15 @@ const addSelector = (props: { message: NestedMessage; selector: Expression }) =>
 	props.message.selectors.push(props.selector)
 	if (props.message.variants.length !== 0) {
 		for (const variant of props.message.variants) {
-			variant.match.push("*")
+			variant.match[props.selector.arg.name] = "*"
 		}
 	} else {
 		props.message.variants.push(
-			createVariant({ messageId: props.message.id, match: ["*"], text: "" })
+			createVariant({
+				messageId: props.message.id,
+				match: { [props.selector.arg.name]: "*" },
+				text: "",
+			})
 		)
 	}
 }
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
index 4ec56f1e26..a105dc512f 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
@@ -13,7 +13,11 @@ import type { NestedMessage } from "@inlang/sdk-v2"
 const deleteSelector = (props: { message: NestedMessage; index: number }) => {
 	props.message.selectors.splice(props.index, 1)
 	for (const variant of props.message.variants) {
-		variant.match.splice(props.index, 1)
+		for (const name in Object.keys(variant.match)) {
+			if (name === props.message.selectors[props.index]!.arg.name) {
+				delete variant.match[name]
+			}
+		}
 	}
 }
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
index 882b9b9aba..daac826b5a 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/delete.test.ts
@@ -12,8 +12,8 @@ describe("deleteVariant", () => {
 			selectors: [],
 			declarations: [],
 			variants: [
-				createVariant({ messageId, id: "a", match: ["*"] }),
-				createVariant({ messageId, id: "b", match: ["one"] }),
+				createVariant({ messageId, id: "a", match: { count: "*" } }),
+				createVariant({ messageId, id: "b", match: { count: "one" } }),
 			],
 		}
 
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
index 3a715c90b5..af32dfbcfd 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.test.ts
@@ -5,21 +5,29 @@ import variantIsCatchAll from "./isCatchAll.js"
 describe("isCatchAll", () => {
 	it("Should return true if variant is catchAll", () => {
 		expect(
-			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*"] }) })
+			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: { count: "*" } }) })
 		).toBe(true)
 		expect(
-			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*", "*"] }) })
+			variantIsCatchAll({
+				variant: createVariant({ messageId: "testId", match: { count: "*", count2: "*" } }),
+			})
 		).toBe(true)
 	})
 	it("Should return false if variant is not catchAll", () => {
 		expect(
-			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["one"] }) })
+			variantIsCatchAll({
+				variant: createVariant({ messageId: "testId", match: { count: "one" } }),
+			})
 		).toBe(false)
 		expect(
-			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["*", "one"] }) })
+			variantIsCatchAll({
+				variant: createVariant({ messageId: "testId", match: { count: "*", count2: "one" } }),
+			})
 		).toBe(false)
 		expect(
-			variantIsCatchAll({ variant: createVariant({ messageId: "testId", match: ["one", "*"] }) })
+			variantIsCatchAll({
+				variant: createVariant({ messageId: "testId", match: { count: "one", count2: "*" } }),
+			})
 		).toBe(false)
 	})
 })
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
index b4f205dbea..23c19fee66 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/isCatchAll.ts
@@ -6,7 +6,7 @@ import type { Variant } from "@inlang/sdk-v2"
  * @returns True if the variant has a catch-all match.
  */
 const variantIsCatchAll = (props: { variant: Variant }): boolean => {
-	if (props.variant.match.filter((match) => match !== "*").length === 0) {
+	if (Object.values(props.variant.match).filter((match) => match !== "*").length === 0) {
 		return true
 	} else {
 		return false
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
index 0ebad80454..abdb4bb08e 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.test.ts
@@ -1,66 +1,213 @@
 import { describe, expect, it } from "vitest"
 import sortAllVariants from "./sortAll.js"
-import { createVariant, type Variant } from "@inlang/sdk-v2"
+import { createVariant, type Expression, type Variant } from "@inlang/sdk-v2"
 
 describe("sortAllVariants", () => {
 	it("should sort variants based on matches (desc-alphabetically)", () => {
 		const variants: Variant[] = [
-			createVariant({ messageId: "testId", id: "1", match: ["a"] }),
-			createVariant({ messageId: "testId", id: "2", match: ["b"] }),
-			createVariant({ messageId: "testId", id: "3", match: ["c"] }),
+			createVariant({ messageId: "testId", id: "1", match: { letter: "a" } }),
+			createVariant({ messageId: "testId", id: "2", match: { letter: "b" } }),
+			createVariant({ messageId: "testId", id: "3", match: { letter: "c" } }),
 		]
 		const ignoreVariantIds: string[] = []
+		const selectors: Expression[] = [
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+		]
 
-		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds, selectors })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ messageId: "testId", id: "3", match: ["c"] }),
-			createVariant({ messageId: "testId", id: "2", match: ["b"] }),
-			createVariant({ messageId: "testId", id: "1", match: ["a"] }),
+			createVariant({ messageId: "testId", id: "3", match: { letter: "c" } }),
+			createVariant({ messageId: "testId", id: "2", match: { letter: "b" } }),
+			createVariant({ messageId: "testId", id: "1", match: { letter: "a" } }),
 		])
 	})
 
 	it("should sort variants based on matches (desc-alphabetically) complex", () => {
 		const variants: Variant[] = [
-			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
-			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
-			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
+			createVariant({
+				messageId: "testId",
+				id: "1",
+				match: { letter1: "a", letter2: "b", letter3: "c" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "2",
+				match: { letter1: "b", letter2: "b", letter3: "b" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "3",
+				match: { letter1: "b", letter2: "a", letter3: "a" },
+			}),
 		]
 		const ignoreVariantIds: string[] = []
+		const selectors: Expression[] = [
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter1",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter2",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter3",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+		]
 
-		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds, selectors })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
-			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
-			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
+			createVariant({
+				messageId: "testId",
+				id: "2",
+				match: { letter1: "b", letter2: "b", letter3: "b" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "3",
+				match: { letter1: "b", letter2: "a", letter3: "a" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "1",
+				match: { letter1: "a", letter2: "b", letter3: "c" },
+			}),
 		])
 	})
 
 	it("should sort variants based on matches (desc-alphabetically) with ignoreVariantIds", () => {
 		const variants: Variant[] = [
-			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
-			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
-			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
-			createVariant({ messageId: "testId", id: "4", match: ["z", "z", "z"] }),
+			createVariant({
+				messageId: "testId",
+				id: "1",
+				match: { letter1: "a", letter2: "b", letter3: "c" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "2",
+				match: { letter1: "b", letter2: "b", letter3: "b" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "3",
+				match: { letter1: "b", letter2: "a", letter3: "a" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "4",
+				match: { letter1: "z", letter2: "z", letter3: "z" },
+			}),
 		]
 		const ignoreVariantIds: string[] = ["4"]
+		const selectors: Expression[] = [
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter1",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter2",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+			{
+				type: "expression",
+				arg: {
+					type: "variable",
+					name: "letter3",
+				},
+				annotation: {
+					type: "function",
+					name: "string",
+					options: [],
+				},
+			},
+		]
 
-		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds, selectors })
 
 		expect(sortedVariants).toEqual([
-			createVariant({ messageId: "testId", id: "2", match: ["b", "b", "b"] }),
-			createVariant({ messageId: "testId", id: "3", match: ["b", "a", "a"] }),
-			createVariant({ messageId: "testId", id: "1", match: ["a", "b", "c"] }),
-			createVariant({ messageId: "testId", id: "4", match: ["z", "z", "z"] }),
+			createVariant({
+				messageId: "testId",
+				id: "2",
+				match: { letter1: "b", letter2: "b", letter3: "b" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "3",
+				match: { letter1: "b", letter2: "a", letter3: "a" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "1",
+				match: { letter1: "a", letter2: "b", letter3: "c" },
+			}),
+			createVariant({
+				messageId: "testId",
+				id: "4",
+				match: { letter1: "z", letter2: "z", letter3: "z" },
+			}),
 		])
 	})
 
 	it("should handle empty variants array", () => {
 		const variants: Variant[] = []
 		const ignoreVariantIds: string[] = []
+		const selectors: Expression[] = []
 
-		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds })
+		const sortedVariants = sortAllVariants({ variants, ignoreVariantIds, selectors })
 
 		expect(sortedVariants).toEqual([])
 	})
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
index 7f02a8ff1b..194e315d3f 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/sortAll.ts
@@ -1,4 +1,4 @@
-import { type Variant } from "@inlang/sdk-v2"
+import { type Expression, type Variant } from "@inlang/sdk-v2"
 
 /**
  * Sort all variants by their match values.
@@ -7,10 +7,14 @@ import { type Variant } from "@inlang/sdk-v2"
  * @param props.ignoreVariantIds The ids of the variants to ignore in the sorting. These variants will be placed at the end of the list.
  * @returns The sorted variants.
  */
-const sortAllVariants = (props: { variants: Variant[]; ignoreVariantIds: string[] }): Variant[] => {
+const sortAllVariants = (props: {
+	variants: Variant[]
+	ignoreVariantIds: string[]
+	selectors: Expression[]
+}): Variant[] => {
 	const sortedVariants: Variant[] = structuredClone(props.variants)
 	sortedVariants.sort((a, b) => {
-		return compareValues(a, b, 0, props.ignoreVariantIds)
+		return compareValues(a, b, 0, props.ignoreVariantIds, props.selectors)
 	})
 	return sortedVariants
 }
@@ -19,16 +23,21 @@ const compareValues = (
 	a: Variant,
 	b: Variant,
 	index: number,
-	ignoreVariantIds: string[]
+	ignoreVariantIds: string[],
+	selectors: Expression[]
 ): number => {
-	if (a.match[index] && b.match[index]) {
+	const selectorName = selectors[index]?.arg.name
+	if (!selectorName) return 0
+
+	if (a.match[selectorName] && b.match[selectorName]) {
 		if (ignoreVariantIds.includes(a.id)) return 1
-		if (a.match[index]! < b.match[index]!) return 1
-		if (a.match[index]! > b.match[index]!) return -1
+		if (a.match[selectorName]! < b.match[selectorName]!) return 1
+		if (a.match[selectorName]! > b.match[selectorName]!) return -1
 	}
-	if (a.match.length === index + 1) return 0
+
+	if (Object.values(a.match).length === index + 1) return 0
 	if (index > 10) return 0
-	return compareValues(a, b, index + 1, ignoreVariantIds)
+	return compareValues(a, b, index + 1, ignoreVariantIds, selectors)
 }
 
 export default sortAllVariants
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
index f86d5b34db..990b2b3c72 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.test.ts
@@ -7,44 +7,29 @@ describe("updateMatch", () => {
 		const variant: Variant = createVariant({
 			messageId: "testId",
 			id: "test-id",
-			match: ["apple", "banana", "cherry"],
+			match: { selector1: "apple", selector2: "banana", selector3: "cherry" },
 		})
-		const matchIndex = 1
+		const selectorName = "selector2"
 		const value = "orange"
 
-		updateMatch({ variant, matchIndex, value })
+		updateMatch({ variant, selectorName, value })
 
-		expect(variant.match[matchIndex]).toBe(value)
-		expect(variant.match.length).toBe(3)
+		expect(variant.match[selectorName]).toBe(value)
+		expect(Object.keys(variant.match).length).toBe(3)
 	})
 
-	it("should not update the value if match index is out of range", () => {
+	it("should not update the value if match name doesn't exist", () => {
 		const variant: Variant = createVariant({
 			messageId: "testId",
 			id: "test-id",
-			match: ["apple", "banana", "cherry"],
+			match: { selector1: "apple", selector2: "banana", selector3: "cherry" },
 		})
-		const matchIndex = 3
+		const selectorName = "selector4"
 		const value = "orange"
 
-		updateMatch({ variant, matchIndex, value })
+		updateMatch({ variant, selectorName, value })
 
-		expect(variant.match[matchIndex]).toBeUndefined()
-		expect(variant.match.length).toBe(3)
-	})
-
-	it("should not update the value if match index is negative", () => {
-		const variant: Variant = createVariant({
-			messageId: "testId",
-			id: "test-id",
-			match: ["apple", "banana", "cherry"],
-		})
-		const matchIndex = -1
-		const value = "orange"
-
-		updateMatch({ variant, matchIndex, value })
-
-		expect(variant.match[matchIndex]).toBeUndefined()
-		expect(variant.match.length).toBe(3)
+		expect(variant.match[selectorName]).toBeUndefined()
+		expect(Object.keys(variant.match).length).toBe(3)
 	})
 })
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
index 47f211a51c..143e752fd5 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/updateMatch.ts
@@ -1,4 +1,4 @@
-import type { Variant } from "@inlang/sdk-v2"
+import type { Expression, Variant } from "@inlang/sdk-v2"
 
 /**
  * Update the match at the specified index with the new value.
@@ -8,10 +8,12 @@ import type { Variant } from "@inlang/sdk-v2"
  * @param props.value The new value to set at the match index.
  */
 
-const updateMatch = (props: { variant: Variant; matchIndex: number; value: string }) => {
-	// update the match at index matchIndex with value (mutates variant)
-	if (props.matchIndex < 0 || props.matchIndex >= props.variant.match.length) return
-	props.variant.match[props.matchIndex] = props.value
+const updateMatch = (props: { variant: Variant; selectorName: string; value: string }) => {
+	// if matchName is not in variant, return
+	if (!props.variant.match[props.selectorName]) return
+
+	// update the match with value (mutates variant)
+	props.variant.match[props.selectorName] = props.value
 }
 
 export default updateMatch
diff --git a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
index 1184f7deec..fbe7e1bcae 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/variant/upsert.test.ts
@@ -18,7 +18,7 @@ describe("upsertVariant", () => {
 						createVariant({
 							messageId: "testId",
 							id: "test_upsertVariant_id",
-							match: ["*"],
+							match: { count: "*" },
 							text: "Hello World",
 						}),
 					],
@@ -36,7 +36,7 @@ describe("upsertVariant", () => {
 			variant: {
 				messageId: bundle.messages[0]!.id,
 				id: "test_upsertVariant_id",
-				match: ["*"],
+				match: { count: "*" },
 				pattern: [{ type: "text", value: "Hello Universe" }],
 			},
 		})
@@ -51,7 +51,12 @@ describe("upsertVariant", () => {
 		const bundle = createBundle({
 			id: "bundle-id",
 			messages: [
-				createMessage({ bundleId: "bundle-id", locale: "en", text: "Hello World", match: ["*"] }),
+				createMessage({
+					bundleId: "bundle-id",
+					locale: "en",
+					text: "Hello World",
+					match: { count: "*" },
+				}),
 			],
 		})
 
@@ -65,7 +70,7 @@ describe("upsertVariant", () => {
 			variant: {
 				messageId: bundle.messages[0]!.id,
 				id: "test_upsertVariant_id",
-				match: ["one"],
+				match: { count: "one" },
 				pattern: [{ type: "text", value: "Hello Universe" }],
 			},
 		})
diff --git a/inlang/source-code/bundle-component/src/mock/messageBundle.ts b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
index a7df8948fc..1e8a268cc9 100644
--- a/inlang/source-code/bundle-component/src/mock/messageBundle.ts
+++ b/inlang/source-code/bundle-component/src/mock/messageBundle.ts
@@ -13,7 +13,7 @@ export const bundleWithoutSelectors: NestedBundle = {
 				{
 					messageId: "message-id-en",
 					id: "variant-id-en-*",
-					match: [],
+					match: {},
 					pattern: [{ type: "text", value: "{count} new messages" }],
 				},
 			],
@@ -28,7 +28,7 @@ export const bundleWithoutSelectors: NestedBundle = {
 				{
 					messageId: "message-id-de",
 					id: "variant-id-de-*",
-					match: [],
+					match: {},
 					pattern: [{ type: "text", value: "{count} neue Nachrichten" }],
 				},
 			],
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index a2e52d1e68..918f177022 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -264,7 +264,7 @@ export default class InlangBundle extends LitElement {
 	): NestedMessage => {
 		if (message) {
 			if (message.variants.length === 0) {
-				message.variants.push(createVariant({ messageId: message.id, match: [] }))
+				message.variants.push(createVariant({ messageId: message.id, match: {} }))
 			}
 			return message
 		} else {
@@ -295,7 +295,7 @@ export default class InlangBundle extends LitElement {
 		} else {
 			if (message) {
 				const newVariant = {
-					...createVariant({ messageId: message!.id, match: [] }),
+					...createVariant({ messageId: message!.id, match: {} }),
 					pattern: newPattern,
 				}
 
@@ -313,7 +313,7 @@ export default class InlangBundle extends LitElement {
 				})
 
 				const newVariant = {
-					...createVariant({ messageId: messageWithoutVariant!.id, match: [] }),
+					...createVariant({ messageId: messageWithoutVariant!.id, match: {} }),
 					pattern: newPattern,
 				}
 
@@ -402,6 +402,7 @@ export default class InlangBundle extends LitElement {
 									locale
 								).variants,
 								ignoreVariantIds: this._freshlyAddedVariants,
+								selectors: message?.selectors || [],
 							})?.map((fakevariant) => {
 								const variant = message?.variants.find((v) => v.id === fakevariant.id)
 								return html`<inlang-variant
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
index 88bbc1e139..6c4ebf4617 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-message.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -354,7 +354,13 @@ export default class InlangMessage extends LitElement {
 									const variant = createVariant({
 										messageId: this.message!.id,
 										// combine the matches that are already present with the new category -> like a matrix
-										match: this.message?.selectors.map(() => "null"),
+										match: (() => {
+											let match: Record<string, string> = {}
+											for (const selector of this.message!.selectors) {
+												match[selector.arg.name] = "null"
+											}
+											return match
+										})(),
 									})
 									this.freshlyAddedVariants.push(variant.id)
 									upsertVariant({
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
index 1d4c41def1..720740eb4c 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-selector-configurator.ts
@@ -11,6 +11,7 @@ import {
 	type Message,
 	type Variant,
 	type NestedMessage,
+	type Expression,
 } from "@inlang/sdk-v2"
 import addSelector from "../helper/crud/selector/add.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
@@ -282,8 +283,9 @@ export default class InlangSelectorConfigurator extends LitElement {
 
 				this._addVariants({
 					message: newMessage,
-					variantMatcherArrays: [],
+					variantsMatcher: [],
 					newMatchers: newMatchers,
+					newSelectorName: this._input,
 				})
 				this.addMessage(newMessage)
 				this.dispatchOnInsertMessage(newMessage, newMessage.variants)
@@ -293,7 +295,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 			} else if (this.message) {
 				// get variant matchers arrays
 				const _variants = structuredClone(this.message ? this.message.variants : [])
-				const _variantMatcherArrays = _variants.map((variant) => variant.match)
+				const _variantsMatcher = _variants.map((variant) => variant.match)
 
 				// add selector
 				addSelector({
@@ -317,8 +319,9 @@ export default class InlangSelectorConfigurator extends LitElement {
 
 				this._addVariants({
 					message: this.message,
-					variantMatcherArrays: _variantMatcherArrays,
+					variantsMatcher: _variantsMatcher,
 					newMatchers: newMatchers,
+					newSelectorName: this._input,
 				})
 
 				// only inserted variants should be dispatched -> show filter
@@ -341,20 +344,21 @@ export default class InlangSelectorConfigurator extends LitElement {
 
 	private _addVariants = (props: {
 		message: NestedMessage
-		variantMatcherArrays: string[][]
+		variantsMatcher: Record<Expression["arg"]["name"], string>[]
 		newMatchers: string[]
+		newSelectorName: string
 	}) => {
 		const newMatchers = props.newMatchers.filter((category) => category !== "*")
 		if (newMatchers) {
-			if (props.variantMatcherArrays && props.variantMatcherArrays.length > 0) {
-				for (const variantMatcherArray of props.variantMatcherArrays) {
+			if (props.variantsMatcher && props.variantsMatcher.length > 0) {
+				for (const variantMatcher of props.variantsMatcher) {
 					for (const category of newMatchers) {
 						upsertVariant({
 							message: props.message,
 							variant: createVariant({
 								messageId: props.message.id,
 								// combine the matches that are already present with the new category -> like a matrix
-								match: [...variantMatcherArray, category],
+								match: { ...variantMatcher, ...{ [props.newSelectorName]: category } },
 							}),
 						})
 					}
@@ -366,7 +370,7 @@ export default class InlangSelectorConfigurator extends LitElement {
 						variant: createVariant({
 							messageId: props.message.id,
 							// combine the matches that are already present with the new category -> like a matrix
-							match: [category],
+							match: { [props.newSelectorName]: category },
 						}),
 					})
 				}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 0664755663..2c71304802 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -5,6 +5,7 @@ import {
 	type LintReport,
 	type InstalledLintRule,
 	type Declaration,
+	type Expression,
 } from "@inlang/sdk-v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property } from "lit/decorators.js"
@@ -242,19 +243,19 @@ export default class InlangVariant extends LitElement {
 		}
 	}
 
-	private _updateMatch = (matchIndex: number, value: string) => {
+	private _updateMatch = (selectorName: string, value: string) => {
 		//TODO improve this function
 		if (this.variant && this.message) {
 			updateMatch({
 				variant: this.variant,
-				matchIndex: matchIndex,
+				selectorName,
 				value,
 			})
 			const variantID = this.variant.id
 
 			const changedVariant = this.message.variants.find((v) => v.id === variantID)
 			if (changedVariant) {
-				changedVariant.match[matchIndex] = value
+				changedVariant.match[selectorName] = value
 			}
 
 			this.dispatchOnUpdateVariant(this.variant)
@@ -262,21 +263,6 @@ export default class InlangVariant extends LitElement {
 		}
 	}
 
-	// getter
-	private get _selectors(): string[] | undefined {
-		// @ts-ignore - just for prototyping
-		return this.message ? this.message.selectors.map((selector) => selector.arg.name) : undefined
-	}
-
-	private get _matches(): string[] | undefined {
-		// @ts-ignore - just for prototyping
-		return this._selectors
-			? this._selectors.map((_, index) => {
-					return this.variant && this.variant.match[index]
-			  })
-			: undefined
-	}
-
 	//hooks
 	override async firstUpdated() {
 		await this.updateComplete
@@ -334,8 +320,8 @@ export default class InlangVariant extends LitElement {
 	override render() {
 		return !(!this.variant && this.message && this.message?.selectors.length > 0)
 			? html`<div class="variant">
-					${this.variant && this._matches
-						? this._matches.map((match, index) => {
+					${this.variant
+						? Object.entries(this.variant.match).map(([selectorName, match]) => {
 								return html`
 									<sl-input
 										id="${this.message!.id}-${this.variant!.id}-${match}"
@@ -347,7 +333,7 @@ export default class InlangVariant extends LitElement {
 												`${this.message!.id}-${this.variant!.id}-${match}`
 											)
 											if (element && e.target === element) {
-												this._updateMatch(index, (e.target as HTMLInputElement).value)
+												this._updateMatch(selectorName, (e.target as HTMLInputElement).value)
 											}
 										}}
 									></sl-input>
diff --git a/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx b/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
index 8ed3c093c1..74cc3176ca 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/PageView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { loadProjectOpfs, newProjectOpfs } from "../../src/index.js"
 import { MainView } from "./mainView.js"
 
diff --git a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
index 33875584f7..7832263f88 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/mainView.tsx
@@ -91,7 +91,7 @@ export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
 				)} */}
 				{currentView === "messageList" && (
 					<>
-{/* 
+						{/* 
 	We need to filter:
 	- languages (languageTag) message.locale in (...languageTag)
 	- lint reports (lint id) reports.lintId in (...reportIds)
@@ -101,7 +101,7 @@ export function MainView({ inlangProject }: { inlangProject: InlangProject2 }) {
 	 and search by 					
 						<!-- search/filter component --> 
 */}
-					<MessageBundleList project={inlangProject}></MessageBundleList>
+						<MessageBundleList project={inlangProject}></MessageBundleList>
 					</>
 				)}
 			</div>
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
index 72e5b77dfd..2cd266a104 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
@@ -9,7 +9,9 @@ const missingCatchallLintRule: MessageBundleLintRule = {
 		for (const message of messageBundle.messages) {
 			if (message.selectors.length === 0) continue
 
-			const hasCatchall = message.variants.some((variant) => variant.match.every((m) => m === "*"))
+			const hasCatchall = message.variants.some((variant) =>
+				Object.values(variant.match)?.every((m) => m === "*")
+			)
 
 			if (!hasCatchall) {
 				report({
diff --git a/inlang/source-code/sdk-v2/src/helper.ts b/inlang/source-code/sdk-v2/src/helper.ts
index b3edb874f0..407fdb7e1e 100644
--- a/inlang/source-code/sdk-v2/src/helper.ts
+++ b/inlang/source-code/sdk-v2/src/helper.ts
@@ -1,6 +1,13 @@
 import { randomHumanId } from "./human-id/human-readable-id.js"
 import { v4 as uuid } from "uuid"
-import type { LanguageTag, NestedBundle, NestedMessage, Text, Variant } from "./types/index.js"
+import type {
+	Expression,
+	LanguageTag,
+	NestedBundle,
+	NestedMessage,
+	Text,
+	Variant,
+} from "./types/index.js"
 
 /**
  * create v2 Bundle with a random human ID
@@ -31,7 +38,7 @@ export function createMessage(args: {
 	bundleId: string
 	locale: LanguageTag
 	text: string
-	match?: Array<string>
+	match?: Record<Expression["arg"]["name"], string>
 }): NestedMessage {
 	const messageId = uuid()
 	return {
@@ -52,12 +59,12 @@ export function createVariant(args: {
 	messageId: string
 	id?: string
 	text?: string
-	match?: Array<string>
+	match?: Record<Expression["arg"]["name"], string>
 }): Variant {
 	return {
 		messageId: args.messageId,
 		id: args.id ? args.id : uuid(),
-		match: args.match ? args.match : [],
+		match: args.match ? args.match : {},
 		pattern: [toTextElement(args.text ?? "")],
 	}
 }
diff --git a/inlang/source-code/sdk-v2/src/mock/mockhelper.ts b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
index 82857cf939..daf50a770c 100644
--- a/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
+++ b/inlang/source-code/sdk-v2/src/mock/mockhelper.ts
@@ -20,23 +20,23 @@ export function generateUUID() {
  * @param variants
  * @returns an array of variants and there vorresponding matachers like [['one', 'one'], ['one', '*'],['*', 'one'], ['*', '*']]
  */
-function generateCombinations(variants: string[][]): string[][] {
-	const combinations: string[][] = []
+function generateCombinations(variants: string[][], selector: string[]): Record<string, string>[] {
+	const combinations: Record<string, string>[] = []
 
-	function backtrack(path: string[], index: number) {
+	function backtrack(path: Record<string, string>, index: number) {
 		if (index === variants.length) {
-			combinations.push([...path])
+			combinations.push(path)
 			return
 		}
 
 		for (const variant of variants[index]!) {
-			path.push(variant)
+			path[selector[index]!] = variant
 			backtrack(path, index + 1)
-			path.pop()
+			delete path[selector[index]!]
 		}
 	}
 
-	backtrack([], 0)
+	backtrack({}, 0)
 	return combinations
 }
 
@@ -92,7 +92,7 @@ export function createMockBundle(args: {
 		args.languageTags,
 		inputs,
 		selectors,
-		generateCombinations(matchers)
+		generateCombinations(matchers, selectors)
 	)
 	return {
 		id: bundleId,
@@ -106,7 +106,7 @@ function createMessages(
 	languageTags: string[],
 	inputs: Declaration[],
 	selectors: Expression[],
-	variants: string[][]
+	variants: Array<Record<Expression["arg"]["name"], string>>
 ) {
 	const messagesByLanguage: Record<string, NestedMessage> = {}
 
diff --git a/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
index 522ace4bde..46bf59a1df 100644
--- a/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
+++ b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
@@ -68,7 +68,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_de_zero",
-					match: ["zero"],
+					match: { numProducts: "zero" },
 					pattern: [
 						{
 							type: "text",
@@ -79,7 +79,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_de_one",
-					match: ["one"],
+					match: { numProducts: "one" },
 					pattern: [
 						{
 							type: "text",
@@ -90,7 +90,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_de_other",
-					match: ["other"],
+					match: { numProducts: "other" },
 					pattern: [
 						{
 							type: "expression",
@@ -142,7 +142,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_en_zero",
-					match: ["zero"],
+					match: { numProducts: "zero" },
 					pattern: [
 						{
 							type: "text",
@@ -153,7 +153,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_en_one",
-					match: ["one"],
+					match: { numProducts: "one" },
 					pattern: [
 						{
 							type: "text",
@@ -164,7 +164,7 @@ export const pluralBundle: NestedBundle = {
 				{
 					messageId: "mock_message_id_de",
 					id: "mock_variant_id_en_other",
-					match: ["other"],
+					match: { numProducts: "other" },
 					pattern: [
 						{
 							type: "expression",
diff --git a/inlang/source-code/sdk-v2/src/types/schema.ts b/inlang/source-code/sdk-v2/src/types/schema.ts
index e62ce1dfe9..c8685051f3 100644
--- a/inlang/source-code/sdk-v2/src/types/schema.ts
+++ b/inlang/source-code/sdk-v2/src/types/schema.ts
@@ -39,7 +39,7 @@ type VariantTable = {
 	id: string
 	// @relation to Message
 	messageId: MessageTable["id"]
-	match: JSONColumnType<string[]>
+	match: JSONColumnType<Record<Expression["arg"]["name"], string>>
 	pattern: JSONColumnType<Pattern> // JSON
 }
 
diff --git a/inlang/source-code/settings-component/package.json b/inlang/source-code/settings-component/package.json
index f826c5d669..4ac7060ded 100644
--- a/inlang/source-code/settings-component/package.json
+++ b/inlang/source-code/settings-component/package.json
@@ -36,7 +36,8 @@
 		"react-dom": "^18.2.0",
 		"storybook": "^7.6.16",
 		"vitest": "0.33.0",
-		"@vitest/coverage-v8": "^0.33.0"
+		"@vitest/coverage-v8": "^0.33.0",
+		"typescript": "5.4.5"
 	},
 	"dependencies": {
 		"@inlang/sdk": "workspace:^",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb03dba489..61f5c4c41d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -446,7 +446,7 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
@@ -2707,7 +2707,7 @@ importers:
         version: link:../marketplace-registry
       '@nx/storybook':
         specifier: ^18.0.4
-        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
+        version: 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
       '@storybook/addon-essentials':
         specifier: ^7.6.16
         version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -2722,13 +2722,13 @@ importers:
         version: 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: ^7.6.16
-        version: 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+        version: 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@types/chroma-js':
         specifier: ^2.4.4
         version: 2.4.4
       '@vitest/coverage-v8':
         specifier: 0.34.6
-        version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))
+        version: 0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.4.5)))
       esbuild:
         specifier: ^0.20.0
         version: 0.20.2
@@ -2744,9 +2744,12 @@ importers:
       storybook:
         specifier: ^7.6.16
         version: 7.6.19
+      typescript:
+        specifier: 5.4.5
+        version: 5.4.5
       vitest:
         specifier: 0.34.6
-        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2))
+        version: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.4.5))
 
   inlang/source-code/telemetry:
     dependencies:
@@ -18991,6 +18994,13 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-react-jsx-development@7.24.7':
+    dependencies:
+      '@babel/plugin-transform-react-jsx': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-react-jsx-development@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -19015,6 +19025,17 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
+  '@babel/plugin-transform-react-jsx@7.24.7':
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-plugin-utils': 7.24.7
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.21.4)
+      '@babel/types': 7.24.7
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.21.4)':
     dependencies:
       '@babel/core': 7.21.4
@@ -20614,6 +20635,23 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@nrwl/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
+    dependencies:
+      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - cypress
+      - debug
+      - js-yaml
+      - nx
+      - supports-color
+      - typescript
+      - verdaccio
+
   '@nrwl/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
       '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
@@ -20673,6 +20711,23 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  '@nrwl/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
+    dependencies:
+      '@nx/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - cypress
+      - debug
+      - js-yaml
+      - nx
+      - supports-color
+      - typescript
+      - verdaccio
+
   '@nrwl/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
       '@nx/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
@@ -20716,6 +20771,29 @@ snapshots:
       - '@swc/core'
       - debug
 
+  '@nx/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
+    dependencies:
+      '@nrwl/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@phenomnomnominal/tsquery': 5.0.1(typescript@5.4.5)
+      detect-port: 1.6.1
+      semver: 7.6.2
+      tslib: 2.6.3
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - debug
+      - js-yaml
+      - nx
+      - supports-color
+      - typescript
+      - verdaccio
+
   '@nx/cypress@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
       '@nrwl/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
@@ -20933,6 +21011,30 @@ snapshots:
   '@nx/nx-win32-x64-msvc@18.3.5':
     optional: true
 
+  '@nx/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)':
+    dependencies:
+      '@nrwl/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@nx/cypress': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@nx/devkit': 18.3.5(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/eslint': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))
+      '@nx/js': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.4.5)
+      '@phenomnomnominal/tsquery': 5.0.1(typescript@5.4.5)
+      semver: 7.6.2
+      tslib: 2.6.3
+    transitivePeerDependencies:
+      - '@babel/traverse'
+      - '@swc-node/register'
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - cypress
+      - debug
+      - js-yaml
+      - nx
+      - supports-color
+      - typescript
+      - verdaccio
+
   '@nx/storybook@18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)':
     dependencies:
       '@nrwl/storybook': 18.3.5(@babel/traverse@7.24.7)(@swc/core@1.6.13)(@types/node@20.14.9)(js-yaml@4.1.0)(nx@18.3.5(@swc/core@1.6.13))(typescript@5.5.2)
@@ -21409,6 +21511,27 @@ snapshots:
       - supports-color
     optional: true
 
+  '@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/plugin-transform-react-jsx': 7.24.7
+      '@babel/plugin-transform-react-jsx-development': 7.24.7
+      '@prefresh/vite': 2.4.6(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@rollup/pluginutils': 4.2.1
+      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.24.7)
+      debug: 4.3.5
+      kolorist: 1.8.0
+      magic-string: 0.30.5
+      node-html-parser: 6.1.13
+      resolve: 1.22.8
+      source-map: 0.7.4
+      stack-trace: 1.0.0-pre2
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+    transitivePeerDependencies:
+      - preact
+      - supports-color
+    optional: true
+
   '@prefresh/babel-plugin@0.5.1':
     optional: true
 
@@ -21503,6 +21626,21 @@ snapshots:
       - supports-color
     optional: true
 
+  '@puppeteer/browsers@1.4.6(typescript@5.4.5)':
+    dependencies:
+      debug: 4.3.4(supports-color@8.1.1)
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.3.0
+      tar-fs: 3.0.4
+      unbzip2-stream: 1.4.3
+      yargs: 17.7.1
+    optionalDependencies:
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   '@puppeteer/browsers@1.4.6(typescript@5.5.2)':
     dependencies:
       debug: 4.3.4(supports-color@8.1.1)
@@ -23024,6 +23162,58 @@ snapshots:
       - encoding
       - supports-color
 
+  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@storybook/channels': 7.6.19
+      '@storybook/client-logger': 7.6.19
+      '@storybook/core-common': 7.6.19
+      '@storybook/csf-plugin': 7.6.19
+      '@storybook/node-logger': 7.6.19
+      '@storybook/preview': 7.6.19
+      '@storybook/preview-api': 7.6.19
+      '@storybook/types': 7.6.19
+      '@types/find-cache-dir': 3.2.1
+      browser-assert: 1.2.1
+      es-module-lexer: 0.9.3
+      express: 4.19.2
+      find-cache-dir: 3.3.2
+      fs-extra: 11.2.0
+      magic-string: 0.30.10
+      rollup: 3.29.1
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+    optionalDependencies:
+      '@preact/preset-vite': 2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@storybook/builder-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@storybook/channels': 7.6.19
+      '@storybook/client-logger': 7.6.19
+      '@storybook/core-common': 7.6.19
+      '@storybook/csf-plugin': 7.6.19
+      '@storybook/node-logger': 7.6.19
+      '@storybook/preview': 7.6.19
+      '@storybook/preview-api': 7.6.19
+      '@storybook/types': 7.6.19
+      '@types/find-cache-dir': 3.2.1
+      browser-assert: 1.2.1
+      es-module-lexer: 0.9.3
+      express: 4.19.2
+      find-cache-dir: 3.3.2
+      fs-extra: 11.2.0
+      magic-string: 0.30.10
+      rollup: 3.29.1
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+    optionalDependencies:
+      '@preact/preset-vite': 2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      typescript: 5.5.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@storybook/channels@7.6.19':
     dependencies:
       '@storybook/client-logger': 7.6.19
@@ -23395,11 +23585,31 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
       '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@storybook/core-server': 7.6.19
       '@storybook/node-logger': 7.6.19
+      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      magic-string: 0.30.10
+    transitivePeerDependencies:
+      - '@preact/preset-vite'
+      - bufferutil
+      - encoding
+      - lit
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vite
+      - vite-plugin-glimmerx
+
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+    dependencies:
+      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@storybook/core-server': 7.6.19
+      '@storybook/node-logger': 7.6.19
       '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       magic-string: 0.30.10
     transitivePeerDependencies:
@@ -23415,12 +23625,12 @@ snapshots:
       - vite
       - vite-plugin-glimmerx
 
-  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
+  '@storybook/web-components-vite@7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))':
     dependencies:
-      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(@babel/core@7.24.7)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
+      '@storybook/builder-vite': 7.6.19(@preact/preset-vite@2.8.3(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)(terser@5.31.1))
       '@storybook/core-server': 7.6.19
       '@storybook/node-logger': 7.6.19
-      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/web-components': 7.6.19(lit@3.1.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       magic-string: 0.30.10
     transitivePeerDependencies:
       - '@preact/preset-vite'
@@ -24958,6 +25168,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/coverage-v8@0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.4.5)))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.10
+      picocolors: 1.0.1
+      std-env: 3.7.0
+      test-exclude: 6.0.0
+      v8-to-istanbul: 9.2.0
+      vitest: 0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.4.5))
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/coverage-v8@0.34.6(vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -28000,8 +28227,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.41.0)
       eslint-plugin-react: 7.34.2(eslint@8.41.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.41.0)
@@ -28080,13 +28307,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.41.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -28108,24 +28335,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0))(eslint@8.41.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.41.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
-      eslint: 8.41.0
-      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -28167,7 +28384,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -28177,7 +28394,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.41.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9)(eslint@8.41.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.41.0)(typescript@5.0.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.2))(eslint@8.41.0))(eslint@8.41.0))(eslint@8.41.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -28188,7 +28405,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.41.0)(typescript@5.0.4)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -33878,6 +34095,23 @@ snapshots:
       - utf-8-validate
     optional: true
 
+  puppeteer-core@20.9.0(typescript@5.4.5):
+    dependencies:
+      '@puppeteer/browsers': 1.4.6(typescript@5.4.5)
+      chromium-bidi: 0.4.16(devtools-protocol@0.0.1147663)
+      cross-fetch: 4.0.0
+      debug: 4.3.4(supports-color@8.1.1)
+      devtools-protocol: 0.0.1147663
+      ws: 8.13.0
+    optionalDependencies:
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    optional: true
+
   puppeteer-core@20.9.0(typescript@5.5.2):
     dependencies:
       '@puppeteer/browsers': 1.4.6(typescript@5.5.2)
@@ -37620,6 +37854,46 @@ snapshots:
       - supports-color
       - terser
 
+  vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.4.5)):
+    dependencies:
+      '@types/chai': 4.3.16
+      '@types/chai-subset': 1.3.5
+      '@types/node': 20.14.9
+      '@vitest/expect': 0.34.6
+      '@vitest/runner': 0.34.6
+      '@vitest/snapshot': 0.34.6
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      acorn: 8.12.0
+      acorn-walk: 8.3.3
+      cac: 6.7.14
+      chai: 4.4.1
+      debug: 4.3.5
+      local-pkg: 0.4.3
+      magic-string: 0.30.10
+      pathe: 1.1.2
+      picocolors: 1.0.1
+      std-env: 3.7.0
+      strip-literal: 1.3.0
+      tinybench: 2.8.0
+      tinypool: 0.7.0
+      vite: 5.3.2(@types/node@20.14.9)(terser@5.31.1)
+      vite-node: 0.34.6(@types/node@20.14.9)(terser@5.31.1)
+      why-is-node-running: 2.2.2
+    optionalDependencies:
+      jsdom: 22.1.0
+      playwright: 1.45.0
+      safaridriver: 0.1.2
+      webdriverio: 8.39.0(typescript@5.4.5)
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vitest@0.34.6(jsdom@22.1.0)(playwright@1.45.0)(safaridriver@0.1.2)(terser@5.31.1)(webdriverio@8.39.0(typescript@5.5.2)):
     dependencies:
       '@types/chai': 4.3.16
@@ -37993,6 +38267,41 @@ snapshots:
       - utf-8-validate
     optional: true
 
+  webdriverio@8.39.0(typescript@5.4.5):
+    dependencies:
+      '@types/node': 20.14.7
+      '@wdio/config': 8.39.0
+      '@wdio/logger': 8.38.0
+      '@wdio/protocols': 8.38.0
+      '@wdio/repl': 8.24.12
+      '@wdio/types': 8.39.0
+      '@wdio/utils': 8.39.0
+      archiver: 7.0.1
+      aria-query: 5.3.0
+      css-shorthand-properties: 1.1.1
+      css-value: 0.0.1
+      devtools-protocol: 0.0.1302984
+      grapheme-splitter: 1.0.4
+      import-meta-resolve: 4.1.0
+      is-plain-obj: 4.1.0
+      jszip: 3.10.1
+      lodash.clonedeep: 4.5.0
+      lodash.zip: 4.2.0
+      minimatch: 9.0.4
+      puppeteer-core: 20.9.0(typescript@5.4.5)
+      query-selector-shadow-dom: 1.0.1
+      resq: 1.11.0
+      rgb2hex: 0.2.5
+      serialize-error: 11.0.3
+      webdriver: 8.39.0
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - typescript
+      - utf-8-validate
+    optional: true
+
   webdriverio@8.39.0(typescript@5.5.2):
     dependencies:
       '@types/node': 20.14.7

From 850641d2e3dbda15105e294be010ae1e3909729f Mon Sep 17 00:00:00 2001
From: Martin Lysk <martin.lysk@gmail.com>
Date: Thu, 25 Jul 2024 15:53:12 +0200
Subject: [PATCH 15/35] todo cleanup

---
 .../src/stories/inlang-bundle.ts              |  2 +-
 .../src/stories/testing/reactiveWrapper.ts    |  2 +-
 .../sample-app/src/MessageBundleView.tsx      |  2 ++
 .../dev-modules/missing-selector-lint-rule.ts |  2 +-
 .../sdk-v2/src/dev-modules/missingCatchall.ts |  2 +-
 .../sdk-v2/src/lint/createLinter.ts           |  6 ++--
 .../sdk-v2/src/lint/populateLintLevel.ts      |  4 +--
 .../source-code/sdk-v2/src/loadProjectOpfs.ts | 33 ++++++++++---------
 .../sdk-v2/src/mock/plural/bundle.ts          |  2 +-
 .../src/resolve-modules/plugins/types.ts      |  2 +-
 .../source-code/sdk-v2/src/resolvePlugins2.ts |  6 ++--
 inlang/source-code/sdk-v2/src/settings.ts     |  6 ++--
 inlang/source-code/sdk-v2/src/types/lint.ts   |  6 ++--
 .../sdk-v2/src/types/project-settings.ts      |  3 +-
 14 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index a2e52d1e68..2b7ca907ed 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -375,7 +375,7 @@ export default class InlangBundle extends LitElement {
 					${this._locales() &&
 					this._locales()?.map((locale) => {
 						const message = this._bundle?.messages.find((message) => message.locale === locale)
-						// TODO SDK-v2 lint reports
+						// TODO SDK-v2 LINT reports
 						const lintReports = [] as any[]
 						// const lintReports = this._bundle?.lintReports?.reports.filter(
 						// 	(report) => report.messageId === message?.id
diff --git a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
index 548f05acac..982b1694cd 100644
--- a/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
+++ b/inlang/source-code/bundle-component/src/stories/testing/reactiveWrapper.ts
@@ -34,7 +34,7 @@ export default class InlangReactiveWrapper extends LitElement {
 	}
 
 	override async firstUpdated() {
-		// TODO SDK-v2 lint reports - mock
+		// TODO SDK-v2 LINT reports - mock
 		// this._lintReports = {
 		// 	hash: "hash",
 		// 	reports: [],
diff --git a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
index 1d08c65f0b..6289186eb4 100644
--- a/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
+++ b/inlang/source-code/sdk-v2/sample-app/src/MessageBundleView.tsx
@@ -78,6 +78,8 @@ export function MessageBundleView({
 		const dbPromise = project.variant.delete(deletedVariant).execute()
 	}
 
+	console.log(currentBundle)
+
 	return (
 		<MessageBundleComponent
 			key={bundle.id}
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
index 2d82e56c70..712f7d5389 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
@@ -1,5 +1,5 @@
 import type { MessageBundleLintRule } from "../types/lint.js"
-// TODO SDK-v2
+// TODO SDK-v2 LINT
 // import type { VariableReference } from "../types/message-bundle.js"
 type VariableReference = any
 
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
index 72e5b77dfd..ab6e702676 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missingCatchall.ts
@@ -35,7 +35,7 @@ const missingCatchallLintRule: MessageBundleLintRule = {
 		if (!message)
 			throw new Error(`message ${report.target.messageId} not found on bundle ${messageBundle.id}`)
 
-		// TODO SDK-v2
+		// TODO SDK-v2 LINT
 		// const catchallVariant = createVariant({
 		// 	text: "",
 		// 	match: message.selectors.map(() => "*"),
diff --git a/inlang/source-code/sdk-v2/src/lint/createLinter.ts b/inlang/source-code/sdk-v2/src/lint/createLinter.ts
index 36a0ea8050..f8baca1ecc 100644
--- a/inlang/source-code/sdk-v2/src/lint/createLinter.ts
+++ b/inlang/source-code/sdk-v2/src/lint/createLinter.ts
@@ -1,4 +1,4 @@
-// TODO SDK-v2 implement linting
+// TODO SDK-v2 LINT implement linting
 // import { populateLevel } from "./populateLintLevel.js"
 // import * as Comlink from "comlink"
 // import type { ProjectSettings2 } from "../types/project-settings.js"
@@ -41,7 +41,7 @@
 // 				reportsById[messageBundle.id] = []
 
 // 				for (const lintRule of inlangProject.installed.lintRules.getValue()) {
-//                     // TODO SDK-v2 get message lint rules separatly
+//                     // TODO SDK-v2 LINT get message lint rules separatly
 //                     const messageBundleLintRule = lintRule as unknown as MessageBundleLintRule
 // 					const promise = messageBundleLintRule.run({
 // 						messageBundle: messageBundle,
@@ -85,7 +85,7 @@
 
 // 			if (!bundle) throw new Error(`messageBundle ${report.messageBundleId} not found`)
 
-//             // TODO SDK-v2 get message lint rules separatly
+//             // TODO SDK-v2 LINT get message lint rules separatly
 // 			const rule = inlangProject.installed.lintRules.getValue().find((rule) => rule.id === report.ruleId) as unknown as MessageBundleLintRule
 // 			if (!rule) throw new Error(`rule ${report.ruleId} not found`)
 // 			if (!rule.fix) throw new Error(`rule ${report.ruleId} does not have a fix function`)
diff --git a/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
index 8cf2b726fe..ad031440b9 100644
--- a/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
+++ b/inlang/source-code/sdk-v2/src/lint/populateLintLevel.ts
@@ -20,7 +20,7 @@ export function populateLevel(
 	return { ...report, level: "error" }
 }
 
-// TODO SDK-v2 loris - discuss how we want this to be implemented
+// TODO SDK-v2 LINT loris - discuss how we want this to be implemented
 // const keys = [
 // 	["ruleId", "ruleId"],
 // 	["bundleId", "bundleId"],
@@ -30,7 +30,7 @@ export function populateLevel(
 // ] as const satisfies [keyof LintConfig, keyof LintReport][]
 
 function configMatches(report: Omit<LintReport, "level">, config: LintConfig): boolean {
-	// TODO SDK-v2 loris - discuss how we want this to be implemented
+	// TODO SDK-v2 LINT loris - discuss how we want this to be implemented
 	// for (const [configKey, reportKey] of keys) {
 	// 	if (config[configKey] === undefined) continue
 	// 	if (config[configKey] !== report[reportKey]) return false
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 513754d2da..ff7bb96eb0 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -92,7 +92,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 		.pipe(
 			switchMap(([modules]) => {
 				lifecycle$.next("resolvingModules")
-				// TODO SDK-v2 handle module load errors
+				// TODO SDK-v2 LINT handle module load errors
 				const rules = (modules as any).messageBundleLintRules.map(
 					(rule: any) =>
 						({
@@ -118,7 +118,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 
 	const sqliteDbFilePath = args.inlangFolderPath + "/inlang.sqlite"
 
-	// TODO SDK-v2 SQLocalKysely currently only support (1 client) <-> (1 instance worker) communication with an db instance for reports to work we need (n clients) <-> (1 instance) communication
+	// TODO SDK-v2 LINT SQLocalKysely currently only support (1 client) <-> (1 instance worker) communication with an db instance for reports to work we need (n clients) <-> (1 instance) communication
 	const sqliteDb = new SQLocalKyselyWithRaw(sqliteDbFilePath)
 	const { dialect, sql, rawSql } = sqliteDb
 
@@ -128,10 +128,13 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 	})
 
 	return {
+		// TODO SDK-v2 LIX
 		id: "TODO SDK-v2",
 		// db,
 		// sql,
 		// rawSql,
+		// TODO SDK-v2 API if we expose only the api, what helper Method should the SDK provide insert/update/delete for bundle/message/variant? how shall we deal with nested queries?
+		// db: db, 
 
 		installed: {
 			lintRules: installedLintRules$,
@@ -140,7 +143,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 		settings: {
 			get: () => projectSettings$.getValue(),
 			set: async (settings: ProjectSettings2) => {
-				// TODO SDK-v2 implement
+				// TODO SDK-v2 LIX write the file back to lix
 			},
 			subscribe: () => projectSettings$.subscribe(),
 		},
@@ -168,11 +171,11 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			insert: (bundle: Bundle) => {
 				return db.insertInto("bundle").values({
 					id: bundle.id,
-					alias: json(bundle.alias) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					alias: json(bundle.alias) as any, // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				})
 			},
 			update: (bundle: Partial<Bundle> & { id: string }) => {
-				const bundleProperties = structuredClone(bundle as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				const bundleProperties = structuredClone(bundle as any) // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete bundleProperties.id
 				if (bundle.alias) {
 					bundleProperties.alias = json(bundle.alias) as any
@@ -190,19 +193,18 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 					id: message.id,
 					bundleId: message.bundleId,
 					locale: message.locale,
-					declarations: json(message.declarations) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-					selectors: json(message.selectors) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					declarations: json(message.declarations) as any, // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					selectors: json(message.selectors) as any, // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				})
 			},
 			update: (message: Partial<Message> & { id: string }) => {
-				const messageProperties = structuredClone(message as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				const messageProperties = structuredClone(message as any) // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete messageProperties.id
 				delete messageProperties.variants
 				if (message.declarations) {
 					messageProperties.declarations = json(message.declarations) as any
 				}
 				if (message.selectors) {
-					// TODO SDK-v2 shall we structure clone here?
 					messageProperties.selectors = json(message.selectors) as any
 				}
 
@@ -218,18 +220,17 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 				return db.insertInto("variant").values({
 					id: variant.id,
 					messageId: variant.messageId,
-					match: json(variant.match) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
-					pattern: json(variant.pattern) as any, // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					match: json(variant.match) as any, // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+					pattern: json(variant.pattern) as any, // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				})
 			},
 			update: (variant: Partial<Variant> & { id: string }) => {
-				const variantProperties = structuredClone(variant as any) // TODO SDK-v2 check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
+				const variantProperties = structuredClone(variant as any) // TODO SDK-v2 KISELY check why kysely complains see https://kysely.dev/docs/recipes/extending-kysely#expression
 				delete variantProperties.id
 				if (variant.match) {
 					variantProperties.match = json(variant.match) as any
 				}
 				if (variant.pattern) {
-					// TODO SDK-v2 shall we structure clone here?
 					variantProperties.pattern = json(variant.pattern) as any
 				}
 
@@ -240,12 +241,12 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			},
 		},
 		// fix: async (report: LintReport, fix: Fix<LintReport>) => {
-		// 	// TODO SDK-v2 implement fix
+		// 	// TODO SDK-v2 LINT implement fix
 		// 	// const fixed = await linter.fix(report, fix)
 		// 	// await database.collections.messageBundles.upsert(fixed)
 		// },
 		close: () => {
-			// TODO SDK-v2 close database again
+			// TODO SDK-v2 LIX lifecylce of the database? close database again
 		},
 	}
 }
@@ -261,7 +262,7 @@ export const populateMessages = (bundleSelect: SelectQueryBuilder<Database, "bun
 				"message.bundleId",
 				"=",
 				"bundle.id" as any
-			) // TODO SDK-v2 check how get aliases into populateVariants
+			) 
 		).as("messages"),
 	])
 }
diff --git a/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
index 522ace4bde..341e8ea9fe 100644
--- a/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
+++ b/inlang/source-code/sdk-v2/src/mock/plural/bundle.ts
@@ -181,7 +181,7 @@ export const pluralBundle: NestedBundle = {
 				},
 			],
 		},
-	] /*, TODO SDK-v2 lint reports
+	] /*, TODO SDK-v2 LINT reports
 	lintReports: {
 		hash: "testHash",
 		reports: [
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
index b9f442cc3e..c6120a6603 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
@@ -44,7 +44,7 @@ export type ResolvePluginsFunction = (args: {
  * The API after resolving the plugins.
  */
 export type ResolvedPluginApi = {
-	// TODO SDK-v2 needed implement importer exporter?
+	// TODO SDK-v2 IMPORT/EXPORT needed implement importer exporter?
 	// loadMessages: (args: {
 	// 	settings: ProjectSettings2
 	// 	nodeishFs: NodeishFilesystemSubset
diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
index def3009fe2..7a3196aac2 100644
--- a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -55,7 +55,7 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		}
 
 		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
-		// TODO SDK-v2 check if we can reuse this for export/import
+		// TODO SDK-v2 IMPORT/EXPORT check if we can reuse this for export/import
 		// if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
 		// 	result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
 		// }
@@ -93,7 +93,7 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		 * -------------- BEGIN ADDING TO RESULT --------------
 		 */
 
-		// TODO SDK-v2 we remove load/save Message for now
+		// TODO SDK-v2 IMPORT/EXPORT we remove load/save Message for now
 		// if (typeof plugin.loadMessages === "function") {
 		// 	result.data.loadMessages = plugin.loadMessages
 		// }
@@ -116,7 +116,7 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 
 	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
 
-	// TODO SDK-v2 check if we can use that for exporter importer
+	// TODO SDK-v2 IMPORT/EXPORT check if we can use that for exporter importer
 	// if (
 	// 	!experimentalPersistence &&
 	// 	(typeof result.data.loadMessages !== "function" ||
diff --git a/inlang/source-code/sdk-v2/src/settings.ts b/inlang/source-code/sdk-v2/src/settings.ts
index 6f4aaf2a0e..7cc2c8585e 100644
--- a/inlang/source-code/sdk-v2/src/settings.ts
+++ b/inlang/source-code/sdk-v2/src/settings.ts
@@ -22,7 +22,7 @@ export async function loadSettings(args: {
 
 	const projectSettings = parseSettings(json.data)
 
-	// TODO SDK-v2 - Add legacy fields - needed for settings component to work, check how we can get rid of those
+	// TODO SDK-v2 SETTINGS @NilsJacobsen can i drop this? - Add legacy fields - needed for settings component to work, check how we can get rid of those
 	// @ts-ignore
 	projectSettings.languageTags = projectSettings.locales
 	// @ts-ignore
@@ -31,7 +31,7 @@ export async function loadSettings(args: {
 }
 
 const parseSettings = (settings: unknown) => {
-	// TODO SDK-v2 check how we want to deal with migration here
+	// TODO SDK-v2 SETTINGS check how we want to deal with migration here
 	// const settingsCompiler = TypeCompiler.Compile(ProjectSettings2)
 	// const withMigration = migrateIfOutdated(settings as any)
 	// if (settingsCompiler.Check(withMigration) === false) {
@@ -60,6 +60,6 @@ const parseSettings = (settings: unknown) => {
 		})
 	}
 
-	// TODO SDK-v2 check migration (the new project settings changes to locales and baseLocale!)
+	// TODO SDK-v2 SETTINGS check migration (the new project settings changes to locales and baseLocale!)
 	return settings as unknown as ProjectSettings2
 }
diff --git a/inlang/source-code/sdk-v2/src/types/lint.ts b/inlang/source-code/sdk-v2/src/types/lint.ts
index d31f80aed4..af640cdc83 100644
--- a/inlang/source-code/sdk-v2/src/types/lint.ts
+++ b/inlang/source-code/sdk-v2/src/types/lint.ts
@@ -51,7 +51,7 @@ export const MessageLintLevel = _MessageLintRuleLevel
  * Lint configuration for a given bundle/message/variant
  */
 export const LintConfig = Type.Object({
-	// TODO SDK-v2 Rename to LintSettings
+	// TODO SDK-v2 LINT Rename to LintSettings
 	id: Type.Optional(Type.String({ description: "id of the lint config entry" })),
 	ruleId: _MessageBundleLintRuleId,
 	// TODO disable this for now - to only reach feature parity for now - this is purly experimental
@@ -75,7 +75,7 @@ const LintFix = Type.Object({
 export const LintReport = Type.Object({
 	ruleId: Type.String(),
 
-	// TODO SDK-v2 check if we should provide a lint target
+	// TODO SDK-v2 LINT check if we should provide a lint target
 	target: Type.Object({
 		bundleId: Type.String(),
 		messageId: Type.Optional(Type.String()),
@@ -95,7 +95,7 @@ export const LintReport = Type.Object({
 export type LintReport<Fixes extends LintFix[] = LintFix[]> = {
 	ruleId: MessageBundleLintRule["id"]
 
-	// TODO SDK-v2 check if we should provide a lint target
+	// TODO SDK-v2 LINT check if we should provide a lint target
 	target: {
 		bundleId: string
 		messageId: string | undefined
diff --git a/inlang/source-code/sdk-v2/src/types/project-settings.ts b/inlang/source-code/sdk-v2/src/types/project-settings.ts
index aed28dffbe..825ae955c5 100644
--- a/inlang/source-code/sdk-v2/src/types/project-settings.ts
+++ b/inlang/source-code/sdk-v2/src/types/project-settings.ts
@@ -8,13 +8,14 @@ import type { Plugin2 } from "./plugin.js"
  * ---------------- Specific Language Tag field meta information ----------------
  */
 
-// TODO SDK-v2 naming?
+// TODO SDK-v2 SETTINGS naming?
 const BaseLocale = LanguageTag
 BaseLocale.title = "Source language tag"
 BaseLocale.description =
 	"Set the reference language for your project. It needs to be a valid BCP-47 language tag."
 
 const InternalProjectSettings = Type.Object({
+	// TODO SDK-v2 SETTINGS do we need to generate a settings v2 schema?
 	$schema: Type.Optional(Type.Literal("https://inlang.com/schema/project-settings")),
 	baseLocale: BaseLocale,
 	locales: Type.Array(LanguageTag, {

From be1794b63c73598a24feab7fb285cc9963a62eb7 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Fri, 26 Jul 2024 15:31:03 +0200
Subject: [PATCH 16/35] feat: add new lint mocks to bundle component in
 storybook

---
 .../bundle-component/src/mock/lint.ts         | 48 +++++++++++++++++--
 .../src/stories/inlang-bundle-header.ts       | 16 +++++++
 .../src/stories/inlang-bundle.stories.ts      | 11 ++++-
 .../src/stories/inlang-bundle.ts              | 28 ++++++++---
 .../src/stories/inlang-lint-report-tip.ts     | 31 ++++++------
 .../src/stories/inlang-message.ts             | 10 ++--
 .../src/stories/inlang-variant.ts             | 36 ++++++--------
 7 files changed, 126 insertions(+), 54 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/mock/lint.ts b/inlang/source-code/bundle-component/src/mock/lint.ts
index b4ea1691fd..5fb4e07384 100644
--- a/inlang/source-code/bundle-component/src/mock/lint.ts
+++ b/inlang/source-code/bundle-component/src/mock/lint.ts
@@ -30,9 +30,39 @@ import // createMockBundleLintReport,
 // 	}),
 // ]
 
+export const mockMessageLintReports = [
+	{
+		ruleId: "message.inlang.missingMessage",
+		type: "message",
+		typeId: "mock_message_id_de",
+		body: "The bundle `mock_bundle_human_id` is missing the reference message for the locale `en`",
+		level: "error",
+	},
+]
+
+export const mockVariantLintReports = [
+	{
+		ruleId: "variant.inlang.uppercaseVariant",
+		type: "variant",
+		typeId: "mock_variant_id_de_one",
+		body: "There is a variant that contains the term opral, which is not written in uppercase",
+		level: "error",
+	},
+]
+
+export const mockBundleLintReports = [
+	{
+		ruleId: "bundle.inlang.aliasIncorrect",
+		type: "bundle",
+		typeId: "mock_bundle_human_id",
+		body: "The alias is incorrect",
+		level: "error",
+	},
+]
+
 export const mockInstalledLintRules = [
 	{
-		id: "messageBundleLintRule.inlang.missingMessage",
+		id: "message.inlang.missingMessage",
 		displayName: "Missing Message",
 		description: "Reports when a message is missing in a message bundle",
 		module:
@@ -40,11 +70,19 @@ export const mockInstalledLintRules = [
 		level: "error",
 	},
 	{
-		id: "messageBundleLintRule.inlang.missingReference",
-		displayName: "Missing Reference",
-		description: "Reports when a reference message is missing in a message bundle",
+		id: "variant.inlang.uppercaseVariant",
+		displayName: "Uppercase Variant",
+		description: "Reports when opral is not written in uppercase",
+		module:
+			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+		level: "error",
+	},
+	{
+		id: "bundle.inlang.aliasIncorrect",
+		displayName: "Alias Incorrect",
+		description: "Reports when the alias is incorrect",
 		module:
 			"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
-		level: "warning",
+		level: "error",
 	},
 ]
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
index d4e9aea9b6..0fa82599e8 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
@@ -1,6 +1,8 @@
 import type {
 	Declaration,
+	InstalledLintRule,
 	LanguageTag,
+	LintReport,
 	Message,
 	NestedBundle,
 	ProjectSettings2,
@@ -136,6 +138,15 @@ export default class InlangBundleHeader extends LitElement {
 	@property()
 	settings: ProjectSettings2 | undefined
 
+	@property()
+	bundleValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	installedLintRules: InstalledLintRule[] | undefined
+
+	@property()
+	fixLint: (lintReport: LintReport, fix: LintReport["fixes"][0]["title"]) => void = () => {}
+
 	@property()
 	addInput: (input: Declaration) => void = () => {}
 
@@ -282,6 +293,11 @@ export default class InlangBundleHeader extends LitElement {
 									</sl-menu>
 								</sl-dropdown>`
 						: ``}
+					<inlang-lint-report-tip
+						.lintReports=${this.bundleValidationReports}
+						.installedLintRules=${this.installedLintRules}
+						.fixLint=${this.fixLint}
+					></inlang-lint-report-tip>
 				</div>
 			</div>
 		`
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
index 4f6ac0960d..b657e76b00 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.stories.ts
@@ -12,6 +12,12 @@ import { bundleWithoutSelectors } from "../mock/messageBundle.ts"
 import { pluralBundle } from "@inlang/sdk-v2"
 
 import "./actions/inlang-bundle-action.ts"
+import {
+	mockBundleLintReports,
+	mockInstalledLintRules,
+	mockMessageLintReports,
+	mockVariantLintReports,
+} from "../mock/lint.ts"
 
 const meta: Meta = {
 	component: "inlang-bundle",
@@ -60,7 +66,10 @@ export const Complex: StoryObj = {
 		return html`<inlang-bundle
 			.bundle=${pluralBundle}
 			.settings=${mockSettings}
-			.installedLintRules=${[]}
+			.installedLintRules=${mockInstalledLintRules}
+			.bundleValidationReports=${mockBundleLintReports}
+			.messageValidationReports=${mockMessageLintReports}
+			.variantValidationReports=${mockVariantLintReports}
 			@update-bundle=${(data: any) => console.info("updateBundle", data.detail.argument)}
 			@insert-message=${(data: any) => console.info("insertMessage", data.detail.argument)}
 			@update-message=${(data: any) => console.info("updateMessage", data.detail.argument)}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index 918f177022..985c72780a 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -75,6 +75,15 @@ export default class InlangBundle extends LitElement {
 	@property({ type: Array })
 	installedLintRules: InstalledLintRule[] | undefined
 
+	@property({ type: Array })
+	bundleValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	messageValidationReports: Array<any> | undefined
+
+	@property({ type: Array })
+	variantValidationReports: Array<any> | undefined
+
 	//disable shadow root -> because of contenteditable selection API
 	override createRenderRoot() {
 		return this
@@ -362,6 +371,9 @@ export default class InlangBundle extends LitElement {
 				<inlang-bundle-header
 					.bundle=${this._bundle}
 					.settings=${this.settings}
+					.installedLintRules=${this.installedLintRules}
+					.bundleValidationReports=${this.bundleValidationReports}
+					.fixLint=${this._fixLint}
 					.addInput=${this._addInput}
 					.triggerSave=${this._triggerSave}
 					.triggerRefresh=${this._triggerRefresh}
@@ -375,15 +387,14 @@ export default class InlangBundle extends LitElement {
 					${this._locales() &&
 					this._locales()?.map((locale) => {
 						const message = this._bundle?.messages.find((message) => message.locale === locale)
+						const _messageValidationReports = this.messageValidationReports?.filter(
+							(report: any) => report.typeId === message?.id
+						)
 						// TODO SDK-v2 lint reports
-						const lintReports = [] as any[]
-						// const lintReports = this._bundle?.lintReports?.reports.filter(
-						// 	(report) => report.messageId === message?.id
-						// )
 						return html`<inlang-message
 							.locale=${locale}
 							.message=${message}
-							.lintReports=${lintReports}
+							.messageValidationReports=${_messageValidationReports}
 							.installedLintRules=${this.installedLintRules}
 							.settings=${this.settings}
 							.inputs=${this._inputs()}
@@ -405,6 +416,10 @@ export default class InlangBundle extends LitElement {
 								selectors: message?.selectors || [],
 							})?.map((fakevariant) => {
 								const variant = message?.variants.find((v) => v.id === fakevariant.id)
+								const _variantValidationReports: Array<any> | undefined =
+									this.variantValidationReports?.filter(
+										(report: any) => report.typeId === variant?.id
+									)
 								return html`<inlang-variant
 									slot="variant"
 									.variant=${variant}
@@ -416,7 +431,8 @@ export default class InlangBundle extends LitElement {
 									.addMessage=${this._addMessage}
 									.addInput=${this._addInput}
 									.locale=${locale}
-									.lintReports=${lintReports}
+									.variantValidationReports=${_variantValidationReports}
+									.messageValidationReports=${_messageValidationReports}
 									.installedLintRules=${this.installedLintRules}
 									.fixLint=${this._fixLint}
 								>
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
index d63df8a8cb..dc9609b8c9 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-lint-report-tip.ts
@@ -43,6 +43,7 @@ export default class InlangLintReportTip extends LitElement {
 				flex-direction: row;
 				gap: 12px;
 				padding: 8px 12px;
+				padding-bottom: 10px;
 				border-top: 1px solid var(--sl-input-border-color);
 			}
 			.dropdown-item:first-child {
@@ -177,20 +178,22 @@ export default class InlangLintReportTip extends LitElement {
 						<div class="report-content">
 							<p class="report-title">${this._getLintDisplayName(lintReport.ruleId)}</p>
 							<p class="report-body">${lintReport.body}</p>
-							<div class="report-fixes">
-								${lintReport.fixes?.map((fix) => {
-									return html`
-										<sl-button
-											@click=${() => {
-												this.fixLint(lintReport, fix.title)
-											}}
-											class="fix-button"
-											size="small"
-											>${fix.title}</sl-button
-										>
-									`
-								})}
-							</div>
+							${lintReport.fixes && lintReport.fixes.length > 0
+								? html`<div class="report-fixes">
+										${lintReport.fixes?.map((fix) => {
+											return html`
+												<sl-button
+													@click=${() => {
+														this.fixLint(lintReport, fix.title)
+													}}
+													class="fix-button"
+													size="small"
+													>${fix.title}</sl-button
+												>
+											`
+										})}
+								  </div>`
+								: ""}
 						</div>
 					</div>`
 				})}
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
index 6c4ebf4617..1b90d52b52 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-message.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -161,7 +161,7 @@ export default class InlangMessage extends LitElement {
 	message: NestedMessage | undefined
 
 	@property()
-	lintReports: LintReport[] | undefined
+	messageValidationReports: Array<any> | undefined
 
 	@property()
 	installedLintRules: InstalledLintRule[] | undefined
@@ -332,13 +332,9 @@ export default class InlangMessage extends LitElement {
 										  >`
 										: ``
 									: ``}
-								${this.lintReports &&
-								this.lintReports.length > 0 &&
-								this.lintReports.some((report) => !report.target.variantId)
+								${this.messageValidationReports && this.messageValidationReports.length > 0
 									? html`<inlang-lint-report-tip
-											.lintReports=${this.lintReports.filter(
-												(report) => !report.target.variantId
-											) ?? []}
+											.lintReports=${this.messageValidationReports}
 											.installedLintRules=${this.installedLintRules}
 											.fixLint=${this.fixLint}
 									  ></inlang-lint-report-tip>`
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 2c71304802..3fc9793c1f 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -153,7 +153,10 @@ export default class InlangVariant extends LitElement {
 	inputs: Declaration[] | undefined
 
 	@property()
-	lintReports: LintReport[] | undefined
+	variantValidationReports: Array<any> | undefined
+
+	@property()
+	messageValidationReports: Array<any> | undefined
 
 	@property()
 	installedLintRules: InstalledLintRule[] | undefined
@@ -208,27 +211,18 @@ export default class InlangVariant extends LitElement {
 	//functions
 	private _getLintReports = (): LintReport[] | undefined => {
 		// wether a lint report belongs to a variant or message and when they are shown
-		if (this.lintReports && this.lintReports.length > 0) {
-			if (
-				(this.message?.selectors && this.message.selectors.length === 0) ||
-				!this.message?.selectors
-			) {
-				// when there are no selectors the reports of the message and variant are shown on variant level
-				return this.lintReports
-			}
-			if (
-				this.message.selectors &&
-				this.message.selectors.length > 0 &&
-				this.lintReports.some(
-					(report) => report.target.variantId && report.target.variantId === this.variant?.id
-				)
-			) {
-				// when selectors are present, only the reports of the variant are shown
-				return this.lintReports.filter(
-					(report) => report.target.variantId && report.target.variantId === this.variant?.id
-				)
-			}
+		if (
+			(this.message?.selectors && this.message.selectors.length === 0) ||
+			!this.message?.selectors
+		) {
+			// when there are no selectors the reports of the message and variant are shown on variant level
+			return (this.messageValidationReports || []).concat(this.variantValidationReports || [])
+		}
+		if (this.message.selectors && this.message.selectors.length > 0) {
+			// when selectors are present, only the reports of the variant are shown
+			return this.variantValidationReports
 		}
+
 		return undefined
 	}
 

From 97f6e3ee332549ca72cac422a047dac9e99df2f1 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Fri, 26 Jul 2024 15:35:36 +0200
Subject: [PATCH 17/35] fix: selector delete

---
 .../src/helper/crud/selector/delete.ts            | 15 ++++++++++-----
 .../src/stories/inlang-bundle-header.ts           |  1 -
 .../bundle-component/src/stories/inlang-bundle.ts |  6 ------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
index a105dc512f..10c731bcac 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
@@ -11,13 +11,18 @@ import type { NestedMessage } from "@inlang/sdk-v2"
  */
 
 const deleteSelector = (props: { message: NestedMessage; index: number }) => {
-	props.message.selectors.splice(props.index, 1)
-	for (const variant of props.message.variants) {
-		for (const name in Object.keys(variant.match)) {
-			if (name === props.message.selectors[props.index]!.arg.name) {
-				delete variant.match[name]
+	const selectorName = props.message.selectors[props.index]!.arg.name
+	if (selectorName) {
+		props.message.selectors.splice(props.index, 1)
+		for (const variant of props.message.variants) {
+			for (const name in Object.keys(variant.match)) {
+				if (name === selectorName) {
+					delete variant.match[name]
+				}
 			}
 		}
+	} else {
+		console.error("Index is not pointing on a selector")
 	}
 }
 
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
index 0fa82599e8..eea804bceb 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
@@ -214,7 +214,6 @@ export default class InlangBundleHeader extends LitElement {
 														value="delete"
 														@click=${() => {
 															deleteInput({ messageBundle: this.bundle!, input })
-															// deleteSelector({ message, index })
 															this.requestUpdate()
 															for (const message of this.bundle!.messages) {
 																this.dispatchOnUpdateMessage(message, [])
diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
index 985c72780a..984e886a12 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle.ts
@@ -51,14 +51,8 @@ import getInputs from "../helper/crud/input/get.js"
 import createInput from "../helper/crud/input/create.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
 import patternToString from "../helper/crud/pattern/patternToString.js"
-import stringToPattern from "../helper/crud/pattern/stringToPattern.js"
 import sortAllVariants from "../helper/crud/variant/sortAll.js"
 import InlangBundleAction from "./actions/inlang-bundle-action.js"
-import deleteInput from "../helper/crud/input/delete.js"
-import deleteSelector from "../helper/crud/selector/delete.js"
-import addSelector from "../helper/crud/selector/add.js"
-import deleteVariant from "../helper/crud/variant/delete.js"
-import updateMatch from "../helper/crud/variant/updateMatch.js"
 
 @customElement("inlang-bundle")
 export default class InlangBundle extends LitElement {

From aac75223303afac6e6fe609a9ec5b45f0c139350 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Fri, 26 Jul 2024 15:46:08 +0200
Subject: [PATCH 18/35] fix: lint report resolution of variants

---
 .../bundle-component/src/stories/inlang-variant.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 3fc9793c1f..091d453a27 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -209,21 +209,18 @@ export default class InlangVariant extends LitElement {
 	}
 
 	//functions
-	private _getLintReports = (): LintReport[] | undefined => {
+	private _getLintReports = (): LintReport[] => {
 		// wether a lint report belongs to a variant or message and when they are shown
 		if (
-			(this.message?.selectors && this.message.selectors.length === 0) ||
-			!this.message?.selectors
+			((this.message?.selectors && this.message.selectors.length === 0) ||
+				!this.message?.selectors) &&
+			this.message?.variants.length === 1
 		) {
 			// when there are no selectors the reports of the message and variant are shown on variant level
 			return (this.messageValidationReports || []).concat(this.variantValidationReports || [])
 		}
-		if (this.message.selectors && this.message.selectors.length > 0) {
-			// when selectors are present, only the reports of the variant are shown
-			return this.variantValidationReports
-		}
 
-		return undefined
+		return this.variantValidationReports || []
 	}
 
 	private _delete = () => {
@@ -312,6 +309,7 @@ export default class InlangVariant extends LitElement {
 	}
 
 	override render() {
+		console.log(this.message)
 		return !(!this.variant && this.message && this.message?.selectors.length > 0)
 			? html`<div class="variant">
 					${this.variant

From f3ed675c3dd579baa578d86d7070b5ff50fa9e16 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Fri, 26 Jul 2024 15:56:49 +0200
Subject: [PATCH 19/35] fix: delete index/name

---
 .../src/helper/crud/selector/delete.test.ts    | 18 +++++++++++++++++-
 .../src/helper/crud/selector/delete.ts         |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
index d153292e2d..1fdaef87a7 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.test.ts
@@ -25,7 +25,22 @@ describe("deleteSelector", () => {
 				},
 			],
 			declarations: [],
-			variants: [],
+			variants: [
+				{
+					id: "variantId",
+					messageId: "testId",
+					match: {
+						count: "1",
+						name: "John",
+					},
+					pattern: [
+						{
+							type: "text",
+							value: "Hello ",
+						},
+					],
+				},
+			],
 		}
 
 		deleteSelector({ message, index: 0 })
@@ -33,5 +48,6 @@ describe("deleteSelector", () => {
 		expect(message.selectors.length).toBe(1)
 		// @ts-ignore
 		expect(message.selectors[0]!.arg.name).toBe("name")
+		expect(Object.keys(message.variants[0]!.match).length).toBe(1)
 	})
 })
diff --git a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
index 10c731bcac..f7e4ed7f8d 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/selector/delete.ts
@@ -15,7 +15,7 @@ const deleteSelector = (props: { message: NestedMessage; index: number }) => {
 	if (selectorName) {
 		props.message.selectors.splice(props.index, 1)
 		for (const variant of props.message.variants) {
-			for (const name in Object.keys(variant.match)) {
+			for (const name in variant.match) {
 				if (name === selectorName) {
 					delete variant.match[name]
 				}

From f3aff5aca440e4b7ab7a54ffd97b154ac97e178f Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Fri, 26 Jul 2024 16:03:46 +0200
Subject: [PATCH 20/35] fix: css foreground of lint reports

---
 .../source-code/bundle-component/src/stories/inlang-variant.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
index 091d453a27..b5d4783904 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-variant.ts
@@ -282,7 +282,8 @@ export default class InlangVariant extends LitElement {
 		// works like useEffect
 		// In order to not mutate object references, we need to clone the object
 		// When the messageBundle prop changes, we update the internal state
-		if (changedProperties.has("lintReports")) {
+		if (changedProperties.has("variantValidationReports", "messageValidationReports")) {
+			console.log("variantValidationReports or messageValidationReports changed")
 			// adds classes when dropdown is open, to keep it open when not hovering the variant
 			const lintReportsTip = this.shadowRoot?.querySelector("inlang-lint-report-tip")
 			const lintReportDropdown = lintReportsTip?.shadowRoot?.querySelector("sl-dropdown")

From 8a82ceeb9e06463c366d915c3b16c3220c9a1550 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 12:34:14 +0200
Subject: [PATCH 21/35] introduce importer/exporter to plugin API

---
 inlang/source-code/sdk-v2/src/types/plugin.ts |  72 +++---
 inlang/source-code/sdk-v2/src/types/schema.ts | 216 ++++++++++--------
 .../sdk-v2/src/types/translation-file.ts      |   9 +
 3 files changed, 166 insertions(+), 131 deletions(-)
 create mode 100644 inlang/source-code/sdk-v2/src/types/translation-file.ts

diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
index 941a6cacac..bd99c74a71 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -8,7 +8,11 @@ import {
 import type { JSONObject } from "@inlang/json-types"
 import type { CustomApiInlangIdeExtension } from "./customApis/app.inlang.ideExtension.js"
 import { Translatable } from "@inlang/translatable"
-import type { ProjectSettings2, ExternalProjectSettings } from "./project-settings.js"
+import {
+	type ProjectSettings2 as ProjectSettings2Type,
+	type ExternalProjectSettings as ExternalProjectSettingsType,
+	ExternalProjectSettings,
+} from "./project-settings.js"
 import type {
 	PluginHasInvalidIdError,
 	PluginHasInvalidSchemaError,
@@ -17,6 +21,8 @@ import type {
 	PluginSaveMessagesFunctionAlreadyDefinedError,
 	PluginsDoNotProvideLoadOrSaveMessagesError,
 } from "./plugin-errors.js"
+import { NestedBundle } from "./schema.js"
+import { TranslationFile, type TranslationFile as TranslationFileType } from "./translation-file.js"
 
 // ---------------------------- RUNTIME VALIDATION TYPES ---------------------------------------------
 
@@ -36,26 +42,24 @@ import type {
  * ```
  */
 export type Plugin2<
-	ExternalSettings extends Record<keyof ExternalProjectSettings, JSONObject> | unknown = unknown
+	ExternalSettings extends Record<keyof ExternalProjectSettingsType, JSONObject> | unknown = unknown
 > = Omit<
 	Static<typeof Plugin2>,
-	"loadMessages" | "saveMessages" | "addCustomApi" | "settingsSchema"
+	"toBeImportedFiles" | "importFiles" | "exportFiles" | "addCustomApi" | "settingsSchema"
 > & {
 	settingsSchema?: TObject
 	/**
-	 * Load messages.
+	 * Import / Export files.
 	 */
-	// TODO SDK-V2 check how to setup loadMessages
-	// loadMessages?: (args: {
-	// 	settings: ProjectSettings2 & ExternalSettings
-	// 	// nodeishFs: NodeishFilesystemSubset
-	// }) => Promise<Message[]> | Message[]
-	// TODO SDK-V2 check how to setup saveMessages
-	// saveMessages?: (args: {
-	// 	// messages: Message[]
-	// 	settings: ProjectSettings2 & ExternalSettings
-	// 	// nodeishFs: NodeishFilesystemSubset
-	// }) => Promise<void> | void
+	toBeImportedFiles?: (args: {
+		settings: ProjectSettings2Type & ExternalSettings
+		nodeFs: unknown
+	}) => Promise<Array<TranslationFileType>> | Array<TranslationFileType>
+	importFiles?: (args: { files: Array<TranslationFileType> }) => { bundles: NestedBundle }
+	exportFiles?: (args: {
+		bundles: NestedBundle
+		settings: ProjectSettings2Type & ExternalSettings
+	}) => Array<TranslationFileType>
 	/**
 	 * Define app specific APIs.
 	 *
@@ -67,7 +71,7 @@ export type Plugin2<
 	 *  })
 	 */
 	addCustomApi?: (args: {
-		settings: ProjectSettings2 & ExternalSettings
+		settings: ProjectSettings2Type & ExternalSettings
 	}) =>
 		| Record<`app.${string}.${string}`, unknown>
 		| { "app.inlang.ideExtension": CustomApiInlangIdeExtension }
@@ -86,8 +90,24 @@ export const Plugin2 = Type.Object({
 	 * https://github.com/opral/monorepo/discussions/1503
 	 */
 	settingsSchema: Type.Optional(Type.Object({}, { additionalProperties: true })),
-	loadMessages: Type.Optional(Type.Any()),
-	saveMessages: Type.Optional(Type.Any()),
+	toBeImportedFiles: Type.Optional(
+		Type.Function(
+			[Type.Object({ settings: ExternalProjectSettings, nodeFs: Type.Any() })],
+			Type.Array(TranslationFile)
+		)
+	),
+	importFiles: Type.Optional(
+		Type.Function(
+			[Type.Object({ files: Type.Array(TranslationFile) })],
+			Type.Object({ bundles: NestedBundle })
+		)
+	),
+	exportFiles: Type.Optional(
+		Type.Function(
+			[Type.Object({ bundles: NestedBundle, settings: ExternalProjectSettings })],
+			Type.Array(TranslationFile)
+		)
+	),
 	/**
 	 * @deprecated removed
 	 */
@@ -100,7 +120,7 @@ export const Plugin2 = Type.Object({
  */
 export type ResolvePlugins2Function = (args: {
 	plugins: Array<Plugin2>
-	settings: ProjectSettings2
+	settings: ProjectSettings2Type
 }) => Promise<{
 	data: ResolvedPlugin2Api
 	errors: Array<
@@ -117,17 +137,9 @@ export type ResolvePlugins2Function = (args: {
  * The API after resolving the plugins.
  */
 export type ResolvedPlugin2Api = {
-	// TODO SDK-V2 check how to setup loadMessages
-	// loadMessages: (args: {
-	// 	settings: ProjectSettings2
-	// 	nodeishFs: NodeishFilesystemSubset
-	// }) => Promise<Message[]> | Message[]
-	// TODO SDK-V2 check how to setup saveMessages
-	// saveMessages: (args: {
-	// 	settings: ProjectSettings2
-	// 	messages: Message[]
-	// 	nodeishFs: NodeishFilesystemSubset
-	// }) => Promise<void> | void
+	toBeImportedFiles: Array<Plugin2["toBeImportedFiles"]>
+	importFiles: Array<Plugin2["importFiles"]>
+	exportFiles: Array<Plugin2["exportFiles"]>
 	/**
 	 * App specific APIs.
 	 *
diff --git a/inlang/source-code/sdk-v2/src/types/schema.ts b/inlang/source-code/sdk-v2/src/types/schema.ts
index c8685051f3..d359155729 100644
--- a/inlang/source-code/sdk-v2/src/types/schema.ts
+++ b/inlang/source-code/sdk-v2/src/types/schema.ts
@@ -1,113 +1,127 @@
-import type { Insertable, JSONColumnType, Selectable, Updateable } from "kysely"
-
+import { Type, type Static } from "@sinclair/typebox"
+import type { Insertable, Selectable, Updateable } from "kysely"
 import type { LintReport } from "./lint.js"
 
-export type Database = {
-	bundle: BundleTable
-	message: MessageTable
-	variant: VariantTable
-
-	lintReport: LintReport
-	// todo - move out of database
-	settings: Settings
-}
-
-type AliasMap = {
-	[key: string]: string
-}
-
-// Bundles all languages of a message -
-type BundleTable = {
-	id: string
-	// todo make alias relational
-	alias: JSONColumnType<AliasMap> // alias usually have a property "default"  that represents the message name like "welcome_message" or "login_button"
-	// messages[] @relation
-	// messages: Message[]
+export const VariableReference = Type.Object({
+	type: Type.Literal("variable"),
+	name: Type.String(),
+})
+
+export const Literal = Type.Object({
+	type: Type.Literal("literal"),
+	name: Type.String(),
+})
+
+export const Option = Type.Object({
+	name: Type.String(),
+	value: Type.Union([Literal, VariableReference]),
+})
+
+const FunctionAnnotation = Type.Object({
+	type: Type.Literal("function"),
+	name: Type.String(),
+	options: Type.Array(Option),
+})
+
+export const Expression = Type.Object({
+	type: Type.Literal("expression"),
+	arg: Type.Union([VariableReference, Literal]),
+	annotation: Type.Optional(FunctionAnnotation),
+})
+
+export const Text = Type.Object({
+	type: Type.Literal("text"),
+	value: Type.String(),
+})
+
+export const Declaration = Type.Object({
+	type: Type.Literal("input"),
+	name: Type.String(),
+	value: Expression,
+})
+
+export const Pattern = Type.Array(Type.Union([Text, Expression]))
+
+export const Settings = Type.Object({
+	baseLocale: Type.String(),
+	locales: Type.String(),
+	modules: Type.String(),
+})
+
+export const BundleTable = Type.Object({
+	id: Type.String(),
+	alias: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<AliasMap>
+})
+
+export const MessageTable = Type.Object({
+	id: Type.String(),
+	bundleId: Type.String(),
+	locale: Type.String(),
+	declarations: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Declaration[]>
+	selectors: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Expression[]>
+})
+
+export const VariantTable = Type.Object({
+	id: Type.String(),
+	messageId: Type.String(),
+	match: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Record<Expression["arg"]["name"], string>>
+	pattern: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Pattern>
+})
+
+export const NestedMessage = Type.Object({
+	id: Type.String(),
+	locale: Type.String(),
+	declarations: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Declaration[]>
+	selectors: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<Expression[]>
+	variants: Type.Array(VariantTable),
+})
+
+export const NestedBundle = Type.Object({
+	id: Type.String(),
+	alias: Type.Any(), // TODO: Use appropriate Typebox type for JSONColumnType<AliasMap>
+	messages: Type.Array(NestedMessage),
+})
+
+// Export types
+export type BundleTableType = Static<typeof BundleTable>
+export type MessageTableType = Static<typeof MessageTable>
+export type VariantTableType = Static<typeof VariantTable>
+
+export type Bundle = Selectable<BundleTableType>
+
+export type NestedMessage = Selectable<MessageTableType> & {
+	variants: Selectable<VariantTableType>[]
 }
 
-type MessageTable = {
-	id: string
-	// @relation to Bundle
-	bundleId: BundleTable["id"]
-	locale: string
-	declarations: JSONColumnType<Declaration[]> // JSON
-	selectors: JSONColumnType<Expression[]> // JSON
-	// variants: Variant[]
-}
-
-type VariantTable = {
-	id: string
-	// @relation to Message
-	messageId: MessageTable["id"]
-	match: JSONColumnType<Record<Expression["arg"]["name"], string>>
-	pattern: JSONColumnType<Pattern> // JSON
-}
-
-export type Bundle = Selectable<BundleTable>
-
-export type NestedMessage = Message & {
-	variants: Variant[]
-}
-
-export type NestedBundle = Bundle & {
+export type NestedBundle = Selectable<BundleTableType> & {
 	messages: NestedMessage[]
 }
 
-export type NewBundle = Insertable<BundleTable>
-export type UpdatedBundle = Updateable<BundleTable>
-
-export type Message = Selectable<MessageTable>
-export type NewMessage = Insertable<MessageTable>
-export type UpdatedMessage = Updateable<MessageTable>
-
-export type Variant = Selectable<VariantTable>
-export type NewVariant = Insertable<VariantTable>
-export type UpdatedVariant = Updateable<VariantTable>
-
-export type Pattern = Array<Text | Expression>
-
-export type Text = {
-	type: "text"
-	value: string
-}
-
-export type VariableReference = {
-	type: "variable"
-	name: string
-}
-
-export type Literal = {
-	type: "literal"
-	name: string
-}
-
-export type Declaration = InputDeclaration
-
-export type InputDeclaration = {
-	type: "input"
-	name: string
-	value: Expression
-}
+export type NewBundle = Insertable<BundleTableType>
+export type UpdatedBundle = Updateable<BundleTableType>
 
-export type Expression = {
-	type: "expression"
-	arg: VariableReference | Literal
-	annotation?: FunctionAnnotation
-}
+export type Message = Selectable<MessageTableType>
+export type NewMessage = Insertable<MessageTableType>
+export type UpdatedMessage = Updateable<MessageTableType>
 
-export type FunctionAnnotation = {
-	type: "function"
-	name: string
-	options: Option[]
-}
+export type Variant = Selectable<VariantTableType>
+export type NewVariant = Insertable<VariantTableType>
+export type UpdatedVariant = Updateable<VariantTableType>
 
-export type Option = {
-	name: string
-	value: Literal | VariableReference
-}
+export type PatternType = Static<typeof Pattern>
+export type TextType = Static<typeof Text>
+export type VariableReferenceType = Static<typeof VariableReference>
+export type LiteralType = Static<typeof Literal>
+export type DeclarationType = Static<typeof Declaration>
+export type ExpressionType = Static<typeof Expression>
+export type FunctionAnnotationType = Static<typeof FunctionAnnotation>
+export type OptionType = Static<typeof Option>
+export type SettingsType = Static<typeof Settings>
 
-export type Settings = {
-	baseLocale: string
-	locales: string
-	modules: string
+export type Database = {
+	bundle: Static<typeof BundleTable>
+	message: Static<typeof MessageTable>
+	variant: Static<typeof VariantTable>
+	lintReport: LintReport
+	settings: Static<typeof Settings>
 }
diff --git a/inlang/source-code/sdk-v2/src/types/translation-file.ts b/inlang/source-code/sdk-v2/src/types/translation-file.ts
new file mode 100644
index 0000000000..ea87f61865
--- /dev/null
+++ b/inlang/source-code/sdk-v2/src/types/translation-file.ts
@@ -0,0 +1,9 @@
+import { Type, type Static } from "@sinclair/typebox"
+
+export const TranslationFile = Type.Object({
+	path: Type.String(),
+	content: Type.String(),
+	pluginKey: Type.String(),
+})
+
+export type TranslationFile = Static<typeof TranslationFile>

From 91c72c025157672a42eb1fe6d5dec9a84e76d6fe Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 13:03:52 +0200
Subject: [PATCH 22/35] update reference in code

---
 inlang/source-code/sdk-v2/src/types/plugin.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
index bd99c74a71..1c29703eaa 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -50,6 +50,7 @@ export type Plugin2<
 	settingsSchema?: TObject
 	/**
 	 * Import / Export files.
+	 * see https://linear.app/opral/issue/MESDK-157/sdk-v2-release-on-sqlite
 	 */
 	toBeImportedFiles?: (args: {
 		settings: ProjectSettings2Type & ExternalSettings
@@ -85,11 +86,14 @@ export const Plugin2 = Type.Object({
 	displayName: Translatable(Type.String()),
 	description: Translatable(Type.String()),
 	/**
-	 * Tyepbox is must be used to validate the Json Schema.
+	 * Tyepbox must be used to validate the Json Schema.
 	 * Github discussion to upvote a plain Json Schema validator and read the benefits of Typebox
 	 * https://github.com/opral/monorepo/discussions/1503
 	 */
 	settingsSchema: Type.Optional(Type.Object({}, { additionalProperties: true })),
+	/**
+	 * see https://linear.app/opral/issue/MESDK-157/sdk-v2-release-on-sqlite
+	 */
 	toBeImportedFiles: Type.Optional(
 		Type.Function(
 			[Type.Object({ settings: ExternalProjectSettings, nodeFs: Type.Any() })],
@@ -137,6 +141,10 @@ export type ResolvePlugins2Function = (args: {
  * The API after resolving the plugins.
  */
 export type ResolvedPlugin2Api = {
+	/**
+	 * Importer / Exporter functions.
+	 * see https://linear.app/opral/issue/MESDK-157/sdk-v2-release-on-sqlite
+	 */
 	toBeImportedFiles: Array<Plugin2["toBeImportedFiles"]>
 	importFiles: Array<Plugin2["importFiles"]>
 	exportFiles: Array<Plugin2["exportFiles"]>

From d93f29f63f5c35aaff8aebb7781b8dc79d626b33 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:01:41 +0200
Subject: [PATCH 23/35] update plugin error types

---
 .../sdk-v2/src/types/plugin-errors.ts         | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/types/plugin-errors.ts b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
index cdfd21190a..984d163330 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
@@ -21,21 +21,30 @@ export class PluginHasInvalidSchemaError extends Error {
 	}
 }
 
-export class PluginLoadMessagesFunctionAlreadyDefinedError extends Error {
+export class PluginToBeImportedFilesFunctionAlreadyDefinedError extends Error {
 	constructor(options: { id: Plugin["id"] }) {
 		super(
-			`Plugin "${options.id}" defines the \`loadMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`loadMessages()\` function.`
+			`Plugin "${options.id}" defines the \`toBeImportedFiles()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`toBeImportedFiles()\` function.`
 		)
-		this.name = "PluginLoadMessagesFunctionAlreadyDefinedError"
+		this.name = "PluginToBeImportedFilesFunctionAlreadyDefinedError"
 	}
 }
 
-export class PluginSaveMessagesFunctionAlreadyDefinedError extends Error {
+export class PluginImportFilesFunctionAlreadyDefinedError extends Error {
 	constructor(options: { id: Plugin["id"] }) {
 		super(
-			`Plugin "${options.id}" defines the \`saveMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`saveMessages()\` function.`
+			`Plugin "${options.id}" defines the \`importFiles()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`ImportFiles()\` function.`
 		)
-		this.name = "PluginSaveMessagesFunctionAlreadyDefinedError"
+		this.name = "PluginImportFilesFunctionAlreadyDefinedError"
+	}
+}
+
+export class PluginExportFilesFunctionAlreadyDefinedError extends Error {
+	constructor(options: { id: Plugin["id"] }) {
+		super(
+			`Plugin "${options.id}" defines the \`exportFiles()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`ExportFiles()\` function.`
+		)
+		this.name = "PluginExportFilesFunctionAlreadyDefinedError"
 	}
 }
 
@@ -46,11 +55,11 @@ export class PluginReturnedInvalidCustomApiError extends Error {
 	}
 }
 
-export class PluginsDoNotProvideLoadOrSaveMessagesError extends Error {
+export class PluginsDoNotProvideImportOrExportFilesError extends Error {
 	constructor() {
 		super(
-			`No plugin provides a \`loadMessages()\` or \`saveMessages()\` function\n\nIn case no plugin threw an error, you likely forgot to add a plugin that handles the loading and saving of messages. Refer to the marketplace for available plugins https://inlang.com/marketplace.`
+			`No plugin provides a \`importFiles()\` or \`exportFiles()\` function\n\nIn case no plugin threw an error, you likely forgot to add a plugin that handles the import and export of messages. Refer to the marketplace for available plugins https://inlang.com/marketplace.`
 		)
-		this.name = "PluginsDoNotProvideLoadOrSaveMessagesError"
+		this.name = "PluginsDoNotProvideImportOrExportFilesError"
 	}
 }

From e8bdeb8a432306d652536e3b6abcca586083f9f0 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:02:00 +0200
Subject: [PATCH 24/35] update plugin error type usage in plugin API

---
 inlang/source-code/sdk-v2/src/types/plugin.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
index 1c29703eaa..98aded75b1 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -16,10 +16,11 @@ import {
 import type {
 	PluginHasInvalidIdError,
 	PluginHasInvalidSchemaError,
-	PluginLoadMessagesFunctionAlreadyDefinedError,
 	PluginReturnedInvalidCustomApiError,
-	PluginSaveMessagesFunctionAlreadyDefinedError,
-	PluginsDoNotProvideLoadOrSaveMessagesError,
+	PluginImportFilesFunctionAlreadyDefinedError,
+	PluginExportFilesFunctionAlreadyDefinedError,
+	PluginsDoNotProvideImportOrExportFilesError,
+	PluginToBeImportedFilesFunctionAlreadyDefinedError,
 } from "./plugin-errors.js"
 import { NestedBundle } from "./schema.js"
 import { TranslationFile, type TranslationFile as TranslationFileType } from "./translation-file.js"
@@ -129,11 +130,12 @@ export type ResolvePlugins2Function = (args: {
 	data: ResolvedPlugin2Api
 	errors: Array<
 		| PluginReturnedInvalidCustomApiError
-		| PluginLoadMessagesFunctionAlreadyDefinedError
-		| PluginSaveMessagesFunctionAlreadyDefinedError
+		| PluginToBeImportedFilesFunctionAlreadyDefinedError
+		| PluginImportFilesFunctionAlreadyDefinedError
+		| PluginExportFilesFunctionAlreadyDefinedError
 		| PluginHasInvalidIdError
 		| PluginHasInvalidSchemaError
-		| PluginsDoNotProvideLoadOrSaveMessagesError
+		| PluginsDoNotProvideImportOrExportFilesError
 	>
 }>
 

From ea972033d3fa97441afb44b982563609cc72967a Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:02:21 +0200
Subject: [PATCH 25/35] refactor type naming

---
 inlang/source-code/sdk-v2/src/types/schema.ts | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/types/schema.ts b/inlang/source-code/sdk-v2/src/types/schema.ts
index d359155729..f21aae77bf 100644
--- a/inlang/source-code/sdk-v2/src/types/schema.ts
+++ b/inlang/source-code/sdk-v2/src/types/schema.ts
@@ -83,40 +83,40 @@ export const NestedBundle = Type.Object({
 })
 
 // Export types
-export type BundleTableType = Static<typeof BundleTable>
-export type MessageTableType = Static<typeof MessageTable>
-export type VariantTableType = Static<typeof VariantTable>
+export type BundleTable = Static<typeof BundleTable>
+export type MessageTable = Static<typeof MessageTable>
+export type VariantTable = Static<typeof VariantTable>
 
-export type Bundle = Selectable<BundleTableType>
+export type Bundle = Selectable<BundleTable>
 
-export type NestedMessage = Selectable<MessageTableType> & {
-	variants: Selectable<VariantTableType>[]
+export type NestedMessage = Selectable<MessageTable> & {
+	variants: Selectable<VariantTable>[]
 }
 
-export type NestedBundle = Selectable<BundleTableType> & {
+export type NestedBundle = Selectable<BundleTable> & {
 	messages: NestedMessage[]
 }
 
-export type NewBundle = Insertable<BundleTableType>
-export type UpdatedBundle = Updateable<BundleTableType>
-
-export type Message = Selectable<MessageTableType>
-export type NewMessage = Insertable<MessageTableType>
-export type UpdatedMessage = Updateable<MessageTableType>
-
-export type Variant = Selectable<VariantTableType>
-export type NewVariant = Insertable<VariantTableType>
-export type UpdatedVariant = Updateable<VariantTableType>
-
-export type PatternType = Static<typeof Pattern>
-export type TextType = Static<typeof Text>
-export type VariableReferenceType = Static<typeof VariableReference>
-export type LiteralType = Static<typeof Literal>
-export type DeclarationType = Static<typeof Declaration>
-export type ExpressionType = Static<typeof Expression>
-export type FunctionAnnotationType = Static<typeof FunctionAnnotation>
-export type OptionType = Static<typeof Option>
-export type SettingsType = Static<typeof Settings>
+export type NewBundle = Insertable<BundleTable>
+export type UpdatedBundle = Updateable<BundleTable>
+
+export type Message = Selectable<MessageTable>
+export type NewMessage = Insertable<MessageTable>
+export type UpdatedMessage = Updateable<MessageTable>
+
+export type Variant = Selectable<VariantTable>
+export type NewVariant = Insertable<VariantTable>
+export type UpdatedVariant = Updateable<VariantTable>
+
+export type Pattern = Static<typeof Pattern>
+export type Text = Static<typeof Text>
+export type VariableReference = Static<typeof VariableReference>
+export type Literal = Static<typeof Literal>
+export type Declaration = Static<typeof Declaration>
+export type Expression = Static<typeof Expression>
+export type FunctionAnnotation = Static<typeof FunctionAnnotation>
+export type Option = Static<typeof Option>
+export type Settings = Static<typeof Settings>
 
 export type Database = {
 	bundle: Static<typeof BundleTable>

From 5743ea69198640676433088bde8278e78bea686a Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:03:11 +0200
Subject: [PATCH 26/35] reimplement resolve plugin behavior

---
 .../source-code/sdk-v2/src/resolvePlugins2.ts | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
index def3009fe2..80bb0d0822 100644
--- a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -3,11 +3,12 @@ import type { ResolvePlugins2Function } from "./types/index.js"
 import { Plugin } from "@inlang/plugin"
 import {
 	PluginReturnedInvalidCustomApiError,
-	PluginLoadMessagesFunctionAlreadyDefinedError,
-	PluginSaveMessagesFunctionAlreadyDefinedError,
-	PluginsDoNotProvideLoadOrSaveMessagesError,
+	PluginImportFilesFunctionAlreadyDefinedError,
+	PluginExportFilesFunctionAlreadyDefinedError,
+	PluginToBeImportedFilesFunctionAlreadyDefinedError,
 	PluginHasInvalidIdError,
 	PluginHasInvalidSchemaError,
+	PluginsDoNotProvideImportOrExportFilesError,
 } from "./types/plugin-errors.js"
 import { deepmerge } from "deepmerge-ts"
 import { TypeCompiler } from "@sinclair/typebox/compiler"
@@ -19,8 +20,9 @@ const PluginCompiler = TypeCompiler.Compile(Plugin)
 export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 	const result: Awaited<ReturnType<ResolvePlugins2Function>> = {
 		data: {
-			// loadMessages: undefined as any,
-			// saveMessages: undefined as any,
+			toBeImportedFiles: undefined as any,
+			importFiles: undefined as any,
+			exportFiles: undefined as any,
 			customApi: {},
 		},
 		errors: [],
@@ -54,15 +56,21 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 			)
 		}
 
-		// -- ALREADY DEFINED LOADMESSAGES / SAVEMESSAGES / DETECTEDLANGUAGETAGS --
-		// TODO SDK-v2 check if we can reuse this for export/import
-		// if (typeof plugin.loadMessages === "function" && result.data.loadMessages !== undefined) {
-		// 	result.errors.push(new PluginLoadMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		// }
+		// -- ALREADY DEFINED IMPORTFILES / EXPORTFILES / DETECTEDLANGUAGETAGS --
+		if (
+			typeof plugin.toBeImportedFiles === "function" &&
+			result.data.toBeImportedFiles !== undefined
+		) {
+			result.errors.push(new PluginToBeImportedFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
 
-		// if (typeof plugin.saveMessages === "function" && result.data.saveMessages !== undefined) {
-		// 	result.errors.push(new PluginSaveMessagesFunctionAlreadyDefinedError({ id: plugin.id }))
-		// }
+		if (typeof plugin.importFiles === "function" && result.data.importFiles !== undefined) {
+			result.errors.push(new PluginImportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
+
+		if (typeof plugin.exportFiles === "function" && result.data.exportFiles !== undefined) {
+			result.errors.push(new PluginExportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		}
 
 		// --- ADD APP SPECIFIC API ---
 		if (typeof plugin.addCustomApi === "function") {
@@ -93,14 +101,20 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		 * -------------- BEGIN ADDING TO RESULT --------------
 		 */
 
-		// TODO SDK-v2 we remove load/save Message for now
-		// if (typeof plugin.loadMessages === "function") {
-		// 	result.data.loadMessages = plugin.loadMessages
-		// }
+		if (typeof plugin.toBeImportedFiles === "function") {
+			result.data.toBeImportedFiles = [
+				...(result.data.toBeImportedFiles ?? []),
+				plugin.toBeImportedFiles,
+			]
+		}
 
-		// if (typeof plugin.saveMessages === "function") {
-		// 	result.data.saveMessages = plugin.saveMessages
-		// }
+		if (typeof plugin.importFiles === "function") {
+			result.data.importFiles = [...(result.data.importFiles ?? []), plugin.importFiles]
+		}
+
+		if (typeof plugin.exportFiles === "function") {
+			result.data.exportFiles = [...(result.data.exportFiles ?? []), plugin.exportFiles]
+		}
 
 		if (typeof plugin.addCustomApi === "function") {
 			const { data: customApi } = tryCatch(() =>
@@ -116,14 +130,12 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 
 	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
 
-	// TODO SDK-v2 check if we can use that for exporter importer
-	// if (
-	// 	!experimentalPersistence &&
-	// 	(typeof result.data.loadMessages !== "function" ||
-	// 		typeof result.data.saveMessages !== "function")
-	// ) {
-	// 	result.errors.push(new PluginsDoNotProvideLoadOrSaveMessagesError())
-	// }
+	if (
+		!experimentalPersistence &&
+		(typeof result.data.importFiles !== "function" || typeof result.data.exportFiles !== "function")
+	) {
+		result.errors.push(new PluginsDoNotProvideImportOrExportFilesError())
+	}
 
 	return result
 }

From 30907d58dc9e46677d1a6aa6b9e63e2937d8f425 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:03:38 +0200
Subject: [PATCH 27/35] update crud helper types

---
 .../bundle-component/src/helper/crud/input/create.ts        | 6 ++++--
 .../bundle-component/src/helper/crud/input/delete.ts        | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/create.ts b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
index 5a7e98aad1..3cef7be86c 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/create.ts
@@ -1,4 +1,4 @@
-import type { NestedBundle } from "@inlang/sdk-v2"
+import type { Declaration, NestedBundle } from "@inlang/sdk-v2"
 
 /**
  * Creates an input in all messages of a message bundle.
@@ -12,7 +12,9 @@ import type { NestedBundle } from "@inlang/sdk-v2"
 
 const createInput = (props: { messageBundle: NestedBundle; inputName: string }) => {
 	for (const message of props.messageBundle.messages) {
-		if (message.declarations.some((declaration) => declaration.name === props.inputName)) {
+		if (
+			message.declarations.some((declaration: Declaration) => declaration.name === props.inputName)
+		) {
 			console.error("Input with name already exists")
 			return
 		} else {
diff --git a/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
index a2e9f5e70c..007e59789a 100644
--- a/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
+++ b/inlang/source-code/bundle-component/src/helper/crud/input/delete.ts
@@ -9,7 +9,7 @@ import type { Declaration, NestedBundle } from "@inlang/sdk-v2"
 
 const deleteInput = (props: { messageBundle: NestedBundle; input: Declaration }) => {
 	for (const message of props.messageBundle.messages) {
-		const index = message.declarations.findIndex((d) => d.name === props.input.name)
+		const index = message.declarations.findIndex((d: any) => d.name === props.input.name)
 		if (index === -1) {
 			continue
 		} else {

From f203fdcb074ad54a6755d58a349692ce6a065703 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:04:00 +0200
Subject: [PATCH 28/35] fix message bundle type errors

---
 .../bundle-component/src/stories/inlang-message.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-message.ts b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
index 1b90d52b52..669f9118aa 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-message.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-message.ts
@@ -227,7 +227,7 @@ export default class InlangMessage extends LitElement {
 					  >
 							<div class="selector-container">
 								${this.message.selectors.map(
-									(selector, index) => html`<sl-dropdown>
+									(selector: any, index: any) => html`<sl-dropdown>
 										<div class="selector" slot="trigger">
 											${
 												// @ts-ignore
@@ -351,7 +351,7 @@ export default class InlangMessage extends LitElement {
 										messageId: this.message!.id,
 										// combine the matches that are already present with the new category -> like a matrix
 										match: (() => {
-											let match: Record<string, string> = {}
+											const match: Record<string, string> = {}
 											for (const selector of this.message!.selectors) {
 												match[selector.arg.name] = "null"
 											}

From 23908a9b1924da500c32e67ae56146eac722345f Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 15:04:18 +0200
Subject: [PATCH 29/35] fix testing lint rules types

---
 .../sdk-v2/src/dev-modules/missing-selector-lint-rule.ts  | 8 ++++----
 .../sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
index 2d82e56c70..d22765252f 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/missing-selector-lint-rule.ts
@@ -16,8 +16,8 @@ const missingSelectorLintRule: MessageBundleLintRule = {
 
 		const expectedSelectors = new Set(
 			sourceMessage.selectors
-				.filter((selector) => selector.arg.type === "variable")
-				.map((selector) => (selector.arg as VariableReference).name)
+				.filter((selector: any) => selector.arg.type === "variable")
+				.map((selector: any) => (selector.arg as VariableReference).name)
 		)
 
 		for (const message of messageBundle.messages) {
@@ -25,8 +25,8 @@ const missingSelectorLintRule: MessageBundleLintRule = {
 
 			const selectors = new Set(
 				message.selectors
-					.filter((selector) => selector.arg.type === "variable")
-					.map((selector) => (selector.arg as VariableReference).name)
+					.filter((selector: any) => selector.arg.type === "variable")
+					.map((selector: any) => (selector.arg as VariableReference).name)
 			)
 
 			const missing = exclude(expectedSelectors, selectors)
diff --git a/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
index c542d61cf3..786394ce4e 100644
--- a/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
+++ b/inlang/source-code/sdk-v2/src/dev-modules/opral-uppercase-lint-rule.ts
@@ -18,13 +18,13 @@ const makeOpralUppercase: MessageBundleLintRule = {
 		for (const message of messageBundle.messages) {
 			for (const variant of message.variants) {
 				const text = variant.pattern
-					.filter((el): el is Extract<typeof el, { type: "text" }> => el.type === "text")
-					.reduce((acc, el) => acc + el.value, "")
+					.filter((el: any): el is Extract<typeof el, { type: "text" }> => el.type === "text")
+					.reduce((acc: any, el: any) => acc + el.value, "")
 
 				const matches = text.match(orpalRegex)
 				if (!matches) continue
 
-				const badMatches = matches.filter((match) => match !== match.toUpperCase())
+				const badMatches = matches.filter((match: any) => match !== match.toUpperCase())
 
 				if (badMatches.length === 0) continue
 
@@ -60,7 +60,7 @@ const makeOpralUppercase: MessageBundleLintRule = {
 		if (!variant)
 			throw new Error(`variant ${report.target.variantId} not found on message ${msg.id}`)
 
-		variant.pattern = variant.pattern.map((el) => {
+		variant.pattern = variant.pattern.map((el: any) => {
 			if (el.type !== "text") return el
 			el.value = el.value.replaceAll(orpalRegex, "OPRAL")
 			return el

From fd41ed92fed755b32cf4960a1275b1b6a869c8c2 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 16:35:57 +0200
Subject: [PATCH 30/35] refactor types to handle multiple importer / exporter

---
 inlang/source-code/sdk-v2/src/types/module.ts | 18 ++-----
 inlang/source-code/sdk-v2/src/types/plugin.ts | 53 ++++++++++---------
 2 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/types/module.ts b/inlang/source-code/sdk-v2/src/types/module.ts
index 21a731ac4b..d6224a2a44 100644
--- a/inlang/source-code/sdk-v2/src/types/module.ts
+++ b/inlang/source-code/sdk-v2/src/types/module.ts
@@ -1,22 +1,20 @@
 import type { ProjectSettings2 } from "./project-settings.js"
 import type { ImportFunction } from "../resolve-modules/import.js"
 import { Plugin2, type ResolvePlugins2Function, type ResolvedPlugin2Api } from "./plugin.js"
-import { MessageBundleLintRule } from "./lint.js"
 import type { ModuleHasNoExportsError, ModuleImportError } from "./module-errors.js"
-import type { resolveMessageBundleLintRules } from "../resolveMessageBundleLintRules.js"
 import { Type } from "@sinclair/typebox"
 
 /**
- * An inlang module has a default export that is either a plugin or a message lint rule.
+ * An inlang plugin module has a default export that is a plugin.
  *
  * @example
  *   export default myPlugin
  */
 // not using Static<infer T> here because the type is not inferred correctly
 // due to type overwrites in modules.
-export type InlangModule = { default: Plugin2 | MessageBundleLintRule }
-export const InlangModule = Type.Object({
-	default: Type.Union([Plugin2, MessageBundleLintRule]),
+export type InlangPlugin = { default: Plugin2 }
+export const InlangPlugin = Type.Object({
+	default: Plugin2,
 })
 
 /**
@@ -47,16 +45,12 @@ export type ResolveModule2Function = (args: {
 		/**
 		 * The resolved item id of the module.
 		 */
-		id: Plugin2["id"] | MessageBundleLintRule["id"]
+		id: Plugin2["id"]
 	}>
 	/**
 	 * The resolved plugins.
 	 */
 	plugins: Array<Plugin2>
-	/**
-	 * The resolved message lint rules.
-	 */
-	messageBundleLintRules: Array<MessageBundleLintRule>
 	/**
 	 * The resolved api provided by plugins.
 	 */
@@ -67,13 +61,11 @@ export type ResolveModule2Function = (args: {
 	 * This includes errors from:
 	 * - importing module
 	 * - resolving plugins
-	 * - resolving lint rules
 	 * - resolving the runtime plugin api
 	 */
 	errors: Array<
 		| ModuleHasNoExportsError
 		| ModuleImportError
 		| Awaited<ReturnType<ResolvePlugins2Function>>["errors"][number]
-		| Awaited<ReturnType<typeof resolveMessageBundleLintRules>>["errors"][number]
 	>
 }>
diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
index 98aded75b1..692027a91d 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -25,6 +25,12 @@ import type {
 import { NestedBundle } from "./schema.js"
 import { TranslationFile, type TranslationFile as TranslationFileType } from "./translation-file.js"
 
+export const PluginId = Type.String({
+	pattern: "^plugin\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)$",
+	examples: ["plugin.namespace.id"],
+}) as unknown as TTemplateLiteral<[TLiteral<`plugin.${string}.${string}`>]>
+export type PluginId = Static<typeof PluginId>
+
 // ---------------------------- RUNTIME VALIDATION TYPES ---------------------------------------------
 
 /**
@@ -33,13 +39,13 @@ import { TranslationFile, type TranslationFile as TranslationFileType } from "./
  * You can use your own settings by extending the plugin with a generic:
  *
  * ```ts
- * 	type PluginSettings = {
- *  	filePath: string
- * 	}
+ *  type PluginSettings = {
+ *    filePath: string
+ *  }
  *
- * 	const plugin: Plugin<{
- * 		"plugin.your.id": PluginSettings
- * 	}>
+ *  const plugin: Plugin<{
+ *    "plugin.your.id": PluginSettings
+ *  }>
  * ```
  */
 export type Plugin2<
@@ -67,9 +73,9 @@ export type Plugin2<
 	 *
 	 * @example
 	 * addCustomApi: () => ({
-	 * 	 "app.inlang.ide-extension": {
-	 * 	   messageReferenceMatcher: () => {}
-	 * 	 }
+	 *   "app.inlang.ide-extension": {
+	 *     messageReferenceMatcher: () => {}
+	 *   }
 	 *  })
 	 */
 	addCustomApi?: (args: {
@@ -80,14 +86,11 @@ export type Plugin2<
 }
 
 export const Plugin2 = Type.Object({
-	id: Type.String({
-		pattern: "^plugin\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)$",
-		examples: ["plugin.namespace.id"],
-	}) as unknown as TTemplateLiteral<[TLiteral<`plugin.${string}.${string}`>]>,
+	id: PluginId,
 	displayName: Translatable(Type.String()),
 	description: Translatable(Type.String()),
 	/**
-	 * Tyepbox must be used to validate the Json Schema.
+	 * Typebox must be used to validate the Json Schema.
 	 * Github discussion to upvote a plain Json Schema validator and read the benefits of Typebox
 	 * https://github.com/opral/monorepo/discussions/1503
 	 */
@@ -144,25 +147,25 @@ export type ResolvePlugins2Function = (args: {
  */
 export type ResolvedPlugin2Api = {
 	/**
-	 * Importer / Exporter functions.
+	 *  * Importer / Exporter functions.
 	 * see https://linear.app/opral/issue/MESDK-157/sdk-v2-release-on-sqlite
 	 */
-	toBeImportedFiles: Array<Plugin2["toBeImportedFiles"]>
-	importFiles: Array<Plugin2["importFiles"]>
-	exportFiles: Array<Plugin2["exportFiles"]>
+	toBeImportedFiles: Record<PluginId, Plugin2["toBeImportedFiles"] | undefined>
+	importFiles: Record<PluginId, Plugin2["importFiles"] | undefined>
+	exportFiles: Record<PluginId, Plugin2["exportFiles"] | undefined>
 	/**
 	 * App specific APIs.
 	 *
 	 * @example
 	 *  // define
 	 *  customApi: ({ settings }) => ({
-	 * 	 "app.inlang.ide-extension": {
-	 * 	   messageReferenceMatcher: () => {
-	 * 		 // use settings
-	 * 		 settings.pathPattern
-	 * 		return
-	 * 	   }
-	 * 	 }
+	 *    "app.inlang.ide-extension": {
+	 *      messageReferenceMatcher: () => {
+	 *        // use settings
+	 *        settings.pathPattern
+	 *       return
+	 *      }
+	 *    }
 	 *  })
 	 *  // use
 	 *  customApi['app.inlang.ide-extension'].messageReferenceMatcher()

From 3d5c7827e22d76b7100944534040aa57ee25b267 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 16:37:14 +0200
Subject: [PATCH 31/35] update resolveModules2 & resolvePlugins2

---
 .../source-code/sdk-v2/src/resolveModules2.ts | 23 ++---
 .../source-code/sdk-v2/src/resolvePlugins2.ts | 97 +++++++------------
 2 files changed, 41 insertions(+), 79 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/resolveModules2.ts b/inlang/source-code/sdk-v2/src/resolveModules2.ts
index 7f1815efb6..2c69070e4f 100644
--- a/inlang/source-code/sdk-v2/src/resolveModules2.ts
+++ b/inlang/source-code/sdk-v2/src/resolveModules2.ts
@@ -6,26 +6,23 @@ import {
 	ModuleSettingsAreInvalidError,
 } from "./resolve-modules/errors.js"
 import { tryCatch } from "@inlang/result"
-import { resolveMessageBundleLintRules } from "./resolveMessageBundleLintRules.js"
 import { resolvePlugins2 } from "./resolvePlugins2.js"
 import { TypeCompiler } from "@sinclair/typebox/compiler"
 import { validatedModuleSettings } from "./validatedModuleSettings.js"
 import type { Plugin2 } from "./types/plugin.js"
-import { InlangModule, type ResolveModule2Function } from "./types/module.js"
-import type { MessageBundleLintRule } from "./types/lint.js"
+import { InlangPlugin, type ResolveModule2Function } from "./types/module.js"
 
-const ModuleCompiler = TypeCompiler.Compile(InlangModule)
+const ModuleCompiler = TypeCompiler.Compile(InlangPlugin)
 
 export const resolveModules: ResolveModule2Function = async (args) => {
 	const _import = args._import
 
 	const allPlugins: Array<Plugin2> = []
-	const allMessageLintRules: Array<MessageBundleLintRule> = []
 	const meta: Awaited<ReturnType<ResolveModule2Function>>["meta"] = []
 	const moduleErrors: Array<ModuleError> = []
 
 	async function resolveModule(module: string) {
-		const importedModule = await tryCatch<InlangModule>(() => _import(module))
+		const importedModule = await tryCatch<InlangPlugin>(() => _import(module))
 
 		// -- FAILED TO IMPORT --
 		if (importedModule.error) {
@@ -48,9 +45,9 @@ export const resolveModules: ResolveModule2Function = async (args) => {
 			return
 		}
 
-		// -- CHECK IF MODULE IS SYNTACTIALLY VALID
+		// -- CHECK IF MODULE IS SYNTACTICALLY VALID
 		const isValidModule = ModuleCompiler.Check(importedModule.data)
-		if (isValidModule === false) {
+		if (!isValidModule) {
 			const errors = [...ModuleCompiler.Errors(importedModule.data)]
 			moduleErrors.push(
 				new ModuleExportIsInvalidError({
@@ -63,7 +60,6 @@ export const resolveModules: ResolveModule2Function = async (args) => {
 		}
 
 		// -- VALIDATE MODULE SETTINGS
-
 		const result = validatedModuleSettings({
 			settingsSchema: importedModule.data.default.settingsSchema,
 			moduleSettings: (args.settings as any)[importedModule.data.default.id],
@@ -80,12 +76,10 @@ export const resolveModules: ResolveModule2Function = async (args) => {
 
 		if (importedModule.data.default.id.startsWith("plugin.")) {
 			allPlugins.push(importedModule.data.default as Plugin2)
-		} else if (importedModule.data.default.id.startsWith("messageBundleLintRule.")) {
-			allMessageLintRules.push(importedModule.data.default as MessageBundleLintRule)
 		} else {
 			moduleErrors.push(
 				new ModuleError(
-					`Unimplemented module type ${importedModule.data.default.id}.The module has not been installed.`,
+					`Unimplemented module type ${importedModule.data.default.id}. The module has not been installed.`,
 					{ module: module }
 				)
 			)
@@ -98,13 +92,10 @@ export const resolveModules: ResolveModule2Function = async (args) => {
 		settings: args.settings,
 	})
 
-	const resolvedLintRules = resolveMessageBundleLintRules({ messageLintRules: allMessageLintRules })
-
 	return {
 		meta,
-		messageBundleLintRules: allMessageLintRules,
 		plugins: allPlugins,
 		resolvedPluginApi: resolvedPlugins.data,
-		errors: [...moduleErrors, ...resolvedLintRules.errors, ...resolvedPlugins.errors],
+		errors: [...moduleErrors, ...resolvedPlugins.errors],
 	}
 }
diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
index 80bb0d0822..a273a7dcd5 100644
--- a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { ResolvePlugins2Function } from "./types/index.js"
-import { Plugin } from "@inlang/plugin"
 import {
 	PluginReturnedInvalidCustomApiError,
 	PluginImportFilesFunctionAlreadyDefinedError,
@@ -13,33 +11,24 @@ import {
 import { deepmerge } from "deepmerge-ts"
 import { TypeCompiler } from "@sinclair/typebox/compiler"
 import { tryCatch } from "@inlang/result"
+import { Plugin2 } from "./types/plugin.js"
 
-// @ts-ignore - type mismatch error
-const PluginCompiler = TypeCompiler.Compile(Plugin)
+const PluginCompiler = TypeCompiler.Compile(Plugin2)
 
 export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 	const result: Awaited<ReturnType<ResolvePlugins2Function>> = {
 		data: {
-			toBeImportedFiles: undefined as any,
-			importFiles: undefined as any,
-			exportFiles: undefined as any,
+			toBeImportedFiles: {},
+			importFiles: {},
+			exportFiles: {},
 			customApi: {},
 		},
 		errors: [],
 	}
 
-	const experimentalPersistence = !!args.settings.experimental?.persistence
-	if (experimentalPersistence) {
-		// debug("Using experimental persistence")
-	}
-
 	for (const plugin of args.plugins) {
 		const errors = [...PluginCompiler.Errors(plugin)]
 
-		/**
-		 * -------------- RESOLVE PLUGIN --------------
-		 */
-
 		// -- INVALID ID in META --
 		const hasInvalidId = errors.some((error) => error.path === "/id")
 		if (hasInvalidId) {
@@ -56,25 +45,35 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 			)
 		}
 
-		// -- ALREADY DEFINED IMPORTFILES / EXPORTFILES / DETECTEDLANGUAGETAGS --
-		if (
-			typeof plugin.toBeImportedFiles === "function" &&
-			result.data.toBeImportedFiles !== undefined
-		) {
-			result.errors.push(new PluginToBeImportedFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		// -- CHECK FOR ALREADY DEFINED FUNCTIONS --
+		if (typeof plugin.toBeImportedFiles === "function") {
+			if (result.data.toBeImportedFiles[plugin.id]) {
+				result.errors.push(
+					new PluginToBeImportedFilesFunctionAlreadyDefinedError({ id: plugin.id })
+				)
+			} else {
+				result.data.toBeImportedFiles[plugin.id] = plugin.toBeImportedFiles
+			}
 		}
 
-		if (typeof plugin.importFiles === "function" && result.data.importFiles !== undefined) {
-			result.errors.push(new PluginImportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		if (typeof plugin.importFiles === "function") {
+			if (result.data.importFiles[plugin.id]) {
+				result.errors.push(new PluginImportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+			} else {
+				result.data.importFiles[plugin.id] = plugin.importFiles
+			}
 		}
 
-		if (typeof plugin.exportFiles === "function" && result.data.exportFiles !== undefined) {
-			result.errors.push(new PluginExportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+		if (typeof plugin.exportFiles === "function") {
+			if (result.data.exportFiles[plugin.id]) {
+				result.errors.push(new PluginExportFilesFunctionAlreadyDefinedError({ id: plugin.id }))
+			} else {
+				result.data.exportFiles[plugin.id] = plugin.exportFiles
+			}
 		}
 
-		// --- ADD APP SPECIFIC API ---
+		// -- ADD APP SPECIFIC API --
 		if (typeof plugin.addCustomApi === "function") {
-			// TODO: why do we call this function 2 times (here for validation and later for retrieving the actual value)?
 			const { data: customApi, error } = tryCatch(() =>
 				plugin.addCustomApi!({
 					settings: args.settings,
@@ -89,50 +88,22 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 						cause: new Error(`The return value must be an object. Received "${typeof customApi}".`),
 					})
 				)
+			} else {
+				result.data.customApi = deepmerge(result.data.customApi, customApi)
 			}
 		}
 
 		// -- CONTINUE IF ERRORS --
-		if (result.errors.length > 0) {
+		if (errors.length > 0) {
 			continue
 		}
-
-		/**
-		 * -------------- BEGIN ADDING TO RESULT --------------
-		 */
-
-		if (typeof plugin.toBeImportedFiles === "function") {
-			result.data.toBeImportedFiles = [
-				...(result.data.toBeImportedFiles ?? []),
-				plugin.toBeImportedFiles,
-			]
-		}
-
-		if (typeof plugin.importFiles === "function") {
-			result.data.importFiles = [...(result.data.importFiles ?? []), plugin.importFiles]
-		}
-
-		if (typeof plugin.exportFiles === "function") {
-			result.data.exportFiles = [...(result.data.exportFiles ?? []), plugin.exportFiles]
-		}
-
-		if (typeof plugin.addCustomApi === "function") {
-			const { data: customApi } = tryCatch(() =>
-				plugin.addCustomApi!({
-					settings: args.settings,
-				})
-			)
-			if (customApi) {
-				result.data.customApi = deepmerge(result.data.customApi, customApi)
-			}
-		}
 	}
 
-	// --- LOADMESSAGE / SAVEMESSAGE NOT DEFINED ---
-
+	// -- IMPORT / EXPORT NOT DEFINED FOR ANY PLUGIN --
 	if (
-		!experimentalPersistence &&
-		(typeof result.data.importFiles !== "function" || typeof result.data.exportFiles !== "function")
+		Object.keys(result.data.toBeImportedFiles).length === 0 &&
+		Object.keys(result.data.importFiles).length === 0 &&
+		Object.keys(result.data.exportFiles).length === 0
 	) {
 		result.errors.push(new PluginsDoNotProvideImportOrExportFilesError())
 	}

From 3b842d1d79ce2c604a2b206bca0033ee7e7612f0 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 16:50:29 +0200
Subject: [PATCH 32/35] start update import & loadProject & remove concept of
 `InlangModule` which is now `InlangPlugin`

remove lint rules as inlang module type while migrating them to lix validation rules. cc @samuelstroschein @janfjohannes
---
 inlang/source-code/sdk-v2/src/import-utils.ts |  6 ++--
 .../source-code/sdk-v2/src/loadProjectOpfs.ts | 30 +++++++++----------
 .../sdk-v2/src/validatedModuleSettings.ts     |  4 +--
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/inlang/source-code/sdk-v2/src/import-utils.ts b/inlang/source-code/sdk-v2/src/import-utils.ts
index 5aef0ac8b9..dc158db5ea 100644
--- a/inlang/source-code/sdk-v2/src/import-utils.ts
+++ b/inlang/source-code/sdk-v2/src/import-utils.ts
@@ -1,12 +1,12 @@
 import { ModuleImportError } from "./resolve-modules/errors.js"
-import type { InlangModule } from "./types/module.js"
+import type { InlangPlugin } from "./types/module.js"
 
 /**
  * @throws {ModuleImportError}
  */
-type Importer = (uri: string) => Promise<InlangModule>
+type Importer = (uri: string) => Promise<InlangPlugin>
 
-export function createDebugImport(importMap: Record<string, InlangModule["default"]>): Importer {
+export function createDebugImport(importMap: Record<string, InlangPlugin["default"]>): Importer {
 	return async (uri) => {
 		const resolved = importMap[uri]
 		if (resolved) return { default: resolved }
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 513754d2da..2f6b8e6c3a 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -22,14 +22,14 @@ import { BehaviorSubject, combineLatest, from, switchMap, tap } from "rxjs"
 import { createDebugImport, importSequence } from "./import-utils.js"
 
 // development only
-import lintRule from "./dev-modules/lint-rule.js"
-import makeOpralUppercase from "./dev-modules/opral-uppercase-lint-rule.js"
-import missingSelectorLintRule from "./dev-modules/missing-selector-lint-rule.js"
-import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
+// import lintRule from "./dev-modules/lint-rule.js"
+// import makeOpralUppercase from "./dev-modules/opral-uppercase-lint-rule.js"
+// import missingSelectorLintRule from "./dev-modules/missing-selector-lint-rule.js"
+// import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
 import { resolveModules } from "./resolveModules2.js"
 import type { InstalledLintRule, ProjectSettings2 } from "./types/project-settings.js"
 import type { InlangProject } from "./types/project.js"
-import type { LanguageTag } from "@inlang/plugin"
+// import type { LanguageTag } from "@inlang/plugin"
 
 // extend the SQLocalKysely class to expose a rawSql function
 // needed for non parametrized queries
@@ -65,15 +65,15 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 	const projectSettings$ = new BehaviorSubject(projectSettings)
 
 	// TODO SDK-v2 LIX how to deal with plugins we want to load?
-	const _import = importSequence(
-		createDebugImport({
-			"sdk-dev:lint-rule.js": lintRule,
-			"sdk-dev:opral-uppercase-lint.js": makeOpralUppercase,
-			"sdk-dev:missing-selector-lint-rule.js": missingSelectorLintRule,
-			"sdk-dev:missing-catchall-variant": missingCatchallLintRule,
-		}) /*,
-		createImport(projectPath, nodeishFs)*/
-	)
+	const _import = importSequence()
+	// Lint rules are now Lix validation rules, therefore this needs to be reimplemented
+	// 	createDebugImport({
+	// 		"sdk-dev:lint-rule.js": lintRule,
+	// 		"sdk-dev:opral-uppercase-lint.js": makeOpralUppercase,
+	// 		"sdk-dev:missing-selector-lint-rule.js": missingSelectorLintRule,
+	// 		"sdk-dev:missing-catchall-variant": missingCatchallLintRule,
+	// 	}),
+	// createImport(projectPath, nodeishFs)
 	const lifecycle$ = new BehaviorSubject<ProjectState>("initializing")
 
 	const settings$ = projectSettings$.asObservable()
@@ -144,7 +144,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 			},
 			subscribe: () => projectSettings$.subscribe(),
 		},
-		
+
 		bundle: {
 			/*
 			search: (args: { lintRulesIds: string[], locales: LanguageTag[], bundleIds: string[], text: string }): string[] {
diff --git a/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts b/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
index 5400a43edc..77142d4e95 100644
--- a/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
+++ b/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
@@ -1,9 +1,9 @@
 import type { TSchema } from "@sinclair/typebox"
 import { Value, type ValueError } from "@sinclair/typebox/value"
-import type { InlangModule } from "./types/module.js"
+import type { InlangPlugin } from "./types/module.js"
 
 export const validatedModuleSettings = (args: {
-	settingsSchema: InlangModule["default"]["settingsSchema"]
+	settingsSchema: InlangPlugin["default"]["settingsSchema"]
 	moduleSettings: unknown
 }): "isValid" | ValueError[] => {
 	if (args.settingsSchema && args.moduleSettings) {

From 5303f8544f8de3c99490baf8d02c7448adfe4610 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 16:57:33 +0200
Subject: [PATCH 33/35] update code comment

---
 inlang/source-code/sdk-v2/src/loadProjectOpfs.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 2f6b8e6c3a..290948f5d6 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -66,7 +66,9 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 
 	// TODO SDK-v2 LIX how to deal with plugins we want to load?
 	const _import = importSequence()
-	// Lint rules are now Lix validation rules, therefore this needs to be reimplemented
+	/**
+	 * Lint rules are now Lix validation rules, therefore this needs to be reimplemented
+	 */
 	// 	createDebugImport({
 	// 		"sdk-dev:lint-rule.js": lintRule,
 	// 		"sdk-dev:opral-uppercase-lint.js": makeOpralUppercase,

From 936e031152005c635e8743a73416fc561e4aa372 Mon Sep 17 00:00:00 2001
From: Felix Haeberle <kontakt@felixhaeberle.de>
Date: Mon, 29 Jul 2024 17:46:46 +0200
Subject: [PATCH 34/35] progress on remove concept of `Module` in favor of only
 `Plugin` because Lint Rules are now handled in lix

---
 inlang/source-code/sdk-v2/src/import-utils.ts |  18 +--
 inlang/source-code/sdk-v2/src/lint/import.ts  |  22 +--
 .../source-code/sdk-v2/src/loadProjectOpfs.ts |   4 +-
 .../sdk-v2/src/resolve-modules/errors.ts      |  68 ---------
 .../src/resolve-modules/plugins/errors.ts     |  56 --------
 .../cache.ts                                  |   0
 .../import.test.tstemp                        |   0
 .../import.ts                                 |  20 +--
 .../index.tstemp                              |   0
 .../plugins => resolve-plugins}/types.test.ts |   2 +-
 .../plugins => resolve-plugins}/types.ts      |  28 ++--
 .../source-code/sdk-v2/src/resolveModules2.ts | 101 -------------
 .../source-code/sdk-v2/src/resolvePlugins2.ts |  99 +++++++++++--
 .../sdk-v2/src/types/inlang-module.ts         |  16 ---
 .../sdk-v2/src/types/module-errors.ts         |  67 ---------
 inlang/source-code/sdk-v2/src/types/module.ts |  71 ----------
 .../sdk-v2/src/types/plugin-errors.ts         |  66 +++++++++
 inlang/source-code/sdk-v2/src/types/plugin.ts | 134 ++++++++++++++++++
 ...Settings.ts => validatedPluginSettings.ts} |  12 +-
 19 files changed, 348 insertions(+), 436 deletions(-)
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
 rename inlang/source-code/sdk-v2/src/{resolve-modules => resolve-plugins}/cache.ts (100%)
 rename inlang/source-code/sdk-v2/src/{resolve-modules => resolve-plugins}/import.test.tstemp (100%)
 rename inlang/source-code/sdk-v2/src/{resolve-modules => resolve-plugins}/import.ts (89%)
 rename inlang/source-code/sdk-v2/src/{resolve-modules => resolve-plugins}/index.tstemp (100%)
 rename inlang/source-code/sdk-v2/src/{resolve-modules/plugins => resolve-plugins}/types.test.ts (95%)
 rename inlang/source-code/sdk-v2/src/{resolve-modules/plugins => resolve-plugins}/types.ts (70%)
 delete mode 100644 inlang/source-code/sdk-v2/src/resolveModules2.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/types/inlang-module.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/types/module-errors.ts
 delete mode 100644 inlang/source-code/sdk-v2/src/types/module.ts
 rename inlang/source-code/sdk-v2/src/{validatedModuleSettings.ts => validatedPluginSettings.ts} (64%)

diff --git a/inlang/source-code/sdk-v2/src/import-utils.ts b/inlang/source-code/sdk-v2/src/import-utils.ts
index dc158db5ea..6a80382ca7 100644
--- a/inlang/source-code/sdk-v2/src/import-utils.ts
+++ b/inlang/source-code/sdk-v2/src/import-utils.ts
@@ -1,8 +1,8 @@
-import { ModuleImportError } from "./resolve-modules/errors.js"
-import type { InlangPlugin } from "./types/module.js"
+import type { InlangPlugin } from "./types/plugin.js"
+import { PluginImportError } from "./types/plugin-errors.js"
 
 /**
- * @throws {ModuleImportError}
+ * @throws {PluginImportError}
  */
 type Importer = (uri: string) => Promise<InlangPlugin>
 
@@ -10,8 +10,8 @@ export function createDebugImport(importMap: Record<string, InlangPlugin["defaul
 	return async (uri) => {
 		const resolved = importMap[uri]
 		if (resolved) return { default: resolved }
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error("Not found"),
 		})
 	}
@@ -22,12 +22,12 @@ export function createDebugImport(importMap: Record<string, InlangPlugin["defaul
  */
 export function importSequence(...importers: Importer[]): Importer {
 	return async (uri) => {
-		let lastError: ModuleImportError | undefined = undefined
+		let lastError: PluginImportError | undefined = undefined
 		for (const importer of importers) {
 			try {
 				return await importer(uri)
 			} catch (error) {
-				if (error instanceof ModuleImportError) {
+				if (error instanceof PluginImportError) {
 					lastError = error
 					continue
 				}
@@ -36,8 +36,8 @@ export function importSequence(...importers: Importer[]): Importer {
 		}
 
 		if (lastError) throw lastError
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error("Not found"),
 		})
 	}
diff --git a/inlang/source-code/sdk-v2/src/lint/import.ts b/inlang/source-code/sdk-v2/src/lint/import.ts
index 4606201713..f49d96b697 100644
--- a/inlang/source-code/sdk-v2/src/lint/import.ts
+++ b/inlang/source-code/sdk-v2/src/lint/import.ts
@@ -1,8 +1,8 @@
 import dedent from "dedent"
 import type { NodeishFilesystemSubset } from "@inlang/plugin"
 import { tryCatch } from "@inlang/result"
-import { withReadOnlyCache } from "../resolve-modules/cache.js"
-import { ModuleImportError } from "../resolve-modules/errors.js"
+import { withReadOnlyCache } from "../resolve-plugins/cache.js"
+import { PluginImportError } from "../types/plugin-errors.js"
 
 // TODO deduplicate this module
 
@@ -50,7 +50,7 @@ async function $import(
 
 				The error indicates that the imported file does not exist on JSDelivr. For non-existent files, JSDelivr returns a 404 text that JS cannot parse as a module and throws a SyntaxError.`
 		}
-		throw new ModuleImportError({ module: uri, cause: error as Error })
+		throw new PluginImportError({ plugin: uri, cause: error as Error })
 	}
 }
 
@@ -65,7 +65,7 @@ async function readModulefromDisk(
 	try {
 		return await readFile(uri, { encoding: "utf-8" })
 	} catch (error) {
-		throw new ModuleImportError({ module: uri, cause: error as Error })
+		throw new PluginImportError({ plugin: uri, cause: error as Error })
 	}
 }
 
@@ -78,20 +78,20 @@ async function readModulefromDisk(
  */
 async function readModuleFromCDN(uri: string): Promise<string> {
 	if (!isValidUrl(uri))
-		throw new ModuleImportError({ module: uri, cause: new Error("Malformed URL") })
+		throw new PluginImportError({ plugin: uri, cause: new Error("Malformed URL") })
 
 	const result = await tryCatch(async () => await fetch(uri))
 	if (result.error) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: result.error,
 		})
 	}
 
 	const response = result.data
 	if (!response.ok) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error(
 				`Failed to fetch module. HTTP status: ${response.status}, Message: ${response.statusText}`
 			),
@@ -109,8 +109,8 @@ async function readModuleFromCDN(uri: string): Promise<string> {
 	// if there is no content-type header, assume it's a JavaScript module & hope for the best
 	const contentType = response.headers.get("content-type")?.toLowerCase()
 	if (contentType && !JS_CONTENT_TYPES.some((knownType) => contentType.includes(knownType))) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error(`Server responded with ${contentType} insetad of a JavaScript module`),
 		})
 	}
diff --git a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
index 290948f5d6..5a0073ee04 100644
--- a/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
+++ b/inlang/source-code/sdk-v2/src/loadProjectOpfs.ts
@@ -26,9 +26,9 @@ import { createDebugImport, importSequence } from "./import-utils.js"
 // import makeOpralUppercase from "./dev-modules/opral-uppercase-lint-rule.js"
 // import missingSelectorLintRule from "./dev-modules/missing-selector-lint-rule.js"
 // import missingCatchallLintRule from "./dev-modules/missingCatchall.js"
-import { resolveModules } from "./resolveModules2.js"
 import type { InstalledLintRule, ProjectSettings2 } from "./types/project-settings.js"
 import type { InlangProject } from "./types/project.js"
+import { resolvePlugins } from "./resolvePlugins2.js"
 // import type { LanguageTag } from "@inlang/plugin"
 
 // extend the SQLocalKysely class to expose a rawSql function
@@ -83,7 +83,7 @@ export async function loadProjectOpfs(args: { inlangFolderPath: string }): Promi
 	const modules$ = settings$.pipe(
 		switchMap((settings: any) => {
 			lifecycle$.next("resolvingModules")
-			return from(resolveModules({ settings, _import }))
+			return from(resolvePlugins({ settings, _import }))
 		}),
 		tap(() => lifecycle$.next("loaded"))
 	)
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
deleted file mode 100644
index 655788d7c1..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/errors.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { ValueError } from "@sinclair/typebox/errors"
-export * from "./plugins/errors.js"
-
-export class ModuleError extends Error {
-	public readonly module: string
-
-	constructor(message: string, options: { module: string; cause?: Error }) {
-		super(message)
-		this.name = "ModuleError"
-		this.module = options.module
-		this.cause = options.cause
-	}
-}
-
-/**
- * Error when a Module does not export any plugins or lint rules.
- */
-export class ModuleHasNoExportsError extends ModuleError {
-	constructor(options: { module: string; cause?: Error }) {
-		super(
-			`Module "${options.module}" has no exports. Every module must have an "export default".`,
-			options
-		)
-		this.name = "ModuleHasNoExportsError"
-	}
-}
-
-/**
- * Error when a Module cannot be imported.
- */
-export class ModuleImportError extends ModuleError {
-	constructor(options: { module: string; cause: Error }) {
-		super(`Couldn't import the plugin "${options.module}":\n\n${options.cause}`, options)
-		this.name = "ModuleImportError"
-	}
-}
-
-export class ModuleExportIsInvalidError extends ModuleError {
-	constructor(options: { module: string; errors: ValueError[] }) {
-		super(
-			`The export(s) of "${options.module}" are invalid:\n\n${options.errors
-				.map(
-					(error) =>
-						`"${error.path}" "${JSON.stringify(error.value, undefined, 2)}": "${error.message}"`
-				)
-				.join("\n")}`,
-			options
-		)
-		this.name = "ModuleExportIsInvalidError"
-	}
-}
-
-export class ModuleSettingsAreInvalidError extends ModuleError {
-	constructor(options: { module: string; errors: ValueError[] }) {
-		super(
-			`The settings are invalid of "${options.module}" are invalid:\n\n${options.errors
-				.map(
-					(error) =>
-						`Path "${error.path}" with value "${JSON.stringify(error.value, undefined, 2)}": "${
-							error.message
-						}"`
-				)
-				.join("\n")}`,
-			options
-		)
-		this.name = "ModuleSettingsAreInvalidError"
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts b/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
deleted file mode 100644
index cdfd21190a..0000000000
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/errors.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Plugin } from "@inlang/plugin"
-import type { ValueError } from "@sinclair/typebox/errors"
-
-export class PluginHasInvalidIdError extends Error {
-	constructor(options: { id: Plugin["id"] }) {
-		super(
-			`Plugin "${options.id}" has an invalid id. The id must:\n1) Start with "plugin."\n2) camelCase\n3) Contain a namespace.\nAn example would be "plugin.namespace.myPlugin".`
-		)
-		this.name = "PluginHasInvalidIdError"
-	}
-}
-
-export class PluginHasInvalidSchemaError extends Error {
-	constructor(options: { id: Plugin["id"]; errors: ValueError[] }) {
-		super(
-			`Plugin "${options.id}" has an invalid schema:\n\n${options.errors
-				.map((error) => `Path "${error.path}" with value "${error.value}": "${error.message}"`)
-				.join("\n")})}\n\nPlease refer to the documentation for the correct schema.`
-		)
-		this.name = "PluginHasInvalidSchemaError"
-	}
-}
-
-export class PluginLoadMessagesFunctionAlreadyDefinedError extends Error {
-	constructor(options: { id: Plugin["id"] }) {
-		super(
-			`Plugin "${options.id}" defines the \`loadMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`loadMessages()\` function.`
-		)
-		this.name = "PluginLoadMessagesFunctionAlreadyDefinedError"
-	}
-}
-
-export class PluginSaveMessagesFunctionAlreadyDefinedError extends Error {
-	constructor(options: { id: Plugin["id"] }) {
-		super(
-			`Plugin "${options.id}" defines the \`saveMessages()\` function, but it was already defined by another plugin.\n\nInlang only allows one plugin to define the \`saveMessages()\` function.`
-		)
-		this.name = "PluginSaveMessagesFunctionAlreadyDefinedError"
-	}
-}
-
-export class PluginReturnedInvalidCustomApiError extends Error {
-	constructor(options: { id: Plugin["id"]; cause: ErrorOptions["cause"] }) {
-		super(`Plugin "${options.id}" returned an invalid custom API:\n\n${options.cause}`, options)
-		this.name = "PluginReturnedInvalidCustomApiError"
-	}
-}
-
-export class PluginsDoNotProvideLoadOrSaveMessagesError extends Error {
-	constructor() {
-		super(
-			`No plugin provides a \`loadMessages()\` or \`saveMessages()\` function\n\nIn case no plugin threw an error, you likely forgot to add a plugin that handles the loading and saving of messages. Refer to the marketplace for available plugins https://inlang.com/marketplace.`
-		)
-		this.name = "PluginsDoNotProvideLoadOrSaveMessagesError"
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/cache.ts b/inlang/source-code/sdk-v2/src/resolve-plugins/cache.ts
similarity index 100%
rename from inlang/source-code/sdk-v2/src/resolve-modules/cache.ts
rename to inlang/source-code/sdk-v2/src/resolve-plugins/cache.ts
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/import.test.tstemp b/inlang/source-code/sdk-v2/src/resolve-plugins/import.test.tstemp
similarity index 100%
rename from inlang/source-code/sdk-v2/src/resolve-modules/import.test.tstemp
rename to inlang/source-code/sdk-v2/src/resolve-plugins/import.test.tstemp
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/import.ts b/inlang/source-code/sdk-v2/src/resolve-plugins/import.ts
similarity index 89%
rename from inlang/source-code/sdk-v2/src/resolve-modules/import.ts
rename to inlang/source-code/sdk-v2/src/resolve-plugins/import.ts
index e08180b099..954bbc4708 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/import.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-plugins/import.ts
@@ -1,6 +1,6 @@
 import dedent from "dedent"
 import type { NodeishFilesystemSubset } from "@inlang/plugin"
-import { ModuleImportError } from "./errors.js"
+import { PluginImportError } from "../types/plugin-errors.js"
 import { withCache } from "./cache.js"
 import { tryCatch } from "@inlang/result"
 
@@ -48,7 +48,7 @@ async function $import(
 
 				The error indicates that the imported file does not exist on JSDelivr. For non-existent files, JSDelivr returns a 404 text that JS cannot parse as a module and throws a SyntaxError.`
 		}
-		throw new ModuleImportError({ module: uri, cause: error as Error })
+		throw new PluginImportError({ plugin: uri, cause: error as Error })
 	}
 }
 
@@ -63,7 +63,7 @@ async function readModulefromDisk(
 	try {
 		return await readFile(uri, { encoding: "utf-8" })
 	} catch (error) {
-		throw new ModuleImportError({ module: uri, cause: error as Error })
+		throw new PluginImportError({ plugin: uri, cause: error as Error })
 	}
 }
 
@@ -76,20 +76,20 @@ async function readModulefromDisk(
  */
 async function readModuleFromCDN(uri: string): Promise<string> {
 	if (!isValidUrl(uri))
-		throw new ModuleImportError({ module: uri, cause: new Error("Malformed URL") })
+		throw new PluginImportError({ plugin: uri, cause: new Error("Malformed URL") })
 
 	const result = await tryCatch(async () => await fetch(uri))
 	if (result.error) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: result.error,
 		})
 	}
 
 	const response = result.data
 	if (!response.ok) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error(
 				`Failed to fetch module. HTTP status: ${response.status}, Message: ${response.statusText}`
 			),
@@ -107,8 +107,8 @@ async function readModuleFromCDN(uri: string): Promise<string> {
 	// if there is no content-type header, assume it's a JavaScript module & hope for the best
 	const contentType = response.headers.get("content-type")?.toLowerCase()
 	if (contentType && !JS_CONTENT_TYPES.some((knownType) => contentType.includes(knownType))) {
-		throw new ModuleImportError({
-			module: uri,
+		throw new PluginImportError({
+			plugin: uri,
 			cause: new Error(`Server responded with ${contentType} insetad of a JavaScript module`),
 		})
 	}
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/index.tstemp b/inlang/source-code/sdk-v2/src/resolve-plugins/index.tstemp
similarity index 100%
rename from inlang/source-code/sdk-v2/src/resolve-modules/index.tstemp
rename to inlang/source-code/sdk-v2/src/resolve-plugins/index.tstemp
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts b/inlang/source-code/sdk-v2/src/resolve-plugins/types.test.ts
similarity index 95%
rename from inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
rename to inlang/source-code/sdk-v2/src/resolve-plugins/types.test.ts
index be5b6bd1cb..fe03bb9f47 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.test.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-plugins/types.test.ts
@@ -2,7 +2,7 @@ import { Value } from "@sinclair/typebox/value"
 import { describe, test, expect } from "vitest"
 import { expectType } from "tsd"
 import { Plugin } from "@inlang/plugin"
-import { ProjectSettings2 } from "../../types/project-settings.js"
+import { ProjectSettings2 } from "../types/project-settings.js"
 
 describe("Plugin", () => {
 	test("meta.id should enforce plugin.namespace.* patterns", () => {
diff --git a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts b/inlang/source-code/sdk-v2/src/resolve-plugins/types.ts
similarity index 70%
rename from inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
rename to inlang/source-code/sdk-v2/src/resolve-plugins/types.ts
index b9f442cc3e..cec0a71a19 100644
--- a/inlang/source-code/sdk-v2/src/resolve-modules/plugins/types.ts
+++ b/inlang/source-code/sdk-v2/src/resolve-plugins/types.ts
@@ -1,15 +1,21 @@
 import type { NodeishFilesystem } from "@lix-js/fs"
 import type {
+	PluginError,
+	PluginImportError,
+	PluginHasNoExportsError,
+	PluginExportIsInvalidError,
+	PluginSettingsAreInvalidError,
 	PluginReturnedInvalidCustomApiError,
-	PluginLoadMessagesFunctionAlreadyDefinedError,
-	PluginSaveMessagesFunctionAlreadyDefinedError,
+	PluginImportFilesFunctionAlreadyDefinedError,
+	PluginExportFilesFunctionAlreadyDefinedError,
+	PluginToBeImportedFilesFunctionAlreadyDefinedError,
 	PluginHasInvalidIdError,
 	PluginHasInvalidSchemaError,
-	PluginsDoNotProvideLoadOrSaveMessagesError,
-} from "./errors.js"
+	PluginsDoNotProvideImportOrExportFilesError,
+} from "../types/plugin-errors.js"
 
 import type { CustomApiInlangIdeExtension, Plugin } from "@inlang/plugin"
-import type { ProjectSettings2 } from "../../types/project-settings.js"
+import type { ProjectSettings2 } from "../types/project-settings.js"
 
 /**
  * The filesystem is a subset of project lisa's nodeish filesystem.
@@ -31,12 +37,18 @@ export type ResolvePluginsFunction = (args: {
 }) => Promise<{
 	data: ResolvedPluginApi
 	errors: Array<
+		| PluginError
+		| PluginImportError
+		| PluginHasNoExportsError
+		| PluginExportIsInvalidError
+		| PluginSettingsAreInvalidError
 		| PluginReturnedInvalidCustomApiError
-		| PluginLoadMessagesFunctionAlreadyDefinedError
-		| PluginSaveMessagesFunctionAlreadyDefinedError
+		| PluginImportFilesFunctionAlreadyDefinedError
+		| PluginExportFilesFunctionAlreadyDefinedError
+		| PluginToBeImportedFilesFunctionAlreadyDefinedError
 		| PluginHasInvalidIdError
 		| PluginHasInvalidSchemaError
-		| PluginsDoNotProvideLoadOrSaveMessagesError
+		| PluginsDoNotProvideImportOrExportFilesError
 	>
 }>
 
diff --git a/inlang/source-code/sdk-v2/src/resolveModules2.ts b/inlang/source-code/sdk-v2/src/resolveModules2.ts
deleted file mode 100644
index 2c69070e4f..0000000000
--- a/inlang/source-code/sdk-v2/src/resolveModules2.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import {
-	ModuleError,
-	ModuleImportError,
-	ModuleHasNoExportsError,
-	ModuleExportIsInvalidError,
-	ModuleSettingsAreInvalidError,
-} from "./resolve-modules/errors.js"
-import { tryCatch } from "@inlang/result"
-import { resolvePlugins2 } from "./resolvePlugins2.js"
-import { TypeCompiler } from "@sinclair/typebox/compiler"
-import { validatedModuleSettings } from "./validatedModuleSettings.js"
-import type { Plugin2 } from "./types/plugin.js"
-import { InlangPlugin, type ResolveModule2Function } from "./types/module.js"
-
-const ModuleCompiler = TypeCompiler.Compile(InlangPlugin)
-
-export const resolveModules: ResolveModule2Function = async (args) => {
-	const _import = args._import
-
-	const allPlugins: Array<Plugin2> = []
-	const meta: Awaited<ReturnType<ResolveModule2Function>>["meta"] = []
-	const moduleErrors: Array<ModuleError> = []
-
-	async function resolveModule(module: string) {
-		const importedModule = await tryCatch<InlangPlugin>(() => _import(module))
-
-		// -- FAILED TO IMPORT --
-		if (importedModule.error) {
-			moduleErrors.push(
-				new ModuleImportError({
-					module: module,
-					cause: importedModule.error as Error,
-				})
-			)
-			return
-		}
-
-		// -- MODULE DOES NOT EXPORT ANYTHING --
-		if (importedModule.data?.default === undefined) {
-			moduleErrors.push(
-				new ModuleHasNoExportsError({
-					module: module,
-				})
-			)
-			return
-		}
-
-		// -- CHECK IF MODULE IS SYNTACTICALLY VALID
-		const isValidModule = ModuleCompiler.Check(importedModule.data)
-		if (!isValidModule) {
-			const errors = [...ModuleCompiler.Errors(importedModule.data)]
-			moduleErrors.push(
-				new ModuleExportIsInvalidError({
-					module: module,
-					errors,
-				})
-			)
-
-			return
-		}
-
-		// -- VALIDATE MODULE SETTINGS
-		const result = validatedModuleSettings({
-			settingsSchema: importedModule.data.default.settingsSchema,
-			moduleSettings: (args.settings as any)[importedModule.data.default.id],
-		})
-		if (result !== "isValid") {
-			moduleErrors.push(new ModuleSettingsAreInvalidError({ module: module, errors: result }))
-			return
-		}
-
-		meta.push({
-			module: module,
-			id: importedModule.data.default.id,
-		})
-
-		if (importedModule.data.default.id.startsWith("plugin.")) {
-			allPlugins.push(importedModule.data.default as Plugin2)
-		} else {
-			moduleErrors.push(
-				new ModuleError(
-					`Unimplemented module type ${importedModule.data.default.id}. The module has not been installed.`,
-					{ module: module }
-				)
-			)
-		}
-	}
-
-	await Promise.all(args.settings.modules.map(resolveModule))
-	const resolvedPlugins = await resolvePlugins2({
-		plugins: allPlugins,
-		settings: args.settings,
-	})
-
-	return {
-		meta,
-		plugins: allPlugins,
-		resolvedPluginApi: resolvedPlugins.data,
-		errors: [...moduleErrors, ...resolvedPlugins.errors],
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
index a273a7dcd5..da63ef94e3 100644
--- a/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
+++ b/inlang/source-code/sdk-v2/src/resolvePlugins2.ts
@@ -1,5 +1,18 @@
-import type { ResolvePlugins2Function } from "./types/index.js"
+import { tryCatch } from "@inlang/result"
+import { TypeCompiler } from "@sinclair/typebox/compiler"
+import { validatedPluginSettings } from "./validatedPluginSettings.js"
 import {
+	Plugin2,
+	InlangPlugin,
+	type ResolvePluginsFunction,
+	type ResolvePlugin2Function,
+} from "./types/plugin.js"
+import {
+	PluginError,
+	PluginImportError,
+	PluginHasNoExportsError,
+	PluginExportIsInvalidError,
+	PluginSettingsAreInvalidError,
 	PluginReturnedInvalidCustomApiError,
 	PluginImportFilesFunctionAlreadyDefinedError,
 	PluginExportFilesFunctionAlreadyDefinedError,
@@ -9,24 +22,85 @@ import {
 	PluginsDoNotProvideImportOrExportFilesError,
 } from "./types/plugin-errors.js"
 import { deepmerge } from "deepmerge-ts"
-import { TypeCompiler } from "@sinclair/typebox/compiler"
-import { tryCatch } from "@inlang/result"
-import { Plugin2 } from "./types/plugin.js"
 
-const PluginCompiler = TypeCompiler.Compile(Plugin2)
+const PluginCompiler = TypeCompiler.Compile(InlangPlugin)
+
+export const resolvePlugins: ResolvePlugin2Function = async (args) => {
+	const _import = args._import
+
+	const allPlugins: Array<Plugin2> = []
+	const meta: Awaited<ReturnType<ResolvePlugin2Function>>["meta"] = []
+	const moduleErrors: Array<PluginError> = []
+
+	async function resolvePlugin(plugin: string) {
+		const importedPlugin = await tryCatch<InlangPlugin>(() => _import(plugin))
+
+		// -- FAILED TO IMPORT --
+		if (importedPlugin.error) {
+			moduleErrors.push(
+				new PluginImportError({
+					plugin,
+					cause: importedPlugin.error as Error,
+				})
+			)
+			return
+		}
+
+		// -- PLUGIN DOES NOT EXPORT ANYTHING --
+		if (importedPlugin.data?.default === undefined) {
+			moduleErrors.push(
+				new PluginHasNoExportsError({
+					plugin,
+				})
+			)
+			return
+		}
+
+		// -- CHECK IF PLUGIN IS SYNTACTICALLY VALID
+		const isValidPlugin = PluginCompiler.Check(importedPlugin.data)
+		if (!isValidPlugin) {
+			const errors = [...PluginCompiler.Errors(importedPlugin.data)]
+			moduleErrors.push(
+				new PluginExportIsInvalidError({
+					plugin,
+					errors,
+				})
+			)
+
+			return
+		}
+
+		// -- VALIDATE PLUGIN SETTINGS
+		const result = validatedPluginSettings({
+			settingsSchema: importedPlugin.data.default.settingsSchema,
+			pluginSettings: (args.settings as any)[importedPlugin.data.default.id],
+		})
+		if (result !== "isValid") {
+			moduleErrors.push(new PluginSettingsAreInvalidError({ plugin, errors: result }))
+			return
+		}
+
+		meta.push({
+			plugin,
+			id: importedPlugin.data.default.id,
+		})
 
-export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
-	const result: Awaited<ReturnType<ResolvePlugins2Function>> = {
+		allPlugins.push(importedPlugin.data.default as Plugin2)
+	}
+
+	await Promise.all(args.settings.modules.map(resolvePlugin))
+
+	const result: Awaited<ReturnType<ResolvePluginsFunction>> = {
 		data: {
 			toBeImportedFiles: {},
 			importFiles: {},
 			exportFiles: {},
 			customApi: {},
 		},
-		errors: [],
+		errors: [...moduleErrors],
 	}
 
-	for (const plugin of args.plugins) {
+	for (const plugin of allPlugins) {
 		const errors = [...PluginCompiler.Errors(plugin)]
 
 		// -- INVALID ID in META --
@@ -108,5 +182,10 @@ export const resolvePlugins2: ResolvePlugins2Function = async (args) => {
 		result.errors.push(new PluginsDoNotProvideImportOrExportFilesError())
 	}
 
-	return result
+	return {
+		meta,
+		plugins: allPlugins,
+		resolvedPluginApi: result.data,
+		errors: result.errors,
+	}
 }
diff --git a/inlang/source-code/sdk-v2/src/types/inlang-module.ts b/inlang/source-code/sdk-v2/src/types/inlang-module.ts
deleted file mode 100644
index 7742759b60..0000000000
--- a/inlang/source-code/sdk-v2/src/types/inlang-module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Plugin } from "@inlang/plugin"
-import { Type } from "@sinclair/typebox"
-import { MessageBundleLintRule } from "./lint.js"
-
-/**
- * An inlang module has a default export that is either a plugin or a message lint rule.
- *
- * @example
- *   export default myPlugin
- */
-// not using Static<infer T> here because the type is not inferred correctly
-// due to type overwrites in modules.
-export type InlangModule = { default: Plugin | MessageBundleLintRule }
-export const InlangModule = Type.Object({
-	default: Type.Union([Plugin, MessageBundleLintRule]),
-})
diff --git a/inlang/source-code/sdk-v2/src/types/module-errors.ts b/inlang/source-code/sdk-v2/src/types/module-errors.ts
deleted file mode 100644
index 1d8b6c0a49..0000000000
--- a/inlang/source-code/sdk-v2/src/types/module-errors.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { ValueError } from "@sinclair/typebox/errors"
-
-export class ModuleError extends Error {
-	public readonly module: string
-
-	constructor(message: string, options: { module: string; cause?: Error }) {
-		super(message)
-		this.name = "ModuleError"
-		this.module = options.module
-		this.cause = options.cause
-	}
-}
-
-/**
- * Error when a Module does not export any plugins or lint rules.
- */
-export class ModuleHasNoExportsError extends ModuleError {
-	constructor(options: { module: string; cause?: Error }) {
-		super(
-			`Module "${options.module}" has no exports. Every module must have an "export default".`,
-			options
-		)
-		this.name = "ModuleHasNoExportsError"
-	}
-}
-
-/**
- * Error when a Module cannot be imported.
- */
-export class ModuleImportError extends ModuleError {
-	constructor(options: { module: string; cause: Error }) {
-		super(`Couldn't import the plugin "${options.module}":\n\n${options.cause}`, options)
-		this.name = "ModuleImportError"
-	}
-}
-
-export class ModuleExportIsInvalidError extends ModuleError {
-	constructor(options: { module: string; errors: ValueError[] }) {
-		super(
-			`The export(s) of "${options.module}" are invalid:\n\n${options.errors
-				.map(
-					(error) =>
-						`"${error.path}" "${JSON.stringify(error.value, undefined, 2)}": "${error.message}"`
-				)
-				.join("\n")}`,
-			options
-		)
-		this.name = "ModuleExportIsInvalidError"
-	}
-}
-
-export class ModuleSettingsAreInvalidError extends ModuleError {
-	constructor(options: { module: string; errors: ValueError[] }) {
-		super(
-			`The settings are invalid of "${options.module}" are invalid:\n\n${options.errors
-				.map(
-					(error) =>
-						`Path "${error.path}" with value "${JSON.stringify(error.value, undefined, 2)}": "${
-							error.message
-						}"`
-				)
-				.join("\n")}`,
-			options
-		)
-		this.name = "ModuleSettingsAreInvalidError"
-	}
-}
diff --git a/inlang/source-code/sdk-v2/src/types/module.ts b/inlang/source-code/sdk-v2/src/types/module.ts
deleted file mode 100644
index d6224a2a44..0000000000
--- a/inlang/source-code/sdk-v2/src/types/module.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { ProjectSettings2 } from "./project-settings.js"
-import type { ImportFunction } from "../resolve-modules/import.js"
-import { Plugin2, type ResolvePlugins2Function, type ResolvedPlugin2Api } from "./plugin.js"
-import type { ModuleHasNoExportsError, ModuleImportError } from "./module-errors.js"
-import { Type } from "@sinclair/typebox"
-
-/**
- * An inlang plugin module has a default export that is a plugin.
- *
- * @example
- *   export default myPlugin
- */
-// not using Static<infer T> here because the type is not inferred correctly
-// due to type overwrites in modules.
-export type InlangPlugin = { default: Plugin2 }
-export const InlangPlugin = Type.Object({
-	default: Plugin2,
-})
-
-/**
- * Function that resolves modules from the config.
- *
- * Pass a custom `_import` function to override the default import function.
- */
-export type ResolveModule2Function = (args: {
-	settings: ProjectSettings2
-	_import: ImportFunction
-}) => Promise<{
-	/**
-	 * Metadata about the resolved module.
-	 *
-	 * @example
-	 * [{
-	 * 	  id: "plugin.inlang.json",
-	 * 	  module: "https://myplugin.com/index.js"
-	 * }]
-	 */
-	meta: Array<{
-		/**
-		 * The module link.
-		 *
-		 * @example "https://myplugin.com/index.js"
-		 */
-		module: string
-		/**
-		 * The resolved item id of the module.
-		 */
-		id: Plugin2["id"]
-	}>
-	/**
-	 * The resolved plugins.
-	 */
-	plugins: Array<Plugin2>
-	/**
-	 * The resolved api provided by plugins.
-	 */
-	resolvedPluginApi: ResolvedPlugin2Api
-	/**
-	 * Errors during the resolution process.
-	 *
-	 * This includes errors from:
-	 * - importing module
-	 * - resolving plugins
-	 * - resolving the runtime plugin api
-	 */
-	errors: Array<
-		| ModuleHasNoExportsError
-		| ModuleImportError
-		| Awaited<ReturnType<ResolvePlugins2Function>>["errors"][number]
-	>
-}>
diff --git a/inlang/source-code/sdk-v2/src/types/plugin-errors.ts b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
index 984d163330..bdfe7e7c08 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin-errors.ts
@@ -1,6 +1,72 @@
 import type { Plugin } from "@inlang/plugin"
 import type { ValueError } from "@sinclair/typebox/errors"
 
+export class PluginError extends Error {
+	public readonly plugin: string
+
+	constructor(message: string, options: { plugin: string; cause?: Error }) {
+		super(message)
+		this.name = "PluginError"
+		this.plugin = options.plugin
+		this.cause = options.cause
+	}
+}
+
+/**
+ * Error when a plugin does not export any plugins or lint rules.
+ */
+export class PluginHasNoExportsError extends PluginError {
+	constructor(options: { plugin: string; cause?: Error }) {
+		super(
+			`Plugin "${options.plugin}" has no exports. Every plugin must have an "export default".`,
+			options
+		)
+		this.name = "PluginHasNoExportsError"
+	}
+}
+
+/**
+ * Error when a plugin cannot be imported.
+ */
+export class PluginImportError extends PluginError {
+	constructor(options: { plugin: string; cause: Error }) {
+		super(`Couldn't import the plugin "${options.plugin}":\n\n${options.cause}`, options)
+		this.name = "PluginImportError"
+	}
+}
+
+export class PluginExportIsInvalidError extends PluginError {
+	constructor(options: { plugin: string; errors: ValueError[] }) {
+		super(
+			`The export(s) of "${options.plugin}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`"${error.path}" "${JSON.stringify(error.value, undefined, 2)}": "${error.message}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "PluginExportIsInvalidError"
+	}
+}
+
+export class PluginSettingsAreInvalidError extends PluginError {
+	constructor(options: { plugin: string; errors: ValueError[] }) {
+		super(
+			`The settings of "${options.plugin}" are invalid:\n\n${options.errors
+				.map(
+					(error) =>
+						`Path "${error.path}" with value "${JSON.stringify(error.value, undefined, 2)}": "${
+							error.message
+						}"`
+				)
+				.join("\n")}`,
+			options
+		)
+		this.name = "PluginSettingsAreInvalidError"
+	}
+}
+
 export class PluginHasInvalidIdError extends Error {
 	constructor(options: { id: Plugin["id"] }) {
 		super(
diff --git a/inlang/source-code/sdk-v2/src/types/plugin.ts b/inlang/source-code/sdk-v2/src/types/plugin.ts
index 692027a91d..58d4b58bf8 100644
--- a/inlang/source-code/sdk-v2/src/types/plugin.ts
+++ b/inlang/source-code/sdk-v2/src/types/plugin.ts
@@ -24,6 +24,10 @@ import type {
 } from "./plugin-errors.js"
 import { NestedBundle } from "./schema.js"
 import { TranslationFile, type TranslationFile as TranslationFileType } from "./translation-file.js"
+import type { ProjectSettings2 } from "./project-settings.js"
+import type { ImportFunction } from "../resolve-plugins/import.js"
+import type { PluginHasNoExportsError, PluginImportError } from "./plugin-errors.js"
+import type { NodeishFilesystem } from "@lix-js/fs"
 
 export const PluginId = Type.String({
 	pattern: "^plugin\\.([a-z][a-zA-Z0-9]*)\\.([a-z][a-zA-Z0-9]*(?:[A-Z][a-z0-9]*)*)$",
@@ -174,3 +178,133 @@ export type ResolvedPlugin2Api = {
 		"app.inlang.ideExtension"?: CustomApiInlangIdeExtension
 	}
 }
+
+// ---------------------------- RESOLVE PLUGIN API TYPES ---------------------------------------------
+/**
+ * An inlang plugin module has a default export that is a plugin.
+ *
+ * @example
+ *   export default myPlugin
+ */
+// not using Static<infer T> here because the type is not inferred correctly
+// due to type overwrites in modules.
+export type InlangPlugin = { default: Plugin2 }
+export const InlangPlugin = Type.Object({
+	default: Plugin2,
+})
+
+/**
+ * Function that resolves modules from the config.
+ *
+ * Pass a custom `_import` function to override the default import function.
+ */
+export type ResolvePlugin2Function = (args: {
+	settings: ProjectSettings2
+	_import: ImportFunction
+}) => Promise<{
+	/**
+	 * Metadata about the resolved module.
+	 *
+	 * @example
+	 * [{
+	 * 	  id: "plugin.inlang.json",
+	 * 	  module: "https://myplugin.com/index.js"
+	 * }]
+	 */
+	meta: Array<{
+		/**
+		 * The plugin link.
+		 *
+		 * @example "https://myplugin.com/index.js"
+		 */
+		plugin: string
+		/**
+		 * The resolved item id of the module.
+		 */
+		id: Plugin2["id"]
+	}>
+	/**
+	 * The resolved plugins.
+	 */
+	plugins: Array<Plugin2>
+	/**
+	 * The resolved api provided by plugins.
+	 */
+	resolvedPluginApi: ResolvedPlugin2Api
+	/**
+	 * Errors during the resolution process.
+	 *
+	 * This includes errors from:
+	 * - importing module
+	 * - resolving plugins
+	 * - resolving the runtime plugin api
+	 */
+	errors: Array<
+		| PluginHasNoExportsError
+		| PluginImportError
+		| Awaited<ReturnType<ResolvePlugins2Function>>["errors"][number]
+	>
+}>
+
+/**
+ * The filesystem is a subset of project lisa's nodeish filesystem.
+ *
+ * - only uses minimally required functions to decrease the API footprint on the ecosystem.
+ */
+export type NodeishFilesystemSubset = Pick<
+	NodeishFilesystem,
+	"readFile" | "readdir" | "mkdir" | "writeFile" | "watch"
+>
+
+/**
+ * Function that resolves (imports and initializes) the plugins.
+ */
+export type ResolvePluginsFunction = (args: {
+	plugins: Array<Plugin2>
+	settings: ProjectSettings2
+	nodeishFs: NodeishFilesystemSubset
+}) => Promise<{
+	data: ResolvedPluginApi
+	errors: Array<
+		| PluginReturnedInvalidCustomApiError
+		| PluginToBeImportedFilesFunctionAlreadyDefinedError
+		| PluginImportFilesFunctionAlreadyDefinedError
+		| PluginExportFilesFunctionAlreadyDefinedError
+		| PluginHasInvalidIdError
+		| PluginHasInvalidSchemaError
+		| PluginsDoNotProvideImportOrExportFilesError
+	>
+}>
+
+/**
+ * The API after resolving the plugins.
+ */
+export type ResolvedPluginApi = {
+	/**
+	 * Importer / Exporter functions.
+	 * see https://linear.app/opral/issue/MESDK-157/sdk-v2-release-on-sqlite
+	 */
+	toBeImportedFiles: Record<PluginId, Plugin2["toBeImportedFiles"] | undefined>
+	importFiles: Record<PluginId, Plugin2["importFiles"] | undefined>
+	exportFiles: Record<PluginId, Plugin2["exportFiles"] | undefined>
+	/**
+	 * App specific APIs.
+	 *
+	 * @example
+	 *  // define
+	 *  customApi: ({ settings }) => ({
+	 * 	 "app.inlang.ide-extension": {
+	 * 	   messageReferenceMatcher: () => {
+	 * 		 // use settings
+	 * 		 settings.pathPattern
+	 * 		return
+	 * 	   }
+	 * 	 }
+	 *  })
+	 *  // use
+	 *  customApi['app.inlang.ide-extension'].messageReferenceMatcher()
+	 */
+	customApi: Record<`app.${string}.${string}` | `library.${string}.${string}`, unknown> & {
+		"app.inlang.ideExtension"?: CustomApiInlangIdeExtension
+	}
+}
diff --git a/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts b/inlang/source-code/sdk-v2/src/validatedPluginSettings.ts
similarity index 64%
rename from inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
rename to inlang/source-code/sdk-v2/src/validatedPluginSettings.ts
index 77142d4e95..91c3745aea 100644
--- a/inlang/source-code/sdk-v2/src/validatedModuleSettings.ts
+++ b/inlang/source-code/sdk-v2/src/validatedPluginSettings.ts
@@ -1,16 +1,16 @@
 import type { TSchema } from "@sinclair/typebox"
 import { Value, type ValueError } from "@sinclair/typebox/value"
-import type { InlangPlugin } from "./types/module.js"
+import type { InlangPlugin } from "./types/plugin.js"
 
-export const validatedModuleSettings = (args: {
+export const validatedPluginSettings = (args: {
 	settingsSchema: InlangPlugin["default"]["settingsSchema"]
-	moduleSettings: unknown
+	pluginSettings: unknown
 }): "isValid" | ValueError[] => {
-	if (args.settingsSchema && args.moduleSettings) {
-		const hasValidSettings = Value.Check(args.settingsSchema as TSchema, args.moduleSettings)
+	if (args.settingsSchema && args.pluginSettings) {
+		const hasValidSettings = Value.Check(args.settingsSchema as TSchema, args.pluginSettings)
 
 		if (hasValidSettings === false) {
-			const errors = [...Value.Errors(args.settingsSchema as TSchema, args.moduleSettings)]
+			const errors = [...Value.Errors(args.settingsSchema as TSchema, args.pluginSettings)]
 
 			return errors
 		}

From 03a274c5d11856608450296049c0c7b86c367912 Mon Sep 17 00:00:00 2001
From: Nils Jacobsen <nils.jacobsen98@gmail.com>
Date: Tue, 30 Jul 2024 14:05:49 +0200
Subject: [PATCH 35/35] fix: don't show report when bundleValidationReports are
 empty

---
 .../src/stories/inlang-bundle-header.ts              | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
index eea804bceb..7923550151 100644
--- a/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
+++ b/inlang/source-code/bundle-component/src/stories/inlang-bundle-header.ts
@@ -292,11 +292,13 @@ export default class InlangBundleHeader extends LitElement {
 									</sl-menu>
 								</sl-dropdown>`
 						: ``}
-					<inlang-lint-report-tip
-						.lintReports=${this.bundleValidationReports}
-						.installedLintRules=${this.installedLintRules}
-						.fixLint=${this.fixLint}
-					></inlang-lint-report-tip>
+					${this.bundleValidationReports && this.bundleValidationReports.length > 0
+						? html`<inlang-lint-report-tip
+								.lintReports=${this.bundleValidationReports}
+								.installedLintRules=${this.installedLintRules}
+								.fixLint=${this.fixLint}
+						  ></inlang-lint-report-tip>`
+						: ``}
 				</div>
 			</div>
 		`