diff --git a/.github/supporting-files/ci/partitions/partition1.txt b/.github/supporting-files/ci/partitions/partition1.txt
index fbbd1566205..717676af4ef 100644
--- a/.github/supporting-files/ci/partitions/partition1.txt
+++ b/.github/supporting-files/ci/partitions/partition1.txt
@@ -1,4 +1,5 @@
-@kie-tools-examples/sonataflow-greeting-quarkus-example
+@kie-tools-examples/sonataflow-greeting
+@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp
 @kie-tools/serverless-logic-web-tools-swf-builder-image
 @kie-tools/serverless-logic-web-tools
 @kie-tools/serverless-logic-web-tools-base-builder-image
diff --git a/.rat-excludes b/.rat-excludes
index 5e6e5f14ca3..01a2bc5759f 100644
--- a/.rat-excludes
+++ b/.rat-excludes
@@ -20,41 +20,41 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 # _intellij-project/maven-based-packages-@-kie-tools.iml
 maven-based-packages-@-kie-tools.iml
-# examples/base64png-editor-vscode-extension/.vscodeignore
+# examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/.vscodeignore
 .vscodeignore
-# examples/commit-message-validation-service/go.mod
+# examples/kie-sandbox-commit-message-validation-service/go.mod
 go.mod
-# examples/commit-message-validation-service/go.sum
+# examples/kie-sandbox-commit-message-validation-service/go.sum
 go.sum
-# examples/drools-process-usertasks-quarkus-example/drools-process-usertasks-quarkus-example.iml
-drools-process-usertasks-quarkus-example.iml
-# examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.jvm
+# examples/process-user-tasks-subsystem/process-user-tasks-subsystem.iml
+process-user-tasks-subsystem.iml
+# examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.jvm
 Dockerfile.jvm
-# examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.native
+# examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.native
 Dockerfile.native
-# examples/jbpm-compact-architecture-example/.gitignore
+# examples/process-compact-architecture/.gitignore
 .gitignore
-# examples/jbpm-compact-architecture-example/jbpm-compact-architecture-quarkus-example.iml
-jbpm-compact-architecture-quarkus-example.iml
-# examples/jbpm-compact-architecture-example/docker-compose/startContainers.sh
+# examples/process-compact-architecture/process-compact-architecture.iml
+process-compact-architecture.iml
+# examples/process-compact-architecture/docker-compose/startContainers.sh
 startContainers.sh
-# examples/jbpm-compact-architecture-example/docker-compose/pgadmin/pgpass
+# examples/process-compact-architecture/docker-compose/pgadmin/pgpass
 pgpass
-# examples/jbpm-compact-architecture-example/docker-compose/sql/init.sql
+# examples/process-compact-architecture/docker-compose/sql/init.sql
 init.sql
-# examples/ping-pong-view-angular/src/assets/.gitkeep
+# examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/assets/.gitkeep
 .gitkeep
-# examples/sonataflow-greeting-quarkus-example/sonataflow-greeting-quarkus-example.iml
-sonataflow-greeting-quarkus-example.iml
-# examples/todo-list-view-vscode-extension/.vscodeignore
+# examples/sonataflow-greeting/sonataflow-greeting.iml
+sonataflow-greeting.iml
+# examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/.vscodeignore
 .vscodeignore
-# examples/webapp/static/examples/dorinha.base64png
+# examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/dorinha.base64png
 dorinha.base64png
-# examples/webapp/static/examples/luiz.base64png
+# examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/luiz.base64png
 luiz.base64png
-# examples/webapp/static/examples/sample.base64png
+# examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/sample.base64png
 sample.base64png
-# examples/webapp/static/examples/tiago.base64png
+# examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/tiago.base64png
 tiago.base64png
 # packages/bpmn-marshaller/src/schemas/bpmn-2_0/BPMN20.xsd
 BPMN20.xsd
diff --git a/_intellij-project/.idea/misc.xml b/_intellij-project/.idea/misc.xml
index ba7d67621f7..152bd7cf6f1 100644
--- a/_intellij-project/.idea/misc.xml
+++ b/_intellij-project/.idea/misc.xml
@@ -4,7 +4,7 @@
   <component name="MavenProjectsManager">
     <option name="originalFiles">
       <list>
-        <option value="$PROJECT_DIR$/../examples/jbpm-compact-architecture-example/pom.xml" />
+        <option value="$PROJECT_DIR$/../examples/process-compact-architecture/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/jbpm-quarkus-devui/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/maven-base/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/yard-model/pom.xml" />
@@ -14,8 +14,8 @@
         <option value="$PROJECT_DIR$/../packages/serverless-workflow-diagram-editor/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/extended-services-java/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/dev-deployment-kogito-quarkus-blank-app/pom.xml" />
-        <option value="$PROJECT_DIR$/../examples/drools-process-usertasks-quarkus-example/pom.xml" />
-        <option value="$PROJECT_DIR$/../examples/sonataflow-greeting-quarkus-example/pom.xml" />
+        <option value="$PROJECT_DIR$/../examples/process-user-tasks-subsystem/pom.xml" />
+        <option value="$PROJECT_DIR$/../examples/sonataflow-greeting/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/dashbuilder/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/dmn-testing-models/pom.xml" />
         <option value="$PROJECT_DIR$/../packages/serverless-logic-web-tools-swf-deployment-quarkus-app/pom.xml" />
diff --git a/_intellij-project/.idea/modules.xml b/_intellij-project/.idea/modules.xml
index 6588a1bb1d8..3a8859d17e4 100644
--- a/_intellij-project/.idea/modules.xml
+++ b/_intellij-project/.idea/modules.xml
@@ -6,18 +6,18 @@
       <module fileurl="file://$PROJECT_DIR$/../packages/dev-deployment-kogito-quarkus-blank-app/dev-deployment-kogito-quarkus-blank-app.iml" filepath="$PROJECT_DIR$/../packages/dev-deployment-kogito-quarkus-blank-app/dev-deployment-kogito-quarkus-blank-app.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/dmn-marshaller-backend-compatibility-tester/dmn-marshaller-backend-compatibility-tester.iml" filepath="$PROJECT_DIR$/../packages/dmn-marshaller-backend-compatibility-tester/dmn-marshaller-backend-compatibility-tester.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/dmn-testing-models/dmn-testing-models.iml" filepath="$PROJECT_DIR$/../packages/dmn-testing-models/dmn-testing-models.iml" />
-      <module fileurl="file://$PROJECT_DIR$/../examples/drools-process-usertasks-quarkus-example/drools-process-usertasks-quarkus-example.iml" filepath="$PROJECT_DIR$/../examples/drools-process-usertasks-quarkus-example/drools-process-usertasks-quarkus-example.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/extended-services-java/extended-services-java.iml" filepath="$PROJECT_DIR$/../packages/extended-services-java/extended-services-java.iml" />
-      <module fileurl="file://$PROJECT_DIR$/../examples/jbpm-compact-architecture-example/jbpm-compact-architecture-quarkus-example.iml" filepath="$PROJECT_DIR$/../examples/jbpm-compact-architecture-example/jbpm-compact-architecture-quarkus-example.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/jbpm-quarkus-devui/jbpm-quarkus-devui-parent.iml" filepath="$PROJECT_DIR$/../packages/jbpm-quarkus-devui/jbpm-quarkus-devui-parent.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/maven-base/kie-tools-maven-base.iml" filepath="$PROJECT_DIR$/../packages/maven-base/kie-tools-maven-base.iml" />
       <module fileurl="file://$PROJECT_DIR$/maven-based-packages-@-kie-tools.iml" filepath="$PROJECT_DIR$/maven-based-packages-@-kie-tools.iml" />
+      <module fileurl="file://$PROJECT_DIR$/../examples/process-compact-architecture/process-compact-architecture.iml" filepath="$PROJECT_DIR$/../examples/process-compact-architecture/process-compact-architecture.iml" />
+      <module fileurl="file://$PROJECT_DIR$/../examples/process-user-tasks-subsystem/process-user-tasks-subsystem.iml" filepath="$PROJECT_DIR$/../examples/process-user-tasks-subsystem/process-user-tasks-subsystem.iml" />
       <module fileurl="file://$PROJECT_DIR$/../repo/repo.iml" filepath="$PROJECT_DIR$/../repo/repo.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/root-env/root-env.iml" filepath="$PROJECT_DIR$/../packages/root-env/root-env.iml" />
       <module fileurl="file://$PROJECT_DIR$/../scripts/scripts.iml" filepath="$PROJECT_DIR$/../scripts/scripts.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/serverless-logic-web-tools-swf-deployment-quarkus-app/serverless-logic-web-tools-swf-deployment-quarkus-app.iml" filepath="$PROJECT_DIR$/../packages/serverless-logic-web-tools-swf-deployment-quarkus-app/serverless-logic-web-tools-swf-deployment-quarkus-app.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/serverless-workflow-diagram-editor/serverless-workflow-diagram-editor-parent.iml" filepath="$PROJECT_DIR$/../packages/serverless-workflow-diagram-editor/serverless-workflow-diagram-editor-parent.iml" />
-      <module fileurl="file://$PROJECT_DIR$/../examples/sonataflow-greeting-quarkus-example/sonataflow-greeting-quarkus-example.iml" filepath="$PROJECT_DIR$/../examples/sonataflow-greeting-quarkus-example/sonataflow-greeting-quarkus-example.iml" />
+      <module fileurl="file://$PROJECT_DIR$/../examples/sonataflow-greeting/sonataflow-greeting.iml" filepath="$PROJECT_DIR$/../examples/sonataflow-greeting/sonataflow-greeting.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/sonataflow-quarkus-devui/sonataflow-quarkus-devui-parent.iml" filepath="$PROJECT_DIR$/../packages/sonataflow-quarkus-devui/sonataflow-quarkus-devui-parent.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/stunner-editors/stunner-editors-parent.iml" filepath="$PROJECT_DIR$/../packages/stunner-editors/stunner-editors-parent.iml" />
       <module fileurl="file://$PROJECT_DIR$/../packages/vscode-java-code-completion-extension-plugin/vscode-java-code-completion-extension-plugin.iml" filepath="$PROJECT_DIR$/../packages/vscode-java-code-completion-extension-plugin/vscode-java-code-completion-extension-plugin.iml" />
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 00000000000..c6d08c88511
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,5 @@
+# KIE Tools :: Examples
+
+This directory contains packages that showcase features, tools, complete apps, and use-cases for packages hosted in the [packages](../packages) directory.
+
+Building packages in this directory is toggled by the `KIE_TOOLS_BUILD__buildExamples` (true/false) Environment Variable. Default is `false`.
diff --git a/examples/base64png-editor-chrome-extension/LICENSE b/examples/bpmn-editor-classic-on-webapp/LICENSE
similarity index 100%
rename from examples/base64png-editor-chrome-extension/LICENSE
rename to examples/bpmn-editor-classic-on-webapp/LICENSE
diff --git a/examples/bpmn-editor-classic-on-webapp/README.md b/examples/bpmn-editor-classic-on-webapp/README.md
new file mode 100644
index 00000000000..71ba25c808c
--- /dev/null
+++ b/examples/bpmn-editor-classic-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: BPMN Editor (classic) on webapp
+
+This package contains a web application that features the BPMN Editor (classic) as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/bpmn-editor-classic-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/base64png-editor-chrome-extension/env/index.js b/examples/bpmn-editor-classic-on-webapp/env/index.js
similarity index 92%
rename from examples/base64png-editor-chrome-extension/env/index.js
rename to examples/bpmn-editor-classic-on-webapp/env/index.js
index ebd2df13706..dc44eebc90a 100644
--- a/examples/base64png-editor-chrome-extension/env/index.js
+++ b/examples/bpmn-editor-classic-on-webapp/env/index.js
@@ -23,10 +23,8 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({}),
   get env() {
     return {
-      exampleChromeExtension: {
-        envelope: {
-          port: 9101,
-        },
+      bpmnEditorClassicOnWebappExample: {
+        port: 7771,
       },
     };
   },
diff --git a/examples/bpmn-editor-classic-on-webapp/package.json b/examples/bpmn-editor-classic-on-webapp/package.json
new file mode 100644
index 00000000000..55e967df772
--- /dev/null
+++ b/examples/bpmn-editor-classic-on-webapp/package.json
@@ -0,0 +1,37 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/bpmn-editor-classic-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools/kie-bc-editors": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/stunner-editors": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "process": "^0.11.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/webapp/src/envelope/bpmn-editor.ts b/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicEnvelope.ts
similarity index 100%
rename from examples/webapp/src/envelope/bpmn-editor.ts
rename to examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicEnvelope.ts
diff --git a/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx b/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
similarity index 85%
rename from examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx
rename to examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
index 2c1fe48431c..0761d683aa3 100644
--- a/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx
+++ b/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
@@ -17,16 +17,17 @@
  * under the License.
  */
 
-import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
+import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
 import { Sidebar } from "./Sidebar";
 
-export function BpmnPage() {
+export function BpmnEditorClassicPage() {
   /**
    * The reference of the Editor. It allows us to access/modify the Editor properties imperatively.
    */
@@ -53,23 +54,27 @@ export function BpmnPage() {
       new EnvelopeMapping({
         type: "bpmn",
         filePathGlob: "**/*.bpmn?(2)",
-        resourcesPathPrefix: "../bpmn-editor/bpmn/",
-        envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/bpmn-editor.html" },
+        resourcesPathPrefix: "../bpmn-editor-classic/",
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "bpmn-editor-classic-envelope.html" },
       }),
     ]);
   }, []);
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
+      sidebar={
         <Sidebar
           editor={editor}
           editorEnvelopeLocator={editorEnvelopeLocator}
           file={file}
           setFile={setFile}
           fileExtension={"bpmn"}
-          accept={".bpmn, .bpmn2"}
+          accept={".bpmn"}
         />
+      }
+    >
+      <PageSection padding={{ default: "noPadding" }}>
         <EmbeddedEditor
           ref={editorRef}
           file={file}
@@ -77,7 +82,7 @@ export function BpmnPage() {
           channelType={ChannelType.EMBEDDED}
           locale={"en"}
         />
-      </div>
+      </PageSection>
     </Page>
   );
 }
diff --git a/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx b/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
similarity index 62%
rename from examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx
rename to examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
index 87cefa5e8e3..f2e78b62318 100644
--- a/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx
+++ b/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
@@ -20,10 +20,12 @@
 import * as React from "react";
 import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
 import { useCallback, useRef, useState } from "react";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { Nav, NavList } from "@patternfly/react-core/dist/js/components/Nav";
 import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
 import { EmbeddedEditorRef, useDirtyState } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
 
 function extractFileExtension(fileName: string) {
   return fileName.match(/[.]/)
@@ -54,9 +56,6 @@ interface Props {
 
 /**
  * A Sidebar component to enable edit the file name, create new files, open sample and open a file.
- *
- * @param props
- * @constructor
  */
 export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExtension, accept }: Props) {
   /**
@@ -137,65 +136,53 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
   );
 
   return (
-    <div>
-      <Nav className={"webapp--page-navigation"}>
-        <NavList>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <TextInput
-                className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-text-input"}
-                value={fileName}
-                type={"text"}
-                aria-label={"Edit file name"}
-                onChange={setFileName}
-                onBlur={onChangeName}
-              />
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onNewFile}>
-                New Empty File
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"}>
-                Open File
-                <input
-                  accept={accept}
-                  className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-open-file pf-c-button"}
-                  type="file"
-                  aria-label="File selection"
-                  onChange={onOpenFile}
-                  ref={inputRef}
-                />
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onOpenSample}>
-                Open Sample
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onDownload}>
-                Download
-              </a>
-            </div>
-          </NavItem>
-          {isDirty && (
-            <div style={{ display: "flex", alignItems: "center", padding: "20px" }}>
-              <p style={{ color: "red" }}>File Edited!</p>
-            </div>
-          )}
+    <>
+      <Nav>
+        <NavList style={{ padding: "8px" }}>
+          <TextInput
+            value={fileName}
+            type={"text"}
+            aria-label={"Edit file name"}
+            onChange={setFileName}
+            onBlur={onChangeName}
+          />
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onNewFile}>
+            New empty file
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open file
+            <input
+              accept={accept}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                opacity: 0,
+                cursor: "pointer",
+                width: "100%",
+                zIndex: 999,
+              }}
+              type="file"
+              aria-label="File selection"
+              onChange={onOpenFile}
+              ref={inputRef}
+            />
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open Sample
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onDownload}>
+            Download
+          </Button>
+          <br />
+          {isDirty && <Label color={"blue"}>File edited</Label>}
         </NavList>
+        <a ref={downloadRef} />
       </Nav>
-      <a ref={downloadRef} />
-    </div>
+    </>
   );
 }
diff --git a/examples/bpmn-editor-classic-on-webapp/src/index.tsx b/examples/bpmn-editor-classic-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..2fafcea1c99
--- /dev/null
+++ b/examples/bpmn-editor-classic-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { BpmnEditorClassicPage } from "./BpmnEditorClassicPage";
+
+ReactDOM.render(<BpmnEditorClassicPage />, document.getElementById("app"));
diff --git a/examples/webapp/envelope/new-dmn-editor.html b/examples/bpmn-editor-classic-on-webapp/static/bpmn-editor-classic-envelope.html
similarity index 95%
rename from examples/webapp/envelope/new-dmn-editor.html
rename to examples/bpmn-editor-classic-on-webapp/static/bpmn-editor-classic-envelope.html
index 8fb767f3a41..dfdaa0439e4 100644
--- a/examples/webapp/envelope/new-dmn-editor.html
+++ b/examples/bpmn-editor-classic-on-webapp/static/bpmn-editor-classic-envelope.html
@@ -40,6 +40,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="new-dmn-editor.js"></script>
+    <script src="bpmn-editor-classic-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/webapp/static/examples/sample.bpmn b/examples/bpmn-editor-classic-on-webapp/static/examples/sample.bpmn
similarity index 100%
rename from examples/webapp/static/examples/sample.bpmn
rename to examples/bpmn-editor-classic-on-webapp/static/examples/sample.bpmn
diff --git a/examples/bpmn-editor-classic-on-webapp/static/index.html b/examples/bpmn-editor-classic-on-webapp/static/index.html
new file mode 100644
index 00000000000..58736988ce6
--- /dev/null
+++ b/examples/bpmn-editor-classic-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples :: BPMN Editor (classic) on webapp</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/webapp/static/logo.png b/examples/bpmn-editor-classic-on-webapp/static/logo.png
similarity index 100%
rename from examples/webapp/static/logo.png
rename to examples/bpmn-editor-classic-on-webapp/static/logo.png
diff --git a/examples/webapp/tsconfig.json b/examples/bpmn-editor-classic-on-webapp/tsconfig.json
similarity index 100%
rename from examples/webapp/tsconfig.json
rename to examples/bpmn-editor-classic-on-webapp/tsconfig.json
diff --git a/examples/webapp/webpack.config.js b/examples/bpmn-editor-classic-on-webapp/webpack.config.js
similarity index 68%
rename from examples/webapp/webpack.config.js
rename to examples/bpmn-editor-classic-on-webapp/webpack.config.js
index 0fbcd914a74..19573c7e16b 100644
--- a/examples/webapp/webpack.config.js
+++ b/examples/bpmn-editor-classic-on-webapp/webpack.config.js
@@ -30,12 +30,7 @@ module.exports = (webpackEnv) => [
   merge(common(webpackEnv), {
     entry: {
       index: "./src/index.tsx",
-      "envelope/base64-editor": "./src/envelope/base64-editor.ts",
-      "envelope/dmn-editor": "./src/envelope/dmn-editor.ts",
-      "envelope/bpmn-editor": "./src/envelope/bpmn-editor.ts",
-      "envelope/new-dmn-editor": "./src/envelope/new-dmn-editor.ts",
-      "envelope/ping-pong-view-react-impl": "./src/envelope/ping-pong-view-react-impl.ts",
-      "envelope/todo-list-view": "./src/envelope/todo-list-view.ts",
+      "bpmn-editor-classic-envelope": "./src/BpmnEditorClassicEnvelope.ts",
     },
     output: {
       publicPath: "/",
@@ -46,18 +41,10 @@ module.exports = (webpackEnv) => [
     plugins: [
       new CopyPlugin({
         patterns: [
-          { from: "./envelope", to: "./envelope" },
           { from: "./static", to: "." },
-          { from: "../ping-pong-view-angular/dist/app", to: "./envelope/angular" },
-          { from: stunnerEditors.dmnEditorPath(), to: "./dmn-editor/dmn", globOptions: { ignore: ["WEB-INF/**/*"] } },
           {
             from: stunnerEditors.bpmnEditorPath(),
-            to: "./bpmn-editor/bpmn",
-            globOptions: { ignore: ["WEB-INF/**/*"] },
-          },
-          {
-            from: `${path.dirname(require.resolve("@kie-tools/dmn-editor/package.json"))}/dist`,
-            to: "./new-dmn-editor/dmn",
+            to: "./bpmn-editor-classic",
             globOptions: { ignore: ["WEB-INF/**/*"] },
           },
         ],
@@ -71,7 +58,7 @@ module.exports = (webpackEnv) => [
       historyApiFallback: false,
       static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
       compress: true,
-      port: env.exampleWebapp.port,
+      port: env.bpmnEditorClassicOnWebappExample.port,
     },
     ignoreWarnings: [/Failed to parse source map/],
   }),
diff --git a/examples/base64png-editor-vscode-extension/LICENSE b/examples/dmn-editor-classic-on-webapp/LICENSE
similarity index 100%
rename from examples/base64png-editor-vscode-extension/LICENSE
rename to examples/dmn-editor-classic-on-webapp/LICENSE
diff --git a/examples/dmn-editor-classic-on-webapp/README.md b/examples/dmn-editor-classic-on-webapp/README.md
new file mode 100644
index 00000000000..4345dd2fad4
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: DMN Editor (classic) on webapp
+
+This package contains a web application that features the DMN Editor (classic) as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/dmn-editor-classic-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/dmn-editor-standalone-examples/env/index.js b/examples/dmn-editor-classic-on-webapp/env/index.js
similarity index 94%
rename from examples/dmn-editor-standalone-examples/env/index.js
rename to examples/dmn-editor-classic-on-webapp/env/index.js
index d0530a1d5ff..4ae65acc3c2 100644
--- a/examples/dmn-editor-standalone-examples/env/index.js
+++ b/examples/dmn-editor-classic-on-webapp/env/index.js
@@ -23,8 +23,8 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({}),
   get env() {
     return {
-      dmnEditorStandaloneExamples: {
-        port: 9102,
+      dmnEditorClassicOnWebappExample: {
+        port: 7772,
       },
     };
   },
diff --git a/examples/dmn-editor-classic-on-webapp/package.json b/examples/dmn-editor-classic-on-webapp/package.json
new file mode 100644
index 00000000000..fc562961ddd
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/package.json
@@ -0,0 +1,37 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/dmn-editor-classic-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools/kie-bc-editors": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/stunner-editors": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "process": "^0.11.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/webapp/src/envelope/dmn-editor.ts b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicEnvelope.ts
similarity index 100%
rename from examples/webapp/src/envelope/dmn-editor.ts
rename to examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicEnvelope.ts
index fc68f85b0d3..6056c883c2b 100644
--- a/examples/webapp/src/envelope/dmn-editor.ts
+++ b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicEnvelope.ts
@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
 import { DmnEditorFactory } from "@kie-tools/kie-bc-editors/dist/dmn/envelope";
+import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
 
 EditorEnvelope.init({
   container: document.getElementById("envelope-app")!,
diff --git a/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
similarity index 84%
rename from examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx
rename to examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
index c9fccc2af52..a0844d50db6 100644
--- a/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx
+++ b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
@@ -17,16 +17,17 @@
  * under the License.
  */
 
-import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
+import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
 import { Sidebar } from "./Sidebar";
 
-export function DmnPage() {
+export function DmnEditorClassicPage() {
   /**
    * The reference of the Editor. It allows us to access/modify the Editor properties imperatively.
    */
@@ -46,22 +47,23 @@ export function DmnPage() {
 
   /**
    * The Editor envelope locator informs the EmbeddedEditor what file extension the Editor can open, and it maps to the respective envelope path and the Editor resources (like CSS, icons, etc).
-   * On this example, we're using a local envelope. To do this, it's necessary to copy the files from the @kie-tools/kie-bc-editors-unpacked on the webpack.config
+   * On this example, we're using a local envelope. To do this, it's necessary to copy the files from @kie-tools/stunner-editors on webpack.config
    */
   const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
     return new EditorEnvelopeLocator(window.location.origin, [
       new EnvelopeMapping({
         type: "dmn",
         filePathGlob: "**/*.dmn",
-        resourcesPathPrefix: "../dmn-editor/dmn/",
-        envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/dmn-editor.html" },
+        resourcesPathPrefix: "../dmn-editor-classic",
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "dmn-editor-classic-envelope.html" },
       }),
     ]);
   }, []);
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
+      sidebar={
         <Sidebar
           editor={editor}
           editorEnvelopeLocator={editorEnvelopeLocator}
@@ -70,6 +72,9 @@ export function DmnPage() {
           fileExtension={"dmn"}
           accept={".dmn"}
         />
+      }
+    >
+      <PageSection padding={{ default: "noPadding" }}>
         <EmbeddedEditor
           ref={editorRef}
           file={file}
@@ -77,7 +82,7 @@ export function DmnPage() {
           channelType={ChannelType.EMBEDDED}
           locale={"en"}
         />
-      </div>
+      </PageSection>
     </Page>
   );
 }
diff --git a/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx b/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx
new file mode 100644
index 00000000000..f2e78b62318
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx
@@ -0,0 +1,188 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
+import { useCallback, useRef, useState } from "react";
+import { Nav, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
+import { EmbeddedEditorRef, useDirtyState } from "@kie-tools-core/editor/dist/embedded";
+import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
+
+function extractFileExtension(fileName: string) {
+  return fileName.match(/[.]/)
+    ? fileName
+        .split(".")
+        ?.pop()
+        ?.match(/[\w\d]+/)
+        ?.pop()
+    : undefined;
+}
+
+function removeFileExtension(fileName: string) {
+  const fileExtension = extractFileExtension(fileName);
+  if (!fileExtension) {
+    return fileName;
+  }
+  return fileName.substr(0, fileName.length - fileExtension.length - 1);
+}
+
+interface Props {
+  editor?: EmbeddedEditorRef;
+  editorEnvelopeLocator: EditorEnvelopeLocator;
+  file: EmbeddedEditorFile;
+  setFile: React.Dispatch<EmbeddedEditorFile>;
+  fileExtension: string;
+  accept: string;
+}
+
+/**
+ * A Sidebar component to enable edit the file name, create new files, open sample and open a file.
+ */
+export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExtension, accept }: Props) {
+  /**
+   * A state which indicates the Editor dirty state
+   */
+  const isDirty = useDirtyState(editor!);
+
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+  const onDownload = useCallback(() => {
+    editor?.getStateControl().setSavedCommand();
+    editor?.getContent().then((content) => {
+      if (downloadRef.current) {
+        const fileBlob = new Blob([content], { type: "text/plain" });
+        downloadRef.current.href = URL.createObjectURL(fileBlob)!;
+        downloadRef.current.download = `${file.fileName}.${fileExtension}`;
+        downloadRef.current.click();
+      }
+    });
+  }, [editor, file.fileName, fileExtension]);
+
+  const [fileName, setFileName] = useState(file.fileName);
+  const onChangeName = useCallback(() => {
+    setFile({
+      ...file,
+      fileName,
+    });
+  }, [file, fileName, setFile]);
+
+  const onNewFile = useCallback(() => {
+    setFileName("new-file");
+    setFile({
+      isReadOnly: false,
+      fileExtension: fileExtension,
+      fileName: "new-file",
+      getFileContents: () => Promise.resolve(""),
+      normalizedPosixPathRelativeToTheWorkspaceRoot: `new-file.${fileExtension}`,
+    });
+  }, [fileExtension, setFile]);
+
+  const onOpenSample = useCallback(() => {
+    setFileName("sample");
+    setFile({
+      isReadOnly: false,
+      fileExtension: fileExtension,
+      fileName: "sample",
+      getFileContents: () => fetch(`examples/sample.${fileExtension}`).then((response) => response.text()),
+      normalizedPosixPathRelativeToTheWorkspaceRoot: `sample.${fileExtension}`,
+    });
+  }, [fileExtension, setFile]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const onOpenFile = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!inputRef.current!.files) {
+        return;
+      }
+
+      const currentFile = inputRef.current!.files![0];
+      if (!editorEnvelopeLocator.hasMappingFor(currentFile.name)) {
+        return;
+      }
+
+      setFileName(removeFileExtension(currentFile.name));
+      setFile({
+        isReadOnly: false,
+        fileExtension: extractFileExtension(currentFile.name)!,
+        fileName: removeFileExtension(currentFile.name),
+        normalizedPosixPathRelativeToTheWorkspaceRoot: currentFile.name,
+        getFileContents: () =>
+          new Promise<string | undefined>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (event: any) => resolve(event.target.result as string);
+            reader.readAsText(currentFile);
+          }),
+      });
+    },
+    [editorEnvelopeLocator, setFile]
+  );
+
+  return (
+    <>
+      <Nav>
+        <NavList style={{ padding: "8px" }}>
+          <TextInput
+            value={fileName}
+            type={"text"}
+            aria-label={"Edit file name"}
+            onChange={setFileName}
+            onBlur={onChangeName}
+          />
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onNewFile}>
+            New empty file
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open file
+            <input
+              accept={accept}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                opacity: 0,
+                cursor: "pointer",
+                width: "100%",
+                zIndex: 999,
+              }}
+              type="file"
+              aria-label="File selection"
+              onChange={onOpenFile}
+              ref={inputRef}
+            />
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open Sample
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onDownload}>
+            Download
+          </Button>
+          <br />
+          {isDirty && <Label color={"blue"}>File edited</Label>}
+        </NavList>
+        <a ref={downloadRef} />
+      </Nav>
+    </>
+  );
+}
diff --git a/examples/dmn-editor-classic-on-webapp/src/index.tsx b/examples/dmn-editor-classic-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..ae1274db0f3
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DmnEditorClassicPage } from "./DmnEditorClassicPage";
+
+ReactDOM.render(<DmnEditorClassicPage />, document.getElementById("app"));
diff --git a/examples/webapp/envelope/bpmn-editor.html b/examples/dmn-editor-classic-on-webapp/static/dmn-editor-classic-envelope.html
similarity index 93%
rename from examples/webapp/envelope/bpmn-editor.html
rename to examples/dmn-editor-classic-on-webapp/static/dmn-editor-classic-envelope.html
index 1f0536e4180..ade08305849 100644
--- a/examples/webapp/envelope/bpmn-editor.html
+++ b/examples/dmn-editor-classic-on-webapp/static/dmn-editor-classic-envelope.html
@@ -6,15 +6,15 @@
   ~ to you 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.
+  ~ under the License.      
 -->
 
 <!doctype html>
@@ -40,6 +40,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="bpmn-editor.js"></script>
+    <script src="dmn-editor-classic-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/webapp/static/examples/sample.dmn b/examples/dmn-editor-classic-on-webapp/static/examples/sample.dmn
similarity index 100%
rename from examples/webapp/static/examples/sample.dmn
rename to examples/dmn-editor-classic-on-webapp/static/examples/sample.dmn
diff --git a/examples/dmn-editor-classic-on-webapp/static/index.html b/examples/dmn-editor-classic-on-webapp/static/index.html
new file mode 100644
index 00000000000..0359da01a18
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples :: DMN Editor (classic) on webapp</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/dmn-editor-classic-on-webapp/static/logo.png b/examples/dmn-editor-classic-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/dmn-editor-classic-on-webapp/static/logo.png differ
diff --git a/examples/dmn-editor-classic-on-webapp/tsconfig.json b/examples/dmn-editor-classic-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/dmn-editor-classic-on-webapp/webpack.config.js b/examples/dmn-editor-classic-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..cf142b0162e
--- /dev/null
+++ b/examples/dmn-editor-classic-on-webapp/webpack.config.js
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const { ProvidePlugin } = require("webpack");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const stunnerEditors = require("@kie-tools/stunner-editors");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+      "dmn-editor-classic-envelope": "./src/DmnEditorClassicEnvelope.ts",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          { from: "./static", to: "." },
+          {
+            from: stunnerEditors.dmnEditorPath(),
+            to: "./dmn-editor-classic",
+            globOptions: { ignore: ["WEB-INF/**/*"] },
+          },
+        ],
+      }),
+      new ProvidePlugin({
+        process: require.resolve("process/browser.js"),
+        Buffer: ["buffer", "Buffer"],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.dmnEditorClassicOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/base64png-editor/LICENSE b/examples/dmn-editor-on-webapp/LICENSE
similarity index 100%
rename from examples/base64png-editor/LICENSE
rename to examples/dmn-editor-on-webapp/LICENSE
diff --git a/examples/dmn-editor-on-webapp/README.md b/examples/dmn-editor-on-webapp/README.md
new file mode 100644
index 00000000000..16550f0b7ac
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: DMN Editor on webapp
+
+This package contains a web application that features the DMN Editor as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/dmn-editor-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/webapp/env/index.js b/examples/dmn-editor-on-webapp/env/index.js
similarity index 95%
rename from examples/webapp/env/index.js
rename to examples/dmn-editor-on-webapp/env/index.js
index 231f5607654..1cbf79f0bb4 100644
--- a/examples/webapp/env/index.js
+++ b/examples/dmn-editor-on-webapp/env/index.js
@@ -23,8 +23,8 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({}),
   get env() {
     return {
-      exampleWebapp: {
-        port: 9100,
+      dmnEditorOnWebappExample: {
+        port: 7773,
       },
     };
   },
diff --git a/examples/dmn-editor-on-webapp/package.json b/examples/dmn-editor-on-webapp/package.json
new file mode 100644
index 00000000000..d94ada66364
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/package.json
@@ -0,0 +1,36 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/dmn-editor-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools/dmn-editor": "workspace:*",
+    "@kie-tools/dmn-editor-envelope": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/webapp/src/envelope/new-dmn-editor.ts b/examples/dmn-editor-on-webapp/src/DmnEditorEnvelope.ts
similarity index 100%
rename from examples/webapp/src/envelope/new-dmn-editor.ts
rename to examples/dmn-editor-on-webapp/src/DmnEditorEnvelope.ts
diff --git a/examples/webapp/src/Pages/KogitoEditors/NewDmnPage.tsx b/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
similarity index 84%
rename from examples/webapp/src/Pages/KogitoEditors/NewDmnPage.tsx
rename to examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
index 110ce017ed4..d18898d80e8 100644
--- a/examples/webapp/src/Pages/KogitoEditors/NewDmnPage.tsx
+++ b/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
@@ -17,16 +17,17 @@
  * under the License.
  */
 
-import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
+import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
 import { Sidebar } from "./Sidebar";
 
-export function NewDmnPage() {
+export function DmnEditorPage() {
   /**
    * The reference of the Editor. It allows us to access/modify the Editor properties imperatively.
    */
@@ -46,22 +47,23 @@ export function NewDmnPage() {
 
   /**
    * The Editor envelope locator informs the EmbeddedEditor what file extension the Editor can open, and it maps to the respective envelope path and the Editor resources (like CSS, icons, etc).
-   * On this example, we're using a local envelope. To do this, it's necessary to copy the files from the @kie-tools/kie-bc-editors-unpacked on the webpack.config
+   * On this example, we're using a local envelope. To do this, it's necessary to copy the files from @kie-tools/dmn-editor on webpack.config
    */
   const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
     return new EditorEnvelopeLocator(window.location.origin, [
       new EnvelopeMapping({
         type: "dmn",
         filePathGlob: "**/*.dmn",
-        resourcesPathPrefix: "../new-dmn-editor/dmn/",
-        envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/new-dmn-editor.html" },
+        resourcesPathPrefix: "../dmn-editor",
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "dmn-editor-envelope.html" },
       }),
     ]);
   }, []);
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
+      sidebar={
         <Sidebar
           editor={editor}
           editorEnvelopeLocator={editorEnvelopeLocator}
@@ -70,6 +72,9 @@ export function NewDmnPage() {
           fileExtension={"dmn"}
           accept={".dmn"}
         />
+      }
+    >
+      <PageSection padding={{ default: "noPadding" }}>
         <EmbeddedEditor
           ref={editorRef}
           file={file}
@@ -77,7 +82,7 @@ export function NewDmnPage() {
           channelType={ChannelType.EMBEDDED}
           locale={"en"}
         />
-      </div>
+      </PageSection>
     </Page>
   );
 }
diff --git a/examples/dmn-editor-on-webapp/src/Sidebar.tsx b/examples/dmn-editor-on-webapp/src/Sidebar.tsx
new file mode 100644
index 00000000000..f2e78b62318
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/src/Sidebar.tsx
@@ -0,0 +1,188 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
+import { useCallback, useRef, useState } from "react";
+import { Nav, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
+import { EmbeddedEditorRef, useDirtyState } from "@kie-tools-core/editor/dist/embedded";
+import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
+
+function extractFileExtension(fileName: string) {
+  return fileName.match(/[.]/)
+    ? fileName
+        .split(".")
+        ?.pop()
+        ?.match(/[\w\d]+/)
+        ?.pop()
+    : undefined;
+}
+
+function removeFileExtension(fileName: string) {
+  const fileExtension = extractFileExtension(fileName);
+  if (!fileExtension) {
+    return fileName;
+  }
+  return fileName.substr(0, fileName.length - fileExtension.length - 1);
+}
+
+interface Props {
+  editor?: EmbeddedEditorRef;
+  editorEnvelopeLocator: EditorEnvelopeLocator;
+  file: EmbeddedEditorFile;
+  setFile: React.Dispatch<EmbeddedEditorFile>;
+  fileExtension: string;
+  accept: string;
+}
+
+/**
+ * A Sidebar component to enable edit the file name, create new files, open sample and open a file.
+ */
+export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExtension, accept }: Props) {
+  /**
+   * A state which indicates the Editor dirty state
+   */
+  const isDirty = useDirtyState(editor!);
+
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+  const onDownload = useCallback(() => {
+    editor?.getStateControl().setSavedCommand();
+    editor?.getContent().then((content) => {
+      if (downloadRef.current) {
+        const fileBlob = new Blob([content], { type: "text/plain" });
+        downloadRef.current.href = URL.createObjectURL(fileBlob)!;
+        downloadRef.current.download = `${file.fileName}.${fileExtension}`;
+        downloadRef.current.click();
+      }
+    });
+  }, [editor, file.fileName, fileExtension]);
+
+  const [fileName, setFileName] = useState(file.fileName);
+  const onChangeName = useCallback(() => {
+    setFile({
+      ...file,
+      fileName,
+    });
+  }, [file, fileName, setFile]);
+
+  const onNewFile = useCallback(() => {
+    setFileName("new-file");
+    setFile({
+      isReadOnly: false,
+      fileExtension: fileExtension,
+      fileName: "new-file",
+      getFileContents: () => Promise.resolve(""),
+      normalizedPosixPathRelativeToTheWorkspaceRoot: `new-file.${fileExtension}`,
+    });
+  }, [fileExtension, setFile]);
+
+  const onOpenSample = useCallback(() => {
+    setFileName("sample");
+    setFile({
+      isReadOnly: false,
+      fileExtension: fileExtension,
+      fileName: "sample",
+      getFileContents: () => fetch(`examples/sample.${fileExtension}`).then((response) => response.text()),
+      normalizedPosixPathRelativeToTheWorkspaceRoot: `sample.${fileExtension}`,
+    });
+  }, [fileExtension, setFile]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const onOpenFile = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!inputRef.current!.files) {
+        return;
+      }
+
+      const currentFile = inputRef.current!.files![0];
+      if (!editorEnvelopeLocator.hasMappingFor(currentFile.name)) {
+        return;
+      }
+
+      setFileName(removeFileExtension(currentFile.name));
+      setFile({
+        isReadOnly: false,
+        fileExtension: extractFileExtension(currentFile.name)!,
+        fileName: removeFileExtension(currentFile.name),
+        normalizedPosixPathRelativeToTheWorkspaceRoot: currentFile.name,
+        getFileContents: () =>
+          new Promise<string | undefined>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (event: any) => resolve(event.target.result as string);
+            reader.readAsText(currentFile);
+          }),
+      });
+    },
+    [editorEnvelopeLocator, setFile]
+  );
+
+  return (
+    <>
+      <Nav>
+        <NavList style={{ padding: "8px" }}>
+          <TextInput
+            value={fileName}
+            type={"text"}
+            aria-label={"Edit file name"}
+            onChange={setFileName}
+            onBlur={onChangeName}
+          />
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onNewFile}>
+            New empty file
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open file
+            <input
+              accept={accept}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                opacity: 0,
+                cursor: "pointer",
+                width: "100%",
+                zIndex: 999,
+              }}
+              type="file"
+              aria-label="File selection"
+              onChange={onOpenFile}
+              ref={inputRef}
+            />
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open Sample
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onDownload}>
+            Download
+          </Button>
+          <br />
+          {isDirty && <Label color={"blue"}>File edited</Label>}
+        </NavList>
+        <a ref={downloadRef} />
+      </Nav>
+    </>
+  );
+}
diff --git a/examples/dmn-editor-on-webapp/src/index.tsx b/examples/dmn-editor-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..5e87633c507
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DmnEditorPage } from "./DmnEditorPage";
+
+ReactDOM.render(<DmnEditorPage />, document.getElementById("app"));
diff --git a/examples/webapp/envelope/dmn-editor.html b/examples/dmn-editor-on-webapp/static/dmn-editor-envelope.html
similarity index 96%
rename from examples/webapp/envelope/dmn-editor.html
rename to examples/dmn-editor-on-webapp/static/dmn-editor-envelope.html
index 55cf5c6b5bd..627116b5315 100644
--- a/examples/webapp/envelope/dmn-editor.html
+++ b/examples/dmn-editor-on-webapp/static/dmn-editor-envelope.html
@@ -40,6 +40,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="dmn-editor.js"></script>
+    <script src="dmn-editor-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/dmn-editor-on-webapp/static/examples/sample.dmn b/examples/dmn-editor-on-webapp/static/examples/sample.dmn
new file mode 100644
index 00000000000..45a458fbc4b
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/static/examples/sample.dmn
@@ -0,0 +1,857 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+<dmn:definitions
+  xmlns:dmn="http://www.omg.org/spec/DMN/20180521/MODEL/"
+  xmlns="https://kie.org/dmn/_857FE424-BEDA-4772-AB8E-2F4CDDB864AB"
+  xmlns:di="http://www.omg.org/spec/DMN/20180521/DI/"
+  xmlns:kie="https://kie.apache.org/dmn/extensions/1.0"
+  xmlns:dmndi="http://www.omg.org/spec/DMN/20180521/DMNDI/"
+  xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/"
+  xmlns:feel="http://www.omg.org/spec/DMN/20180521/FEEL/"
+  id="_C6CBECEB-2BBC-4E14-80B0-17F576B2CF92"
+  name="loan_pre_qualification"
+  expressionLanguage="http://www.omg.org/spec/DMN/20180521/FEEL/"
+  typeLanguage="http://www.omg.org/spec/DMN/20180521/FEEL/"
+  namespace="https://kie.apache.org/dmn/_857FE424-BEDA-4772-AB8E-2F4CDDB864AB"
+>
+  <dmn:extensionElements />
+  <dmn:itemDefinition id="_D40B0106-62E8-4AC0-A39A-C6C9506194A9" name="Requested_Product" isCollection="false">
+    <dmn:itemComponent id="_68b4a96c-198a-4575-b29a-a2c8b0539a2c" name="Type" isCollection="false">
+      <dmn:typeRef>Product_Type</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_ab1647c-cb63-4808-8d90-36d41591a40c" name="Rate" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_152917bb-6095-4057-8613-5b08b77db235" name="Term" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_e2f0e8cd-8f5a-43d4-b263-aaa5b9ae4420" name="Amount" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_2B4E9593-3239-4E04-A213-345F0AA0AF9D" name="Marital_Status" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_5BD13D9D-412F-4E6B-914A-3D8AAAC6A705">
+      <dmn:text>"M","D","S"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_F090CBB7-F5C3-4C54-9905-517DC1469B52" name="Applicant_Data" isCollection="false">
+    <dmn:itemComponent id="_f52e2b9f-544c-48ac-91e0-168a6e13fc8b" name="Age" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_5a20d4c2-0e66-4bb9-b5ea-3b9f2cd8e050" name="Marital Status" isCollection="false">
+      <dmn:typeRef>Marital_Status</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_701117b8-2f8d-4e94-a5db-d503f0fba3af" name="Employment Status" isCollection="false">
+      <dmn:typeRef>string</dmn:typeRef>
+      <dmn:allowedValues id="_4A8E36FC-A40C-4CB5-9AE1-73082DA24D13">
+        <dmn:text>"Unemployed","Employed","Self-employed","Student"</dmn:text>
+      </dmn:allowedValues>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_17ad2a24-425f-4df7-92fc-609e10217b8b" name="Existing Customer" isCollection="false">
+      <dmn:typeRef>boolean</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_bb9ef72e-2e0d-4175-ba58-d613bda7e9b3" name="Monthly" isCollection="false">
+      <dmn:itemComponent id="_32d5ea39-4bbc-4b16-88cd-f7e6e47a885e" name="Income" isCollection="false">
+        <dmn:typeRef>number</dmn:typeRef>
+      </dmn:itemComponent>
+      <dmn:itemComponent id="_7850468b-173d-4162-9c7a-94453a4b02d7" name="Repayments" isCollection="false">
+        <dmn:typeRef>number</dmn:typeRef>
+      </dmn:itemComponent>
+      <dmn:itemComponent id="_af578182-5c71-4b71-9027-0f0cf83770ab" name="Expenses" isCollection="false">
+        <dmn:typeRef>number</dmn:typeRef>
+      </dmn:itemComponent>
+      <dmn:itemComponent id="_4a4d01be-fe97-49a2-8c4c-3a49ff27968d" name="Tax" isCollection="false">
+        <dmn:typeRef>number</dmn:typeRef>
+      </dmn:itemComponent>
+      <dmn:itemComponent id="_f95dbf70-d256-4d40-a61d-c6332d864e8f" name="Insurance" isCollection="false">
+        <dmn:typeRef>number</dmn:typeRef>
+      </dmn:itemComponent>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_1945BD2E-C82C-4E7A-A59E-484B56A3AE46" name="Post-Bureau_Risk_Category" isCollection="false">
+    <dmn:itemComponent id="_19ecc622-e72c-482d-9de3-6578a1c76f1e" name="Risk Category" isCollection="false">
+      <dmn:typeRef>Risk_Category</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_2fa724d1-b276-4a3f-a2ef-2e7db3d362f3" name="Credit Contingency Factor" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_4816704B-AB7F-4624-8368-0BBBAFC04FB9" name="Pre-Bureau_Risk_Category" isCollection="false">
+    <dmn:itemComponent id="_78b44e10-e166-44a4-83a3-5d12c99529e8" name="Risk Category" isCollection="false">
+      <dmn:typeRef>string</dmn:typeRef>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_fa41a482-a86a-4b52-a750-35170cd6bba3" name="Credit Contingency Factor" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_9AEAE50E-67BF-4428-A6CD-B48D299FD73C" name="Eligibility" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_79C7F45D-228F-437B-AF7E-615FC72A5354">
+      <dmn:text>"Ineligible","Eligible"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_FBF245E7-9A93-4D52-9F02-AF6893011A5F" name="Strategy" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_0B005355-19D0-447B-B2DE-6D1290C7504C">
+      <dmn:text>"Decline","Bureau","Through"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_5D34E713-E94E-403E-A681-DD6948BE4F79" name="Bureau_Call_Type" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_947DBBA1-70A0-42DA-BC37-FD2FD93BF61B">
+      <dmn:text>"Full","Mini","None"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_9AF58ED6-A526-4346-8780-0D1E6038CA6F" name="Product_Type" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_A2554140-8060-4F66-BA16-3A8DFE12C17C">
+      <dmn:text>"Standard Loan","Special Loan"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_4D36A25E-9A37-47AE-B9BF-94338AE67609" name="Risk_Category" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_041426C2-B9D2-4C18-9AC3-5A508D000839">
+      <dmn:text>"High","Medium","Low","Very Low","Decline"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_46C870FC-2A99-43A0-9D1B-3D3C5516FB23" name="Credit_Score_Rating" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_8470AE69-2814-4911-953D-3FC61A681063">
+      <dmn:text>"Poor","Bad","Fair","Good","Excellent"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_7641A6FA-BCF3-45D1-A0B6-71B0634ABB3E" name="Back_End_Ratio" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_CA1C6F0E-186F-41DD-8D8D-D405789BA3F1">
+      <dmn:text>"Insufficient","Sufficient"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_B5E00A2D-3C95-4A9C-BCA6-BDE852939F6D" name="Front_End_Ratio" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_B8658CA2-F472-4390-8AB0-1DD49100B20C">
+      <dmn:text>"Sufficient","Insufficient"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_B8ACE210-2C55-4C66-B3D8-4885EE1C52A0" name="Qualification" isCollection="false">
+    <dmn:typeRef>string</dmn:typeRef>
+    <dmn:allowedValues id="_1F66B8BF-6AB7-4965-8A69-897DDC1A8B34">
+      <dmn:text>"Not Qualified","Qualified"</dmn:text>
+    </dmn:allowedValues>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_2CC2E8D7-1BE2-4E4A-8072-55A1EC94DB6E" name="Credit_Score" isCollection="false">
+    <dmn:itemComponent id="_d53ce920-87f5-4a4f-baba-85c2a830d60f" name="FICO" isCollection="false">
+      <dmn:typeRef>number</dmn:typeRef>
+      <dmn:allowedValues id="_E30AADBD-D028-475D-B8D8-B5687D454BED">
+        <dmn:text>[300..850]</dmn:text>
+      </dmn:allowedValues>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:itemDefinition id="_3C37A6F1-C113-4993-BB57-E89B99C70B02" name="Loan_Qualification" isCollection="false">
+    <dmn:itemComponent id="_e11c3ac3-7370-4378-967b-91e9cb221fe1" name="Qualification" isCollection="false">
+      <dmn:typeRef>string</dmn:typeRef>
+      <dmn:allowedValues id="_B0AD0641-0023-461D-B20E-41CAE02F9BE4">
+        <dmn:text>"Qualified","Not Qualified"</dmn:text>
+      </dmn:allowedValues>
+    </dmn:itemComponent>
+    <dmn:itemComponent id="_b3541f82-5bc9-4fab-ba9b-c423a9a2cd6c" name="Reason" isCollection="false">
+      <dmn:typeRef>string</dmn:typeRef>
+    </dmn:itemComponent>
+  </dmn:itemDefinition>
+  <dmn:inputData id="_4C89E59C-FDDA-438C-8D1F-0B1194EF6DAE" name="Credit Score">
+    <dmn:extensionElements />
+    <dmn:variable id="_A97019FC-EE01-451F-A7AA-5A97ED005FB9" name="Credit Score" typeRef="Credit_Score" />
+  </dmn:inputData>
+  <dmn:businessKnowledgeModel id="_4C788DBD-C672-4F41-9AFE-9C7D2C145734" name="Lender Acceptable DTI">
+    <dmn:extensionElements />
+    <dmn:variable id="_85508943-7AD2-4AA0-80E5-20923CA2308D" name="Lender Acceptable DTI" typeRef="number" />
+    <dmn:encapsulatedLogic id="_9F0257EE-CF82-49FD-AEDD-3155890864FF" kind="FEEL">
+      <dmn:literalExpression id="_21E8FA38-C947-4733-9E52-CF81A97ADF91">
+        <dmn:text>0.36</dmn:text>
+      </dmn:literalExpression>
+    </dmn:encapsulatedLogic>
+  </dmn:businessKnowledgeModel>
+  <dmn:decision id="_F0DC8923-5FC7-4200-8BD1-461D5F3714BE" name="Front End Ratio">
+    <dmn:extensionElements />
+    <dmn:variable id="_A0B0B032-F63F-491F-A65E-72E68A86B8FD" name="Front End Ratio" typeRef="Front_End_Ratio" />
+    <dmn:informationRequirement id="_89EEAF9F-5A5D-4F59-91B7-EA418A7229AF">
+      <dmn:requiredInput href="#_1CF5CEFA-AF97-46F9-9CD5-9A8AEBB20B4E" />
+    </dmn:informationRequirement>
+    <dmn:informationRequirement id="_87730C5A-5648-415B-9189-EF4D8805F8C9">
+      <dmn:requiredInput href="#_6E3205AF-7E3D-4ABE-A367-96F3F6E8210E" />
+    </dmn:informationRequirement>
+    <dmn:knowledgeRequirement id="_63DE7C3B-A767-4B8A-A098-91ECB4B8D330">
+      <dmn:requiredKnowledge href="#_FAF9080E-F4EF-49F7-AEFD-0D2990D8FFDA" />
+    </dmn:knowledgeRequirement>
+    <dmn:knowledgeRequirement id="_2C95829D-FCF9-44F5-8F5A-0A6CDB60600D">
+      <dmn:requiredKnowledge href="#_C98BE939-B9C7-43E0-83E8-EE7A16C5276D" />
+    </dmn:knowledgeRequirement>
+    <dmn:context id="_08A9C33D-719F-4B05-AC42-D15464798BC4">
+      <dmn:contextEntry>
+        <dmn:variable id="_C8F98D0F-218F-4B60-BD99-7FD98078FE56" name="Client PITI" typeRef="number" />
+        <dmn:invocation id="_EB658586-C3C8-488E-8118-E69E31583106">
+          <dmn:literalExpression id="_6E79E4D9-BBFB-4E90-8AA3-A6C153C3C946">
+            <dmn:text>PITI</dmn:text>
+          </dmn:literalExpression>
+          <dmn:binding>
+            <dmn:parameter id="_4B93E8C8-A092-4EAC-B23A-CC138225ACC3" name="pmt" />
+            <dmn:literalExpression id="_51ACEC3C-4207-4F5F-8FDD-9EDAA3270E60">
+              <dmn:text
+              >(Requested Product.Amount*((Requested Product.Rate/100)/12))/(1-(1/(1+(Requested Product.Rate/100)/12)**-Requested Product.Term))</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+          <dmn:binding>
+            <dmn:parameter id="_B9D0FB44-605A-42DB-81F7-4DF4C4CC1CDD" name="tax" />
+            <dmn:literalExpression id="_5D050B8D-DF55-45FD-988B-9C56BED53D5B">
+              <dmn:text>Applicant Data.Monthly.Tax</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+          <dmn:binding>
+            <dmn:parameter id="_67372884-0407-4812-986F-3A2CC4C3A7B1" name="insurance" />
+            <dmn:literalExpression id="_14C44A69-56DB-4B68-B757-4225C80E4D88">
+              <dmn:text>Applicant Data.Monthly.Insurance</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+          <dmn:binding>
+            <dmn:parameter id="_EDE0107C-9736-4BB6-9500-173FFAFF00DB" name="income" />
+            <dmn:literalExpression id="_0DB5DE05-A2AD-4013-B191-DC1D1637A132">
+              <dmn:text>Applicant Data.Monthly.Income</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+        </dmn:invocation>
+      </dmn:contextEntry>
+      <dmn:contextEntry>
+        <dmn:literalExpression id="_3F95EFD0-94D7-4D1A-9EA9-C8E12982D7E8">
+          <dmn:text>if Client PITI &lt;= Lender Acceptable PITI()
+then "Sufficient" 
+else "Insufficient"</dmn:text>
+        </dmn:literalExpression>
+      </dmn:contextEntry>
+    </dmn:context>
+  </dmn:decision>
+  <dmn:businessKnowledgeModel id="_FAF9080E-F4EF-49F7-AEFD-0D2990D8FFDA" name="Test">
+    <dmn:extensionElements />
+    <dmn:variable id="_994F490E-10AC-4704-BFDA-14A3B98A981E" name="Test" typeRef="number" />
+    <dmn:encapsulatedLogic id="_D33D9AEA-49DF-489F-98EC-4B42FF8C2027" kind="FEEL">
+      <dmn:formalParameter id="_664280C1-D5E0-47BE-82EF-0A6579975A62" name="pmt" typeRef="number" />
+      <dmn:formalParameter id="_3E7DF0B3-C48B-481D-B092-FC82EC2F6E37" name="tax" typeRef="number" />
+      <dmn:formalParameter id="_DF691F86-AD12-46BA-B149-AC875836A116" name="insurance" typeRef="number" />
+      <dmn:formalParameter id="_9E2E257F-90EB-4FC4-8DD9-089784E7579E" name="income" typeRef="number" />
+      <dmn:literalExpression id="_A32ED4A5-7B89-40F7-BE25-CDB636FE071C">
+        <dmn:text>(pmt+tax+insurance)/income</dmn:text>
+      </dmn:literalExpression>
+    </dmn:encapsulatedLogic>
+  </dmn:businessKnowledgeModel>
+  <dmn:inputData id="_1CF5CEFA-AF97-46F9-9CD5-9A8AEBB20B4E" name="Applicant Data">
+    <dmn:extensionElements />
+    <dmn:variable id="_2BBF28D2-DF09-4201-8D7A-5820E260592B" name="Applicant Data" typeRef="Applicant_Data" />
+  </dmn:inputData>
+  <dmn:decision id="_D6F4234F-15B3-4F5B-B814-5F6FF29D2907" name="Back End Ratio">
+    <dmn:extensionElements />
+    <dmn:variable id="_5AF571F7-AD41-43DC-ABFD-26672585042F" name="Back End Ratio" typeRef="Back_End_Ratio" />
+    <dmn:informationRequirement id="_77BA409B-E00D-4FBC-B522-8F656D4F6F0E">
+      <dmn:requiredInput href="#_1CF5CEFA-AF97-46F9-9CD5-9A8AEBB20B4E" />
+    </dmn:informationRequirement>
+    <dmn:knowledgeRequirement id="_4D441C11-7042-49CF-A42C-17A4348A7F29">
+      <dmn:requiredKnowledge href="#_4C788DBD-C672-4F41-9AFE-9C7D2C145734" />
+    </dmn:knowledgeRequirement>
+    <dmn:knowledgeRequirement id="_3217D655-4484-4733-A9AE-4F9CF30D9924">
+      <dmn:requiredKnowledge href="#_DA5CCF62-90A8-4CFC-A137-98B528522588" />
+    </dmn:knowledgeRequirement>
+    <dmn:context id="_5F9FEA4E-B3FC-4BC2-913E-36B8071FA777">
+      <dmn:contextEntry>
+        <dmn:variable id="_F3ED9059-400F-4BE8-B250-C2ABCD9FF022" name="Client DTI" typeRef="number" />
+        <dmn:invocation id="_4A7FC8E0-25EF-4DAF-845A-93BD89C2BC8C">
+          <dmn:literalExpression id="_F0E80900-1964-4142-9A05-73E7A2E0F2CD">
+            <dmn:text>DTI</dmn:text>
+          </dmn:literalExpression>
+          <dmn:binding>
+            <dmn:parameter id="_6408A089-A087-4855-BBB8-0C22BE6ECFDF" name="d" />
+            <dmn:literalExpression id="_3D0A1979-E59A-483F-BDA8-138F99BA5AB3">
+              <dmn:text>Applicant Data.Monthly.Repayments + Applicant Data.Monthly.Expenses</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+          <dmn:binding>
+            <dmn:parameter id="_45370376-8934-4FBD-BA9F-5338916EBF07" name="i" />
+            <dmn:literalExpression id="_D985F886-71C0-4F65-8808-2CEF366BECC8">
+              <dmn:text>Applicant Data.Monthly.Income</dmn:text>
+            </dmn:literalExpression>
+          </dmn:binding>
+        </dmn:invocation>
+      </dmn:contextEntry>
+      <dmn:contextEntry>
+        <dmn:literalExpression id="_D1F96102-4158-45BB-8C9A-B7A3BE2C0206">
+          <dmn:text>if Client DTI &lt;= Lender Acceptable DTI()
+then "Sufficient"
+else "Insufficient"</dmn:text>
+        </dmn:literalExpression>
+      </dmn:contextEntry>
+    </dmn:context>
+  </dmn:decision>
+  <dmn:decision id="_2FE51DB1-3083-4BF7-AA71-0B0065310E72" name="Credit Score Rating">
+    <dmn:extensionElements />
+    <dmn:variable id="_82228E41-22D1-4758-97C3-BBFE90EDB5FB" name="Credit Score Rating" typeRef="Credit_Score_Rating" />
+    <dmn:informationRequirement id="_31A1B6B2-A2A6-4E03-B898-26573A5CF3BA">
+      <dmn:requiredInput href="#_4C89E59C-FDDA-438C-8D1F-0B1194EF6DAE" />
+    </dmn:informationRequirement>
+    <dmn:decisionTable id="_4ACEFFF0-AD2C-4DB8-9BAD-7BCCFB03F295" hitPolicy="UNIQUE" preferredOrientation="Rule-as-Row">
+      <dmn:input id="_44C93627-629C-48B8-B71A-AE2266A42674">
+        <dmn:inputExpression id="_00932A00-5ECE-4AEF-AA68-92E679CEF4AB" typeRef="number">
+          <dmn:text>Credit Score.FICO</dmn:text>
+        </dmn:inputExpression>
+      </dmn:input>
+      <dmn:output id="_9C201FAB-B49C-4D22-900B-B4E82D5469FB" />
+      <dmn:annotation name="" />
+      <dmn:rule id="_AED703E1-8E56-4D27-A511-3875AD1D122E">
+        <dmn:inputEntry id="_E2C9F30B-D529-48D8-A51C-A2ACCC8109B3">
+          <dmn:text>&gt;= 750</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_A1FF2B2D-EF34-42AD-A45A-5FFDFA21FA6D">
+          <dmn:text>"Excellent"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_1FA12B9F-288C-42E8-B77F-BE2D3702B7B6">
+        <dmn:inputEntry id="_CA5AE067-0E1A-44CA-B85C-912F9ED4594C">
+          <dmn:text>[700..750)</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_833307A2-B924-422C-A4F5-BFFAB27D86D5">
+          <dmn:text>"Good"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_11976EBA-60BC-421B-A270-089A45E9B167">
+        <dmn:inputEntry id="_75D612D5-D201-4932-8524-E49183F51D2D">
+          <dmn:text>[650..700)</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_E18FE2B2-729C-41F0-B5CC-0E5E5EA431E3">
+          <dmn:text>"Fair"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_12F8077F-E601-4882-93E1-31508B1402E1">
+        <dmn:inputEntry id="_61374E7D-4EF3-4603-97A1-9D1FABAAA3C8">
+          <dmn:text>[600..650)</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_75135F4C-6BA7-4180-B726-A0D795B3D7FF">
+          <dmn:text>"Poor"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_D025254C-9376-4425-8084-451E09243CE2">
+        <dmn:inputEntry id="_6C13B507-FB60-40AD-8F5C-2407F1413A5C">
+          <dmn:text>&lt; 600</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_1FB7308A-E37B-46EA-8070-C67E2388A869">
+          <dmn:text>"Bad"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+    </dmn:decisionTable>
+  </dmn:decision>
+  <dmn:decision id="_21C50763-E49F-4D83-A824-16DA6AA87C64" name="Loan Pre-Qualification">
+    <dmn:extensionElements />
+    <dmn:variable
+      id="_047A25F5-DEF2-44BD-95B7-FB49A433F878"
+      name="Loan Pre-Qualification"
+      typeRef="Loan_Qualification"
+    />
+    <dmn:informationRequirement id="_A3E95B32-2EFD-40AD-B5E4-0A73A1542011">
+      <dmn:requiredDecision href="#_D6F4234F-15B3-4F5B-B814-5F6FF29D2907" />
+    </dmn:informationRequirement>
+    <dmn:informationRequirement id="_0B992F01-BA77-4F06-A830-D8948B467272">
+      <dmn:requiredDecision href="#_F0DC8923-5FC7-4200-8BD1-461D5F3714BE" />
+    </dmn:informationRequirement>
+    <dmn:informationRequirement id="_B6002F33-4888-48C5-B265-636030F8C2DC">
+      <dmn:requiredDecision href="#_2FE51DB1-3083-4BF7-AA71-0B0065310E72" />
+    </dmn:informationRequirement>
+    <dmn:decisionTable id="_EF7F404A-939E-4889-95D8-E4053DD1EED9" hitPolicy="FIRST" preferredOrientation="Rule-as-Row">
+      <dmn:input id="_58ABD81B-FD16-45C3-9E64-DB271AA917C0">
+        <dmn:inputExpression id="_5262441E-F812-4554-AF02-5267BDDF80F5" typeRef="Credit_Score_Rating">
+          <dmn:text>Credit Score Rating</dmn:text>
+        </dmn:inputExpression>
+      </dmn:input>
+      <dmn:input id="_36258DA0-E527-429C-8FA1-7DEA63647689">
+        <dmn:inputExpression id="_4E9F0E06-85F1-4D10-B30D-FB55741B90BC" typeRef="Back_End_Ratio">
+          <dmn:text>Back End Ratio</dmn:text>
+        </dmn:inputExpression>
+      </dmn:input>
+      <dmn:input id="_A102CD8A-C38D-48E4-BC59-CA660D6FBF0A">
+        <dmn:inputExpression id="_5D79EEF5-71B2-4360-B59A-215AA5593DCB" typeRef="Front_End_Ratio">
+          <dmn:text>Front End Ratio</dmn:text>
+        </dmn:inputExpression>
+      </dmn:input>
+      <dmn:output id="_B895B095-C3D6-48B4-8A50-D2D3B8CC6A45" name="Qualification" typeRef="string" />
+      <dmn:output id="_A8D2D3B1-07B3-4619-8DE0-F923F511058B" name="Reason" typeRef="string" />
+      <dmn:annotation name="" />
+      <dmn:rule id="_B49E1642-F352-4D2E-92B6-E5DFA59AAFAC">
+        <dmn:inputEntry id="_6C83C446-1A9A-4FFC-B30C-23915FF9CC43">
+          <dmn:text>"Poor", "Bad"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_0BC93CB9-FD20-45C8-A498-39E4464B6224">
+          <dmn:text>-</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_1554A983-B2C1-40A7-9614-50720420F4B2">
+          <dmn:text>-</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_7B39B964-4E25-4717-92FE-A36F2B39FAB9">
+          <dmn:text>"Not Qualified"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:outputEntry id="_A852F5B6-C5DF-4ADD-8B93-9701F0724912">
+          <dmn:text>"Credit Score too low."</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_214865F4-C968-438C-A385-6B2823AF1BC3">
+        <dmn:inputEntry id="_18617A2A-6DD3-41A9-87D6-68C91554620E">
+          <dmn:text>-</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_5C70BB81-CAFD-4695-A241-68F441FF9A29">
+          <dmn:text>"Insufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_78A3C3A0-EEBC-448B-B1C1-5CFF6C7F2AC5">
+          <dmn:text>"Sufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_3C38D181-CCA1-4678-A3DD-0A5CE6D59FDC">
+          <dmn:text>"Not Qualified"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:outputEntry id="_F4284B9F-C77A-429B-A689-E212CFB19CB7">
+          <dmn:text>"Debt to income ratio is too high."</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_73E96773-064E-49F6-92B2-AA76E6BF6B8A">
+        <dmn:inputEntry id="_24A825F0-B8C7-42C9-BBA2-4442CAE6F91A">
+          <dmn:text>-</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_B7F59A5C-4AF1-4E90-BB0D-83C63A8390E6">
+          <dmn:text>"Sufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_09A23FD4-9A98-4C34-9E9B-9E8EE652ABBC">
+          <dmn:text>"Insufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_9BF1096A-1AF3-4D21-9273-460DE555F0B6">
+          <dmn:text>"Not Qualified"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:outputEntry id="_4D805BB2-B79E-42C2-A562-674ECBDFA01C">
+          <dmn:text>"Mortgage payment to income ratio is too high."</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_7C242C58-6CAB-43CF-9235-347A72AE3F9E">
+        <dmn:inputEntry id="_9DF2A026-8B87-4C75-BB3D-54FF0E2A2E36">
+          <dmn:text>-</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_FF3E9782-BE9C-4B0C-A63B-E906F6116251">
+          <dmn:text>"Insufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_544687CD-F3A2-46C7-8439-E5E2E7B6483D">
+          <dmn:text>"Insufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_5A958D2E-B310-4AB9-BF5B-49623BE5DB55">
+          <dmn:text>"Not Qualified"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:outputEntry id="_F0BD7DC2-A1B6-4CF4-95D0-906DBB540EFC">
+          <dmn:text>"Debt to income ratio is too high AND mortgage payment to income ratio is too high."</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+      <dmn:rule id="_C8FA33B1-AF6E-4A59-B7B9-6FDF1F495C44">
+        <dmn:inputEntry id="_82FBCEE2-C16C-4FFF-A7F3-5512C211E29B">
+          <dmn:text>"Fair", "Good", "Excellent"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_BF7CDAE1-66E3-4B06-8729-896453AD7867">
+          <dmn:text>"Sufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:inputEntry id="_41CB6123-8122-4FA4-A5C1-548B92CA31AE">
+          <dmn:text>"Sufficient"</dmn:text>
+        </dmn:inputEntry>
+        <dmn:outputEntry id="_9E0497D0-F2F2-419E-A558-366452B379A1">
+          <dmn:text>"Qualified"</dmn:text>
+        </dmn:outputEntry>
+        <dmn:outputEntry id="_113CA566-6044-4858-B8D9-5ACBA4A91CF4">
+          <dmn:text>"The borrower has been successfully prequalified for the requested loan."</dmn:text>
+        </dmn:outputEntry>
+        <dmn:annotationEntry>
+          <dmn:text />
+        </dmn:annotationEntry>
+      </dmn:rule>
+    </dmn:decisionTable>
+  </dmn:decision>
+  <dmn:inputData id="_6E3205AF-7E3D-4ABE-A367-96F3F6E8210E" name="Requested Product">
+    <dmn:extensionElements />
+    <dmn:variable id="_EE05E1C7-67ED-4A71-BDEE-8005259351E8" name="Requested Product" typeRef="Requested_Product" />
+  </dmn:inputData>
+  <dmn:businessKnowledgeModel id="_DA5CCF62-90A8-4CFC-A137-98B528522588" name="DTI">
+    <dmn:extensionElements />
+    <dmn:variable id="_2F8921D1-6384-4ECB-848E-CE84A20B2573" name="DTI" typeRef="number" />
+    <dmn:encapsulatedLogic id="_478C815E-60C9-4637-AA42-195DF16B63A5" kind="FEEL">
+      <dmn:formalParameter id="_B7A9C222-C560-4D37-A821-0CAC88611F10" name="d" typeRef="number" />
+      <dmn:formalParameter id="_43C04721-38F6-4ABF-9F2F-BD2956C05441" name="i" typeRef="number" />
+      <dmn:literalExpression id="_064FA88E-B06F-4944-85C3-DA86C3F660DD">
+        <dmn:text>d/i</dmn:text>
+      </dmn:literalExpression>
+    </dmn:encapsulatedLogic>
+  </dmn:businessKnowledgeModel>
+  <dmn:businessKnowledgeModel id="_C98BE939-B9C7-43E0-83E8-EE7A16C5276D" name="Lender Acceptable PITI">
+    <dmn:extensionElements />
+    <dmn:variable id="_9D78214B-EC07-4360-8D1B-3D927AC90A20" name="Lender Acceptable PITI" typeRef="number" />
+    <dmn:encapsulatedLogic id="_E312D80E-0ECE-4D66-87EB-30DE20890BBC" kind="FEEL">
+      <dmn:literalExpression id="_EEDF2C15-7FD7-409F-B23B-F9A198E2135D">
+        <dmn:text>0.28</dmn:text>
+      </dmn:literalExpression>
+    </dmn:encapsulatedLogic>
+  </dmn:businessKnowledgeModel>
+  <dmndi:DMNDI>
+    <dmndi:DMNDiagram>
+      <di:extension>
+        <kie:ComponentsWidthsExtension>
+          <kie:ComponentWidths dmnElementRef="_21E8FA38-C947-4733-9E52-CF81A97ADF91">
+            <kie:width>209</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_9F0257EE-CF82-49FD-AEDD-3155890864FF">
+            <kie:width>50</kie:width>
+            <kie:width>209</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_08A9C33D-719F-4B05-AC42-D15464798BC4">
+            <kie:width>50</kie:width>
+            <kie:width>100</kie:width>
+            <kie:width>1280</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_EB658586-C3C8-488E-8118-E69E31583106">
+            <kie:width>50</kie:width>
+            <kie:width>100</kie:width>
+            <kie:width>1110</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_6E79E4D9-BBFB-4E90-8AA3-A6C153C3C946" />
+          <kie:ComponentWidths dmnElementRef="_51ACEC3C-4207-4F5F-8FDD-9EDAA3270E60">
+            <kie:width>1110</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_5D050B8D-DF55-45FD-988B-9C56BED53D5B">
+            <kie:width>1110</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_14C44A69-56DB-4B68-B757-4225C80E4D88">
+            <kie:width>1110</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_0DB5DE05-A2AD-4013-B191-DC1D1637A132">
+            <kie:width>1110</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_3F95EFD0-94D7-4D1A-9EA9-C8E12982D7E8">
+            <kie:width>1280</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_A32ED4A5-7B89-40F7-BE25-CDB636FE071C">
+            <kie:width>300</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_D33D9AEA-49DF-489F-98EC-4B42FF8C2027">
+            <kie:width>50</kie:width>
+            <kie:width>300</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_5F9FEA4E-B3FC-4BC2-913E-36B8071FA777">
+            <kie:width>50</kie:width>
+            <kie:width>100</kie:width>
+            <kie:width>802</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_4A7FC8E0-25EF-4DAF-845A-93BD89C2BC8C">
+            <kie:width>50</kie:width>
+            <kie:width>100</kie:width>
+            <kie:width>632</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_F0E80900-1964-4142-9A05-73E7A2E0F2CD" />
+          <kie:ComponentWidths dmnElementRef="_3D0A1979-E59A-483F-BDA8-138F99BA5AB3">
+            <kie:width>632</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_D985F886-71C0-4F65-8808-2CEF366BECC8">
+            <kie:width>632</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_D1F96102-4158-45BB-8C9A-B7A3BE2C0206">
+            <kie:width>802</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_4ACEFFF0-AD2C-4DB8-9BAD-7BCCFB03F295">
+            <kie:width>50</kie:width>
+            <kie:width>224</kie:width>
+            <kie:width>226</kie:width>
+            <kie:width>335</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_EF7F404A-939E-4889-95D8-E4053DD1EED9">
+            <kie:width>50</kie:width>
+            <kie:width>227</kie:width>
+            <kie:width>125</kie:width>
+            <kie:width>125</kie:width>
+            <kie:width>135</kie:width>
+            <kie:width>681</kie:width>
+            <kie:width>100</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_064FA88E-B06F-4944-85C3-DA86C3F660DD">
+            <kie:width>150</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_478C815E-60C9-4637-AA42-195DF16B63A5">
+            <kie:width>50</kie:width>
+            <kie:width>150</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_EEDF2C15-7FD7-409F-B23B-F9A198E2135D">
+            <kie:width>228</kie:width>
+          </kie:ComponentWidths>
+          <kie:ComponentWidths dmnElementRef="_E312D80E-0ECE-4D66-87EB-30DE20890BBC">
+            <kie:width>50</kie:width>
+            <kie:width>228</kie:width>
+          </kie:ComponentWidths>
+        </kie:ComponentsWidthsExtension>
+      </di:extension>
+      <dmndi:DMNShape
+        id="dmnshape-_4C89E59C-FDDA-438C-8D1F-0B1194EF6DAE"
+        dmnElementRef="_4C89E59C-FDDA-438C-8D1F-0B1194EF6DAE"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="963" y="359" width="134" height="61" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_4C788DBD-C672-4F41-9AFE-9C7D2C145734"
+        dmnElementRef="_4C788DBD-C672-4F41-9AFE-9C7D2C145734"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="99.09345794392524" y="223.67105263157896" width="136" height="63" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_F0DC8923-5FC7-4200-8BD1-461D5F3714BE"
+        dmnElementRef="_F0DC8923-5FC7-4200-8BD1-461D5F3714BE"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="531" y="225" width="136" height="62" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_FAF9080E-F4EF-49F7-AEFD-0D2990D8FFDA"
+        dmnElementRef="_FAF9080E-F4EF-49F7-AEFD-0D2990D8FFDA"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="747" y="359.3421052631579" width="135" height="63" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_1CF5CEFA-AF97-46F9-9CD5-9A8AEBB20B4E"
+        dmnElementRef="_1CF5CEFA-AF97-46F9-9CD5-9A8AEBB20B4E"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="316.0607476635514" y="361" width="134" height="61" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_D6F4234F-15B3-4F5B-B814-5F6FF29D2907"
+        dmnElementRef="_D6F4234F-15B3-4F5B-B814-5F6FF29D2907"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="317" y="224" width="136" height="62" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_2FE51DB1-3083-4BF7-AA71-0B0065310E72"
+        dmnElementRef="_2FE51DB1-3083-4BF7-AA71-0B0065310E72"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="963" y="225" width="136" height="62" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_21C50763-E49F-4D83-A824-16DA6AA87C64"
+        dmnElementRef="_21C50763-E49F-4D83-A824-16DA6AA87C64"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="532" y="89" width="136" height="62" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_6E3205AF-7E3D-4ABE-A367-96F3F6E8210E"
+        dmnElementRef="_6E3205AF-7E3D-4ABE-A367-96F3F6E8210E"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="531.1214953271028" y="360" width="134" height="61" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_DA5CCF62-90A8-4CFC-A137-98B528522588"
+        dmnElementRef="_DA5CCF62-90A8-4CFC-A137-98B528522588"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="99.09345794392524" y="359" width="136" height="63" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNShape
+        id="dmnshape-_C98BE939-B9C7-43E0-83E8-EE7A16C5276D"
+        dmnElementRef="_C98BE939-B9C7-43E0-83E8-EE7A16C5276D"
+        isCollapsed="false"
+      >
+        <dmndi:DMNStyle>
+          <dmndi:FillColor red="255" green="255" blue="255" />
+          <dmndi:StrokeColor red="0" green="0" blue="0" />
+          <dmndi:FontColor red="0" green="0" blue="0" />
+        </dmndi:DMNStyle>
+        <dc:Bounds x="747" y="224.64473684210526" width="134" height="65" />
+        <dmndi:DMNLabel />
+      </dmndi:DMNShape>
+      <dmndi:DMNEdge
+        id="dmnedge-_89EEAF9F-5A5D-4F59-91B7-EA418A7229AF"
+        dmnElementRef="_89EEAF9F-5A5D-4F59-91B7-EA418A7229AF"
+      >
+        <di:waypoint x="383.0607476635514" y="361" />
+        <di:waypoint x="599" y="287" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_87730C5A-5648-415B-9189-EF4D8805F8C9"
+        dmnElementRef="_87730C5A-5648-415B-9189-EF4D8805F8C9"
+      >
+        <di:waypoint x="598.1214953271028" y="390.5" />
+        <di:waypoint x="599" y="287" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_63DE7C3B-A767-4B8A-A098-91ECB4B8D330"
+        dmnElementRef="_63DE7C3B-A767-4B8A-A098-91ECB4B8D330"
+      >
+        <di:waypoint x="814.5" y="359.3421052631579" />
+        <di:waypoint x="599" y="287" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_2C95829D-FCF9-44F5-8F5A-0A6CDB60600D"
+        dmnElementRef="_2C95829D-FCF9-44F5-8F5A-0A6CDB60600D"
+      >
+        <di:waypoint x="814" y="257.14473684210526" />
+        <di:waypoint x="667" y="256" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_77BA409B-E00D-4FBC-B522-8F656D4F6F0E"
+        dmnElementRef="_77BA409B-E00D-4FBC-B522-8F656D4F6F0E"
+      >
+        <di:waypoint x="383.0607476635514" y="391.5" />
+        <di:waypoint x="385" y="286" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_4D441C11-7042-49CF-A42C-17A4348A7F29"
+        dmnElementRef="_4D441C11-7042-49CF-A42C-17A4348A7F29"
+      >
+        <di:waypoint x="167.09345794392524" y="255.17105263157896" />
+        <di:waypoint x="317" y="255" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_3217D655-4484-4733-A9AE-4F9CF30D9924"
+        dmnElementRef="_3217D655-4484-4733-A9AE-4F9CF30D9924"
+      >
+        <di:waypoint x="167.09345794392524" y="359" />
+        <di:waypoint x="385" y="286" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_31A1B6B2-A2A6-4E03-B898-26573A5CF3BA"
+        dmnElementRef="_31A1B6B2-A2A6-4E03-B898-26573A5CF3BA"
+      >
+        <di:waypoint x="1030" y="389.5" />
+        <di:waypoint x="1031" y="287" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_A3E95B32-2EFD-40AD-B5E4-0A73A1542011"
+        dmnElementRef="_A3E95B32-2EFD-40AD-B5E4-0A73A1542011"
+      >
+        <di:waypoint x="385" y="255" />
+        <di:waypoint x="600" y="151" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_0B992F01-BA77-4F06-A830-D8948B467272"
+        dmnElementRef="_0B992F01-BA77-4F06-A830-D8948B467272"
+      >
+        <di:waypoint x="599" y="256" />
+        <di:waypoint x="600" y="151" />
+      </dmndi:DMNEdge>
+      <dmndi:DMNEdge
+        id="dmnedge-_B6002F33-4888-48C5-B265-636030F8C2DC"
+        dmnElementRef="_B6002F33-4888-48C5-B265-636030F8C2DC"
+      >
+        <di:waypoint x="1031" y="256" />
+        <di:waypoint x="600" y="151" />
+      </dmndi:DMNEdge>
+    </dmndi:DMNDiagram>
+  </dmndi:DMNDI>
+</dmn:definitions>
diff --git a/examples/dmn-editor-on-webapp/static/index.html b/examples/dmn-editor-on-webapp/static/index.html
new file mode 100644
index 00000000000..fc9a5e2e6f3
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples :: DMN Editor on webapp</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/dmn-editor-on-webapp/static/logo.png b/examples/dmn-editor-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/dmn-editor-on-webapp/static/logo.png differ
diff --git a/examples/dmn-editor-on-webapp/tsconfig.json b/examples/dmn-editor-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/dmn-editor-on-webapp/webpack.config.js b/examples/dmn-editor-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..c51076c45e0
--- /dev/null
+++ b/examples/dmn-editor-on-webapp/webpack.config.js
@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+      "dmn-editor-envelope": "./src/DmnEditorEnvelope.ts",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          { from: "./static", to: "." },
+          {
+            from: `${path.dirname(require.resolve("@kie-tools/dmn-editor/package.json"))}/dist`,
+            to: "./dmn-editor",
+            globOptions: { ignore: ["WEB-INF/**/*"] },
+          },
+        ],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.dmnEditorOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/dmn-editor-standalone-examples/README.md b/examples/dmn-editor-standalone-on-webapp/README.md
similarity index 64%
rename from examples/dmn-editor-standalone-examples/README.md
rename to examples/dmn-editor-standalone-on-webapp/README.md
index 039c312e3d8..8511b0fbe2e 100644
--- a/examples/dmn-editor-standalone-examples/README.md
+++ b/examples/dmn-editor-standalone-on-webapp/README.md
@@ -15,38 +15,33 @@
    under the License.
 -->
 
-## DMN Editor Standalone Examples
+# Example :: DMN Editor (standalone) on webapp
 
-A series of examples on how to use the DMN Editor Standalone in different applications.
+A series of examples on how to use the DMN Editor (standalone) in different applications.
 
-### Examples
+- [State Control](src/stateControl/index.ts): Shows how to leverage the Editor API to undo/redo changes to a Decision, get its contents, and download an SVG of the diagram.
+- [Read Only](src/readOnly/index.ts): Loads the editor in "Read Only" mode, where a decision can be displayed and explored but not changed.
+- [With Included Models](src/withIncludedModels/index.ts): Displays how Decisions can be imported into other Decisions as "Included Models", using the `resources` parameter of DMN Editor (standalone).
 
-- [State Control]("src/stateControl/index.ts"): Shows how to leverage the Editor API to undo/redo changes to a decision, get its contents and download an SVG of the diagram.
-- [Read Only]("src/readOnly/index.ts"): Loads the editor in "Read Only" mode, where a decision can be displayed and navigated but not changed.
-- [With Included Models]("src/withIncludedModels/index.ts"): Displays how Decisions can be imported into other Decisions as "Included Models", using the `resources` parameter from the DMN Editor.
+### Building the dependencies
 
-### Build
-
-To build the examples, execute one of the following commands on the root folder of the project:
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
 
 ```shell script
-KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/dmn-editor-standalone-examples... build:dev
-KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/dmn-editor-standalone-examples... build:prod
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/dmn-editor-standalone-on-webapp^... build:dev
 ```
 
-### Run
-
-To start the examples application, execute the following command on the root folder of the project:
+### Running
 
 ```shell script
-pnpm -F @kie-tools-examples/dmn-editor-standalone-examples start
+pnpm -F @kie-tools-examples/dmn-editor-standalone-on-webapp start
 ```
 
-Open http://localhost:9102 to see the list of files bundled by webpack, then choose an example:
+Open http://localhost:7778 to see the list of files bundled by Webpack, then choose an example:
 
-- State Control: http://localhost:9102/state_control.html
-- Read Only: http://localhost:9102/read_only.html
-- With Included Models: http://localhost:9102/with_included_models.html
+- State Control: http://localhost:7778/state_control.html
+- Read Only: http://localhost:7778/read_only.html
+- With Included Models: http://localhost:7778/with_included_models.html
 
 ---
 
diff --git a/examples/dmn-editor-standalone-on-webapp/env/index.js b/examples/dmn-editor-standalone-on-webapp/env/index.js
new file mode 100644
index 00000000000..6c377841010
--- /dev/null
+++ b/examples/dmn-editor-standalone-on-webapp/env/index.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      dmnEditorStandaloneOnWebappExample: {
+        port: 7778,
+      },
+    };
+  },
+});
diff --git a/examples/dmn-editor-standalone-examples/package.json b/examples/dmn-editor-standalone-on-webapp/package.json
similarity index 85%
rename from examples/dmn-editor-standalone-examples/package.json
rename to examples/dmn-editor-standalone-on-webapp/package.json
index d451f0392eb..4b6aa87f7f9 100644
--- a/examples/dmn-editor-standalone-examples/package.json
+++ b/examples/dmn-editor-standalone-on-webapp/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/dmn-editor-standalone-examples",
+  "name": "@kie-tools-examples/dmn-editor-standalone-on-webapp",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -26,7 +26,6 @@
     "@kie-tools/tsconfig": "workspace:*",
     "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.3.2",
-    "process": "^0.11.10",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "typescript": "^5.5.3",
@@ -35,11 +34,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"
-  },
-  "kieTools": {
-    "requiredPreinstalledCliCommands": [
-      "java",
-      "mvn"
-    ]
   }
 }
diff --git a/examples/dmn-editor-standalone-examples/src/fileLoader.ts b/examples/dmn-editor-standalone-on-webapp/src/fileLoader.ts
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/fileLoader.ts
rename to examples/dmn-editor-standalone-on-webapp/src/fileLoader.ts
diff --git a/examples/dmn-editor-standalone-examples/src/readOnly/index.html b/examples/dmn-editor-standalone-on-webapp/src/readOnly/index.html
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/readOnly/index.html
rename to examples/dmn-editor-standalone-on-webapp/src/readOnly/index.html
diff --git a/examples/dmn-editor-standalone-examples/src/readOnly/index.ts b/examples/dmn-editor-standalone-on-webapp/src/readOnly/index.ts
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/readOnly/index.ts
rename to examples/dmn-editor-standalone-on-webapp/src/readOnly/index.ts
diff --git a/examples/dmn-editor-standalone-examples/src/stateControl/index.html b/examples/dmn-editor-standalone-on-webapp/src/stateControl/index.html
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/stateControl/index.html
rename to examples/dmn-editor-standalone-on-webapp/src/stateControl/index.html
diff --git a/examples/dmn-editor-standalone-examples/src/stateControl/index.ts b/examples/dmn-editor-standalone-on-webapp/src/stateControl/index.ts
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/stateControl/index.ts
rename to examples/dmn-editor-standalone-on-webapp/src/stateControl/index.ts
diff --git a/examples/dmn-editor-standalone-examples/src/withIncludedModels/index.html b/examples/dmn-editor-standalone-on-webapp/src/withIncludedModels/index.html
similarity index 100%
rename from examples/dmn-editor-standalone-examples/src/withIncludedModels/index.html
rename to examples/dmn-editor-standalone-on-webapp/src/withIncludedModels/index.html
diff --git a/examples/dmn-editor-standalone-examples/src/withIncludedModels/index.ts b/examples/dmn-editor-standalone-on-webapp/src/withIncludedModels/index.ts
similarity index 96%
rename from examples/dmn-editor-standalone-examples/src/withIncludedModels/index.ts
rename to examples/dmn-editor-standalone-on-webapp/src/withIncludedModels/index.ts
index 0489488ff2b..66b600cb380 100644
--- a/examples/dmn-editor-standalone-examples/src/withIncludedModels/index.ts
+++ b/examples/dmn-editor-standalone-on-webapp/src/withIncludedModels/index.ts
@@ -50,7 +50,7 @@ function loadEditor() {
     initialContent: loadFile("can-drive.dmn"),
     resources: new Map<string, DmnEditorStandaloneResource>([
       ["path1/can-drive-types.dmn", { contentType: "text", content: loadFile("can-drive-types.dmn") }],
-      ["path2/loan-pre-qualification.dmn", { contentType: "text", content: loadFile("loan-pre-qualification.dmn") }],
+      ["path2/loan-pre-qualification.dmn", { contentType: "text", content: loadFile("loan-pre-qualification.dmn") }], // Won't be available! Read comment above.
     ]),
     readOnly: false,
   });
diff --git a/examples/dmn-editor-standalone-examples/static/models/can-drive-types.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/can-drive-types.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/can-drive-types.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/can-drive-types.dmn
diff --git a/examples/dmn-editor-standalone-examples/static/models/can-drive.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/can-drive.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/can-drive.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/can-drive.dmn
diff --git a/examples/dmn-editor-standalone-examples/static/models/empty-drd.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/empty-drd.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/empty-drd.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/empty-drd.dmn
diff --git a/examples/dmn-editor-standalone-examples/static/models/empty.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/empty.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/empty.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/empty.dmn
diff --git a/examples/dmn-editor-standalone-examples/static/models/find-employees.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/find-employees.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/find-employees.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/find-employees.dmn
diff --git a/examples/dmn-editor-standalone-examples/static/models/loan-pre-qualification.dmn b/examples/dmn-editor-standalone-on-webapp/static/models/loan-pre-qualification.dmn
similarity index 100%
rename from examples/dmn-editor-standalone-examples/static/models/loan-pre-qualification.dmn
rename to examples/dmn-editor-standalone-on-webapp/static/models/loan-pre-qualification.dmn
diff --git a/examples/dmn-editor-standalone-examples/tsconfig.json b/examples/dmn-editor-standalone-on-webapp/tsconfig.json
similarity index 100%
rename from examples/dmn-editor-standalone-examples/tsconfig.json
rename to examples/dmn-editor-standalone-on-webapp/tsconfig.json
diff --git a/examples/dmn-editor-standalone-examples/webpack.config.js b/examples/dmn-editor-standalone-on-webapp/webpack.config.js
similarity index 91%
rename from examples/dmn-editor-standalone-examples/webpack.config.js
rename to examples/dmn-editor-standalone-on-webapp/webpack.config.js
index 88e671c525c..e3417e82a68 100644
--- a/examples/dmn-editor-standalone-examples/webpack.config.js
+++ b/examples/dmn-editor-standalone-on-webapp/webpack.config.js
@@ -22,7 +22,6 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const common = require("@kie-tools-core/webpack-base/webpack.common.config");
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { ProvidePlugin } = require("webpack");
 const { env } = require("./env");
 
 module.exports = (webpackEnv) =>
@@ -55,10 +54,6 @@ module.exports = (webpackEnv) =>
         chunks: ["with_included_models"],
         minify: false,
       }),
-      new ProvidePlugin({
-        process: require.resolve("process/browser.js"),
-        Buffer: ["buffer", "Buffer"],
-      }),
       new CopyWebpackPlugin({
         patterns: [{ from: "./static", to: "static" }],
       }),
@@ -67,7 +62,7 @@ module.exports = (webpackEnv) =>
       static: [{ directory: path.join(__dirname, "./dist") }],
       compress: true,
       https: false,
-      port: env.dmnEditorStandaloneExamples.port,
+      port: env.dmnEditorStandaloneOnWebappExample.port,
       client: {
         overlay: false,
       },
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/resources/META-INF/resources/index.html b/examples/drools-process-usertasks-quarkus-example/src/main/resources/META-INF/resources/index.html
deleted file mode 100644
index ecd394419fc..00000000000
--- a/examples/drools-process-usertasks-quarkus-example/src/main/resources/META-INF/resources/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you 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.
-  -->
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>kogito-infinispan-persistence-quarkus - 1.0-SNAPSHOT</title>
-    <style>
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        margin-bottom: 0.5rem;
-        font-weight: 400;
-        line-height: 1.5;
-      }
-
-      h1 {
-        font-size: 2.5rem;
-      }
-
-      h2 {
-        font-size: 2rem;
-      }
-
-      h3 {
-        font-size: 1.75rem;
-      }
-
-      h4 {
-        font-size: 1.5rem;
-      }
-
-      h5 {
-        font-size: 1.25rem;
-      }
-
-      h6 {
-        font-size: 1rem;
-      }
-
-      .lead {
-        font-weight: 300;
-        font-size: 2rem;
-      }
-
-      .banner {
-        font-size: 2.7rem;
-        margin: 0;
-        padding: 2rem 1rem;
-        background-color: #00a1e2;
-        color: white;
-      }
-
-      body {
-        margin: 0;
-        font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
-          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-      }
-
-      code {
-        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-        font-size: 87.5%;
-        color: #e83e8c;
-        word-break: break-word;
-      }
-
-      .left-column {
-        padding: 0.75rem;
-        max-width: 75%;
-        min-width: 55%;
-      }
-
-      .right-column {
-        padding: 0.75rem;
-        max-width: 25%;
-      }
-
-      .container {
-        display: flex;
-        width: 100%;
-      }
-
-      li {
-        margin: 0.75rem;
-      }
-
-      .right-section {
-        margin-left: 1rem;
-        padding-left: 0.5rem;
-      }
-
-      .right-section h3 {
-        padding-top: 0;
-        font-weight: 200;
-      }
-
-      .right-section ul {
-        border-left: 0.3rem solid #00a1e2;
-        list-style-type: none;
-        padding-left: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="banner lead">Your new Cloud-Native application is ready!</div>
-
-    <div class="container">
-      <div class="left-column">
-        <p class="lead">Congratulations, you have created a new Quarkus application.</p>
-
-        <h2>Why do you see this?</h2>
-
-        <p>
-          This page is served by Quarkus. The source is in
-          <code>src/main/resources/META-INF/resources/index.html</code>.
-        </p>
-
-        <h2>What can I do from here?</h2>
-
-        <p>
-          If not already done, run the application in <em>dev mode</em> using: <code>mvn compile quarkus:dev</code>.
-        </p>
-        <ul>
-          <li>Add REST resources, Servlets, functions and other services in <code>src/main/java</code>.</li>
-          <li>Your static assets are located in <code>src/main/resources/META-INF/resources</code>.</li>
-          <li>Configure your application in <code>src/main/resources/application.properties</code>.</li>
-        </ul>
-
-        <h2>How do I get rid of this page?</h2>
-        <p>Just delete the <code>src/main/resources/META-INF/resources/index.html</code> file.</p>
-      </div>
-      <div class="right-column">
-        <div class="right-section">
-          <h3>Application</h3>
-          <ul>
-            <li>GroupId: org.acme</li>
-            <li>ArtifactId: kogito-infinispan-persistence-quarkus</li>
-            <li>Version: 1.0-SNAPSHOT</li>
-            <li>Quarkus Version: 0.19.1</li>
-          </ul>
-        </div>
-        <div class="right-section">
-          <h3>Next steps</h3>
-          <ul>
-            <li><a href="https://quarkus.io/guides/maven-tooling.html">Setup your IDE</a></li>
-            <li><a href="https://quarkus.io/guides/getting-started-guide.html">Getting started</a></li>
-            <li><a href="https://quarkus.io">Quarkus Web Site</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/examples/drools-process-usertasks-quarkus-example/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java b/examples/drools-process-usertasks-quarkus-example/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java
deleted file mode 100644
index a5a41285c3d..00000000000
--- a/examples/drools-process-usertasks-quarkus-example/src/test/java/org/acme/travels/quarkus/ApprovalsProcessTest.java
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-package org.acme.travels.quarkus;
-
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-
-import org.acme.travels.Address;
-import org.acme.travels.Traveller;
-import org.jbpm.process.instance.impl.humantask.HumanTaskTransition;
-import org.jbpm.process.instance.impl.humantask.phases.Claim;
-import org.jbpm.process.instance.impl.workitem.Complete;
-import org.junit.jupiter.api.Test;
-import org.kie.kogito.Model;
-import org.kie.kogito.auth.IdentityProviders;
-import org.kie.kogito.auth.SecurityPolicy;
-import org.kie.kogito.process.Process;
-import org.kie.kogito.process.ProcessInstance;
-import org.kie.kogito.process.WorkItem;
-
-import io.quarkus.test.junit.QuarkusTest;
-
-import jakarta.inject.Inject;
-import jakarta.inject.Named;
-
-import static org.junit.jupiter.api.Assertions.assertEquals;
-import static org.junit.jupiter.api.Assertions.assertNotNull;
-
-@QuarkusTest
-public class ApprovalsProcessTest {
-
-    @Named("approvals")
-    @Inject
-    Process<? extends Model> approvalsProcess;
-
-    @Test
-    public void testApprovalProcess() {
-
-        assertNotNull(approvalsProcess);
-
-        Model m = approvalsProcess.createModel();
-        Map<String, Object> parameters = new HashMap<>();
-        parameters.put("traveller", new Traveller("John", "Doe", "john.doe@example.com", "American", new Address("main street", "Boston", "10005", "US")));
-        m.fromMap(parameters);
-
-        ProcessInstance<?> processInstance = approvalsProcess.createInstance(m);
-        processInstance.start();
-        assertEquals(org.kie.api.runtime.process.ProcessInstance.STATE_ACTIVE, processInstance.status());
-
-        SecurityPolicy policy = SecurityPolicy.of(IdentityProviders.of("admin", Collections.singletonList("managers")));
-
-        processInstance.workItems(policy);
-
-        List<WorkItem> workItems = processInstance.workItems(policy);
-        assertEquals(1, workItems.size());
-        Map<String, Object> results = new HashMap<>();
-        results.put("approved", true);
-        processInstance.completeWorkItem(workItems.get(0).getId(), results, policy);
-
-        workItems = processInstance.workItems(policy);
-        assertEquals(0, workItems.size());
-
-        policy = SecurityPolicy.of(IdentityProviders.of("john", Collections.singletonList("managers")));
-
-        processInstance.workItems(policy);
-
-        workItems = processInstance.workItems(policy);
-        assertEquals(1, workItems.size());
-
-        results.put("approved", false);
-        processInstance.completeWorkItem(workItems.get(0).getId(), results, policy);
-        assertEquals(org.kie.api.runtime.process.ProcessInstance.STATE_COMPLETED, processInstance.status());
-
-        Model result = (Model) processInstance.variables();
-        assertEquals(4, result.toMap().size());
-        assertEquals(result.toMap().get("approver"), "admin");
-        assertEquals(result.toMap().get("firstLineApproval"), true);
-        assertEquals(result.toMap().get("secondLineApproval"), false);
-    }
-
-    @Test
-    public void testApprovalProcessViaPhases() {
-
-        assertNotNull(approvalsProcess);
-
-        Model m = approvalsProcess.createModel();
-        Map<String, Object> parameters = new HashMap<>();
-        parameters.put("traveller", new Traveller("John", "Doe", "john.doe@example.com", "American", new Address("main street", "Boston", "10005", "US")));
-        m.fromMap(parameters);
-
-        ProcessInstance<?> processInstance = approvalsProcess.createInstance(m);
-        processInstance.start();
-        assertEquals(org.kie.api.runtime.process.ProcessInstance.STATE_ACTIVE, processInstance.status());
-
-        SecurityPolicy policy = SecurityPolicy.of(IdentityProviders.of("admin", Collections.singletonList("managers")));
-
-        processInstance.workItems(policy);
-
-        List<WorkItem> workItems = processInstance.workItems(policy);
-        assertEquals(1, workItems.size());
-
-        processInstance.transitionWorkItem(workItems.get(0).getId(), new HumanTaskTransition(Claim.ID, null, policy));
-        processInstance.transitionWorkItem(workItems.get(0).getId(), new HumanTaskTransition(Complete.ID, Collections.singletonMap("approved", true), policy));
-
-        workItems = processInstance.workItems(policy);
-        assertEquals(0, workItems.size());
-
-        policy = SecurityPolicy.of(IdentityProviders.of("john", Collections.singletonList("managers")));
-
-        processInstance.workItems(policy);
-
-        workItems = processInstance.workItems(policy);
-        assertEquals(1, workItems.size());
-
-        processInstance.transitionWorkItem(workItems.get(0).getId(), new HumanTaskTransition(Claim.ID, null, policy));
-        processInstance.transitionWorkItem(workItems.get(0).getId(), new HumanTaskTransition(Complete.ID, Collections.singletonMap("approved", false), policy));
-
-        assertEquals(org.kie.api.runtime.process.ProcessInstance.STATE_COMPLETED, processInstance.status());
-
-        Model result = (Model) processInstance.variables();
-        assertEquals(4, result.toMap().size());
-        assertEquals(result.toMap().get("approver"), "admin");
-        assertEquals(result.toMap().get("firstLineApproval"), true);
-        assertEquals(result.toMap().get("secondLineApproval"), false);
-    }
-}
diff --git a/examples/drools-process-usertasks-quarkus-example/src/test/resources/application.properties b/examples/drools-process-usertasks-quarkus-example/src/test/resources/application.properties
deleted file mode 100644
index e764de0f97d..00000000000
--- a/examples/drools-process-usertasks-quarkus-example/src/test/resources/application.properties
+++ /dev/null
@@ -1,23 +0,0 @@
-#
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you 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.
-#
-
-# Quarkus
-quarkus.http.test-port=0
-kogito.persistence.rocksdb.clean=true
-kogito.persistence.rocksdb.data.dir=pepe
\ No newline at end of file
diff --git a/examples/kie-sandbox-commit-message-validation-service/Makefile b/examples/kie-sandbox-commit-message-validation-service/Makefile
new file mode 100644
index 00000000000..1ee00ff80ad
--- /dev/null
+++ b/examples/kie-sandbox-commit-message-validation-service/Makefile
@@ -0,0 +1,46 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you 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.
+
+METADATA_PATH                                               := github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service/pkg/metadata
+SET_COMMIT_MESSAGE_VALIDATION_SERVICE_PORT                  := $(METADATA_PATH).Port=$(shell build-env kieSandboxCommitMessageValidationServiceExample.port)
+SET_COMMIT_MESSAGE_VALIDATION_SERVICE_ENABLED_VALIDATORS    := $(METADATA_PATH).Validators=$(shell build-env kieSandboxCommitMessageValidationServiceExample.validators)
+LDFLAGS                                                     := "-X $(SET_COMMIT_MESSAGE_VALIDATION_SERVICE_PORT) -X $(SET_COMMIT_MESSAGE_VALIDATION_SERVICE_ENABLED_VALIDATORS)"
+
+ARCH := $(shell uname -m)
+ifeq ($(ARCH),x86_64)
+    GOARCH = amd64
+else
+    GOARCH = arm64
+endif
+
+darwin:
+    GOOS=darwin GOARCH=$(GOARCH) CGO_ENABLED=1 go build -ldflags $(LDFLAGS) -o dist/darwin/commit-message-validation-service main.go
+
+darwin-amd64:
+    GOOS=darwin GOARCH=amd64 go build -ldflags $(LDFLAGS) -o dist/darwin/commit-message-validation-service main.go
+
+darwin-arm64:
+    GOOS=darwin GOARCH=arm64 go build -ldflags $(LDFLAGS) -o dist/darwin/commit-message-validation-service main.go
+
+linux:
+    GOOS=linux GOARCH=amd64 go build -ldflags $(LDFLAGS) -o dist/linux/commit-message-validation-service main.go
+
+win32:
+    GOOS=windows GOARCH=amd64 go build -ldflags $(LDFLAGS) -o dist/win32/commit-message-validation-service.exe main.go
+        
+start:
+    go run -ldflags $(LDFLAGS) main.go
\ No newline at end of file
diff --git a/examples/commit-message-validation-service/README.md b/examples/kie-sandbox-commit-message-validation-service/README.md
similarity index 88%
rename from examples/commit-message-validation-service/README.md
rename to examples/kie-sandbox-commit-message-validation-service/README.md
index 0be24ec337a..e263dbd39eb 100644
--- a/examples/commit-message-validation-service/README.md
+++ b/examples/kie-sandbox-commit-message-validation-service/README.md
@@ -15,20 +15,26 @@
    under the License.
 -->
 
-## Commit message validation service
+# Example :: KIE Sandbox commit message validation service
 
 Provides a simple service to check for patterns in a commit message.
 
-## Environment Variables
+### Environment Variables
 
-- `EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__port <PORT_NUMBER>`
+- `KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__port <PORT_NUMBER>`
 
   Sets service port, otherwise it will use `env/index.js` port.
 
-- `EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__validators <validatorName1>:<validatorParameters1>;<validatorName2>:<validatorParameters2>...`
+- `KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__validators <validatorName1>:<validatorParameters1>;<validatorName2>:<validatorParameters2>...`
 
   Enables and configures validators. The value is a list of `;` separated validators that are parameterized with anything after `:`. e.g.: `Length:5-72;IssuePrefix:kie-issues#*` will enable the Lenght validator, with min 5 and max 72 characters, and will also enable the IssuePrefix validator, with the prefix pattern being `kie-issues#*`.
 
+### Running
+
+```shell script
+pnpm start
+```
+
 ## API
 
 ### - `/validate`
@@ -40,7 +46,7 @@ Provides a simple service to check for patterns in a commit message.
   String with your commit message.
   ```
 - **Request response:**
-  ```json
+  ```js
   {
     "result": true | false,
     "reasons": []string | undefined
diff --git a/examples/commit-message-validation-service/env/index.js b/examples/kie-sandbox-commit-message-validation-service/env/index.js
similarity index 74%
rename from examples/commit-message-validation-service/env/index.js
rename to examples/kie-sandbox-commit-message-validation-service/env/index.js
index fcc3cbe1dd7..8e0cda52f88 100644
--- a/examples/commit-message-validation-service/env/index.js
+++ b/examples/kie-sandbox-commit-message-validation-service/env/index.js
@@ -21,11 +21,11 @@ const { getOrDefault, varsWithName, composeEnv } = require("@kie-tools-scripts/b
 
 module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({
-    EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__port: {
+    KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__port: {
       default: "8090",
       description: "HTTP server port where the service will run at.",
     },
-    EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__validators: {
+    KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__validators: {
       default: "Length:5-72;IssuePrefix:kie-issues#*",
       description:
         "Enables and configures validators. The value is a list of `;` separated validators that are parameterized with anything after `:`.",
@@ -33,9 +33,11 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   }),
   get env() {
     return {
-      commitMessageValidationService: {
-        port: getOrDefault(this.vars.EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__port),
-        validators: getOrDefault(this.vars.EXAMPLE_COMMIT_MESSAGE_VALIDATION_SERVICE__validators),
+      kieSandboxCommitMessageValidationServiceExample: {
+        port: getOrDefault(this.vars.KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__port),
+        validators: getOrDefault(
+          this.vars.KIE_TOOLS_EXAMPLE__KIE_SANDBOX_COMMIT_MESSAGE_VALIDATION_SERVICE__validators
+        ),
       },
     };
   },
diff --git a/examples/commit-message-validation-service/go.mod b/examples/kie-sandbox-commit-message-validation-service/go.mod
similarity index 93%
rename from examples/commit-message-validation-service/go.mod
rename to examples/kie-sandbox-commit-message-validation-service/go.mod
index 26e76a73b60..f03c6e132f8 100644
--- a/examples/commit-message-validation-service/go.mod
+++ b/examples/kie-sandbox-commit-message-validation-service/go.mod
@@ -1,4 +1,4 @@
-module github.com/apache/incubator-kie-tools/examples/commit-message-validation-service
+module github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service
 
 go 1.21
 
diff --git a/examples/commit-message-validation-service/go.sum b/examples/kie-sandbox-commit-message-validation-service/go.sum
similarity index 100%
rename from examples/commit-message-validation-service/go.sum
rename to examples/kie-sandbox-commit-message-validation-service/go.sum
diff --git a/examples/commit-message-validation-service/main.go b/examples/kie-sandbox-commit-message-validation-service/main.go
similarity index 85%
rename from examples/commit-message-validation-service/main.go
rename to examples/kie-sandbox-commit-message-validation-service/main.go
index 5f096b9955b..43a43c2a916 100644
--- a/examples/commit-message-validation-service/main.go
+++ b/examples/kie-sandbox-commit-message-validation-service/main.go
@@ -26,8 +26,8 @@ import (
 	"github.com/gin-contrib/cors"
 	"github.com/gin-gonic/gin"
 
-	"github.com/apache/incubator-kie-tools/examples/commit-message-validation-service/pkg"
-	"github.com/apache/incubator-kie-tools/examples/commit-message-validation-service/pkg/metadata"
+	"github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service/pkg"
+	"github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service/pkg/metadata"
 )
 
 func main() {
diff --git a/examples/commit-message-validation-service/package.json b/examples/kie-sandbox-commit-message-validation-service/package.json
similarity index 90%
rename from examples/commit-message-validation-service/package.json
rename to examples/kie-sandbox-commit-message-validation-service/package.json
index 604a18eefca..918cd45dbdc 100644
--- a/examples/commit-message-validation-service/package.json
+++ b/examples/kie-sandbox-commit-message-validation-service/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/commit-message-validation-service",
+  "name": "@kie-tools-examples/kie-sandbox-commit-message-validation-service",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -24,7 +24,6 @@
     "build:linux": "make linux",
     "build:win32": "make win32",
     "install": "go mod tidy",
-    "pack-app": "run-script-os",
     "start": "make start"
   },
   "devDependencies": {
diff --git a/examples/commit-message-validation-service/pkg/metadata/config.go b/examples/kie-sandbox-commit-message-validation-service/pkg/metadata/config.go
similarity index 100%
rename from examples/commit-message-validation-service/pkg/metadata/config.go
rename to examples/kie-sandbox-commit-message-validation-service/pkg/metadata/config.go
diff --git a/examples/commit-message-validation-service/pkg/validate.go b/examples/kie-sandbox-commit-message-validation-service/pkg/validate.go
similarity index 88%
rename from examples/commit-message-validation-service/pkg/validate.go
rename to examples/kie-sandbox-commit-message-validation-service/pkg/validate.go
index 094656e192b..632249d4b66 100644
--- a/examples/commit-message-validation-service/pkg/validate.go
+++ b/examples/kie-sandbox-commit-message-validation-service/pkg/validate.go
@@ -22,8 +22,8 @@ package pkg
 import (
 	"strings"
 
-	"github.com/apache/incubator-kie-tools/examples/commit-message-validation-service/pkg/metadata"
-	"github.com/apache/incubator-kie-tools/examples/commit-message-validation-service/pkg/validators"
+	"github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service/pkg/metadata"
+	"github.com/apache/incubator-kie-tools/examples/kie-sandbox-commit-message-validation-service/pkg/validators"
 )
 
 var validatorsMap = map[string]validators.ValidationFunction{
diff --git a/examples/commit-message-validation-service/pkg/validators/issuePrefix.go b/examples/kie-sandbox-commit-message-validation-service/pkg/validators/issuePrefix.go
similarity index 100%
rename from examples/commit-message-validation-service/pkg/validators/issuePrefix.go
rename to examples/kie-sandbox-commit-message-validation-service/pkg/validators/issuePrefix.go
diff --git a/examples/commit-message-validation-service/pkg/validators/length.go b/examples/kie-sandbox-commit-message-validation-service/pkg/validators/length.go
similarity index 100%
rename from examples/commit-message-validation-service/pkg/validators/length.go
rename to examples/kie-sandbox-commit-message-validation-service/pkg/validators/length.go
diff --git a/examples/commit-message-validation-service/pkg/validators/validator.go b/examples/kie-sandbox-commit-message-validation-service/pkg/validators/validator.go
similarity index 100%
rename from examples/commit-message-validation-service/pkg/validators/validator.go
rename to examples/kie-sandbox-commit-message-validation-service/pkg/validators/validator.go
diff --git a/examples/ping-pong-view-react/LICENSE b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/LICENSE
similarity index 100%
rename from examples/ping-pong-view-react/LICENSE
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/LICENSE
diff --git a/examples/base64png-editor-vscode-extension/README.md b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/README.md
similarity index 70%
rename from examples/base64png-editor-vscode-extension/README.md
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/README.md
index 74fc222be5f..001d1554635 100644
--- a/examples/base64png-editor-vscode-extension/README.md
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/README.md
@@ -15,36 +15,27 @@
    under the License.
 -->
 
-## Base64 PNG Editor - Visual Studio Code Extension
+# Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor Chrome Extension
 
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples%e2%80%8a-%e2%80%8ahow-to-create-a-vs-code-extension-for-the-custom-editor.html) a step-by-step tutorial of how this VS Code Extension was built.
+Allows seeing `.base64png` files directly in GitHub's website.
 
-This package is the VS Code Extension, which runs the Base64 PNG Editor.
+### Building the dependencies
 
-### Pre requisites
-
-This example requires the VS Code version 1.46 or later.
-
-### Running
-
-Install all dependencies and build the project on the **root** folder of this repository
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
 
 ```shell script
-pnpm init
-pnpm build:prod
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension^... build:dev
 ```
 
-- Debug mode
+### Running
+
+First, run this command on your Terminal. It will build the Chrome Extension and start an HTTP server acting as the hosting application for the Base64 Editor Envelope.
 
 ```shell script
-// open this package with visual studio code
-code .
-// press F5 and wait to start
+  KIE_TOOLS_BUILD__buildExamples=true pnpm build:dev && pnpm start
 ```
 
-- Installing VSIX
-
-The `pnpm build:prod` generate a vsix file on the `/dist` folder. Open your VS Code, and install it.
+Then, head over to `chrome://extensions` on Chrome, click "Load unpacked", and select this package's `dist` folder. The extension will be installed. If you change the code, Ctrl+C the running app in your Terminal and run the same command again. Rebuilding it will be necessary.
 
 ---
 
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/env/index.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/env/index.js
new file mode 100644
index 00000000000..e17e5bf96f5
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/env/index.js
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      microFrontendsMultiplyingArchitectureBase64PngEditorChromeExtension: {
+        base64PngEditorEnvelopeApp: {
+          port: 9101,
+        },
+      },
+    };
+  },
+});
diff --git a/examples/base64png-editor-chrome-extension/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/package.json
similarity index 83%
rename from examples/base64png-editor-chrome-extension/package.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/package.json
index 9e13fd3c395..1cbc6375d3e 100644
--- a/examples/base64png-editor-chrome-extension/package.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/base64png-editor-chrome-extension",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -16,17 +16,15 @@
     "build": "rimraf dist && webpack",
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
     "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
-    "serve-envelope": "webpack-dev-server"
+    "start": "webpack-dev-server"
   },
-  "dependencies": {
+  "devDependencies": {
     "@kie-tools-core/chrome-extension": "workspace:*",
     "@kie-tools-core/editor": "workspace:*",
     "@kie-tools-core/envelope-bus": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
-    "@kie-tools-examples/base64png-editor": "workspace:*"
-  },
-  "devDependencies": {
     "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
     "@types/chrome": "^0.0.193",
diff --git a/examples/base64png-editor-chrome-extension/src/envelope/index.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/Base64PngEditorEnvelope.ts
similarity index 92%
rename from examples/base64png-editor-chrome-extension/src/envelope/index.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/Base64PngEditorEnvelope.ts
index bfc5c05ba4e..43024add70e 100644
--- a/examples/base64png-editor-chrome-extension/src/envelope/index.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/Base64PngEditorEnvelope.ts
@@ -18,7 +18,7 @@
  */
 
 import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
-import { Base64PngEditorFactory } from "@kie-tools-examples/base64png-editor";
+import { Base64PngEditorFactory } from "@kie-tools-examples//micro-frontends-multiplying-architecture-base64png-editor";
 
 /**
  * Initialize the Envelope with some args.
diff --git a/examples/base64png-editor-chrome-extension/src/contentscript.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/contentscript.ts
similarity index 82%
rename from examples/base64png-editor-chrome-extension/src/contentscript.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/contentscript.ts
index 97496e0f8fd..d30b1c19f1c 100644
--- a/examples/base64png-editor-chrome-extension/src/contentscript.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/contentscript.ts
@@ -32,15 +32,18 @@ const resourcesPathPrefix = process.env["WEBPACK_REPLACE__targetOrigin"];
  * @params args.editorEnvelopeLocator.mapping A map associating a file extension with the respective envelope path and resources path.
  */
 startExtension({
-  name: "Kogito Base64 PNG React Editor",
-  extensionIconUrl: chrome.extension.getURL("/resources/kie_icon_rgb_fullcolor_default.svg"),
-  githubAuthTokenCookieName: "github-oauth-token-base64-editors",
+  name: "Apache KIE Tools Example :: Micro-frontends Multiplying Architecutre :: Base64 PNG Editor",
+  extensionIconUrl: chrome.extension.getURL("/kie-logo-rgb-fullcolor-default.svg"),
+  githubAuthTokenCookieName: "github-oauth-token-base64png-editors",
   editorEnvelopeLocator: new EditorEnvelopeLocator(window.location.origin, [
     new EnvelopeMapping({
       type: "base64png",
       filePathGlob: "**/*.base64png",
       resourcesPathPrefix: `${resourcesPathPrefix}/dist/`,
-      envelopeContent: { type: EnvelopeContentType.PATH, path: `${resourcesPathPrefix}/dist/envelope/index.html` },
+      envelopeContent: {
+        type: EnvelopeContentType.PATH,
+        path: `${resourcesPathPrefix}/base64png-editor-envelope.html`,
+      },
     }),
   ]),
 });
diff --git a/examples/base64png-editor-chrome-extension/static/envelope/index.html b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/base64png-editor-envelope.html
similarity index 96%
rename from examples/base64png-editor-chrome-extension/static/envelope/index.html
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/base64png-editor-envelope.html
index 95cba4aebce..f83d2bda5d3 100644
--- a/examples/base64png-editor-chrome-extension/static/envelope/index.html
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/base64png-editor-envelope.html
@@ -39,6 +39,6 @@
   <body>
     <div id="loading-screen" style="z-index: 100; position: relative"></div>
     <div id="envelope-app"></div>
-    <script src="index.js"></script>
+    <script src="base64png-editor-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/base64png-editor-chrome-extension/static/resources/icon_128.png b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/kie-logo-128x128.png
similarity index 100%
rename from examples/base64png-editor-chrome-extension/static/resources/icon_128.png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/kie-logo-128x128.png
diff --git a/examples/base64png-editor-chrome-extension/static/resources/kie_icon_rgb_fullcolor_default.svg b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/kie-logo-rgb-fullcolor-default.svg
similarity index 100%
rename from examples/base64png-editor-chrome-extension/static/resources/kie_icon_rgb_fullcolor_default.svg
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/kie-logo-rgb-fullcolor-default.svg
diff --git a/examples/base64png-editor-chrome-extension/static/manifest.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/manifest.json
similarity index 50%
rename from examples/base64png-editor-chrome-extension/static/manifest.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/manifest.json
index faa810d6e8b..d71a36590a1 100644
--- a/examples/base64png-editor-chrome-extension/static/manifest.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/manifest.json
@@ -1,8 +1,8 @@
 {
-  "name": "Kogito Base64 PNG Editor",
+  "name": "Apache KIE Tools Example :: Base64 PNG Editor",
   "version": "0.0.0",
   "manifest_version": 2,
-  "description": "Kogito Base64 PNG Editor",
+  "description": "An example Chrome Extension to showcase a Base64 PNG (.base64png) Editor displaying files directly on GitHub's website.",
   "content_scripts": [
     {
       "run_at": "document_idle",
@@ -11,7 +11,7 @@
       "all_frames": true
     }
   ],
-  "icons": { "128": "resources/icon_128.png" },
-  "web_accessible_resources": ["envelope/*", "resources/*"],
+  "icons": { "128": "./kie-logo-128x128.png" },
+  "web_accessible_resources": ["./*"],
   "permissions": ["https://*.github.com/*", "http://*.github.com/*"]
 }
diff --git a/examples/base64png-editor-chrome-extension/tsconfig.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/tsconfig.json
similarity index 100%
rename from examples/base64png-editor-chrome-extension/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/tsconfig.json
diff --git a/examples/base64png-editor-chrome-extension/webpack.config.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/webpack.config.js
similarity index 76%
rename from examples/base64png-editor-chrome-extension/webpack.config.js
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/webpack.config.js
index 03d867152e0..85edcba0134 100644
--- a/examples/base64png-editor-chrome-extension/webpack.config.js
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/webpack.config.js
@@ -27,28 +27,24 @@ const { EnvironmentPlugin } = require("webpack");
 const { env } = require("./env");
 
 module.exports = (webpackEnv) => {
-  const router_targetOrigin = `https://localhost:${env.exampleChromeExtension.envelope.port}`;
+  const router_targetOrigin = `https://localhost:${env.microFrontendsMultiplyingArchitectureBase64PngEditorChromeExtension.base64PngEditorEnvelopeApp.port}`;
 
   return merge(common(webpackEnv), {
     entry: {
       contentscript: "./src/contentscript.ts",
-      "envelope/index": "./src/envelope/index.ts",
+      "base64png-editor-envelope": "./src/Base64PngEditorEnvelope.ts",
     },
     devServer: {
       compress: true,
       https: true,
-      port: env.exampleChromeExtension.envelope.port,
+      port: env.microFrontendsMultiplyingArchitectureBase64PngEditorChromeExtension.base64PngEditorEnvelopeApp.port,
     },
     plugins: [
       new CopyPlugin({
-        patterns: [
-          { from: "./static/manifest.json" },
-          { from: "./static/resources", to: "./resources" },
-          { from: "./static/envelope", to: "./envelope" },
-        ],
+        patterns: [{ from: "./static/manifest.json" }, { from: "./static/", to: "." }],
       }),
       new ZipPlugin({
-        filename: "kie_tools_examples_base64-chrome_extension_" + packageJson.version + ".zip",
+        filename: "kie_tools_examples_base64png-editor-chrome_extension_" + packageJson.version + ".zip",
         pathPrefix: "dist",
       }),
       new EnvironmentPlugin({
diff --git a/examples/ping-pong-view/LICENSE b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/LICENSE
similarity index 100%
rename from examples/ping-pong-view/LICENSE
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/LICENSE
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/README.md b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/README.md
new file mode 100644
index 00000000000..66de02e7dd0
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/README.md
@@ -0,0 +1,58 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor on webapp
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/env/index.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/env/index.js
new file mode 100644
index 00000000000..734abe65e59
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/env/index.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      microFrontendsMultiplyingArchitectureBase64PngEditorOnWebappExample: {
+        port: 7774,
+      },
+    };
+  },
+});
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json
new file mode 100644
index 00000000000..97c9b2036fd
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json
@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/webapp/src/envelope/base64-editor.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorEnvelope.ts
similarity index 90%
rename from examples/webapp/src/envelope/base64-editor.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorEnvelope.ts
index 203fb7eea98..1ddad5d725c 100644
--- a/examples/webapp/src/envelope/base64-editor.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorEnvelope.ts
@@ -18,7 +18,7 @@
  */
 
 import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
-import { Base64PngEditorFactory } from "@kie-tools-examples/base64png-editor";
+import { Base64PngEditorFactory } from "@kie-tools-examples//micro-frontends-multiplying-architecture-base64png-editor";
 
 EditorEnvelope.init({
   container: document.getElementById("envelope-app")!,
diff --git a/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
similarity index 81%
rename from examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
index 5b4391ae4f1..82a424bc717 100644
--- a/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
@@ -17,20 +17,21 @@
  * under the License.
  */
 
-import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
+import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
 import { EmbeddedEditor } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 import { Base64PngGallery } from "./Base64PngGallery";
 
 /**
- * The Base64 PNG Page which contains the Base64 PNG Editor and a Gallery to open samples on the editor.
+ * The Base64 PNG Editor Page which contains the Base64 PNG Editor and a Gallery to open samples on the editor.
  * @constructor
  */
-export function Base64PngPage() {
+export function Base64PngEditorPage() {
   /**
    * State that handles the file. It's important to type with the File type of the @kie-tools/dist/embedded.
    * It's initialized with an empty file with the base64png extension. The file is used by the EmbeddedEditor to set the content on the Editor. Updating the file will trigger a re-render on the Editor because the EmbeddedEditor will set updated content on the Editor.
@@ -52,24 +53,26 @@ export function Base64PngPage() {
         new EnvelopeMapping({
           type: "base64png",
           filePathGlob: "**/*.base64png",
-          resourcesPathPrefix: "envelope/",
-          envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/base64-editor.html" },
+          resourcesPathPrefix: "",
+          envelopeContent: { type: EnvelopeContentType.PATH, path: "base64png-editor-envelope.html" },
         }),
       ]),
     []
   );
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <Base64PngGallery setFile={setFile} />
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />}></PageHeader>}
+      sidebar={<Base64PngGallery setFile={setFile} />}
+    >
+      <PageSection padding={{ default: "noPadding" }}>
         <EmbeddedEditor
           file={file}
           editorEnvelopeLocator={editorEnvelopeLocator}
           channelType={ChannelType.EMBEDDED}
           locale={"en"}
         />
-      </div>
+      </PageSection>
     </Page>
   );
 }
diff --git a/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngGallery.tsx
similarity index 68%
rename from examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngGallery.tsx
index 407b0dbd1db..6d08f9ceb6e 100644
--- a/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngGallery.tsx
@@ -19,8 +19,6 @@
 
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { Card } from "@patternfly/react-core/dist/js/components/Card";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
 
@@ -33,12 +31,8 @@ const samplePaths = [
 
 /**
  * A gallery component with samples to be opened
- *
- * @param props
- * @constructor
  */
 export function Base64PngGallery({ setFile }: { setFile: React.Dispatch<EmbeddedEditorFile> }) {
-  // Set the chosen file
   const openSample = useCallback(
     (fileName: string, filePath: string) => {
       setFile({
@@ -64,27 +58,17 @@ export function Base64PngGallery({ setFile }: { setFile: React.Dispatch<Embedded
   }, []);
 
   return (
-    <div>
-      <Nav className={"webapp--page-navigation"}>
-        <div className={"webapp--page-navigation-title-div"}>
-          <Title className={"webapp--page-navigation-title-h3"} headingLevel="h3" size="xl">
-            Gallery
-          </Title>
-        </div>
-        <NavList>
-          {images.map((image) => (
-            <NavItem
-              key={image.name}
-              className={"webapp--page-base64png-gallery--navigation-nav-item"}
-              onClick={() => openSample(image.name, image.path)}
-            >
-              <Card className={"webapp--page-base64png-gallery--navigation-nav-item-card"}>
-                <img alt={image.name} src={`data:image/png;base64,${image.content}`} />
-              </Card>
-            </NavItem>
-          ))}
-        </NavList>
-      </Nav>
+    <div style={{ padding: "16px" }}>
+      {images.map((image) => (
+        <Card
+          key={image.name}
+          onClick={() => openSample(image.name, image.path)}
+          isSelectable={true}
+          style={{ padding: "8px", marginBottom: "16px" }}
+        >
+          <img alt={image.name} width={"140px"} src={`data:image/png;base64,${image.content}`} />
+        </Card>
+      ))}
     </div>
   );
 }
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/index.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..9030bef3b08
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Base64PngEditorPage } from "./Base64PngEditorPage";
+
+ReactDOM.render(<Base64PngEditorPage />, document.getElementById("app"));
diff --git a/examples/webapp/envelope/base64-editor.html b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/base64png-editor-envelope.html
similarity index 95%
rename from examples/webapp/envelope/base64-editor.html
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/base64png-editor-envelope.html
index 2f636449b11..95aed75990b 100644
--- a/examples/webapp/envelope/base64-editor.html
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/base64png-editor-envelope.html
@@ -40,6 +40,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="base64-editor.js"></script>
+    <script src="base64png-editor-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/webapp/static/examples/dorinha.base64png b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/dorinha.base64png
similarity index 100%
rename from examples/webapp/static/examples/dorinha.base64png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/dorinha.base64png
diff --git a/examples/webapp/static/examples/luiz.base64png b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/luiz.base64png
similarity index 100%
rename from examples/webapp/static/examples/luiz.base64png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/luiz.base64png
diff --git a/examples/webapp/static/examples/sample.base64png b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/sample.base64png
similarity index 100%
rename from examples/webapp/static/examples/sample.base64png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/sample.base64png
diff --git a/examples/webapp/static/examples/tiago.base64png b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/tiago.base64png
similarity index 100%
rename from examples/webapp/static/examples/tiago.base64png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/examples/tiago.base64png
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/index.html b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/index.html
new file mode 100644
index 00000000000..e3b2d0cacb1
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples :: Base64 PNG Editor on webapp</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/logo.png b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/static/logo.png differ
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/tsconfig.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/webpack.config.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..7bbff73e109
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/webpack.config.js
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+      "base64png-editor-envelope": "./src/Base64PngEditorEnvelope.ts",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [{ from: "./static", to: "." }],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.microFrontendsMultiplyingArchitectureBase64PngEditorOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/base64png-editor-vscode-extension/.vscodeignore b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/.vscodeignore
similarity index 100%
rename from examples/base64png-editor-vscode-extension/.vscodeignore
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/.vscodeignore
diff --git a/examples/todo-list-view-vscode-extension/LICENSE b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/LICENSE
similarity index 100%
rename from examples/todo-list-view-vscode-extension/LICENSE
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/LICENSE
diff --git a/examples/base64png-editor-chrome-extension/README.md b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/README.md
similarity index 65%
rename from examples/base64png-editor-chrome-extension/README.md
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/README.md
index 7eeceec694a..7c0b9ea3762 100644
--- a/examples/base64png-editor-chrome-extension/README.md
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/README.md
@@ -15,31 +15,32 @@
    under the License.
 -->
 
-## Base64 PNG Editor - Chrome Extension
+# Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor VS Code Extension
 
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples%e2%80%8a-%e2%80%8ahow-to-create-a-chrome-extension-for-a-custom-editor.html) a step-by-step tutorial of how this Chrome Extension was built.
+This package provides a VS Code Extension containing a Base64 PNG Editor, which allows editing `.base64png` files.
 
-This package is the Chrome Extension, which runs the Base64 PNG Editor.
+To make it easier to create `.base64png` files and exporting them to other formats, this extension also provides two commands:
 
-### Running
+1. `Base64 PNG: New from .png`
+   - Creates a new `.base64png` file from a PNG. You can right-click a PNG file to run this command.
+1. `Base64 PNG: Save as SVG`
+   - When a `.base64png` is open, you can click the little SVG icon at the top-right corner of the Editor, or run it from the command palette. A new SVG file will be created at the same directory as the `.base64png` file.
 
-Install all dependencies and build the project on the **root** folder of this repository
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
 
 ```shell script
-pnpm build:prod
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension^... build:dev
 ```
 
-Open your Chrome browser on the `chrome://extension`, choose to Load Unpacked, and select this package `dist/` folder
-
-**Important**: In order to the extension works, it's necessary to run the command after you have build the application:
+### Building
 
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm build:prod
 ```
-pnpm serve-envelope
-```
-
-It will run a server exposing your `dist/` folder on the `localhost:9000`. It's necessary to access your `localhost:9000`, and enable access to it.
 
-This step is required, so the extension can access the envelope located on `dist/envelope/index.html`.
+A `.vsix` file will be on the `dist` folder. Drag it to the Extensions panel on VS Code to install it.
 
 ---
 
diff --git a/examples/base64png-editor-vscode-extension/env/index.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/env/index.js
similarity index 100%
rename from examples/base64png-editor-vscode-extension/env/index.js
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/env/index.js
diff --git a/examples/base64png-editor-vscode-extension/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/package.json
similarity index 59%
rename from examples/base64png-editor-vscode-extension/package.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/package.json
index 6155b482575..f88b8e652a0 100644
--- a/examples/base64png-editor-vscode-extension/package.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "kie-tools-examples-base64png-editor-vscode-extension",
+  "name": "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -17,20 +17,17 @@
   "scripts": {
     "build": "rimraf dist && webpack",
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
-    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm pack\"",
-    "compile": "pnpm build --env dev",
-    "pack": "vsce package --no-dependencies -o ./dist/kie_tools_examples_base64_editor_vscode_extension_$npm_package_version.vsix",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm build:vsix\"",
+    "build:vsix": "vsce package --allow-star-activation --no-dependencies -o ./dist/kie_tools_examples_base64png_editor_vscode_extension_$npm_package_version.vsix",
     "watch": "export WEBPACK__sourceMaps=true; WEBPACK__minimize=false; webpack --env dev"
   },
-  "dependencies": {
+  "devDependencies": {
     "@kie-tools-core/editor": "workspace:*",
     "@kie-tools-core/i18n": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools-core/vscode-extension": "workspace:*",
-    "@kie-tools-examples/base64png-editor": "workspace:*"
-  },
-  "devDependencies": {
     "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
     "@types/vscode": "1.67.0",
@@ -43,40 +40,40 @@
     "webpack-merge": "^5.9.0"
   },
   "engines": {
-    "vscode": "^1.67.0"
+    "vscode": "^1.75.0"
   },
-  "displayName": "Kogito Base64 PNG Editor",
+  "displayName": "Apache KIE Tools Example :: Base64 PNG Editor",
   "categories": [
     "Other"
   ],
   "contributes": {
     "commands": [
       {
-        "command": "extension.kogito.createBase64Png",
+        "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
         "icon": {
-          "dark": "./static/kogito-logo-128x128.png",
-          "light": "./static/kogito-logo-128x128.png"
+          "dark": "./static/kie-logo-128x128.png",
+          "light": "./static/kie-logo-128x128.png"
         },
-        "title": "Create Base64 PNG"
+        "title": "Base64 PNG: New from .png"
       },
       {
-        "command": "extension.kogito.getPreviewSvg",
+        "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
         "icon": {
           "dark": "./static/svg-icon-dark.png",
           "light": "./static/svg-icon-light.png"
         },
-        "title": "Save Preview SVG"
+        "title": "Base64 PNG: Save as SVG"
       }
     ],
     "customEditors": [
       {
-        "displayName": "Kogito Base64Png React Editor",
+        "displayName": "Apache KIE Tools Example :: Base64 PNG Editor",
         "selector": [
           {
             "filenamePattern": "*.base64png"
           }
         ],
-        "viewType": "kieKogitoWebviewBase64PNGEditor"
+        "viewType": "kieToolsExampleBase64PngEditor"
       }
     ],
     "languages": [
@@ -104,30 +101,40 @@
     "menus": {
       "commandPalette": [
         {
-          "command": "extension.kogito.createBase64Png",
-          "when": "resourceLangId == png"
+          "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
+          "when": "resourceExtname == .png"
         },
         {
-          "command": "extension.kogito.getPreviewSvg",
-          "when": "resourceLangId == base64png"
+          "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
+          "when": "resourceExtname == .base64png"
         }
       ],
       "editor/title": [
         {
-          "command": "extension.kogito.createBase64Png",
+          "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
           "group": "navigation",
           "when": "resourceLangId == png"
         },
         {
-          "command": "extension.kogito.getPreviewSvg",
+          "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
           "group": "navigation",
           "when": "resourceLangId == base64png"
         }
+      ],
+      "explorer/context": [
+        {
+          "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
+          "when": "resourceLangId == png"
+        },
+        {
+          "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
+          "when": "resourceLangId == base64png"
+        }
       ]
     }
   },
   "activationEvents": [
-    "onCustomEditor:kieKogitoWebviewBase64PNGEditor",
-    "onCommand:extension.kogito.createBase64Png"
-  ]
+    "*"
+  ],
+  "icon": "./static/kie-logo-128x128.png"
 }
diff --git a/examples/base64png-editor-vscode-extension/src/envelope/index.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/Base64PngEditorEnvelope.ts
similarity index 92%
rename from examples/base64png-editor-vscode-extension/src/envelope/index.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/Base64PngEditorEnvelope.ts
index 3dc6519bb84..7718be54708 100644
--- a/examples/base64png-editor-vscode-extension/src/envelope/index.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/Base64PngEditorEnvelope.ts
@@ -18,7 +18,7 @@
  */
 
 import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
-import { Base64PngEditorFactory } from "@kie-tools-examples/base64png-editor";
+import { Base64PngEditorFactory } from "@kie-tools-examples//micro-frontends-multiplying-architecture-base64png-editor";
 
 declare global {
   export const acquireVsCodeApi: any;
diff --git a/examples/base64png-editor-vscode-extension/src/extension.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/extension.ts
similarity index 58%
rename from examples/base64png-editor-vscode-extension/src/extension.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/extension.ts
index 46efb46d375..0f2e11c3d18 100644
--- a/examples/base64png-editor-vscode-extension/src/extension.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/extension.ts
@@ -18,7 +18,7 @@
  */
 
 import * as vscode from "vscode";
-import * as KogitoVsCode from "@kie-tools-core/vscode-extension";
+import { startExtension } from "@kie-tools-core/vscode-extension";
 import * as path from "path";
 import * as fs from "fs";
 import { EditorEnvelopeLocator, EnvelopeContentType, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
@@ -30,24 +30,25 @@ export function activate(context: vscode.ExtensionContext) {
    * Starts the extension and set initial properties:
    *
    * @params args.extensionName The extension name.
-   * @params args.context The VS Code context.
+   * @params args.context The VS Code extension context.
    * @params args.viewType The name of the view command to open the Editor.
-   * @params args.getPreviewCommandId The name of the command to generate a SVG file. (it was set on the package.json)
+   * @params args.generateSvgCommandId The name of the command to generate a SVG file. (it was set on the package.json)
+   * @params args.silentlyGenerateSvgCommandId Same as above but without the toast notification.
    * @params args.editorEnvelopeLocator.targetOrigin The initial path of the envelope.
    * @params args.editorEnvelopeLocator.mapping A map associating a file extension with the respective envelope path and resources path.
    */
-  KogitoVsCode.startExtension({
-    extensionName: "kie-tools-examples.base64png-editor-vscode-extension",
-    context: context,
-    viewType: "kieKogitoWebviewBase64PNGEditor",
-    generateSvgCommandId: "extension.kogito.getPreviewSvg",
+  startExtension({
+    extensionName: "kie-tools-examples-base64png-editor-vscode-extension",
+    context,
+    viewType: "kieToolsExampleBase64PngEditor",
+    generateSvgCommandId: "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
     silentlyGenerateSvgCommandId: "",
     editorEnvelopeLocator: new EditorEnvelopeLocator("vscode", [
       new EnvelopeMapping({
         type: "base64png",
         filePathGlob: "**/*.base64png",
         resourcesPathPrefix: "dist/",
-        envelopeContent: { type: EnvelopeContentType.PATH, path: "dist/envelope/index.js" },
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "dist/base64png-editor-envelope.js" },
       }),
     ]),
   });
@@ -57,25 +58,30 @@ export function activate(context: vscode.ExtensionContext) {
    */
   context.subscriptions.push(
     /**
-     * This command works on any png image. It will create a new file, it converts a PNG image to a base64png file.
+     * This command works on any png image. It will create a new file, it converts a PNG image to a `.base64png` file.
      *
-     * To use it, can click on the Kogito icon on the top right or use the VS Code command pallet.
+     * To use it, can click on the Apache KIE icon at the top-right or use the VS Code command pallet.
      */
-    vscode.commands.registerCommand("extension.kogito.createBase64Png", (file: { fsPath: string }) => {
-      const buffer = fs.readFileSync(file.fsPath);
-      const parsedPath = path.parse(file.fsPath);
-      const base64FileName = `${parsedPath.name}${parsedPath.ext}.base64png`;
-      const base64AbsoluteFsPath = path.join(parsedPath.dir, base64FileName);
-      fs.writeFileSync(base64AbsoluteFsPath, buffer.toString("base64"));
+    vscode.commands.registerCommand(
+      "extension.kie.tools.examples.base64PngEditor.createBase64Png",
+      (file: { fsPath: string }) => {
+        const buffer = fs.readFileSync(file.fsPath);
+        const parsedPath = path.parse(file.fsPath);
+        const base64FileName = `${parsedPath.name}${parsedPath.ext}.base64png`;
+        const base64AbsoluteFsPath = path.join(parsedPath.dir, base64FileName);
+        fs.writeFileSync(base64AbsoluteFsPath, buffer.toString("base64"));
 
-      vscode.window.showInformationMessage("Generated the Base64 file with success!", "Open").then((selected) => {
-        if (!selected) {
-          return;
-        }
+        vscode.window
+          .showInformationMessage("Generated Base64 PNG (.base64png) file successfully.", "Open")
+          .then((selected) => {
+            if (!selected) {
+              return;
+            }
 
-        vscode.commands.executeCommand("vscode.open", vscode.Uri.file(base64AbsoluteFsPath));
-      });
-    })
+            vscode.commands.executeCommand("vscode.open", vscode.Uri.file(base64AbsoluteFsPath));
+          });
+      }
+    )
   );
 
   console.info("Extension is successfully setup.");
diff --git a/examples/base64png-editor-vscode-extension/static/kogito-logo-128x128.png b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/kie-logo-128x128.png
similarity index 100%
rename from examples/base64png-editor-vscode-extension/static/kogito-logo-128x128.png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/kie-logo-128x128.png
diff --git a/examples/base64png-editor-vscode-extension/static/svg-icon-dark.png b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/svg-icon-dark.png
similarity index 100%
rename from examples/base64png-editor-vscode-extension/static/svg-icon-dark.png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/svg-icon-dark.png
diff --git a/examples/base64png-editor-vscode-extension/static/svg-icon-light.png b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/svg-icon-light.png
similarity index 100%
rename from examples/base64png-editor-vscode-extension/static/svg-icon-light.png
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/static/svg-icon-light.png
diff --git a/examples/base64png-editor-vscode-extension/tsconfig.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/tsconfig.json
similarity index 100%
rename from examples/base64png-editor-vscode-extension/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/tsconfig.json
diff --git a/examples/todo-list-view-vscode-extension/webpack.config.js b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/webpack.config.js
similarity index 93%
rename from examples/todo-list-view-vscode-extension/webpack.config.js
rename to examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/webpack.config.js
index 40755ee3aaf..171f6889bf6 100644
--- a/examples/todo-list-view-vscode-extension/webpack.config.js
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/webpack.config.js
@@ -24,7 +24,7 @@ const { merge } = require("webpack-merge");
 const commonConfig = (webpackEnv) =>
   merge(common(webpackEnv), {
     output: {
-      library: "VsCodePackSimpleReact",
+      library: "Base64PngEditorEntrypoint",
       libraryTarget: "umd",
       umdNamedDefine: true,
     },
@@ -44,7 +44,7 @@ module.exports = (webpackEnv) => [
   merge(commonConfig(webpackEnv), {
     target: "web",
     entry: {
-      "envelope/index": "./src/envelope/index.ts",
+      "base64png-editor-envelope": "./src/Base64PngEditorEnvelope.ts",
     },
     module: {
       rules: [...patternflyBase.webpackModuleRules],
diff --git a/examples/todo-list-view/LICENSE b/examples/micro-frontends-multiplying-architecture-base64png-editor/LICENSE
similarity index 100%
rename from examples/todo-list-view/LICENSE
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/LICENSE
diff --git a/examples/base64png-editor/README.md b/examples/micro-frontends-multiplying-architecture-base64png-editor/README.md
similarity index 83%
rename from examples/base64png-editor/README.md
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/README.md
index 8e0e6fb6397..61208a2deb6 100644
--- a/examples/base64png-editor/README.md
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/README.md
@@ -15,14 +15,14 @@
    under the License.
 -->
 
-# Base64 PNG Editor
-
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples%e2%80%8a-%e2%80%8ahow-to-create-a-custom-editor-in-a-react-application.html) a step-by-step tutorial of how this custom Editor was built.
+# Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor
 
 This package is a Custom Editor made with React, which enables you to edit a `.base64png` file.
 
 A `.base64png` file is a PNG image converted to base64 without its headers (e.g. data:image/png;base64).
 
+To see it in action, refer to the [Base64 PNG Editor on Webapp](../micro-frontends-multiplying-architecture-base64png-editor-on-webapp/), the [Base64 PNG Editor VS Code Extension](../micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/), or the [Base64 PNG Editor Chrome Extension](../micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/) examples.
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
diff --git a/examples/base64png-editor/env/index.js b/examples/micro-frontends-multiplying-architecture-base64png-editor/env/index.js
similarity index 100%
rename from examples/base64png-editor/env/index.js
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/env/index.js
diff --git a/examples/base64png-editor/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
similarity index 93%
rename from examples/base64png-editor/package.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
index 57aff01bf6b..5901012dc8a 100644
--- a/examples/base64png-editor/package.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/base64png-editor",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/apache/incubator-kie-tools",
diff --git a/examples/base64png-editor/src/styles.scss b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.scss
similarity index 100%
rename from examples/base64png-editor/src/styles.scss
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.scss
diff --git a/examples/base64png-editor/src/Base64PngEditor.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
similarity index 97%
rename from examples/base64png-editor/src/Base64PngEditor.tsx
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
index 2384e514167..66c5d721237 100644
--- a/examples/base64png-editor/src/Base64PngEditor.tsx
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
@@ -25,10 +25,10 @@ import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components
 import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { Switch } from "@patternfly/react-core/dist/js/components/Switch";
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
-import CubesIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
-import "./styles.scss";
-import { Base64PngEdit, Base64PngStateControl } from "./Base64PngStateControl";
+import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
+import { Base64PngEdit, Base64PngEditorStateControl } from "./Base64PngEditorStateControl";
 import { KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
+import "./Base64PngEditor.scss";
 
 const INITIAL_CONTRAST = "100";
 const INITIAL_BRIGHTNESS = "100";
@@ -74,7 +74,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
    * Initialize the StateControl instance. When the original content is modified it's necessary to get an another instance
    * so the states aren't shared across contents.
    */
-  const stateControl = useMemo(() => new Base64PngStateControl(), [originalContent]);
+  const stateControl = useMemo(() => new Base64PngEditorStateControl(), [originalContent]);
 
   /**
    * Callback is exposed to the Channel to retrieve the current value of the Editor. It returns the value of
@@ -425,16 +425,18 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
     canvasRef.current!.width = 0;
     canvasRef.current!.height = 0;
 
-    imageRef.current!.onload = () => {
-      canvasRef.current!.width = imageRef.current!.width;
-      canvasRef.current!.height = imageRef.current!.height;
-      ctx.drawImage(imageRef.current!, 0, 0);
+    const r = imageRef.current;
+
+    r!.onload = () => {
+      canvasRef.current!.width = r!.width;
+      canvasRef.current!.height = r!.height;
+      ctx.drawImage(r!, 0, 0);
       setEditorContent(canvasRef.current!.toDataURL().split(",")[1]);
       setDisabled(false);
     };
 
     return () => {
-      imageRef.current!.onload = null;
+      r!.onload = null;
     };
   }, []);
 
@@ -549,7 +551,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
               </NavItem>
               {stateControl.isDirty() && (
                 <div style={{ display: "flex", alignItems: "center", padding: "20px" }}>
-                  <p style={{ color: "red" }}>Image was Edited!</p>
+                  <p style={{ color: "red" }}>Image was edited.</p>
                 </div>
               )}
             </NavList>
diff --git a/examples/base64png-editor/src/Base64PngEditorFactory.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorFactory.ts
similarity index 100%
rename from examples/base64png-editor/src/Base64PngEditorFactory.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorFactory.ts
diff --git a/examples/base64png-editor/src/Base64PngEditorInterface.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorInterface.tsx
similarity index 100%
rename from examples/base64png-editor/src/Base64PngEditorInterface.tsx
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorInterface.tsx
diff --git a/examples/base64png-editor/src/Base64PngStateControl.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorStateControl.ts
similarity index 90%
rename from examples/base64png-editor/src/Base64PngStateControl.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorStateControl.ts
index fa1f2496677..e2ffd621fa6 100644
--- a/examples/base64png-editor/src/Base64PngStateControl.ts
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorStateControl.ts
@@ -34,12 +34,12 @@ export interface Base64PngEdit extends WorkspaceEdit {
 }
 
 /**
- * A Base64PngStateControl extends the Kogito State Control which is a class that implements a command stack, and all
+ * A Base64PngEditorStateControl extends the default StateControl which is a class that implements a command stack, and all
  * methods necessary to do undo/redo operations or even if the editor is dirty.
  *
  * The use of this implementation is optional, you can use your own if required.
  */
-export class Base64PngStateControl extends StateControl {
+export class Base64PngEditorStateControl extends StateControl {
   /**
    * The command stack on the Kogito State Control accept strings only, this method retrieve the Base64PngEdit object.
    */
diff --git a/examples/base64png-editor/src/index.ts b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/index.ts
similarity index 100%
rename from examples/base64png-editor/src/index.ts
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/src/index.ts
diff --git a/examples/base64png-editor/tsconfig.json b/examples/micro-frontends-multiplying-architecture-base64png-editor/tsconfig.json
similarity index 100%
rename from examples/base64png-editor/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-base64png-editor/tsconfig.json
diff --git a/examples/ping-pong-view-angular/README.md b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/README.md
similarity index 88%
rename from examples/ping-pong-view-angular/README.md
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/README.md
index 2c6cb73d7dc..81936b0e708 100644
--- a/examples/ping-pong-view-angular/README.md
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/README.md
@@ -15,11 +15,11 @@
    under the License.
 -->
 
-# Ping-Pong View :: Angular implementation
+# Example :: Micro-frontends Multiplying Architecture :: Ping-Pong View - Angular implementation
 
 The Ping-Pong View is an interface that components can implement to be used inside a Ping-Pong View Envelope.
 
-This package provides a Ping-Pong View implementation as a Angular application.
+This package provides a library containing a Ping-Pong View implementation as a Angular application. To see it in action, refer to the [Ping-Pong Views on Webapp](../micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/) example.
 
 It's build into 3 projects:
 
diff --git a/examples/ping-pong-view-angular/angular.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/angular.json
similarity index 100%
rename from examples/ping-pong-view-angular/angular.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/angular.json
diff --git a/examples/ping-pong-view-angular/env/index.js b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/env/index.js
similarity index 100%
rename from examples/ping-pong-view-angular/env/index.js
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/env/index.js
diff --git a/examples/ping-pong-view-angular/lib/index.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/lib/index.ts
similarity index 100%
rename from examples/ping-pong-view-angular/lib/index.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/lib/index.ts
diff --git a/examples/ping-pong-view-angular/package.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/package.json
similarity index 89%
rename from examples/ping-pong-view-angular/package.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/package.json
index 00203a99c1b..ead7381b04b 100644
--- a/examples/ping-pong-view-angular/package.json
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/ping-pong-view-angular",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "keywords": [],
@@ -35,7 +35,7 @@
     "@angular/platform-browser-dynamic": "^18.1.2",
     "@kie-tools-core/envelope": "workspace:*",
     "@kie-tools-core/envelope-bus": "workspace:*",
-    "@kie-tools-examples/ping-pong-view": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view": "workspace:*",
     "rxjs": "^7.4.0",
     "zone.js": "^0.14.8"
   },
diff --git a/examples/ping-pong-view-angular/src/app/app.component.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/app.component.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/app.component.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/app.component.ts
diff --git a/examples/ping-pong-view-angular/src/app/app.module.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/app.module.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/app.module.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/app.module.ts
diff --git a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong-api.service.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong-api.service.ts
similarity index 94%
rename from examples/ping-pong-view-angular/src/app/ping-pong/ping-pong-api.service.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong-api.service.ts
index 16a10b8c2cb..be45813b618 100644
--- a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong-api.service.ts
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong-api.service.ts
@@ -19,8 +19,11 @@
 
 import { Injectable } from "@angular/core";
 import { MessageBusClientApi } from "@kie-tools-core/envelope-bus/dist/api";
-import { PingPongChannelApi, PingPongInitArgs } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { PingPongFactory } from "@kie-tools-examples/ping-pong-view/dist/envelope";
+import {
+  PingPongChannelApi,
+  PingPongInitArgs,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { PingPongFactory } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/envelope";
 import { ReplaySubject, BehaviorSubject, Subject } from "rxjs";
 
 declare global {
diff --git a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.css b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.css
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.css
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.css
diff --git a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.html b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.html
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.html
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.html
diff --git a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.ts
similarity index 95%
rename from examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.ts
index e3e871e7313..f07019dcfca 100644
--- a/examples/ping-pong-view-angular/src/app/ping-pong/ping-pong.component.ts
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/ping-pong/ping-pong.component.ts
@@ -19,7 +19,7 @@
 
 import { PingPongApiService, LogEntry } from "./ping-pong-api.service";
 import { Component, Input, OnInit } from "@angular/core";
-import * as PingPongViewEnvelope from "@kie-tools-examples/ping-pong-view/dist/envelope";
+import * as PingPongViewEnvelope from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/envelope";
 import { ContainerType } from "@kie-tools-core/envelope/dist/api";
 import { Observable, scan } from "rxjs";
 import { CommonModule } from "@angular/common";
diff --git a/examples/ping-pong-view-angular/src/app/web-component/web-component.component.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/web-component/web-component.component.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/web-component/web-component.component.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/web-component/web-component.component.ts
diff --git a/examples/ping-pong-view-angular/src/app/web-component/web-component.main.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/web-component/web-component.main.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/app/web-component/web-component.main.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/app/web-component/web-component.main.ts
diff --git a/examples/ping-pong-view-angular/src/assets/.gitkeep b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/assets/.gitkeep
similarity index 100%
rename from examples/ping-pong-view-angular/src/assets/.gitkeep
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/assets/.gitkeep
diff --git a/examples/ping-pong-view-angular/src/environments/environment.prod.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/environments/environment.prod.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/environments/environment.prod.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/environments/environment.prod.ts
diff --git a/examples/ping-pong-view-angular/src/environments/environment.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/environments/environment.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/environments/environment.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/environments/environment.ts
diff --git a/examples/ping-pong-view-angular/src/favicon.ico b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/favicon.ico
similarity index 100%
rename from examples/ping-pong-view-angular/src/favicon.ico
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/favicon.ico
diff --git a/examples/ping-pong-view-angular/src/index.html b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/index.html
similarity index 100%
rename from examples/ping-pong-view-angular/src/index.html
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/index.html
diff --git a/examples/ping-pong-view-angular/src/main.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/main.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/main.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/main.ts
diff --git a/examples/ping-pong-view-angular/src/polyfills.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/polyfills.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/polyfills.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/polyfills.ts
diff --git a/examples/ping-pong-view-angular/src/styles.css b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/styles.css
similarity index 100%
rename from examples/ping-pong-view-angular/src/styles.css
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/styles.css
diff --git a/examples/ping-pong-view-angular/src/test.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/test.ts
similarity index 100%
rename from examples/ping-pong-view-angular/src/test.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/src/test.ts
diff --git a/examples/ping-pong-view-angular/tsconfig.app.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.app.json
similarity index 100%
rename from examples/ping-pong-view-angular/tsconfig.app.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.app.json
diff --git a/examples/ping-pong-view-angular/tsconfig.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.json
similarity index 100%
rename from examples/ping-pong-view-angular/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.json
diff --git a/examples/ping-pong-view-angular/tsconfig.lib.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.lib.json
similarity index 100%
rename from examples/ping-pong-view-angular/tsconfig.lib.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.lib.json
diff --git a/examples/ping-pong-view-angular/tsconfig.wc.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.wc.json
similarity index 100%
rename from examples/ping-pong-view-angular/tsconfig.wc.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/tsconfig.wc.json
diff --git a/examples/webapp/LICENSE b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/LICENSE
similarity index 100%
rename from examples/webapp/LICENSE
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/LICENSE
diff --git a/examples/ping-pong-view-react/README.md b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/README.md
similarity index 87%
rename from examples/ping-pong-view-react/README.md
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/README.md
index 92a9cc34192..b7ab7f18730 100644
--- a/examples/ping-pong-view-react/README.md
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/README.md
@@ -15,13 +15,11 @@
    under the License.
 -->
 
-# Ping-Pong View :: React implementation
-
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples-how-to-create-a-more-complex-custom-view.html) a step-by-step tutorial of how this custom View was built.
+# Example :: Micro-frontends Multiplying Architecture :: Ping-Pong View - React implementation
 
 The Ping-Pong View is an interface that components can implement to be used inside a Ping-Pong View Envelope.
 
-Ths package provides a Ping-Pong View implementation as a React component.
+Ths package provides a library containing a Ping-Pong View implementation as a React component. To see it in action, refer to the [Ping-Pong Views on Webapp](../micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/) example.
 
 ---
 
diff --git a/examples/ping-pong-view-react/env/index.js b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/env/index.js
similarity index 100%
rename from examples/ping-pong-view-react/env/index.js
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/env/index.js
diff --git a/examples/ping-pong-view-react/package.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/package.json
similarity index 86%
rename from examples/ping-pong-view-react/package.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/package.json
index 788b9573efd..5c7a1b111c0 100644
--- a/examples/ping-pong-view-react/package.json
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/ping-pong-view-react",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/apache/incubator-kie-tools",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@kie-tools-core/envelope": "workspace:*",
     "@kie-tools-core/envelope-bus": "workspace:*",
-    "@kie-tools-examples/ping-pong-view": "workspace:*"
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view": "workspace:*"
   },
   "devDependencies": {
     "@kie-tools/root-env": "workspace:*",
diff --git a/examples/ping-pong-view-react/src/PingPongEnvelopeView.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongEnvelopeView.tsx
similarity index 93%
rename from examples/ping-pong-view-react/src/PingPongEnvelopeView.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongEnvelopeView.tsx
index a9f3492659e..038512b1e31 100644
--- a/examples/ping-pong-view-react/src/PingPongEnvelopeView.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongEnvelopeView.tsx
@@ -19,7 +19,7 @@
 
 import * as React from "react";
 import { useEffect, useState } from "react";
-import * as PingPongViewEnvelope from "@kie-tools-examples/ping-pong-view/dist/envelope";
+import * as PingPongViewEnvelope from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/envelope";
 import { PingPongReactImplFactory } from ".";
 import "./styles.css";
 import { EnvelopeDivConfig, EnvelopeIFrameConfig } from "@kie-tools-core/envelope";
diff --git a/examples/ping-pong-view-react/src/PingPongReactImpl.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImpl.tsx
similarity index 96%
rename from examples/ping-pong-view-react/src/PingPongReactImpl.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImpl.tsx
index 221dfbd3b60..5bb22863313 100644
--- a/examples/ping-pong-view-react/src/PingPongReactImpl.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImpl.tsx
@@ -19,7 +19,11 @@
 
 import * as React from "react";
 import { useCallback, useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
-import { PingPongApi, PingPongChannelApi, PingPongInitArgs } from "@kie-tools-examples/ping-pong-view/dist/api";
+import {
+  PingPongApi,
+  PingPongChannelApi,
+  PingPongInitArgs,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
 import { MessageBusClientApi } from "@kie-tools-core/envelope-bus/dist/api";
 import { useSubscription } from "@kie-tools-core/envelope-bus/dist/hooks";
 
diff --git a/examples/ping-pong-view-react/src/PingPongReactImplFactory.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImplFactory.tsx
similarity index 83%
rename from examples/ping-pong-view-react/src/PingPongReactImplFactory.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImplFactory.tsx
index 3ae1f5c15f6..6ef2816c3b9 100644
--- a/examples/ping-pong-view-react/src/PingPongReactImplFactory.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/PingPongReactImplFactory.tsx
@@ -20,8 +20,12 @@
 import { MessageBusClientApi } from "@kie-tools-core/envelope-bus/dist/api";
 import * as React from "react";
 import { PingPongReactImpl } from "./PingPongReactImpl";
-import { PingPongFactory } from "@kie-tools-examples/ping-pong-view/dist/envelope";
-import { PingPongApi, PingPongChannelApi, PingPongInitArgs } from "@kie-tools-examples/ping-pong-view/dist/api";
+import { PingPongFactory } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/envelope";
+import {
+  PingPongApi,
+  PingPongChannelApi,
+  PingPongInitArgs,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
 
 export class PingPongReactImplFactory implements PingPongFactory {
   constructor(private setView: React.Dispatch<React.SetStateAction<React.ReactElement>>) {}
diff --git a/examples/ping-pong-view-react/src/div/index.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/div/index.tsx
similarity index 100%
rename from examples/ping-pong-view-react/src/div/index.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/div/index.tsx
diff --git a/examples/ping-pong-view-react/src/iframe/index.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/iframe/index.tsx
similarity index 100%
rename from examples/ping-pong-view-react/src/iframe/index.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/iframe/index.tsx
diff --git a/examples/ping-pong-view-react/src/index.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/index.ts
similarity index 100%
rename from examples/ping-pong-view-react/src/index.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/index.ts
diff --git a/examples/ping-pong-view-react/src/styles.css b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/styles.css
similarity index 100%
rename from examples/ping-pong-view-react/src/styles.css
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/src/styles.css
diff --git a/examples/ping-pong-view-react/tsconfig.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/tsconfig.json
similarity index 100%
rename from examples/ping-pong-view-react/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react/tsconfig.json
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-view/LICENSE b/examples/micro-frontends-multiplying-architecture-ping-pong-view/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/ping-pong-view/README.md b/examples/micro-frontends-multiplying-architecture-ping-pong-view/README.md
similarity index 84%
rename from examples/ping-pong-view/README.md
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/README.md
index cd13dbc988b..abe5947012e 100644
--- a/examples/ping-pong-view/README.md
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view/README.md
@@ -15,13 +15,11 @@
    under the License.
 -->
 
-# Ping-Pong View
+# Example :: Micro-frontends Multiplying Architecture :: Ping-Pong View
 
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples-how-to-create-a-more-complex-custom-view.html) a step-by-step tutorial of how this custom View was built.
+This package exposes a library with the necessary files for you to create a Ping-Pong View Envelope with your Ping-Pong View implementation.
 
-This package exposes the necessary files for you to create a Ping-Pong View Envelope with your Ping-Pong View implementation.
-
-It's divided into the following submodules:
+It's divided in the following directories:
 
 1. `api`
    - Provides the APIs that the Channel/Envelope expose to each other.
@@ -42,26 +40,26 @@ It's divided into the following submodules:
    - The `pingPongView__init` will be responsible for associating the `envelopeClient` with the `envelopeServer` and then calling the `create` method from your factory implementation;
    - From the `create` call you should get the `PingPongApi` implementation and use it to fulfill the `PingPongEnvelopeApi` methods.
 3. **Running inside an `EmbeddedEnvelope`**
-   - Your project can run inside a `div` or an `iFrame`, and for that, both are available inside the `embedded` directory.
+   - Your project can run inside a `<div>` or an `<iframe>`, and for that, both are available inside the `embedded` directory.
    - Both require similar props and these are the ones that are common to them:
      ```js
      apiImpl: PingPongChannelApi; // The API implementation
      targetOrigin: string; // The current location origin url
      name: string; // The envelope name
      ```
-   - For **div** the `renderView` prop is required:
+   - For **`<div>`** the `renderView` prop is required:
      ```js
      renderView: (container: HTMLDivElement, envelopeId?: string) => Promise<void>;
      ```
      It's responsible for rendering the Ping Pong view inside the `container` element and passing the `envelopeId` to be used when initializing the envelope.
-   - For **iFrame** the `envelopePath` prop is required:
+   - For **`<iframe>`** the `envelopePath` prop is required:
      ```
      envelopePath: string;
      ```
-     It should receive the URL to be loaded inside the iFrame.
+     It should receive the URL to be loaded inside the `<iframe>`.
 4. **Initializing**
 
-   - When loading your ping pong implementation call the `init` method from the `PingPongEnvelope` class
+   - When loading your Ping-Pong View implementation call the `init` method from the `PingPongEnvelope` class
    - It should receive the following arguments:
 
      ```js
@@ -72,7 +70,7 @@ It's divided into the following submodules:
      }
      ```
 
-     - **config** is one of `EnvelopeDivConfig` or `EnvelopeIFrameConfig`, specifying if the envelope is running in an _iFrame_ or a _div_, passing the `envelopeId` if in a _div_;
+     - **config** is one of `EnvelopeDivConfig` or `EnvelopeIFrameConfig`, specifying if the envelope is running in an _`<iframe>`_ or a _`<div>`_, passing the `envelopeId` if in a _`<div>`_;
      - **bus** is the medium through which messages will be transmitted/received. By default we use:
        ```js
        {
diff --git a/examples/ping-pong-view/env/index.js b/examples/micro-frontends-multiplying-architecture-ping-pong-view/env/index.js
similarity index 100%
rename from examples/ping-pong-view/env/index.js
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/env/index.js
diff --git a/examples/ping-pong-view/package.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view/package.json
similarity index 92%
rename from examples/ping-pong-view/package.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/package.json
index 4c200874954..1368c2348c7 100644
--- a/examples/ping-pong-view/package.json
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-view/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/ping-pong-view",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/apache/incubator-kie-tools",
diff --git a/examples/ping-pong-view/src/api/PingPongApi.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongApi.ts
similarity index 100%
rename from examples/ping-pong-view/src/api/PingPongApi.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongApi.ts
diff --git a/examples/ping-pong-view/src/api/PingPongChannelApi.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongChannelApi.ts
similarity index 100%
rename from examples/ping-pong-view/src/api/PingPongChannelApi.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongChannelApi.ts
diff --git a/examples/ping-pong-view/src/api/PingPongEnvelopeApi.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongEnvelopeApi.ts
similarity index 100%
rename from examples/ping-pong-view/src/api/PingPongEnvelopeApi.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/PingPongEnvelopeApi.ts
diff --git a/examples/ping-pong-view/src/api/index.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/index.ts
similarity index 100%
rename from examples/ping-pong-view/src/api/index.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/api/index.ts
diff --git a/examples/ping-pong-view/src/embedded/EmbeddedDivPingPong.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/EmbeddedDivPingPong.tsx
similarity index 100%
rename from examples/ping-pong-view/src/embedded/EmbeddedDivPingPong.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/EmbeddedDivPingPong.tsx
diff --git a/examples/ping-pong-view/src/embedded/EmbeddedIFramePingPong.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/EmbeddedIFramePingPong.tsx
similarity index 100%
rename from examples/ping-pong-view/src/embedded/EmbeddedIFramePingPong.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/EmbeddedIFramePingPong.tsx
diff --git a/examples/ping-pong-view/src/embedded/index.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/index.ts
similarity index 100%
rename from examples/ping-pong-view/src/embedded/index.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/embedded/index.ts
diff --git a/examples/ping-pong-view/src/envelope/PingPongEnvelope.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongEnvelope.ts
similarity index 100%
rename from examples/ping-pong-view/src/envelope/PingPongEnvelope.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongEnvelope.ts
diff --git a/examples/ping-pong-view/src/envelope/PingPongEnvelopeApiImpl.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongEnvelopeApiImpl.ts
similarity index 100%
rename from examples/ping-pong-view/src/envelope/PingPongEnvelopeApiImpl.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongEnvelopeApiImpl.ts
diff --git a/examples/ping-pong-view/src/envelope/PingPongFactory.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongFactory.ts
similarity index 100%
rename from examples/ping-pong-view/src/envelope/PingPongFactory.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/PingPongFactory.ts
diff --git a/examples/ping-pong-view/src/envelope/index.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/index.ts
similarity index 100%
rename from examples/ping-pong-view/src/envelope/index.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/src/envelope/index.ts
diff --git a/examples/ping-pong-view/tsconfig.json b/examples/micro-frontends-multiplying-architecture-ping-pong-view/tsconfig.json
similarity index 100%
rename from examples/ping-pong-view/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-ping-pong-view/tsconfig.json
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/LICENSE b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/README.md b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/README.md
new file mode 100644
index 00000000000..fb4676ee0d3
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: Micro-frontends Multiplying Architecture :: Ping-Pong Views on webapp
+
+This package contains a web application that features multiple ways of using Ping-Pong Views wrapped inside Micro-frontends Multiplying Architecture Envelopes, showcasing both Promises and Notifications features of Multiplying Architecture Channel and Envelope APIs.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/env/index.js b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/env/index.js
new file mode 100644
index 00000000000..763d24de3ca
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/env/index.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      microFrontendsMultiplyingArchitecturePingPongViewsOnWebappExample: {
+        port: 7775,
+      },
+    };
+  },
+});
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json
new file mode 100644
index 00000000000..b26a95e10d0
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json
@@ -0,0 +1,40 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.4",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularDivViewsPage.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularDivViewsPage.tsx
new file mode 100644
index 00000000000..832e0631b05
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularDivViewsPage.tsx
@@ -0,0 +1,88 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useMemo, useRef } from "react";
+
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
+
+import { EmbeddedDivPingPong } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/embedded";
+import { pingPongEnvelopViewRenderDiv } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/dist/wc/lib";
+import { PingPongApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
+
+import { StatsSidebar } from "../StatsSidebar";
+
+export function PingPongAngularDivViewsPage() {
+  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
+
+  const angular1 = useRef<PingPongApi>(null);
+  const angular2 = useRef<PingPongApi>(null);
+  const angular3 = useRef<PingPongApi>(null);
+
+  const refs = useMemo(() => [angular1, angular2, angular3], [angular1, angular2, angular3]);
+
+  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter={true}>
+        <GridItem span={2}>
+          <StatsSidebar
+            lastPing={lastPing}
+            lastPong={lastPong}
+            pings={pingsCount}
+            pongs={pongsCount}
+            onClearLogs={onClearLogs}
+            onGetLastPingTimestamp={onGetLastPingTimestamp}
+          />
+        </GridItem>
+        <GridItem span={1} />
+        <GridItem span={3}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            name={"Angular 1"}
+            ref={angular1}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />
+        </GridItem>
+        <GridItem span={3}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            name={"Angular 2"}
+            ref={angular2}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />
+        </GridItem>
+        <GridItem span={3}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            name={"Angular 3"}
+            ref={angular3}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />{" "}
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularIFrameViewsPage.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularIFrameViewsPage.tsx
new file mode 100644
index 00000000000..8bab035bb91
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Angular/PingPongAngularIFrameViewsPage.tsx
@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useMemo, useRef } from "react";
+
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
+
+import { EmbeddedIFramePingPong } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/embedded";
+import { PingPongApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
+
+import { StatsSidebar } from "../StatsSidebar";
+
+const envelopePath = "ping-pong-view-in-angular-envelope/index.html";
+
+export function PingPongAngularIFrameViewsPage() {
+  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
+
+  const angular1 = useRef<PingPongApi>(null);
+  const angular2 = useRef<PingPongApi>(null);
+  const angular3 = useRef<PingPongApi>(null);
+
+  const refs = useMemo(() => [angular1, angular2, angular3], [angular1, angular2, angular3]);
+
+  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter={true}>
+        <GridItem span={2}>
+          <StatsSidebar
+            lastPing={lastPing}
+            lastPong={lastPong}
+            pings={pingsCount}
+            pongs={pongsCount}
+            onClearLogs={onClearLogs}
+            onGetLastPingTimestamp={onGetLastPingTimestamp}
+          />
+        </GridItem>
+
+        <GridItem span={1} />
+
+        <GridItem span={3}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"Angular 1"}
+            ref={angular1}
+            targetOrigin={window.location.origin}
+            envelopePath={envelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={3}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"Angular 2"}
+            ref={angular2}
+            targetOrigin={window.location.origin}
+            envelopePath={envelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={3}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"Angular 3"}
+            ref={angular3}
+            targetOrigin={window.location.origin}
+            envelopePath={envelopePath}
+          />
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx
new file mode 100644
index 00000000000..3df871c55fb
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx
@@ -0,0 +1,125 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
+import { PingPongReactIFrameViewsPage } from "./React/PingPongReactIFrameViewsPage";
+import { PingPongReactDivViewsPage } from "./React/PingPongReactDivViewsPage";
+import { PingPongAngularIFrameViewsPage } from "./Angular/PingPongAngularIFrameViewsPage";
+import { PingPongMixedViewsPage } from "./Mixed/PingPongMixedViewsPage";
+import { PingPongAngularDivViewsPage } from "./Angular/PingPongAngularDivViewsPage";
+
+enum Location {
+  PING_PONG_REACT_IFRAME_PAGES = "/page/ping-pong-react/iframe-pages",
+  PING_PONG_REACT_DIV_PAGES = "/page/ping-pong-react/div-pages",
+  PING_PONG_ANGULAR_IFRAME_PAGES = "/page/ping-pong-angular/iframe-pages",
+  PING_PONG_ANGULAR_DIV_PAGES = "/page/ping-pong-angular/div-pages",
+  PING_PONG_MIXED_PAGES = "/page/ping-pong-mixed",
+  HOME = "/",
+}
+
+export function App() {
+  /**
+   * State which determines what is the current route.
+   */
+  const [location, setLocation] = useState(Location.HOME);
+
+  /**
+   * On the first render, the location state is determined by the current URL.
+   */
+  useEffect(() => {
+    setLocation(window.location.hash.slice(1) as Location); //Remove trailing '#' from route to match the Location enum.
+  }, []);
+
+  return (
+    <Router>
+      <Page
+        header={
+          <PageHeader
+            logo={<Brand src={"logo.png"} alt="Logo" />}
+            topNav={
+              <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+                <NavList>
+                  <NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
+                    <Link to={Location.HOME}>Home</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.PING_PONG_REACT_IFRAME_PAGES}
+                    isActive={location === Location.PING_PONG_REACT_IFRAME_PAGES}
+                  >
+                    <Link to={Location.PING_PONG_REACT_IFRAME_PAGES}>React + IFrames</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.PING_PONG_REACT_DIV_PAGES}
+                    isActive={location === Location.PING_PONG_REACT_DIV_PAGES}
+                  >
+                    <Link to={Location.PING_PONG_REACT_DIV_PAGES}>React + Divs</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.PING_PONG_ANGULAR_IFRAME_PAGES}
+                    isActive={location === Location.PING_PONG_ANGULAR_IFRAME_PAGES}
+                  >
+                    <Link to={Location.PING_PONG_ANGULAR_IFRAME_PAGES}>Angular + IFrames</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.PING_PONG_ANGULAR_DIV_PAGES}
+                    isActive={location === Location.PING_PONG_ANGULAR_DIV_PAGES}
+                  >
+                    <Link to={Location.PING_PONG_ANGULAR_DIV_PAGES}>Angular + Divs</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.PING_PONG_MIXED_PAGES}
+                    isActive={location === Location.PING_PONG_MIXED_PAGES}
+                  >
+                    <Link to={Location.PING_PONG_MIXED_PAGES}>All mixed</Link>
+                  </NavItem>
+                </NavList>
+              </Nav>
+            }
+          />
+        }
+      >
+        <Switch>
+          <Route exact={true} path={"/"}>
+            <p>Select a page</p>
+          </Route>
+          <Route path={Location.PING_PONG_REACT_IFRAME_PAGES}>
+            <PingPongReactIFrameViewsPage />
+          </Route>
+          <Route path={Location.PING_PONG_REACT_DIV_PAGES}>
+            <PingPongReactDivViewsPage />
+          </Route>
+          <Route path={Location.PING_PONG_ANGULAR_IFRAME_PAGES}>
+            <PingPongAngularIFrameViewsPage />
+          </Route>
+          <Route path={Location.PING_PONG_ANGULAR_DIV_PAGES}>
+            <PingPongAngularDivViewsPage />
+          </Route>
+          <Route path={Location.PING_PONG_MIXED_PAGES}>
+            <PingPongMixedViewsPage />
+          </Route>
+        </Switch>
+      </Page>
+    </Router>
+  );
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Mixed/PingPongMixedViewsPage.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Mixed/PingPongMixedViewsPage.tsx
new file mode 100644
index 00000000000..cd8d5cb4606
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/Mixed/PingPongMixedViewsPage.tsx
@@ -0,0 +1,111 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useMemo, useRef } from "react";
+
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
+
+import {
+  EmbeddedDivPingPong,
+  EmbeddedIFramePingPong,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/embedded";
+import { PingPongApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { pingPongEnvelopViewRenderDiv as renderReactDiv } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react";
+import { pingPongEnvelopViewRenderDiv as renderAngularDiv } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/dist/wc/lib";
+import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
+
+import { StatsSidebar } from "../StatsSidebar";
+
+const reactEnvelopePath = "ping-pong-view-in-react-envelope.html";
+const angularEnvelopePath = "ping-pong-view-in-angular-envelope/index.html";
+
+export function PingPongMixedViewsPage() {
+  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
+
+  const angularIFrame = useRef<PingPongApi>(null);
+  const angularDiv = useRef<PingPongApi>(null);
+  const reactIFrame = useRef<PingPongApi>(null);
+  const reactDiv = useRef<PingPongApi>(null);
+
+  const refs = useMemo(
+    () => [angularIFrame, angularDiv, reactIFrame, reactDiv],
+    [angularIFrame, angularDiv, reactIFrame, reactDiv]
+  );
+
+  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter={true}>
+        <GridItem span={2}>
+          <StatsSidebar
+            lastPing={lastPing}
+            lastPong={lastPong}
+            pings={pingsCount}
+            pongs={pongsCount}
+            onClearLogs={onClearLogs}
+            onGetLastPingTimestamp={onGetLastPingTimestamp}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"Angular iFrame"}
+            ref={angularIFrame}
+            targetOrigin={window.location.origin}
+            envelopePath={angularEnvelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            name={"Angular Div"}
+            ref={angularDiv}
+            targetOrigin={window.location.origin}
+            renderView={renderAngularDiv}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"React iFrame"}
+            ref={reactIFrame}
+            targetOrigin={window.location.origin}
+            envelopePath={reactEnvelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            name={"React Div"}
+            ref={reactDiv}
+            targetOrigin={window.location.origin}
+            renderView={renderReactDiv}
+          />
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+}
diff --git a/examples/webapp/src/envelope/ping-pong-view-react-impl.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/PingPongViewInReactEnvelope.ts
similarity index 87%
rename from examples/webapp/src/envelope/ping-pong-view-react-impl.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/PingPongViewInReactEnvelope.ts
index 3a5835c60fb..8040a6c2129 100644
--- a/examples/webapp/src/envelope/ping-pong-view-react-impl.ts
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/PingPongViewInReactEnvelope.ts
@@ -17,6 +17,6 @@
  * under the License.
  */
 
-import { pingPongEnvelopViewRender } from "@kie-tools-examples/ping-pong-view-react";
+import { pingPongEnvelopViewRender } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react";
 
 pingPongEnvelopViewRender(document.getElementById("envelope-app")!);
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactDivViewsPage.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactDivViewsPage.tsx
new file mode 100644
index 00000000000..886ccd6a69a
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactDivViewsPage.tsx
@@ -0,0 +1,92 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useMemo, useRef } from "react";
+
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
+
+import { EmbeddedDivPingPong } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/embedded";
+import { PingPongApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { pingPongEnvelopViewRenderDiv } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react";
+import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
+
+import { StatsSidebar } from "../StatsSidebar";
+
+export function PingPongReactDivViewsPage() {
+  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
+
+  const react1 = useRef<PingPongApi>(null);
+  const react2 = useRef<PingPongApi>(null);
+  const react3 = useRef<PingPongApi>(null);
+
+  const refs = useMemo(() => [react1, react2, react3], [react1, react2, react3]);
+
+  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter={true}>
+        <GridItem span={2}>
+          <StatsSidebar
+            lastPing={lastPing}
+            lastPong={lastPong}
+            pings={pingsCount}
+            pongs={pongsCount}
+            onClearLogs={onClearLogs}
+            onGetLastPingTimestamp={onGetLastPingTimestamp}
+          />
+        </GridItem>
+
+        <GridItem span={1} />
+
+        <GridItem span={2}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            ref={react1}
+            name={"React 1"}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            ref={react2}
+            name={"React 2"}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedDivPingPong
+            apiImpl={apiImpl}
+            ref={react3}
+            name={"React 3"}
+            targetOrigin={window.location.origin}
+            renderView={pingPongEnvelopViewRenderDiv}
+          />
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactIFrameViewsPage.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactIFrameViewsPage.tsx
new file mode 100644
index 00000000000..2e9e6f3b506
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/React/PingPongReactIFrameViewsPage.tsx
@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useMemo, useRef } from "react";
+
+import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Grid, GridItem } from "@patternfly/react-core/dist/js/layouts/Grid";
+
+import { EmbeddedIFramePingPong } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/embedded";
+import { PingPongApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
+import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
+
+import { StatsSidebar } from "../StatsSidebar";
+
+const reactEnvelopePath = "ping-pong-view-in-react-envelope.html";
+
+export function PingPongReactIFrameViewsPage() {
+  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
+
+  const react1 = useRef<PingPongApi>(null);
+  const react2 = useRef<PingPongApi>(null);
+  const react3 = useRef<PingPongApi>(null);
+
+  const refs = useMemo(() => [react1, react2, react3], [react1, react2, react3]);
+
+  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
+
+  return (
+    <PageSection isFilled={true}>
+      <Grid hasGutter={true}>
+        <GridItem span={2}>
+          <StatsSidebar
+            lastPing={lastPing}
+            lastPong={lastPong}
+            pings={pingsCount}
+            pongs={pongsCount}
+            onClearLogs={onClearLogs}
+            onGetLastPingTimestamp={onGetLastPingTimestamp}
+          />
+        </GridItem>
+
+        <GridItem span={1} />
+
+        <GridItem span={2}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"React 1"}
+            ref={react1}
+            targetOrigin={window.location.origin}
+            envelopePath={reactEnvelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"React 2"}
+            ref={react2}
+            targetOrigin={window.location.origin}
+            envelopePath={reactEnvelopePath}
+          />
+        </GridItem>
+
+        <GridItem span={2}>
+          <EmbeddedIFramePingPong
+            apiImpl={apiImpl}
+            name={"React 3"}
+            ref={react3}
+            targetOrigin={window.location.origin}
+            envelopePath={reactEnvelopePath}
+          />
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
+}
diff --git a/examples/webapp/src/Pages/PingPong/StatsSidebar.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
similarity index 55%
rename from examples/webapp/src/Pages/PingPong/StatsSidebar.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
index 06e97eb3014..df54228ca65 100644
--- a/examples/webapp/src/Pages/PingPong/StatsSidebar.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
@@ -20,7 +20,7 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { Label } from "@patternfly/react-core/dist/js/components/Label";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
 
 interface Props {
@@ -34,9 +34,6 @@ interface Props {
 
 /**
  * A sidebar that shows the current stats of the pings/pongs
- *
- * @param props
- * @constructor
  */
 export function StatsSidebar(props: Props) {
   const [lastPingTimestamp, setLastPingTimestamp] = useState<string>("-");
@@ -52,51 +49,47 @@ export function StatsSidebar(props: Props) {
   }, [pings, onGetLastPingTimestamp]);
 
   return (
-    <div>
-      <Nav className={"webapp--page-navigation webapp--page-ping-pong-view-navigation"}>
-        <div className={"webapp--page-navigation-title-div"}>
-          <Title className={"webapp--page-navigation-title-h3"} headingLevel="h3" size="xl">
-            Stats
-          </Title>
-        </div>
-        <NavList>
-          <NavItem>
-            <div>
-              Pings: &nbsp;
-              <Label>{pings}</Label>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div>
-              Pongs: &nbsp;
-              <Label>{pongs}</Label>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div>
-              Last ping: &nbsp;
-              <Label>{lastPing}</Label>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div>
-              Last ping timestamp: &nbsp;
-              <Label>{lastPingTimestamp}</Label>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div>
-              Last pong: &nbsp;
-              <Label>{lastPong}</Label>
-            </div>
-          </NavItem>
-          <NavItem>
-            <div>
-              <button onClick={onClearLogs}>Clear logs!</button>
-            </div>
-          </NavItem>
-        </NavList>
-      </Nav>
+    <div style={{ padding: "16px" }}>
+      <Stack hasGutter={true}>
+        <StackItem>
+          <b>Stats</b>
+        </StackItem>
+        <StackItem>
+          <div>
+            Pings: &nbsp;
+            <Label>{pings}</Label>
+          </div>
+        </StackItem>
+        <StackItem>
+          <div>
+            Pongs: &nbsp;
+            <Label>{pongs}</Label>
+          </div>
+        </StackItem>
+        <StackItem>
+          <div>
+            Last ping: &nbsp;
+            <Label>{lastPing}</Label>
+          </div>
+        </StackItem>
+        <StackItem>
+          <div>
+            Last ping timestamp: &nbsp;
+            <Label>{lastPingTimestamp}</Label>
+          </div>
+        </StackItem>
+        <StackItem>
+          <div>
+            Last pong: &nbsp;
+            <Label>{lastPong}</Label>
+          </div>
+        </StackItem>
+        <StackItem>
+          <div>
+            <button onClick={onClearLogs}>Clear logs!</button>
+          </div>
+        </StackItem>
+      </Stack>
     </div>
   );
 }
diff --git a/examples/webapp/src/Pages/PingPong/hooks.ts b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/hooks.ts
similarity index 93%
rename from examples/webapp/src/Pages/PingPong/hooks.ts
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/hooks.ts
index 7e5ad5bcb19..756ea7894e2 100644
--- a/examples/webapp/src/Pages/PingPong/hooks.ts
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/hooks.ts
@@ -18,7 +18,10 @@
  */
 
 import { useCallback, RefObject, useState, useMemo } from "react";
-import { PingPongApi, PingPongChannelApi } from "@kie-tools-examples/ping-pong-view/dist/api";
+import {
+  PingPongApi,
+  PingPongChannelApi,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view/dist/api";
 
 export function usePingPongApiCallbacks(refs: RefObject<PingPongApi>[]) {
   const onClearLogs = useCallback(() => {
diff --git a/examples/webapp/src/index.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/index.tsx
similarity index 94%
rename from examples/webapp/src/index.tsx
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/index.tsx
index d9918f08397..635c5eed1fe 100644
--- a/examples/webapp/src/index.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/index.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import "@patternfly/react-core/dist/styles/base.css";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { App } from "./App";
diff --git a/examples/webapp/static/index.html b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/index.html
similarity index 100%
rename from examples/webapp/static/index.html
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/index.html
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/logo.png b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/logo.png differ
diff --git a/examples/webapp/envelope/ping-pong-view-react-impl.html b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/ping-pong-view-in-react-envelope.html
similarity index 95%
rename from examples/webapp/envelope/ping-pong-view-react-impl.html
rename to examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/ping-pong-view-in-react-envelope.html
index d8a04a1ac23..dc38c2496ae 100644
--- a/examples/webapp/envelope/ping-pong-view-react-impl.html
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/static/ping-pong-view-in-react-envelope.html
@@ -41,6 +41,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="ping-pong-view-react-impl.js"></script>
+    <script src="ping-pong-view-in-react-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/tsconfig.json b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/webpack.config.js b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..839e4e73c07
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/webpack.config.js
@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+      "ping-pong-view-in-react-envelope": "./src/PingPongViewInReactEnvelope.ts",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [
+          { from: "./static", to: "." },
+          {
+            from: `${path.dirname(require.resolve("@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular/package.json"))}/dist/app`,
+            to: "./ping-pong-view-in-angular-envelope",
+          },
+        ],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.microFrontendsMultiplyingArchitecturePingPongViewsOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/LICENSE b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/README.md b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/README.md
new file mode 100644
index 00000000000..6d884eff7be
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: Micro-frontends Multiplying Architecture :: 'To do' List View on webapp
+
+This package contains a web application that features a 'To do' List View, a simple component wrapped inside an Envelope with a simple API for manging 'To do' items. It also features a very simple demo of Multiplying Architecture's Shared Value.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/env/index.js b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/env/index.js
new file mode 100644
index 00000000000..2f346ecb323
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/env/index.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      microFrontendsMultiplyingArchitectureTodoListViewOnWebappExample: {
+        port: 7776,
+      },
+    };
+  },
+});
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json
new file mode 100644
index 00000000000..e147aa32fe8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json
@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rimraf dist && webpack",
+    "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}
diff --git a/examples/webapp/src/envelope/todo-list-view.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewEnvelope.ts
similarity index 88%
rename from examples/webapp/src/envelope/todo-list-view.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewEnvelope.ts
index 5b92a026811..c7776a6ec72 100644
--- a/examples/webapp/src/envelope/todo-list-view.ts
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewEnvelope.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import * as TodoListViewEnvelope from "@kie-tools-examples/todo-list-view/dist/envelope";
+import * as TodoListViewEnvelope from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/envelope";
 
 TodoListViewEnvelope.init({
   container: document.getElementById("envelope-app")!,
diff --git a/examples/webapp/src/Pages/TodoList/TodoListViewPage.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
similarity index 54%
rename from examples/webapp/src/Pages/TodoList/TodoListViewPage.tsx
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
index eb2be6e84c5..37415e9ebdc 100644
--- a/examples/webapp/src/Pages/TodoList/TodoListViewPage.tsx
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
@@ -19,10 +19,15 @@
 
 import * as React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
-import { EmbeddedTodoList, EmbeddedTodoListRef } from "@kie-tools-examples/todo-list-view/dist/embedded";
+import {
+  EmbeddedTodoList,
+  EmbeddedTodoListRef,
+} from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/embedded";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
+import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button/Button";
+
 import { useStateAsSharedValue } from "@kie-tools-core/envelope-bus/dist/hooks";
 
 export function TodoListViewPage() {
@@ -58,40 +63,38 @@ export function TodoListViewPage() {
   }, [handleItemRemoved]);
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <div>
-          <Nav className={"webapp--page-navigation"}>
-            <div className={"webapp--page-navigation-title-div"}>
-              <Title className={"webapp--page-navigation-title-h3"} headingLevel="h3" size="xl">
-                Actions
-              </Title>
-            </div>
-            <NavList>
-              <NavItem onClick={embeddedTodoListRef.current?.markAllAsCompleted}>Mark all as completed</NavItem>
-              <NavItem>
-                <form onSubmit={addItem}>
-                  <input
-                    type={"text"}
-                    value={newItem}
-                    onChange={(e) => setNewItem(e.target.value)}
-                    placeholder={"New item"}
-                  />
-                  <button>Add</button>
-                </form>
-              </NavItem>
-            </NavList>
-          </Nav>
-        </div>
-        <PageSection>
-          <EmbeddedTodoList
-            ref={embeddedTodoListRef}
-            targetOrigin={window.location.origin}
-            envelopePath={"envelope/todo-list-view.html"}
-            apiImpl={apiImpl}
-          />
-        </PageSection>
-      </div>
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
+      sidebar={
+        <Stack hasGutter={true} style={{ padding: "16px" }}>
+          <StackItem>Actions</StackItem>
+          <StackItem>
+            <form onSubmit={addItem}>
+              <input
+                type={"text"}
+                value={newItem}
+                onChange={(e) => setNewItem(e.target.value)}
+                placeholder={"New item"}
+              />
+              <button>Add</button>
+            </form>
+          </StackItem>
+          <StackItem>
+            <Button variant={ButtonVariant.plain} onClick={embeddedTodoListRef.current?.markAllAsCompleted}>
+              Mark all as completed
+            </Button>
+          </StackItem>
+        </Stack>
+      }
+    >
+      <PageSection>
+        <EmbeddedTodoList
+          ref={embeddedTodoListRef}
+          targetOrigin={window.location.origin}
+          envelopePath={"./todo-list-view-envelope.html"}
+          apiImpl={apiImpl}
+        />
+      </PageSection>
     </Page>
   );
 }
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/index.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..f87d3e225ad
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { TodoListViewPage } from "./TodoListViewPage";
+
+ReactDOM.render(<TodoListViewPage />, document.getElementById("app"));
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/index.html b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/index.html
new file mode 100644
index 00000000000..03773a31f26
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/logo.png b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/logo.png differ
diff --git a/examples/webapp/envelope/todo-list-view.html b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/todo-list-view-envelope.html
similarity index 96%
rename from examples/webapp/envelope/todo-list-view.html
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/todo-list-view-envelope.html
index 59ad2f48d7e..65321b9fa7d 100644
--- a/examples/webapp/envelope/todo-list-view.html
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/static/todo-list-view-envelope.html
@@ -41,6 +41,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="todo-list-view.js"></script>
+    <script src="todo-list-view-envelope.js"></script>
   </body>
 </html>
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/tsconfig.json b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/webpack.config.js b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..c345fdad97c
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/webpack.config.js
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+      "todo-list-view-envelope": "./src/TodoListViewEnvelope.ts",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [{ from: "./static", to: "." }],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.microFrontendsMultiplyingArchitectureTodoListViewOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/todo-list-view-vscode-extension/.vscodeignore b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/.vscodeignore
similarity index 100%
rename from examples/todo-list-view-vscode-extension/.vscodeignore
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/.vscodeignore
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/LICENSE b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/todo-list-view-vscode-extension/README.md b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/README.md
similarity index 69%
rename from examples/todo-list-view-vscode-extension/README.md
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/README.md
index 3bdb42224c2..de4a96ec4d0 100644
--- a/examples/todo-list-view-vscode-extension/README.md
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/README.md
@@ -15,28 +15,32 @@
    under the License.
 -->
 
-# 'To do' list View :: VS Code Extension
+# Example :: Micro-frontends Multiplying Architecture :: 'To do' List View VS Code Extension
 
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples%e2%80%8a-%e2%80%8ahow-to-create-a-vs-code-extension-for-a-custom-view.html) a step-by-step tutorial of how this VS Code Extension was built.
+This package provides a VS Code Extension containing a 'To do' List View, which can and the following commands:
 
-This package provides a VS Code Extension containing a 'To do' list View.
+1. `TODO: Open list`
+   - Opens a Webview with the 'To do' List View.
+1. `TODO: Add item(s)`
+   - When there's a selected text in a text editor (E.g., a `.txt` file) you can right-click it to add the selection as a 'To do' item. Selecting multiple lines will add multiple items.
+1. `TODO: Mark all as completed`
+   - Marks all the items in the 'To do' List as completed.
 
-### Pre requisites
+### Building the dependencies
 
-This example requires the VS Code version 1.46 or later.
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
 
-This extensions has the following commands:
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension^... build:dev
+```
 
-1. `TODO: Open list`
-   - Opens a Webview with the 'To do' list View.
-1. `TODO: Add item(s)`
-   - When there's a selected text in a text editor (e.g. `txt`) you can right-click it to add the selection as a 'To do' item.
-1. `TODO: Mark all as completed`
-   - Marks all the items in the 'To do' list as completed.
+### Building
 
-## Building
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm build:prod
+```
 
-Run `pnpm build:prod`. A `.vsix` file will be on the `dist` folder.
+A `.vsix` file will be on the `dist` folder. Drag it to the Extensions panel on VS Code to install it.
 
 ---
 
diff --git a/examples/todo-list-view-vscode-extension/env/index.js b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/env/index.js
similarity index 100%
rename from examples/todo-list-view-vscode-extension/env/index.js
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/env/index.js
diff --git a/examples/todo-list-view-vscode-extension/package.json b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/package.json
similarity index 78%
rename from examples/todo-list-view-vscode-extension/package.json
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/package.json
index 95347523c2e..94fe4dc60e7 100644
--- a/examples/todo-list-view-vscode-extension/package.json
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "kie-tools-examples-todo-list-view-vscode-extension",
+  "name": "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -17,19 +17,16 @@
   "scripts": {
     "build": "rimraf dist && webpack",
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
-    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm pack\"",
-    "compile": "pnpm build --env dev",
-    "pack": "vsce package --no-dependencies -o ./dist/kie_tools_examples_todo_list_view_$npm_package_version.vsix",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm build:vsix\"",
+    "build:vsix": "vsce package --allow-star-activation --no-dependencies -o ./dist/kie_tools_examples_todo_list_view_$npm_package_version.vsix",
     "watch": "export WEBPACK__sourceMaps=true; WEBPACK__minimize=false; webpack --env dev"
   },
-  "dependencies": {
-    "@kie-tools-core/envelope-bus": "workspace:*",
-    "@kie-tools-core/vscode-extension": "workspace:*",
-    "@kie-tools-examples/todo-list-view": "workspace:*"
-  },
   "devDependencies": {
+    "@kie-tools-core/envelope-bus": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/vscode-extension": "workspace:*",
     "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
     "@types/vscode": "1.67.0",
@@ -42,9 +39,9 @@
     "webpack-merge": "^5.9.0"
   },
   "engines": {
-    "vscode": "^1.67.0"
+    "vscode": "^1.75.0"
   },
-  "displayName": "Todo List View :: Kogito Examples ",
+  "displayName": "Apache KIE Tools Example :: 'To do' List View ",
   "categories": [
     "Other"
   ],
@@ -75,5 +72,6 @@
   },
   "activationEvents": [
     "*"
-  ]
+  ],
+  "icon": "./static/kie-logo-128x128.png"
 }
diff --git a/examples/todo-list-view-vscode-extension/src/envelope/index.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/TodoListViewEnvelope.ts
similarity index 90%
rename from examples/todo-list-view-vscode-extension/src/envelope/index.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/TodoListViewEnvelope.ts
index d859540535c..ca22ee63bb5 100644
--- a/examples/todo-list-view-vscode-extension/src/envelope/index.ts
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/TodoListViewEnvelope.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import * as TodoListViewEnvelope from "@kie-tools-examples/todo-list-view/dist/envelope";
+import * as TodoListViewEnvelope from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/envelope";
 
 declare global {
   export const acquireVsCodeApi: any;
diff --git a/examples/todo-list-view-vscode-extension/src/extension.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/extension.ts
similarity index 89%
rename from examples/todo-list-view-vscode-extension/src/extension.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/extension.ts
index 7236658fa95..b2676a69ac8 100644
--- a/examples/todo-list-view-vscode-extension/src/extension.ts
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/src/extension.ts
@@ -18,8 +18,8 @@
  */
 
 import * as vscode from "vscode";
-import { TodoListWebview } from "@kie-tools-examples/todo-list-view/dist/vscode";
-import { TodoListEnvelopeApi } from "@kie-tools-examples/todo-list-view/dist/api";
+import { TodoListWebview } from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/vscode";
+import { TodoListEnvelopeApi } from "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view/dist/api";
 import { MessageBusClientApi, SharedValueProvider } from "@kie-tools-core/envelope-bus/dist/api";
 
 const OPEN_TODO_LIST_VIEW_COMMAND_ID = "kie-tools-examples.todo-list-view";
@@ -37,8 +37,8 @@ export function activate(context: vscode.ExtensionContext) {
   const todoListWebview = new TodoListWebview(
     context,
     {
-      envelopePath: "dist/envelope/index.js",
-      title: "//TODO", // This is displayed as the title of the Webview tab.
+      envelopePath: "dist/todo-list-view-envelope.js",
+      title: "// TODO", // This is displayed as the title of the Webview tab.
       targetOrigin: "vscode",
     },
     {
@@ -92,7 +92,7 @@ export function activate(context: vscode.ExtensionContext) {
       }
 
       const selected = await vscode.window.showInformationMessage(
-        `'To do' list not open. Would you like to open it and add ${items.length} item(s)?`,
+        `'To do' List not open. Would you like to open it and add ${items.length} item(s)?`,
         "Yes!"
       );
 
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/static/kie-logo-128x128.png b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/static/kie-logo-128x128.png
new file mode 100644
index 00000000000..a30d98c9bac
Binary files /dev/null and b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/static/kie-logo-128x128.png differ
diff --git a/examples/todo-list-view-vscode-extension/tsconfig.json b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/tsconfig.json
similarity index 100%
rename from examples/todo-list-view-vscode-extension/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/tsconfig.json
diff --git a/examples/base64png-editor-vscode-extension/webpack.config.js b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/webpack.config.js
similarity index 93%
rename from examples/base64png-editor-vscode-extension/webpack.config.js
rename to examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/webpack.config.js
index 40755ee3aaf..e7853c3dcd7 100644
--- a/examples/base64png-editor-vscode-extension/webpack.config.js
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/webpack.config.js
@@ -24,7 +24,7 @@ const { merge } = require("webpack-merge");
 const commonConfig = (webpackEnv) =>
   merge(common(webpackEnv), {
     output: {
-      library: "VsCodePackSimpleReact",
+      library: "TodoListViewEntrypoint",
       libraryTarget: "umd",
       umdNamedDefine: true,
     },
@@ -44,7 +44,7 @@ module.exports = (webpackEnv) => [
   merge(commonConfig(webpackEnv), {
     target: "web",
     entry: {
-      "envelope/index": "./src/envelope/index.ts",
+      "todo-list-view-envelope": "./src/TodoListViewEnvelope.ts",
     },
     module: {
       rules: [...patternflyBase.webpackModuleRules],
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view/LICENSE b/examples/micro-frontends-multiplying-architecture-todo-list-view/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/todo-list-view/README.md b/examples/micro-frontends-multiplying-architecture-todo-list-view/README.md
similarity index 84%
rename from examples/todo-list-view/README.md
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/README.md
index 551cb698426..7944241e52d 100644
--- a/examples/todo-list-view/README.md
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view/README.md
@@ -15,23 +15,23 @@
    under the License.
 -->
 
-# 'To do' list View
+# Example :: Micro-frontends Multiplying Architecture :: 'To do' List View
 
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples-how-to-create-a-custom-view.html) a step-by-step tutorial of how this custom View was built.
+This package exposes the necessary files for you to create a 'To do' List Envelope.
 
-This package exposes the necessary files for you to create a 'To do' list Envelope.
-
-It's divided in the following submodules:
+It's divided in the following directories:
 
 1. `api`
    - Provides the APIs that the Channel/Envelope expose to each other.
 1. `embedded`
-   - Provides a convenience React component to embed a 'To do' list View in a Web application.
+   - Provides a convenience React component to embed a 'To do' List View in a Web application.
 1. `envelope`
-   - Provides the necessary class for a Channel to create a 'To do' list Envelope.
+   - Provides the necessary class for a Channel to create a 'To do' List Envelope.
 1. `vscode`
    - Provides a convenience class to create a Webview inside a VS Code Extension.
 
+To see it in action, refer to the ['To do' List views on Webapp](../micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/), or the ['To do' List VS Code Extension](../micro-frontends-multiplying-architecture-todo-list-view-vscode-extension/) examples.
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
diff --git a/examples/todo-list-view/env/index.js b/examples/micro-frontends-multiplying-architecture-todo-list-view/env/index.js
similarity index 100%
rename from examples/todo-list-view/env/index.js
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/env/index.js
diff --git a/examples/todo-list-view/package.json b/examples/micro-frontends-multiplying-architecture-todo-list-view/package.json
similarity index 93%
rename from examples/todo-list-view/package.json
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/package.json
index 40f71db6d94..2881c7b89e7 100644
--- a/examples/todo-list-view/package.json
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/todo-list-view",
+  "name": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/apache/incubator-kie-tools",
diff --git a/examples/todo-list-view/src/api/TodoListApi.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListApi.ts
similarity index 100%
rename from examples/todo-list-view/src/api/TodoListApi.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListApi.ts
diff --git a/examples/todo-list-view/src/api/TodoListChannelApi.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListChannelApi.ts
similarity index 100%
rename from examples/todo-list-view/src/api/TodoListChannelApi.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListChannelApi.ts
diff --git a/examples/todo-list-view/src/api/TodoListEnvelopeApi.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListEnvelopeApi.ts
similarity index 100%
rename from examples/todo-list-view/src/api/TodoListEnvelopeApi.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/TodoListEnvelopeApi.ts
diff --git a/examples/todo-list-view/src/api/index.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/index.ts
similarity index 100%
rename from examples/todo-list-view/src/api/index.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/api/index.ts
diff --git a/examples/todo-list-view/src/embedded/EmbeddedTodoList.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/embedded/EmbeddedTodoList.tsx
similarity index 100%
rename from examples/todo-list-view/src/embedded/EmbeddedTodoList.tsx
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/embedded/EmbeddedTodoList.tsx
diff --git a/examples/todo-list-view/src/embedded/index.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/embedded/index.ts
similarity index 100%
rename from examples/todo-list-view/src/embedded/index.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/embedded/index.ts
diff --git a/examples/todo-list-view/src/envelope/TodoListEnvelope.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelope.tsx
similarity index 100%
rename from examples/todo-list-view/src/envelope/TodoListEnvelope.tsx
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelope.tsx
diff --git a/examples/todo-list-view/src/envelope/TodoListEnvelopeApiImpl.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeApiImpl.ts
similarity index 100%
rename from examples/todo-list-view/src/envelope/TodoListEnvelopeApiImpl.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeApiImpl.ts
diff --git a/examples/todo-list-view/src/envelope/TodoListEnvelopeContext.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeContext.ts
similarity index 100%
rename from examples/todo-list-view/src/envelope/TodoListEnvelopeContext.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeContext.ts
diff --git a/examples/todo-list-view/src/envelope/TodoListEnvelopeView.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeView.tsx
similarity index 99%
rename from examples/todo-list-view/src/envelope/TodoListEnvelopeView.tsx
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeView.tsx
index d465c429ceb..172d5267a8a 100644
--- a/examples/todo-list-view/src/envelope/TodoListEnvelopeView.tsx
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/TodoListEnvelopeView.tsx
@@ -100,7 +100,7 @@ export const TodoListEnvelopeView = React.forwardRef<TodoListEnvelopeViewApi, Pr
 
           <hr />
 
-          <h2>{`Here's your 'To do' list:`}</h2>
+          <h2>{`Here's your 'To do' List:`}</h2>
 
           {(items.length <= 0 && !potentialNewItem && (
             <>
diff --git a/examples/todo-list-view/src/envelope/index.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/index.ts
similarity index 100%
rename from examples/todo-list-view/src/envelope/index.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/index.ts
diff --git a/examples/todo-list-view/src/envelope/styles.scss b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/styles.scss
similarity index 100%
rename from examples/todo-list-view/src/envelope/styles.scss
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/envelope/styles.scss
diff --git a/examples/todo-list-view/src/vscode/TodoListWebview.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/vscode/TodoListWebview.ts
similarity index 100%
rename from examples/todo-list-view/src/vscode/TodoListWebview.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/vscode/TodoListWebview.ts
diff --git a/examples/todo-list-view/src/vscode/index.ts b/examples/micro-frontends-multiplying-architecture-todo-list-view/src/vscode/index.ts
similarity index 100%
rename from examples/todo-list-view/src/vscode/index.ts
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/src/vscode/index.ts
diff --git a/examples/todo-list-view/tsconfig.json b/examples/micro-frontends-multiplying-architecture-todo-list-view/tsconfig.json
similarity index 100%
rename from examples/todo-list-view/tsconfig.json
rename to examples/micro-frontends-multiplying-architecture-todo-list-view/tsconfig.json
diff --git a/examples/jbpm-compact-architecture-example/.gitignore b/examples/process-compact-architecture/.gitignore
similarity index 100%
rename from examples/jbpm-compact-architecture-example/.gitignore
rename to examples/process-compact-architecture/.gitignore
diff --git a/examples/jbpm-compact-architecture-example/README.md b/examples/process-compact-architecture/README.md
similarity index 99%
rename from examples/jbpm-compact-architecture-example/README.md
rename to examples/process-compact-architecture/README.md
index 023619a615f..63b715b1d19 100644
--- a/examples/jbpm-compact-architecture-example/README.md
+++ b/examples/process-compact-architecture/README.md
@@ -15,7 +15,7 @@
    under the License.
 -->
 
-# jBPM Compact Architecture Quarkus Example
+# Example :: Process Compact Architecture
 
 This example showcases a basic implementation of a **Hiring** Process that drives a _Candidate_ through different
 interviews until they get hired. It features simple User Task orchestration including the use of DMN decisions to
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/docker-compose.yml b/examples/process-compact-architecture/docker-compose/docker-compose.yml
similarity index 93%
rename from examples/jbpm-compact-architecture-example/docker-compose/docker-compose.yml
rename to examples/process-compact-architecture/docker-compose/docker-compose.yml
index cf384b54fff..ba72a87b9de 100644
--- a/examples/jbpm-compact-architecture-example/docker-compose/docker-compose.yml
+++ b/examples/process-compact-architecture/docker-compose/docker-compose.yml
@@ -59,12 +59,15 @@ services:
       PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED: "False"
       GUNICORN_ACCESS_LOGFILE: "/dev/null"
 
-  jbpm-compact-architecture-example-service:
-    container_name: jbpm-compact-architecture-example-service
-    image: dev.local/${USER}/jbpm-compact-architecture-example-service:${PROJECT_VERSION}
+  process-compact-architecture-service:
+    container_name: process-compact-architecture-service
+    image: dev.local/${USER}/process-compact-architecture-service:${PROJECT_VERSION}
     profiles: ["example-only", "full"]
     ports:
       - "8080:8080"
+    depends_on:
+      postgres:
+        condition: service_healthy
     environment:
       QUARKUS_HTTP_CORS_ORIGINS: "/.*/"
       QUARKUS_DATASOURCE_JDBC_URL: "jdbc:postgresql://postgres:5432/kogito"
@@ -112,7 +115,7 @@ services:
     ports:
       - 8280:8080
     depends_on:
-      jbpm-compact-architecture-example-service:
+      process-compact-architecture-service:
         condition: service_started
       # keycloak:
       #   condition: service_healthy
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/keycloak/kogito-realm.json b/examples/process-compact-architecture/docker-compose/keycloak/kogito-realm.json
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docker-compose/keycloak/kogito-realm.json
rename to examples/process-compact-architecture/docker-compose/keycloak/kogito-realm.json
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/pgadmin/pgpass b/examples/process-compact-architecture/docker-compose/pgadmin/pgpass
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docker-compose/pgadmin/pgpass
rename to examples/process-compact-architecture/docker-compose/pgadmin/pgpass
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/pgadmin/servers.json b/examples/process-compact-architecture/docker-compose/pgadmin/servers.json
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docker-compose/pgadmin/servers.json
rename to examples/process-compact-architecture/docker-compose/pgadmin/servers.json
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/sql/init.sql b/examples/process-compact-architecture/docker-compose/sql/init.sql
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docker-compose/sql/init.sql
rename to examples/process-compact-architecture/docker-compose/sql/init.sql
diff --git a/examples/jbpm-compact-architecture-example/docker-compose/startContainers.sh b/examples/process-compact-architecture/docker-compose/startContainers.sh
similarity index 82%
rename from examples/jbpm-compact-architecture-example/docker-compose/startContainers.sh
rename to examples/process-compact-architecture/docker-compose/startContainers.sh
index 75f282c5f84..cd6397cd52f 100755
--- a/examples/jbpm-compact-architecture-example/docker-compose/startContainers.sh
+++ b/examples/process-compact-architecture/docker-compose/startContainers.sh
@@ -4,15 +4,15 @@ PROFILE="full"
 
 echo "This script requires this example's app to have been compiled with 'mvn clean package -Pcontainer'"
 echo "==="
-echo "Using profile '${PROFILE}'..."
 
 PROJECT_VERSION=$(cd ../ && mvn help:evaluate -Dexpression=project.version -q -DforceStdout)
 KOGITO_MANAGEMENT_CONSOLE_IMAGE=$(cd ../ && mvn help:evaluate -Dexpression=kogito.management-console.image -q -DforceStdout)
 
 if [ -n "$1" ]; then
-  if [[ ("$1" == "full") || ("$1" == "infra") || ("$1" == "example-only")]];
+        if [ "$1" = "full" ] || [ "$1" = "infra" ] || [ "$1" = "example-only" ];
   then
     PROFILE="$1"
+    echo "Using profile '${PROFILE}'..."
   else
     echo "Unknown docker profile '$1'. The supported profiles are:"
     echo "* 'infra': Use this profile to start only the minimum infrastructure to run the example (postgresql, data-index & jobs-service)."
@@ -26,10 +26,13 @@ echo "PROJECT_VERSION=${PROJECT_VERSION}" > ".env"
 echo "KOGITO_MANAGEMENT_CONSOLE_IMAGE=${KOGITO_MANAGEMENT_CONSOLE_IMAGE}" >> ".env"
 echo "COMPOSE_PROFILES='${PROFILE}'" >> ".env"
 
-if [ "$(uname)" == "Darwin" ]; then
+if [ "$(uname)" = "Darwin" ]; then
    echo "DOCKER_GATEWAY_HOST=kubernetes.docker.internal" >> ".env"
-elif [ "$(expr substr $(uname -s) 1 5)" == "Linux" ]; then
-   echo "DOCKER_GATEWAY_HOST=172.17.0.1" >> ".env"
+elif [ "$(expr substr $(uname -s) 1 5)" = "Linux" ]; then
+   echo "DOCKER_GATEWAY_HOST=172.17.0.1" >> ".env";
+else
+   echo "Unknown uname: $(uname)"
+   exit 1
 fi
 
 if [ ! -d "./svg" ]
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g1_1_mc_list.png b/examples/process-compact-architecture/docs/images/g1_1_mc_list.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g1_1_mc_list.png
rename to examples/process-compact-architecture/docs/images/g1_1_mc_list.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g1_2_mc_details.png b/examples/process-compact-architecture/docs/images/g1_2_mc_details.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g1_2_mc_details.png
rename to examples/process-compact-architecture/docs/images/g1_2_mc_details.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g1_3_mc_details_executed_job.png b/examples/process-compact-architecture/docs/images/g1_3_mc_details_executed_job.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g1_3_mc_details_executed_job.png
rename to examples/process-compact-architecture/docs/images/g1_3_mc_details_executed_job.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_10_mc_details_completed.png b/examples/process-compact-architecture/docs/images/g2_10_mc_details_completed.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_10_mc_details_completed.png
rename to examples/process-compact-architecture/docs/images/g2_10_mc_details_completed.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_1_mc_list.png b/examples/process-compact-architecture/docs/images/g2_1_mc_list.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_1_mc_list.png
rename to examples/process-compact-architecture/docs/images/g2_1_mc_list.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_2_mc_details.png b/examples/process-compact-architecture/docs/images/g2_2_mc_details.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_2_mc_details.png
rename to examples/process-compact-architecture/docs/images/g2_2_mc_details.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_3_tc_inbox.png b/examples/process-compact-architecture/docs/images/g2_3_tc_inbox.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_3_tc_inbox.png
rename to examples/process-compact-architecture/docs/images/g2_3_tc_inbox.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_4_tc_hr_form.png b/examples/process-compact-architecture/docs/images/g2_4_tc_hr_form.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_4_tc_hr_form.png
rename to examples/process-compact-architecture/docs/images/g2_4_tc_hr_form.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_5_tc_hr_form_notification.png b/examples/process-compact-architecture/docs/images/g2_5_tc_hr_form_notification.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_5_tc_hr_form_notification.png
rename to examples/process-compact-architecture/docs/images/g2_5_tc_hr_form_notification.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_6_mc_details.png b/examples/process-compact-architecture/docs/images/g2_6_mc_details.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_6_mc_details.png
rename to examples/process-compact-architecture/docs/images/g2_6_mc_details.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_7_tc_inbox.png b/examples/process-compact-architecture/docs/images/g2_7_tc_inbox.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_7_tc_inbox.png
rename to examples/process-compact-architecture/docs/images/g2_7_tc_inbox.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_8_tc_it_form.png b/examples/process-compact-architecture/docs/images/g2_8_tc_it_form.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_8_tc_it_form.png
rename to examples/process-compact-architecture/docs/images/g2_8_tc_it_form.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/g2_9_tc_inbox_empty.png b/examples/process-compact-architecture/docs/images/g2_9_tc_inbox_empty.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/g2_9_tc_inbox_empty.png
rename to examples/process-compact-architecture/docs/images/g2_9_tc_inbox_empty.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/generate_offer_assignments.png b/examples/process-compact-architecture/docs/images/generate_offer_assignments.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/generate_offer_assignments.png
rename to examples/process-compact-architecture/docs/images/generate_offer_assignments.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/hiring_diagram.png b/examples/process-compact-architecture/docs/images/hiring_diagram.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/hiring_diagram.png
rename to examples/process-compact-architecture/docs/images/hiring_diagram.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/hr_interview_assignments.png b/examples/process-compact-architecture/docs/images/hr_interview_assignments.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/hr_interview_assignments.png
rename to examples/process-compact-architecture/docs/images/hr_interview_assignments.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/it_interview_assignments.png b/examples/process-compact-architecture/docs/images/it_interview_assignments.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/it_interview_assignments.png
rename to examples/process-compact-architecture/docs/images/it_interview_assignments.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/mc_details_1.png b/examples/process-compact-architecture/docs/images/mc_details_1.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/mc_details_1.png
rename to examples/process-compact-architecture/docs/images/mc_details_1.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/mc_list.png b/examples/process-compact-architecture/docs/images/mc_list.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/mc_list.png
rename to examples/process-compact-architecture/docs/images/mc_list.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn.png b/examples/process-compact-architecture/docs/images/new_hiring_offer_dmn.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn.png
rename to examples/process-compact-architecture/docs/images/new_hiring_offer_dmn.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_decision.png b/examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_decision.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_decision.png
rename to examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_decision.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_types_tCandidateData.png b/examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_types_tCandidateData.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_types_tCandidateData.png
rename to examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_types_tCandidateData.png
diff --git a/examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_types_tOffer.png b/examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_types_tOffer.png
similarity index 100%
rename from examples/jbpm-compact-architecture-example/docs/images/new_hiring_offer_dmn_types_tOffer.png
rename to examples/process-compact-architecture/docs/images/new_hiring_offer_dmn_types_tOffer.png
diff --git a/examples/jbpm-compact-architecture-example/env/index.js b/examples/process-compact-architecture/env/index.js
similarity index 84%
rename from examples/jbpm-compact-architecture-example/env/index.js
rename to examples/process-compact-architecture/env/index.js
index 16c5c38a4fe..62de002f4d2 100644
--- a/examples/jbpm-compact-architecture-example/env/index.js
+++ b/examples/process-compact-architecture/env/index.js
@@ -25,15 +25,17 @@ const {
 
 module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({
-    JBPM_COMPACT_ARCHITECTURE_EXAMPLE__managementConsoleImage: {
+    KIE_TOOLS_EXAMPLE__PROCESS_COMPACT_ARCHITECTURE__managementConsoleImage: {
       default: `${kogitoManagementConsoleImageEnv.registry}/${kogitoManagementConsoleImageEnv.account}/${kogitoManagementConsoleImageEnv.name}:${kogitoManagementConsoleImageEnv.buildTag}`,
       description: "The image for the Kogito Management Console.",
     },
   }),
   get env() {
     return {
-      jbpmCompactArchitectureExample: {
-        kogitoManagementConsoleImage: getOrDefault(this.vars.JBPM_COMPACT_ARCHITECTURE_EXAMPLE__managementConsoleImage),
+      processCompactArchitectureExample: {
+        kogitoManagementConsoleImage: getOrDefault(
+          this.vars.KIE_TOOLS_EXAMPLE__PROCESS_COMPACT_ARCHITECTURE__managementConsoleImage
+        ),
         version: require("../package.json").version,
       },
     };
diff --git a/examples/jbpm-compact-architecture-example/install.js b/examples/process-compact-architecture/install.js
similarity index 88%
rename from examples/jbpm-compact-architecture-example/install.js
rename to examples/process-compact-architecture/install.js
index bfd7bde0f2b..e29e19645af 100644
--- a/examples/jbpm-compact-architecture-example/install.js
+++ b/examples/process-compact-architecture/install.js
@@ -21,11 +21,11 @@ const { env } = require("./env");
 const { setupMavenConfigFile, setPomProperty, buildTailFromPackageJsonDependencies } = require("@kie-tools/maven-base");
 
 setupMavenConfigFile(`
-    -Drevision=${env.jbpmCompactArchitectureExample.version}
+    -Drevision=${env.processCompactArchitectureExample.version}
     -Dmaven.repo.local.tail=${buildTailFromPackageJsonDependencies()}
 `);
 
 setPomProperty({
   key: "kogito.management-console.image",
-  value: env.jbpmCompactArchitectureExample.kogitoManagementConsoleImage,
+  value: env.processCompactArchitectureExample.kogitoManagementConsoleImage,
 });
diff --git a/examples/jbpm-compact-architecture-example/package.json b/examples/process-compact-architecture/package.json
similarity index 96%
rename from examples/jbpm-compact-architecture-example/package.json
rename to examples/process-compact-architecture/package.json
index fa0b790d13d..90b98514ef3 100644
--- a/examples/jbpm-compact-architecture-example/package.json
+++ b/examples/process-compact-architecture/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/jbpm-compact-architecture-example",
+  "name": "@kie-tools-examples/process-compact-architecture",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
diff --git a/examples/jbpm-compact-architecture-example/pom.xml b/examples/process-compact-architecture/pom.xml
similarity index 97%
rename from examples/jbpm-compact-architecture-example/pom.xml
rename to examples/process-compact-architecture/pom.xml
index 721cefe1819..5e0ada93498 100644
--- a/examples/jbpm-compact-architecture-example/pom.xml
+++ b/examples/process-compact-architecture/pom.xml
@@ -30,10 +30,10 @@
     <relativePath>./node_modules/@kie-tools/maven-base/pom.xml</relativePath>
   </parent>
 
-  <artifactId>jbpm-compact-architecture-quarkus-example</artifactId>
+  <artifactId>process-compact-architecture</artifactId>
   <version>${revision}</version>
 
-  <name>KIE Tools :: Example :: jBPM Compact Architecture Quarkus Example</name>
+  <name>KIE Tools :: Example :: Process Compact Architecture</name>
 
   <properties>
     <kogito.management-console.image
diff --git a/examples/drools-process-usertasks-quarkus-example/drools-process-usertasks-quarkus-example.iml b/examples/process-compact-architecture/process-compact-architecture.iml
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/drools-process-usertasks-quarkus-example.iml
rename to examples/process-compact-architecture/process-compact-architecture.iml
diff --git a/examples/jbpm-compact-architecture-example/src/main/java/org/kie/kogito/hr/CandidateData.java b/examples/process-compact-architecture/src/main/java/org/kie/kogito/hr/CandidateData.java
similarity index 100%
rename from examples/jbpm-compact-architecture-example/src/main/java/org/kie/kogito/hr/CandidateData.java
rename to examples/process-compact-architecture/src/main/java/org/kie/kogito/hr/CandidateData.java
diff --git a/examples/jbpm-compact-architecture-example/src/main/java/org/kie/kogito/hr/Offer.java b/examples/process-compact-architecture/src/main/java/org/kie/kogito/hr/Offer.java
similarity index 100%
rename from examples/jbpm-compact-architecture-example/src/main/java/org/kie/kogito/hr/Offer.java
rename to examples/process-compact-architecture/src/main/java/org/kie/kogito/hr/Offer.java
diff --git a/examples/jbpm-compact-architecture-example/src/main/resources/META-INF/processSVG/hiring.svg b/examples/process-compact-architecture/src/main/resources/META-INF/processSVG/hiring.svg
similarity index 100%
rename from examples/jbpm-compact-architecture-example/src/main/resources/META-INF/processSVG/hiring.svg
rename to examples/process-compact-architecture/src/main/resources/META-INF/processSVG/hiring.svg
diff --git a/examples/jbpm-compact-architecture-example/src/main/resources/NewHiringOffer.dmn b/examples/process-compact-architecture/src/main/resources/NewHiringOffer.dmn
similarity index 100%
rename from examples/jbpm-compact-architecture-example/src/main/resources/NewHiringOffer.dmn
rename to examples/process-compact-architecture/src/main/resources/NewHiringOffer.dmn
diff --git a/examples/process-compact-architecture/src/main/resources/application.properties b/examples/process-compact-architecture/src/main/resources/application.properties
new file mode 100644
index 00000000000..b8fed9c6a26
--- /dev/null
+++ b/examples/process-compact-architecture/src/main/resources/application.properties
@@ -0,0 +1,107 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you 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.
+#
+
+###############
+# Persistence #
+###############
+
+# Apache KIE provides a separate Flyway subsystem that allows Kogito's internal tables to be created and migrated
+# without interfering with your application's Flyway, if you're using it.
+#
+# This property enables running this isolated Flyway mechanism automatically when the application starts.
+# If you want more control over when/how/who executes changes to your database, disable it and run the SQL scripts manually.
+kie.flyway.enabled=true
+
+# Tells the Kogito runtime what kind of persistence is configured.
+kogito.persistence.type=jdbc
+
+# Default DS
+quarkus.datasource.db-kind=postgresql
+quarkus.datasource.username=kogito-user
+quarkus.datasource.password=kogito-pass
+quarkus.datasource.jdbc.url=${QUARKUS_DATASOURCE_JDBC_URL:jdbc:postgresql://0.0.0.0:5432/kogito}
+quarkus.datasource.reactive.url=${QUARKUS_DATASOURCE_REACTIVE_URL:postgresql://0.0.0.0:5432/kogito}
+
+# Development DS
+%dev.quarkus.datasource.db-kind=h2
+%dev.quarkus.datasource.username=kogito
+%dev.quarkus.datasource.jdbc.url=jdbc:h2:mem:default;NON_KEYWORDS=VALUE,KEY
+
+
+
+
+############
+# Security #
+############
+
+# Keeping it disabled for simplicity.
+
+quarkus.oidc.enabled=false
+kogito.auth.enabled=false
+
+
+
+
+####################
+# Containerization #
+####################
+
+# Profile to pack this example into a container image.
+# To use it run a Maven build with the `container` profile (-Pcontainer)
+
+%container.quarkus.container-image.build=true
+%container.quarkus.container-image.push=false
+%container.quarkus.container-image.group=${USER}
+%container.quarkus.container-image.registry=dev.local
+%container.quarkus.container-image.tag=${project.version}
+%container.quarkus.container-image.name=process-compact-architecture-service
+
+
+
+
+############
+# Services #
+############
+
+# These properties are residual from Distributed Architecture, where Data-Index, Data-Audit,
+# and Jobs Service are external to the Kogito Runtime application.
+#
+# They are still necessary, but won't be anymore in future releases.
+
+kogito.service.url=http://0.0.0.0:8080
+kogito.jobs-service.url=http://0.0.0.0:8080
+kogito.data-index.url=http://0.0.0.0:8080
+
+
+
+###############
+# Development #
+###############
+
+# Swagger Dev UI configuration.
+# More at https://quarkus.io/guides/openapi-swaggerui
+
+quarkus.http.cors=true
+quarkus.http.cors.origins=*
+quarkus.dev-ui.cors.enabled=false
+quarkus.smallrye-openapi.path=/docs/openapi.json
+quarkus.http.test-port=0
+quarkus.swagger-ui.always-include=true
+quarkus.kogito.data-index.graphql.ui.always-include=true
+
diff --git a/examples/jbpm-compact-architecture-example/src/main/resources/hiring.bpmn b/examples/process-compact-architecture/src/main/resources/hiring.bpmn
similarity index 100%
rename from examples/jbpm-compact-architecture-example/src/main/resources/hiring.bpmn
rename to examples/process-compact-architecture/src/main/resources/hiring.bpmn
diff --git a/examples/drools-process-usertasks-quarkus-example/README.md b/examples/process-user-tasks-subsystem/README.md
similarity index 97%
rename from examples/drools-process-usertasks-quarkus-example/README.md
rename to examples/process-user-tasks-subsystem/README.md
index 738062acc7f..5273b1702b2 100644
--- a/examples/drools-process-usertasks-quarkus-example/README.md
+++ b/examples/process-user-tasks-subsystem/README.md
@@ -15,11 +15,9 @@
    under the License.
 -->
 
-# Process user task orchestration
+# Example :: Process User Task Subsystem
 
-## Description
-
-A quickstart project shows very typical user task orchestration. It comes with two tasks assigned
+A quickstart project shows very typical User Task orchestration. It comes with two tasks assigned
 to human actors via groups assignments - `managers`. So essentially anyone who is a member of that
 group can act on the tasks. Though this example applies four eye principle which essentially means
 that user who approved first task cannot approve second one. So there must be always at least two
@@ -27,7 +25,7 @@ distinct manager involved.
 
 This example shows
 
-- working with user tasks
+- working with User Tasks
 - four eye principle with user tasks
 
 <p align="center"><img width=75% height=50% src="docs/images/process.png"></p>
@@ -59,13 +57,13 @@ This example shows
 
 You will need:
 
-- Java 17+ installed
+- Java 17 installed
 - Environment variable JAVA_HOME set accordingly
-- Maven 3.9.6+ installed
+- Maven 3.9.6 installed
 
 When using native image compilation, you will also need:
 
-- GraalVM 19.3+ installed
+- GraalVM 20.3+ installed
 - Environment variable GRAALVM_HOME set accordingly
 - GraalVM native image needs as well native-image extension: https://www.graalvm.org/reference-manual/native-image/
 - Note that GraalVM native image compilation typically requires other packages (glibc-devel, zlib-devel and gcc) to be installed too, please refer to GraalVM installation documentation for more details.
@@ -85,7 +83,7 @@ mvn clean package
 java -jar target/quarkus-app/quarkus-run.jar
 ```
 
-or on windows
+or on Windows
 
 ```sh
 mvn clean package
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/diagramProperties.png b/examples/process-user-tasks-subsystem/docs/images/diagramProperties.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/diagramProperties.png
rename to examples/process-user-tasks-subsystem/docs/images/diagramProperties.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/diagramProperties3.png b/examples/process-user-tasks-subsystem/docs/images/diagramProperties3.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/diagramProperties3.png
rename to examples/process-user-tasks-subsystem/docs/images/diagramProperties3.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTask.png b/examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTask.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTask.png
rename to examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTask.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTask2.png b/examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTask2.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTask2.png
rename to examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTask2.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTaskAssignments.png b/examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTaskAssignments.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/firstLineApprovalUserTaskAssignments.png
rename to examples/process-user-tasks-subsystem/docs/images/firstLineApprovalUserTaskAssignments.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/process.png b/examples/process-user-tasks-subsystem/docs/images/process.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/process.png
rename to examples/process-user-tasks-subsystem/docs/images/process.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/secondLineApprovalUserTask.png b/examples/process-user-tasks-subsystem/docs/images/secondLineApprovalUserTask.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/secondLineApprovalUserTask.png
rename to examples/process-user-tasks-subsystem/docs/images/secondLineApprovalUserTask.png
diff --git a/examples/drools-process-usertasks-quarkus-example/docs/images/secondLineApprovalUserTaskAssignments.png b/examples/process-user-tasks-subsystem/docs/images/secondLineApprovalUserTaskAssignments.png
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/docs/images/secondLineApprovalUserTaskAssignments.png
rename to examples/process-user-tasks-subsystem/docs/images/secondLineApprovalUserTaskAssignments.png
diff --git a/examples/drools-process-usertasks-quarkus-example/env/index.js b/examples/process-user-tasks-subsystem/env/index.js
similarity index 95%
rename from examples/drools-process-usertasks-quarkus-example/env/index.js
rename to examples/process-user-tasks-subsystem/env/index.js
index e1ec81e83c6..1fd83fb296a 100644
--- a/examples/drools-process-usertasks-quarkus-example/env/index.js
+++ b/examples/process-user-tasks-subsystem/env/index.js
@@ -23,7 +23,7 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({}),
   get env() {
     return {
-      droolsProcessUsertasksQuarkusExample: {
+      processUserTasksSubsystemExample: {
         version: require("../package.json").version,
       },
     };
diff --git a/examples/drools-process-usertasks-quarkus-example/install.js b/examples/process-user-tasks-subsystem/install.js
similarity index 93%
rename from examples/drools-process-usertasks-quarkus-example/install.js
rename to examples/process-user-tasks-subsystem/install.js
index 9047ff62eb3..6eac36b23be 100644
--- a/examples/drools-process-usertasks-quarkus-example/install.js
+++ b/examples/process-user-tasks-subsystem/install.js
@@ -21,6 +21,6 @@ const { env } = require("./env");
 const { setupMavenConfigFile, buildTailFromPackageJsonDependencies } = require("@kie-tools/maven-base");
 
 setupMavenConfigFile(`
-    -Drevision=${env.droolsProcessUsertasksQuarkusExample.version}
+    -Drevision=${env.processUserTasksSubsystemExample.version}
     -Dmaven.repo.local.tail=${buildTailFromPackageJsonDependencies()}
 `);
diff --git a/examples/drools-process-usertasks-quarkus-example/package.json b/examples/process-user-tasks-subsystem/package.json
similarity index 79%
rename from examples/drools-process-usertasks-quarkus-example/package.json
rename to examples/process-user-tasks-subsystem/package.json
index 69e5cb74f1e..b0e01cf2aac 100644
--- a/examples/drools-process-usertasks-quarkus-example/package.json
+++ b/examples/process-user-tasks-subsystem/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/drools-process-usertasks-quarkus-example",
+  "name": "@kie-tools-examples/process-user-tasks-subsystem",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -15,17 +15,14 @@
   "scripts": {
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then run-script-os",
     "build:dev:darwin:linux": "mvn clean compile -DskipTests",
-    "build:dev:win32": "pnpm powershell \"mvn clean compile -DskipTests \"",
+    "build:dev:win32": "pnpm powershell \"mvn clean compile `-DskipTests\"",
     "build:prod": "pnpm lint && run-script-if --bool \"$(build-env examples.build)\" --then run-script-os",
     "build:prod:darwin:linux": "mvn clean compile -DskipTests=$(build-env tests.run --not) -Dmaven.test.failure.ignore=$(build-env tests.ignoreFailures)",
     "build:prod:win32": "pnpm powershell \"mvn clean compile `-DskipTests `-Dmaven.test.failure.ignore=$(build-env tests.ignoreFailures)\"",
     "install": "node install.js",
     "lint": "echo 'Linting'",
     "powershell": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command",
-    "quarkus:dev": "run-script-os",
-    "quarkus:dev:darwin:linux": "mvn clean compile quarkus:dev -DskipTests",
-    "quarkus:dev:win32": "mvn clean compile quarkus:dev -DskipTests",
-    "start": "pnpm quarkus:dev"
+    "start": "mvn quarkus:dev"
   },
   "dependencies": {
     "@kie-tools/jbpm-quarkus-devui": "workspace:*",
diff --git a/examples/drools-process-usertasks-quarkus-example/pom.xml b/examples/process-user-tasks-subsystem/pom.xml
similarity index 94%
rename from examples/drools-process-usertasks-quarkus-example/pom.xml
rename to examples/process-user-tasks-subsystem/pom.xml
index d36d3324e38..2d23e19cbb9 100644
--- a/examples/drools-process-usertasks-quarkus-example/pom.xml
+++ b/examples/process-user-tasks-subsystem/pom.xml
@@ -30,11 +30,10 @@
     <relativePath>./node_modules/@kie-tools/maven-base/pom.xml</relativePath>
   </parent>
 
-  <artifactId>drools-process-usertasks-quarkus-example</artifactId>
+  <artifactId>process-user-tasks-subsystem</artifactId>
   <version>${revision}</version>
 
-  <name>KIE Tools :: Example :: Process with Usertasks Quarkus</name>
-  <description>Kogito user tasks orchestration - Quarkus</description>
+  <name>KIE Tools :: Example :: Process User Tasks Subsystem</name>
 
   <dependencies>
     <dependency>
diff --git a/examples/jbpm-compact-architecture-example/jbpm-compact-architecture-quarkus-example.iml b/examples/process-user-tasks-subsystem/process-user-tasks-subsystem.iml
similarity index 100%
rename from examples/jbpm-compact-architecture-example/jbpm-compact-architecture-quarkus-example.iml
rename to examples/process-user-tasks-subsystem/process-user-tasks-subsystem.iml
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.jvm b/examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.jvm
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.jvm
rename to examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.jvm
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.native b/examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.native
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/docker/Dockerfile.native
rename to examples/process-user-tasks-subsystem/src/main/docker/Dockerfile.native
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/java/org/acme/travels/Address.java b/examples/process-user-tasks-subsystem/src/main/java/org/acme/travels/Address.java
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/java/org/acme/travels/Address.java
rename to examples/process-user-tasks-subsystem/src/main/java/org/acme/travels/Address.java
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/java/org/acme/travels/Traveller.java b/examples/process-user-tasks-subsystem/src/main/java/org/acme/travels/Traveller.java
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/java/org/acme/travels/Traveller.java
rename to examples/process-user-tasks-subsystem/src/main/java/org/acme/travels/Traveller.java
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/resources/META-INF/processSVG/approvals.svg b/examples/process-user-tasks-subsystem/src/main/resources/META-INF/processSVG/approvals.svg
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/resources/META-INF/processSVG/approvals.svg
rename to examples/process-user-tasks-subsystem/src/main/resources/META-INF/processSVG/approvals.svg
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/resources/application.properties b/examples/process-user-tasks-subsystem/src/main/resources/application.properties
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/resources/application.properties
rename to examples/process-user-tasks-subsystem/src/main/resources/application.properties
diff --git a/examples/drools-process-usertasks-quarkus-example/src/main/resources/org/acme/travels/approval.bpmn b/examples/process-user-tasks-subsystem/src/main/resources/org/acme/travels/approval.bpmn
similarity index 100%
rename from examples/drools-process-usertasks-quarkus-example/src/main/resources/org/acme/travels/approval.bpmn
rename to examples/process-user-tasks-subsystem/src/main/resources/org/acme/travels/approval.bpmn
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/LICENSE b/examples/serverless-workflow-editor-standalone-on-webapp/LICENSE
new file mode 100644
index 00000000000..261eeb9e9f8
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/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 [yyyy] [name of copyright owner]
+
+   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.
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/README.md b/examples/serverless-workflow-editor-standalone-on-webapp/README.md
new file mode 100644
index 00000000000..eb73aa177f4
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/README.md
@@ -0,0 +1,60 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you 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.
+-->
+
+# Example :: Serverless Workflow Editor (standalone) on webapp
+
+This package contains a web application that features the Serverless Workflow Editor (standalone).
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/serverless-workflow-editor-standalone-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/env/index.js b/examples/serverless-workflow-editor-standalone-on-webapp/env/index.js
new file mode 100644
index 00000000000..b5fd0a5ef3d
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/env/index.js
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {
+      serverlessWorkflowEditorStandaloneOnWebappExample: {
+        port: 7777,
+      },
+    };
+  },
+});
diff --git a/examples/webapp/package.json b/examples/serverless-workflow-editor-standalone-on-webapp/package.json
similarity index 61%
rename from examples/webapp/package.json
rename to examples/serverless-workflow-editor-standalone-on-webapp/package.json
index 93bda30443c..5aa31ee8b28 100644
--- a/examples/webapp/package.json
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/webapp",
+  "name": "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp",
   "version": "0.0.0",
   "license": "Apache-2.0",
   "scripts": {
@@ -9,40 +9,24 @@
     "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
     "start": "webpack serve --host 0.0.0.0 --env dev"
   },
-  "dependencies": {
+  "devDependencies": {
     "@kie-tools-core/editor": "workspace:*",
     "@kie-tools-core/envelope-bus": "workspace:*",
-    "@kie-tools-core/monaco-editor": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools-core/react-hooks": "workspace:*",
-    "@kie-tools-examples/base64png-editor": "workspace:*",
-    "@kie-tools-examples/ping-pong-view": "workspace:*",
-    "@kie-tools-examples/ping-pong-view-angular": "workspace:*",
-    "@kie-tools-examples/ping-pong-view-react": "workspace:*",
-    "@kie-tools-examples/todo-list-view": "workspace:*",
-    "@kie-tools/dmn-editor": "workspace:*",
-    "@kie-tools/dmn-editor-envelope": "workspace:*",
-    "@kie-tools/dmn-editor-standalone": "workspace:*",
-    "@kie-tools/kie-bc-editors": "workspace:*",
-    "@kie-tools/kie-editors-standalone": "workspace:*",
-    "@kie-tools/serverless-workflow-standalone-editor": "workspace:*",
-    "@patternfly/react-core": "^4.276.6",
-    "@patternfly/react-icons": "^4.93.6",
-    "monaco-editor": "^0.39.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
     "@kie-tools-core/webpack-base": "workspace:*",
     "@kie-tools/root-env": "workspace:*",
-    "@kie-tools/stunner-editors": "workspace:*",
+    "@kie-tools/serverless-workflow-standalone-editor": "workspace:*",
     "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "copy-webpack-plugin": "^11.0.0",
-    "process": "^0.11.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "rimraf": "^3.0.2",
     "typescript": "^5.5.3",
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx
new file mode 100644
index 00000000000..be3201603f5
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx
@@ -0,0 +1,103 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
+import { SwfStandaloneEditorPage } from "./Pages/SwfStandaloneEditorPage";
+import { SwfStandaloneDiagramOnlyEditorPage } from "./Pages/SwfStandaloneDiagramOnlyEditorPage";
+import { SwfStandaloneTextOnlyEditorPage } from "./Pages/SwfStandaloneTextOnlyEditorPage";
+
+enum Location {
+  SWF_STANDALONE_EDITOR = "/page/swf-standalone-editor",
+  SWF_STANDALONE_EDITOR_DIAGRAM_ONLY = "/page/swf-standalone-editor-diagram-only",
+  SWF_STANDALONE_EDITOR_TEXT_ONLY = "/page/swf-standalone-editor-text-only",
+  HOME = "/",
+}
+
+export function App() {
+  /**
+   * State which determines what is the current route.
+   */
+  const [location, setLocation] = useState(Location.HOME);
+
+  /**
+   * On the first render, the location state is determined by the current URL.
+   */
+  useEffect(() => {
+    setLocation(window.location.hash.slice(1) as Location); //Remove trailing '#' from route to match the Location enum.
+  }, []);
+
+  return (
+    <Router>
+      <Page
+        header={
+          <PageHeader
+            logo={<Brand src={"logo.png"} alt="Logo" />}
+            topNav={
+              <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+                <NavList>
+                  <NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
+                    <Link to={Location.HOME}>Home</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.SWF_STANDALONE_EDITOR}
+                    isActive={location === Location.SWF_STANDALONE_EDITOR}
+                  >
+                    <Link to={Location.SWF_STANDALONE_EDITOR}>Serverless Workflow Editor (standalone)</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}
+                    isActive={location === Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}
+                  >
+                    <Link to={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}>Diagram only</Link>
+                  </NavItem>
+                  <NavItem
+                    itemId={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}
+                    isActive={location === Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}
+                  >
+                    <Link to={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}>Text only</Link>
+                  </NavItem>
+                </NavList>
+              </Nav>
+            }
+          />
+        }
+      >
+        <Switch>
+          <Route exact={true} path={"/"}>
+            <p>Select a page</p>
+          </Route>
+          <Route path={Location.SWF_STANDALONE_EDITOR}>
+            <SwfStandaloneEditorPage />
+          </Route>
+          <Route path={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}>
+            <SwfStandaloneDiagramOnlyEditorPage />
+          </Route>
+          <Route path={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}>
+            <SwfStandaloneTextOnlyEditorPage />
+          </Route>
+        </Switch>
+      </Page>
+    </Router>
+  );
+}
diff --git a/examples/webapp/src/Pages/StandaloneEditors/SwfEditorEmptyState.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx
similarity index 100%
rename from examples/webapp/src/Pages/StandaloneEditors/SwfEditorEmptyState.tsx
rename to examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx
diff --git a/examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneDiagramOnlyEditorPage.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneDiagramOnlyEditorPage.tsx
similarity index 94%
rename from examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneDiagramOnlyEditorPage.tsx
rename to examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneDiagramOnlyEditorPage.tsx
index 3352a83658c..4343ca9fa5f 100644
--- a/examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneDiagramOnlyEditorPage.tsx
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneDiagramOnlyEditorPage.tsx
@@ -37,9 +37,8 @@ export const SwfStandaloneDiagramOnlyEditorPage = () => {
   const [editor, setEditor] = useState<StandaloneEditorApi>();
 
   const onSetContent = useCallback((normalizedPosixPathRelativeToTheWorkspaceRoot: string, content: string) => {
-    const match = /\.sw\.(json|yaml)$/.exec(normalizedPosixPathRelativeToTheWorkspaceRoot.toLowerCase());
-    const dotExtension = match ? match[0] : extname(normalizedPosixPathRelativeToTheWorkspaceRoot);
-    const extension = dotExtension.slice(1);
+    const match = /\.sw\.(json|yaml|yml)$/.exec(normalizedPosixPathRelativeToTheWorkspaceRoot.toLowerCase());
+    const extension = match ? match[1] : extname(normalizedPosixPathRelativeToTheWorkspaceRoot);
 
     const editorApi = SwfEditor.open({
       container: swfEditorContainer.current!,
diff --git a/examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneEditorPage.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneEditorPage.tsx
similarity index 100%
rename from examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneEditorPage.tsx
rename to examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneEditorPage.tsx
diff --git a/examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneTextOnlyEditorPage.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneTextOnlyEditorPage.tsx
similarity index 100%
rename from examples/webapp/src/Pages/StandaloneEditors/SwfStandaloneTextOnlyEditorPage.tsx
rename to examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfStandaloneTextOnlyEditorPage.tsx
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/src/index.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/index.tsx
new file mode 100644
index 00000000000..635c5eed1fe
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/src/index.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+import "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { App } from "./App";
+
+ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/static/index.html b/examples/serverless-workflow-editor-standalone-on-webapp/static/index.html
new file mode 100644
index 00000000000..54a2dc1ecf5
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/static/index.html
@@ -0,0 +1,32 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you 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.      
+-->
+
+<!doctype html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <title>Apache KIE Tools Examples :: Serverless Workflow Editor (standalone) on webapp</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="app" style="height: 100vh"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/static/logo.png b/examples/serverless-workflow-editor-standalone-on-webapp/static/logo.png
new file mode 100644
index 00000000000..36915163541
Binary files /dev/null and b/examples/serverless-workflow-editor-standalone-on-webapp/static/logo.png differ
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/tsconfig.json b/examples/serverless-workflow-editor-standalone-on-webapp/tsconfig.json
new file mode 100644
index 00000000000..1b3b39a27fd
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@kie-tools/tsconfig/tsconfig.esm.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/webpack.config.js b/examples/serverless-workflow-editor-standalone-on-webapp/webpack.config.js
new file mode 100644
index 00000000000..b5048decb7f
--- /dev/null
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/webpack.config.js
@@ -0,0 +1,51 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const patternflyBase = require("@kie-tools-core/patternfly-base");
+const common = require("@kie-tools-core/webpack-base/webpack.common.config");
+const { merge } = require("webpack-merge");
+const { env } = require("./env");
+
+module.exports = (webpackEnv) => [
+  merge(common(webpackEnv), {
+    entry: {
+      index: "./src/index.tsx",
+    },
+    output: {
+      publicPath: "/",
+    },
+    module: {
+      rules: [...patternflyBase.webpackModuleRules],
+    },
+    plugins: [
+      new CopyPlugin({
+        patterns: [{ from: "./static", to: "." }],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: false,
+      static: [{ directory: path.join(__dirname, "./dist") }, { directory: path.join(__dirname, "./static") }],
+      compress: true,
+      port: env.serverlessWorkflowEditorStandaloneOnWebappExample.port,
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  }),
+];
diff --git a/examples/sonataflow-greeting-quarkus-example/README.md b/examples/sonataflow-greeting/README.md
similarity index 90%
rename from examples/sonataflow-greeting-quarkus-example/README.md
rename to examples/sonataflow-greeting/README.md
index 0355e2a45bd..690e9005cbe 100644
--- a/examples/sonataflow-greeting-quarkus-example/README.md
+++ b/examples/sonataflow-greeting/README.md
@@ -15,17 +15,14 @@
    under the License.
 -->
 
-# KIE-Tools SonataFlow - Greeting Example
-
-## Description
+# Example :: SonataFlow Greeting
 
 This example contains two simple greeting workflow services.
 The services are described using both JSON and YAML formats as defined in the
-[CNCF Serverless Workflow specification](https://github.com/cncf/wg-serverless/tree/main/workflow/spec).
+[CNCF Serverless Workflow specification](https://github.com/serverlessworkflow/specification).
 
 The workflow expects as JSON input containing the name of the person to greet, and the language in
-which to greet them in
-(see details in the [Submit a request](#Submit-a-request) section).
+which to greet them in (see details in the [Submit a request](#Submit-a-request) section).
 
 The workflow starts with a SWITCH state, which is like a gateway. The switch state
 decides which language to greet the person in based on the workflow input "language" parameter.
@@ -42,13 +39,13 @@ The function then prints out the greeting to the console.
 
 You will need:
 
-- Java 11+ installed
+- Java 17 installed
 - Environment variable JAVA_HOME set accordingly
-- Maven 3.8.6+ installed
+- Maven 3.9.6 installed
 
 When using native image compilation, you will also need:
 
-- [GraalVm](https://www.graalvm.org/downloads/) 19.3.1+ installed
+- [GraalVM](https://www.graalvm.org/downloads/) 20.3+ installed
 - Environment variable GRAALVM_HOME set accordingly
 - Note that GraalVM native image compilation typically requires other packages (glibc-devel, zlib-devel and gcc) to be installed too. You also need 'native-image' installed in GraalVM (using 'gu install native-image'). Please refer to [GraalVM installation documentation](https://www.graalvm.org/docs/reference-manual/aot-compilation/#prerequisites) for more details.
 
@@ -65,7 +62,7 @@ mvn clean package
 java -jar target/quarkus-app/quarkus-run.jar
 ```
 
-or on windows
+or on Windows
 
 ```sh
 mvn clean package
@@ -164,10 +161,6 @@ Hello from YAML Workflow, John
 
 You can also change the language parameter value to "Spanish" to get the greeting in Spanish.
 
-## Deploying with Kogito Operator
-
-In the [`operator`](operator) directory you'll find the custom resources needed to deploy this example on OpenShift with the [Kogito Operator](https://docs.jboss.org/kogito/release/latest/html_single/#chap_kogito-deploying-on-openshift).
-
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
diff --git a/examples/sonataflow-greeting-quarkus-example/env/index.js b/examples/sonataflow-greeting/env/index.js
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/env/index.js
rename to examples/sonataflow-greeting/env/index.js
diff --git a/examples/sonataflow-greeting-quarkus-example/install.js b/examples/sonataflow-greeting/install.js
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/install.js
rename to examples/sonataflow-greeting/install.js
diff --git a/examples/sonataflow-greeting-quarkus-example/package.json b/examples/sonataflow-greeting/package.json
similarity index 79%
rename from examples/sonataflow-greeting-quarkus-example/package.json
rename to examples/sonataflow-greeting/package.json
index 8bbc73a79cf..08eaa576fff 100644
--- a/examples/sonataflow-greeting-quarkus-example/package.json
+++ b/examples/sonataflow-greeting/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@kie-tools-examples/sonataflow-greeting-quarkus-example",
+  "name": "@kie-tools-examples/sonataflow-greeting",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -15,17 +15,14 @@
   "scripts": {
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then run-script-os",
     "build:dev:darwin:linux": "mvn clean package -DskipTests",
-    "build:dev:win32": "pnpm powershell \"mvn clean package -DskipTests \"",
+    "build:dev:win32": "pnpm powershell \"mvn clean package `-DskipTests\"",
     "build:prod": "pnpm lint && run-script-if --bool \"$(build-env examples.build)\" --then run-script-os",
     "build:prod:darwin:linux": "mvn clean package -DskipTests=$(build-env tests.run --not) -Dmaven.test.failure.ignore=$(build-env tests.ignoreFailures)",
     "build:prod:win32": "pnpm powershell \"mvn clean package `-DskipTests `-Dmaven.test.failure.ignore=$(build-env tests.ignoreFailures)\"",
     "install": "node install.js",
     "lint": "echo 'Linting'",
     "powershell": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command",
-    "quarkus:dev": "run-script-os",
-    "quarkus:dev:darwin:linux": "mvn clean package quarkus:dev -DskipTests",
-    "quarkus:dev:win32": "mvn clean package quarkus:dev -DskipTests",
-    "start": "pnpm quarkus:dev"
+    "start": "mvn quarkus:dev"
   },
   "dependencies": {
     "@kie-tools/maven-base": "workspace:*",
diff --git a/examples/sonataflow-greeting-quarkus-example/pom.xml b/examples/sonataflow-greeting/pom.xml
similarity index 96%
rename from examples/sonataflow-greeting-quarkus-example/pom.xml
rename to examples/sonataflow-greeting/pom.xml
index 6dc457af1f4..24eb461e575 100644
--- a/examples/sonataflow-greeting-quarkus-example/pom.xml
+++ b/examples/sonataflow-greeting/pom.xml
@@ -32,11 +32,11 @@
   </parent>
 
   <groupId>org.apache.kie.sonataflow.examples</groupId>
-  <artifactId>sonataflow-greeting-quarkus-example</artifactId>
+  <artifactId>sonataflow-greeting</artifactId>
   <version>${revision}</version>
 
-  <name>KIE Tools :: Example :: SonataFlow Greeting :: Quarkus</name>
-  <description>SonataFlow Example - Quarkus</description>
+  <name>KIE Tools :: Example :: SonataFlow Greeting</name>
+  <description>SonataFlow Greeting Example</description>
 
   <dependencies>
     <dependency>
diff --git a/examples/sonataflow-greeting-quarkus-example/sonataflow-greeting-quarkus-example.iml b/examples/sonataflow-greeting/sonataflow-greeting.iml
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/sonataflow-greeting-quarkus-example.iml
rename to examples/sonataflow-greeting/sonataflow-greeting.iml
diff --git a/examples/sonataflow-greeting-quarkus-example/src/main/resources/application.properties b/examples/sonataflow-greeting/src/main/resources/application.properties
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/src/main/resources/application.properties
rename to examples/sonataflow-greeting/src/main/resources/application.properties
diff --git a/examples/sonataflow-greeting-quarkus-example/src/main/resources/jsongreet.sw.json b/examples/sonataflow-greeting/src/main/resources/jsongreet.sw.json
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/src/main/resources/jsongreet.sw.json
rename to examples/sonataflow-greeting/src/main/resources/jsongreet.sw.json
diff --git a/examples/sonataflow-greeting-quarkus-example/src/main/resources/yamlgreet.sw.yml b/examples/sonataflow-greeting/src/main/resources/yamlgreet.sw.yml
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/src/main/resources/yamlgreet.sw.yml
rename to examples/sonataflow-greeting/src/main/resources/yamlgreet.sw.yml
diff --git a/examples/sonataflow-greeting-quarkus-example/src/test/java/org/kie/kogito/examples/GreetRestIT.java b/examples/sonataflow-greeting/src/test/java/org/kie/kogito/examples/GreetRestIT.java
similarity index 100%
rename from examples/sonataflow-greeting-quarkus-example/src/test/java/org/kie/kogito/examples/GreetRestIT.java
rename to examples/sonataflow-greeting/src/test/java/org/kie/kogito/examples/GreetRestIT.java
diff --git a/examples/uniforms-patternfly/README.md b/examples/uniforms-patternfly/README.md
index 738e4f751b4..3ec56f3edba 100644
--- a/examples/uniforms-patternfly/README.md
+++ b/examples/uniforms-patternfly/README.md
@@ -15,7 +15,7 @@
    under the License.
 -->
 
-## @kie-tools-examples/uniforms-patternfly
+# Example :: Uniforms PatternFly
 
 ---
 
diff --git a/examples/uniforms-patternfly/src/App.tsx b/examples/uniforms-patternfly/src/App.tsx
index 1d86676e698..761c2099555 100644
--- a/examples/uniforms-patternfly/src/App.tsx
+++ b/examples/uniforms-patternfly/src/App.tsx
@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import "@patternfly/react-core/dist/styles/base.css";
 import * as React from "react";
-import "../static/resources/styles.css";
 import { useState } from "react";
 import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
 import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
diff --git a/examples/uniforms-patternfly/static/resources/styles.css b/examples/uniforms-patternfly/src/index.css
similarity index 100%
rename from examples/uniforms-patternfly/static/resources/styles.css
rename to examples/uniforms-patternfly/src/index.css
diff --git a/examples/uniforms-patternfly/src/index.tsx b/examples/uniforms-patternfly/src/index.tsx
index d9918f08397..25abfea9ae6 100644
--- a/examples/uniforms-patternfly/src/index.tsx
+++ b/examples/uniforms-patternfly/src/index.tsx
@@ -17,8 +17,10 @@
  * under the License.
  */
 
+import "@patternfly/react-core/dist/styles/base.css";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { App } from "./App";
+import "./index.css";
 
 ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/examples/webapp/README.md b/examples/webapp/README.md
deleted file mode 100644
index 8f76c0719d9..00000000000
--- a/examples/webapp/README.md
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
-   Licensed to the Apache Software Foundation (ASF) under one
-   or more contributor license agreements.  See the NOTICE file
-   distributed with this work for additional information
-   regarding copyright ownership.  The ASF licenses this file
-   to you 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.
--->
-
-## Webapp Example
-
-You can read [here](https://blog.kie.org/2020/10/kogito-tooling-examples%e2%80%8a-%e2%80%8ahow-to-integrate-a-custom-editor-an-existing-editors-and-custom-views.html) a step-by-step tutorial of how create this WebApp.
-
-This is a Web application example that shows how to integrate an Embedded Editor [1] or an Embedded Envelope [2]
-
-1. The Embedded Editor enables you to use your Custom Editors or even to use the available Kogito Editor (BPMN and DMN)
-1. The Embedded Envelope gives you more flexibility to create any kind of application, in this example we bring two custom Views.
-
-## Details
-
-To get more the details please take a look on each implementation:
-
-- [Base64 PNG Editor]("src/Pages/Base64Png/Base64PngPage.tsx")
-- [BPMN Editor]("src/Pages/KogitoEditors/BpmnPage.tsx")
-- [DMN Editor]("src/Pages/KogitoEditors/DmnPage.tsx")
-- ['To-do' list View]("src/Pages/TodoList/TodoListViewPage.tsx")
-- [Ping-Pong View]("src/Pages/PingPong/PingPongViewsPage.tsx")
-
-## Setup
-
-### Initialize
-
-To install all dependencies it's necessary to execute the following command on the root folder of the project:
-
-```shell script
-pnpm init
-```
-
-### Build
-
-To build the webapp execute one of the following commands on the root folder of the project:
-
-```shell script
-KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/webapp... build:dev
-KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/webapp... build:prod
-```
-
-### Run
-
-To start the webapp execute the following command on the root folder of the project:
-
-```shell script
-pnpm -F @kie-tools-examples/webapp start
-```
-
----
-
-Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
-Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
-required of all newly accepted projects until a further review indicates that
-the infrastructure, communications, and decision making process have stabilized
-in a manner consistent with other successful ASF projects. While incubation
-status is not necessarily a reflection of the completeness or stability of the
-code, it does indicate that the project has yet to be fully endorsed by the ASF.
-
-Some of the incubating project’s releases may not be fully compliant with ASF
-policy. For example, releases may have incomplete or un-reviewed licensing
-conditions. What follows is a list of known issues the project is currently
-aware of (note that this list, by definition, is likely to be incomplete):
-
-- Hibernate, an LGPL project, is being used. Hibernate is in the process of
-  relicensing to ASL v2
-- Some files, particularly test files, and those not supporting comments, may
-  be missing the ASF Licensing Header
-
-If you are planning to incorporate this work into your product/project, please
-be aware that you will need to conduct a thorough licensing review to determine
-the overall implications of including this work. For the current status of this
-project through the Apache Incubator visit:
-https://incubator.apache.org/projects/kie.html
diff --git a/examples/webapp/src/App.tsx b/examples/webapp/src/App.tsx
deleted file mode 100644
index 6b652416ede..00000000000
--- a/examples/webapp/src/App.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import "@patternfly/react-core/dist/styles/base.css";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
-import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
-import { Base64PngPage } from "./Pages/Base64Png/Base64PngPage";
-import { BpmnPage } from "./Pages/KogitoEditors/BpmnPage";
-import { DmnPage } from "./Pages/KogitoEditors/DmnPage";
-import { TodoListViewPage } from "./Pages/TodoList/TodoListViewPage";
-import { PingPongReactIFrameViewsPage } from "./Pages/PingPong/React/PingPongReactIFrameViewsPage";
-import { PingPongReactDivViewsPage } from "./Pages/PingPong/React/PingPongReactDivViewsPage";
-import { Home } from "./Home";
-import "../static/resources/styles.css";
-import { DmnStandaloneEditorPage } from "./Pages/StandaloneEditors/DmnStandaloneEditorPage";
-import { NewDmnStandaloneEditorPage } from "./Pages/StandaloneEditors/NewDmnStandaloneEditorPage";
-import { SwfStandaloneEditorPage } from "./Pages/StandaloneEditors/SwfStandaloneEditorPage";
-import { PingPongAngularIFrameViewsPage } from "./Pages/PingPong/Angular/PingPongAngularIFrameViewsPage";
-import { PingPongMixedViewsPage } from "./Pages/PingPong/Mixed/PingPongMixedViewsPage";
-import { PingPongAngularDivViewsPage } from "./Pages/PingPong/Angular/PingPongAngularDivViewsPage";
-import { SwfStandaloneDiagramOnlyEditorPage } from "./Pages/StandaloneEditors/SwfStandaloneDiagramOnlyEditorPage";
-import { SwfStandaloneTextOnlyEditorPage } from "./Pages/StandaloneEditors/SwfStandaloneTextOnlyEditorPage";
-import { NewDmnPage } from "./Pages/KogitoEditors/NewDmnPage";
-
-enum Location {
-  BPMN = "/editor/bpmn",
-  DMN = "/editor/dmn",
-  NEW_DMN = "/editor/new-dmn",
-  BASE46PNG = "/editor/base64png",
-  TODO_LIST = "/page/todo-list",
-  PING_PONG_REACT_IFRAME_PAGES = "/page/ping-pong-react/iframe-pages",
-  PING_PONG_REACT_DIV_PAGES = "/page/ping-pong-react/div-pages",
-  PING_PONG_ANGULAR_IFRAME_PAGES = "/page/ping-pong-angular/iframe-pages",
-  PING_PONG_ANGULAR_DIV_PAGES = "/page/ping-pong-angular/div-pages",
-  PING_PONG_MIXED_PAGES = "/page/ping-pong-mixed",
-  DMN_STANDALONE_EDITOR = "/page/dmn-standalone-editor",
-  NEW_DMN_STANDALONE_EDITOR = "/page/new-dmn-standalone-editor",
-  SWF_STANDALONE_EDITOR = "/page/swf-standalone-editor",
-  SWF_STANDALONE_EDITOR_DIAGRAM_ONLY = "/page/swf-standalone-editor-diagram-only",
-  SWF_STANDALONE_EDITOR_TEXT_ONLY = "/page/swf-standalone-editor-text-only",
-  HOME = "/",
-}
-
-export function App() {
-  /**
-   * State which determines what is the current route.
-   */
-  const [location, setLocation] = useState(Location.HOME);
-
-  /**
-   * On the first render, the location state is determined by the current URL.
-   */
-  useEffect(() => {
-    setLocation(window.location.hash.slice(1) as Location); //Remove trailing '#' from route to match the Location enum.
-  });
-
-  return (
-    <Router>
-      <Page
-        header={
-          <PageHeader
-            logo={<Brand src={"logo.png"} alt="Logo" />}
-            topNav={
-              <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
-                <NavList>
-                  <NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
-                    <Link to={Location.HOME}>Home</Link>
-                  </NavItem>
-                  <NavItem itemId={Location.BASE46PNG} isActive={location === Location.BASE46PNG}>
-                    <Link to={Location.BASE46PNG}>Base64 PNG Editor</Link>
-                  </NavItem>
-                  <NavItem itemId={Location.BPMN} isActive={location === Location.BPMN}>
-                    <Link to={Location.BPMN}>BPMN Editor</Link>
-                  </NavItem>
-                  <NavItem itemId={Location.DMN} isActive={location === Location.DMN}>
-                    <Link to={Location.DMN}>DMN Editor</Link>
-                  </NavItem>
-                  <NavItem itemId={Location.NEW_DMN} isActive={location === Location.NEW_DMN}>
-                    <Link to={Location.NEW_DMN}>New DMN Editor</Link>
-                  </NavItem>
-                  <NavItem itemId={Location.TODO_LIST} isActive={location === Location.TODO_LIST}>
-                    <Link to={Location.TODO_LIST}>'To do' list View</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.PING_PONG_REACT_IFRAME_PAGES}
-                    isActive={location === Location.PING_PONG_REACT_IFRAME_PAGES}
-                  >
-                    <Link to={Location.PING_PONG_REACT_IFRAME_PAGES}>Ping-Pong React IFrame</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.PING_PONG_REACT_DIV_PAGES}
-                    isActive={location === Location.PING_PONG_REACT_DIV_PAGES}
-                  >
-                    <Link to={Location.PING_PONG_REACT_DIV_PAGES}>Ping-Pong React Div</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.PING_PONG_ANGULAR_IFRAME_PAGES}
-                    isActive={location === Location.PING_PONG_ANGULAR_IFRAME_PAGES}
-                  >
-                    <Link to={Location.PING_PONG_ANGULAR_IFRAME_PAGES}>Ping-Pong Angular IFrame</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.PING_PONG_ANGULAR_DIV_PAGES}
-                    isActive={location === Location.PING_PONG_ANGULAR_DIV_PAGES}
-                  >
-                    <Link to={Location.PING_PONG_ANGULAR_DIV_PAGES}>Ping-Pong Angular Div</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.PING_PONG_MIXED_PAGES}
-                    isActive={location === Location.PING_PONG_MIXED_PAGES}
-                  >
-                    <Link to={Location.PING_PONG_MIXED_PAGES}>Ping-Pong Mixed Views</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.DMN_STANDALONE_EDITOR}
-                    isActive={location === Location.DMN_STANDALONE_EDITOR}
-                  >
-                    <Link to={Location.DMN_STANDALONE_EDITOR}>DMN Standalone Editor</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.NEW_DMN_STANDALONE_EDITOR}
-                    isActive={location === Location.NEW_DMN_STANDALONE_EDITOR}
-                  >
-                    <Link to={Location.NEW_DMN_STANDALONE_EDITOR}>New DMN Standalone Editor</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.SWF_STANDALONE_EDITOR}
-                    isActive={location === Location.SWF_STANDALONE_EDITOR}
-                  >
-                    <Link to={Location.SWF_STANDALONE_EDITOR}>SWF Standalone Editor</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}
-                    isActive={location === Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}
-                  >
-                    <Link to={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}>SWF Standalone Editor - Diagram only</Link>
-                  </NavItem>
-                  <NavItem
-                    itemId={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}
-                    isActive={location === Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}
-                  >
-                    <Link to={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}>SWF Standalone Editor - Text only</Link>
-                  </NavItem>
-                </NavList>
-              </Nav>
-            }
-          />
-        }
-      >
-        <Switch>
-          <Route exact={true} path={"/"}>
-            <Home />
-          </Route>
-          <Route path={Location.BASE46PNG}>
-            <Base64PngPage />
-          </Route>
-          <Route path={Location.BPMN}>
-            <BpmnPage />
-          </Route>
-          <Route path={Location.DMN}>
-            <DmnPage />
-          </Route>
-          <Route path={Location.NEW_DMN}>
-            <NewDmnPage />
-          </Route>
-          <Route path={Location.TODO_LIST}>
-            <TodoListViewPage />
-          </Route>
-          <Route path={Location.PING_PONG_REACT_IFRAME_PAGES}>
-            <PingPongReactIFrameViewsPage />
-          </Route>
-          <Route path={Location.PING_PONG_REACT_DIV_PAGES}>
-            <PingPongReactDivViewsPage />
-          </Route>
-          <Route path={Location.PING_PONG_ANGULAR_IFRAME_PAGES}>
-            <PingPongAngularIFrameViewsPage />
-          </Route>
-          <Route path={Location.PING_PONG_ANGULAR_DIV_PAGES}>
-            <PingPongAngularDivViewsPage />
-          </Route>
-          <Route path={Location.PING_PONG_MIXED_PAGES}>
-            <PingPongMixedViewsPage />
-          </Route>
-          <Route path={Location.DMN_STANDALONE_EDITOR}>
-            <DmnStandaloneEditorPage />
-          </Route>
-          <Route path={Location.NEW_DMN_STANDALONE_EDITOR}>
-            <NewDmnStandaloneEditorPage />
-          </Route>
-          <Route path={Location.SWF_STANDALONE_EDITOR}>
-            <SwfStandaloneEditorPage />
-          </Route>
-          <Route path={Location.SWF_STANDALONE_EDITOR_DIAGRAM_ONLY}>
-            <SwfStandaloneDiagramOnlyEditorPage />
-          </Route>
-          <Route path={Location.SWF_STANDALONE_EDITOR_TEXT_ONLY}>
-            <SwfStandaloneTextOnlyEditorPage />
-          </Route>
-        </Switch>
-      </Page>
-    </Router>
-  );
-}
diff --git a/examples/webapp/src/Home.tsx b/examples/webapp/src/Home.tsx
deleted file mode 100644
index 863b656037c..00000000000
--- a/examples/webapp/src/Home.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { Text, TextContent } from "@patternfly/react-core/dist/js/components/Text";
-
-export function Home() {
-  return (
-    <Page>
-      <PageSection>
-        <TextContent>
-          <Text component={"h1"}>Welcome to Apache KIE Tools Examples</Text>
-          <Text component={"p"}>
-            <span>To understand what's in this webapp, please refer to the project </span>
-            <a href={"https://github.com/apache/incubator-kie-tools/blob/main/examples/webapp/README.md"}>{"README"}</a>
-            <span> on GitHub.</span>
-          </Text>
-        </TextContent>
-      </PageSection>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularDivViewsPage.tsx b/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularDivViewsPage.tsx
deleted file mode 100644
index 9de39640915..00000000000
--- a/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularDivViewsPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useMemo, useRef } from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { EmbeddedDivPingPong } from "@kie-tools-examples/ping-pong-view/dist/embedded";
-import { StatsSidebar } from "../StatsSidebar";
-import { pingPongEnvelopViewRenderDiv } from "@kie-tools-examples/ping-pong-view-angular/dist/wc/lib";
-import { PingPongApi } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
-
-export function PingPongAngularDivViewsPage() {
-  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
-
-  const angular1 = useRef<PingPongApi>(null);
-  const angular2 = useRef<PingPongApi>(null);
-  const angular3 = useRef<PingPongApi>(null);
-
-  const refs = useMemo(() => [angular1, angular2, angular3], [angular1, angular2, angular3]);
-
-  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
-
-  return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <StatsSidebar
-          lastPing={lastPing}
-          lastPong={lastPong}
-          pings={pingsCount}
-          pongs={pongsCount}
-          onClearLogs={onClearLogs}
-          onGetLastPingTimestamp={onGetLastPingTimestamp}
-        />
-        <div className={"webapp--page-ping-pong-view"}>
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              name={"Angular 1"}
-              ref={angular1}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              name={"Angular 2"}
-              ref={angular2}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              name={"Angular 3"}
-              ref={angular3}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-        </div>
-      </div>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularIFrameViewsPage.tsx b/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularIFrameViewsPage.tsx
deleted file mode 100644
index 26180942d9f..00000000000
--- a/examples/webapp/src/Pages/PingPong/Angular/PingPongAngularIFrameViewsPage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useMemo, useRef } from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { EmbeddedIFramePingPong } from "@kie-tools-examples/ping-pong-view/dist/embedded";
-import { PingPongApi } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { StatsSidebar } from "../StatsSidebar";
-import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
-
-const envelopePath = "envelope/angular/index.html";
-
-export function PingPongAngularIFrameViewsPage() {
-  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
-
-  const angular1 = useRef<PingPongApi>(null);
-  const angular2 = useRef<PingPongApi>(null);
-  const angular3 = useRef<PingPongApi>(null);
-
-  const refs = useMemo(() => [angular1, angular2, angular3], [angular1, angular2, angular3]);
-
-  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
-
-  return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <StatsSidebar
-          lastPing={lastPing}
-          lastPong={lastPong}
-          pings={pingsCount}
-          pongs={pongsCount}
-          onClearLogs={onClearLogs}
-          onGetLastPingTimestamp={onGetLastPingTimestamp}
-        />
-        <div className={"webapp--page-ping-pong-view"}>
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"Angular 1"}
-              ref={angular1}
-              targetOrigin={window.location.origin}
-              envelopePath={envelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"Angular 2"}
-              ref={angular2}
-              targetOrigin={window.location.origin}
-              envelopePath={envelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"Angular 3"}
-              ref={angular3}
-              targetOrigin={window.location.origin}
-              envelopePath={envelopePath}
-            />
-          </PageSection>
-        </div>
-      </div>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/PingPong/Mixed/PingPongMixedViewsPage.tsx b/examples/webapp/src/Pages/PingPong/Mixed/PingPongMixedViewsPage.tsx
deleted file mode 100644
index 764f7feea52..00000000000
--- a/examples/webapp/src/Pages/PingPong/Mixed/PingPongMixedViewsPage.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useMemo, useRef } from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { EmbeddedDivPingPong, EmbeddedIFramePingPong } from "@kie-tools-examples/ping-pong-view/dist/embedded";
-import { PingPongApi } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { StatsSidebar } from "../StatsSidebar";
-import { pingPongEnvelopViewRenderDiv as renderReactDiv } from "@kie-tools-examples/ping-pong-view-react";
-import { pingPongEnvelopViewRenderDiv as renderAngularDiv } from "@kie-tools-examples/ping-pong-view-angular/dist/wc/lib";
-import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
-
-const reactEnvelopePath = "envelope/ping-pong-view-react-impl.html";
-const angularEnvelopePath = "envelope/angular/index.html";
-
-export function PingPongMixedViewsPage() {
-  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
-
-  const angularIFrame = useRef<PingPongApi>(null);
-  const angularDiv = useRef<PingPongApi>(null);
-  const reactIFrame = useRef<PingPongApi>(null);
-  const reactDiv = useRef<PingPongApi>(null);
-
-  const refs = useMemo(
-    () => [angularIFrame, angularDiv, reactIFrame, reactDiv],
-    [angularIFrame, angularDiv, reactIFrame, reactDiv]
-  );
-
-  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
-
-  return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <StatsSidebar
-          lastPing={lastPing}
-          lastPong={lastPong}
-          pings={pingsCount}
-          pongs={pongsCount}
-          onClearLogs={onClearLogs}
-          onGetLastPingTimestamp={onGetLastPingTimestamp}
-        />
-        <div className={"webapp--page-ping-pong-view"}>
-          <PageSection style={{ flex: "1 1 25%" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"Angular iFrame"}
-              ref={angularIFrame}
-              targetOrigin={window.location.origin}
-              envelopePath={angularEnvelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1 25%" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              name={"Angular Div"}
-              ref={angularDiv}
-              targetOrigin={window.location.origin}
-              renderView={renderAngularDiv}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1 25%" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"React iFrame"}
-              ref={reactIFrame}
-              targetOrigin={window.location.origin}
-              envelopePath={reactEnvelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1 25%" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              name={"React Div"}
-              ref={reactDiv}
-              targetOrigin={window.location.origin}
-              renderView={renderReactDiv}
-            />
-          </PageSection>
-        </div>
-      </div>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/PingPong/React/PingPongReactDivViewsPage.tsx b/examples/webapp/src/Pages/PingPong/React/PingPongReactDivViewsPage.tsx
deleted file mode 100644
index ab3a3ab97be..00000000000
--- a/examples/webapp/src/Pages/PingPong/React/PingPongReactDivViewsPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useMemo, useRef } from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { EmbeddedDivPingPong } from "@kie-tools-examples/ping-pong-view/dist/embedded";
-import { PingPongApi } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { pingPongEnvelopViewRenderDiv } from "@kie-tools-examples/ping-pong-view-react";
-import { StatsSidebar } from "../StatsSidebar";
-import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
-
-export function PingPongReactDivViewsPage() {
-  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
-
-  const react1 = useRef<PingPongApi>(null);
-  const react2 = useRef<PingPongApi>(null);
-  const react3 = useRef<PingPongApi>(null);
-
-  const refs = useMemo(() => [react1, react2, react3], [react1, react2, react3]);
-
-  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
-
-  return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <StatsSidebar
-          lastPing={lastPing}
-          lastPong={lastPong}
-          pings={pingsCount}
-          pongs={pongsCount}
-          onClearLogs={onClearLogs}
-          onGetLastPingTimestamp={onGetLastPingTimestamp}
-        />
-        <div className={"webapp--page-ping-pong-view"}>
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              ref={react1}
-              name={"React 1"}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              ref={react2}
-              name={"React 2"}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedDivPingPong
-              apiImpl={apiImpl}
-              ref={react3}
-              name={"React 3"}
-              targetOrigin={window.location.origin}
-              renderView={pingPongEnvelopViewRenderDiv}
-            />
-          </PageSection>
-        </div>
-      </div>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/PingPong/React/PingPongReactIFrameViewsPage.tsx b/examples/webapp/src/Pages/PingPong/React/PingPongReactIFrameViewsPage.tsx
deleted file mode 100644
index caa3dc786bd..00000000000
--- a/examples/webapp/src/Pages/PingPong/React/PingPongReactIFrameViewsPage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useMemo, useRef } from "react";
-import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { EmbeddedIFramePingPong } from "@kie-tools-examples/ping-pong-view/dist/embedded";
-import { PingPongApi } from "@kie-tools-examples/ping-pong-view/dist/api";
-import { StatsSidebar } from "../StatsSidebar";
-import { usePingPongApiCallbacks, usePingPongChannelApi } from "../hooks";
-
-const reactEnvelopePath = "envelope/ping-pong-view-react-impl.html";
-
-export function PingPongReactIFrameViewsPage() {
-  const { pingsCount, pongsCount, lastPing, lastPong, apiImpl } = usePingPongChannelApi();
-
-  const react1 = useRef<PingPongApi>(null);
-  const react2 = useRef<PingPongApi>(null);
-  const react3 = useRef<PingPongApi>(null);
-
-  const refs = useMemo(() => [react1, react2, react3], [react1, react2, react3]);
-
-  const { onClearLogs, onGetLastPingTimestamp } = usePingPongApiCallbacks(refs);
-
-  return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
-        <StatsSidebar
-          lastPing={lastPing}
-          lastPong={lastPong}
-          pings={pingsCount}
-          pongs={pongsCount}
-          onClearLogs={onClearLogs}
-          onGetLastPingTimestamp={onGetLastPingTimestamp}
-        />
-        <div className={"webapp--page-ping-pong-view"}>
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"React 1"}
-              ref={react1}
-              targetOrigin={window.location.origin}
-              envelopePath={reactEnvelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"React 2"}
-              ref={react2}
-              targetOrigin={window.location.origin}
-              envelopePath={reactEnvelopePath}
-            />
-          </PageSection>
-
-          <PageSection style={{ flex: "1 1" }}>
-            <EmbeddedIFramePingPong
-              apiImpl={apiImpl}
-              name={"React 3"}
-              ref={react3}
-              targetOrigin={window.location.origin}
-              envelopePath={reactEnvelopePath}
-            />
-          </PageSection>
-        </div>
-      </div>
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/StandaloneEditors/DmnStandaloneEditorPage.tsx b/examples/webapp/src/Pages/StandaloneEditors/DmnStandaloneEditorPage.tsx
deleted file mode 100644
index 2f801e3568f..00000000000
--- a/examples/webapp/src/Pages/StandaloneEditors/DmnStandaloneEditorPage.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useEffect, useRef } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
-import * as DmnEditor from "@kie-tools/kie-editors-standalone/dist/dmn";
-
-export function DmnStandaloneEditorPage() {
-  const dmnEditorContainer = useRef<HTMLDivElement>(null);
-  const unsavedChanges = useRef<HTMLSpanElement>(null);
-  const undo = useRef<HTMLButtonElement>(null);
-  const redo = useRef<HTMLButtonElement>(null);
-  const download = useRef<HTMLButtonElement>(null);
-  const downloadSvg = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const editor = DmnEditor.open({
-      container: dmnEditorContainer.current!,
-      initialContent: Promise.resolve(""),
-      readOnly: false,
-    });
-
-    undo.current?.addEventListener("click", () => {
-      editor.undo();
-    });
-
-    redo.current?.addEventListener("click", () => {
-      editor.redo();
-    });
-
-    download.current?.addEventListener("click", () => {
-      editor.getContent().then((content) => {
-        const elem = window.document.createElement("a");
-        elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
-        elem.download = "model.dmn";
-        document.body.appendChild(elem);
-        elem.click();
-        document.body.removeChild(elem);
-        editor.markAsSaved();
-      });
-    });
-
-    downloadSvg.current?.addEventListener("click", () => {
-      editor.getPreview().then((svgContent) => {
-        const elem = window.document.createElement("a");
-        elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent!);
-        elem.download = "model.svg";
-        document.body.appendChild(elem);
-        elem.click();
-        document.body.removeChild(elem);
-      });
-    });
-
-    editor.subscribeToContentChanges((isDirty) => {
-      if (isDirty) {
-        unsavedChanges.current!.style.display = "";
-      } else {
-        unsavedChanges.current!.style.display = "none";
-      }
-    });
-  }, []);
-
-  return (
-    <Page>
-      <div style={{ height: "40px", padding: "5px" }}>
-        <button ref={undo}>Undo</button>
-        <button ref={redo}>Redo</button>
-        <button ref={download}>Download</button>
-        <button ref={downloadSvg}>Download SVG</button>
-        <span ref={unsavedChanges} style={{ display: "none" }}>
-          File contains unsaved changes.
-        </span>
-      </div>
-      <div ref={dmnEditorContainer} style={{ height: "calc(100% - 50px)" }} />
-    </Page>
-  );
-}
diff --git a/examples/webapp/src/Pages/StandaloneEditors/NewDmnStandaloneEditorPage.tsx b/examples/webapp/src/Pages/StandaloneEditors/NewDmnStandaloneEditorPage.tsx
deleted file mode 100644
index 37ef2b81f12..00000000000
--- a/examples/webapp/src/Pages/StandaloneEditors/NewDmnStandaloneEditorPage.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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.
- */
-
-import * as React from "react";
-import { useCallback, useRef } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
-import { useCancelableEffect } from "@kie-tools-core/react-hooks/dist/useCancelableEffect";
-import * as NewDmnEditor from "@kie-tools/dmn-editor-standalone/dist";
-
-export function NewDmnStandaloneEditorPage() {
-  const dmnEditorContainer = useRef<HTMLDivElement>(null);
-  const unsavedChanges = useRef<HTMLSpanElement>(null);
-  const undo = useRef<HTMLButtonElement>(null);
-  const redo = useRef<HTMLButtonElement>(null);
-  const download = useRef<HTMLButtonElement>(null);
-  const downloadSvg = useRef<HTMLButtonElement>(null);
-
-  useCancelableEffect(
-    useCallback(({ canceled }) => {
-      if (canceled.get()) {
-        return;
-      }
-      const editor = NewDmnEditor.open({
-        container: dmnEditorContainer.current!,
-        initialContent: Promise.resolve(""),
-        readOnly: false,
-      });
-
-      undo.current?.addEventListener("click", () => {
-        editor.undo();
-      });
-
-      redo.current?.addEventListener("click", () => {
-        editor.redo();
-      });
-
-      download.current?.addEventListener("click", () => {
-        editor.getContent().then((content) => {
-          const elem = window.document.createElement("a");
-          elem.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
-          elem.download = "model.dmn";
-          document.body.appendChild(elem);
-          elem.click();
-          document.body.removeChild(elem);
-          editor.markAsSaved();
-        });
-      });
-
-      downloadSvg.current?.addEventListener("click", () => {
-        editor.getPreview().then((svgContent) => {
-          const elem = window.document.createElement("a");
-          elem.href = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgContent!);
-          elem.download = "model.svg";
-          document.body.appendChild(elem);
-          elem.click();
-          document.body.removeChild(elem);
-        });
-      });
-
-      editor.subscribeToContentChanges((isDirty) => {
-        if (isDirty) {
-          unsavedChanges.current!.style.display = "";
-        } else {
-          unsavedChanges.current!.style.display = "none";
-        }
-      });
-    }, [])
-  );
-
-  return (
-    <Page>
-      <div style={{ height: "40px", padding: "5px" }}>
-        <button ref={undo}>Undo</button>
-        <button ref={redo}>Redo</button>
-        <button ref={download}>Download</button>
-        <button ref={downloadSvg}>Download SVG</button>
-        <span ref={unsavedChanges} style={{ display: "none" }}>
-          File contains unsaved changes.
-        </span>
-      </div>
-      <div ref={dmnEditorContainer} style={{ height: "calc(100% - 50px)" }} />
-    </Page>
-  );
-}
diff --git a/examples/webapp/static/resources/styles.css b/examples/webapp/static/resources/styles.css
deleted file mode 100644
index a0c66d0b94c..00000000000
--- a/examples/webapp/static/resources/styles.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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. 
- */
-
-.webapp--page-main-div {
-  display: flex;
-  height: 100%;
-}
-
-.webapp--page-navigation {
-  background-color: rgb(24, 24, 24);
-  height: 100%;
-}
-
-.webapp--page-navigation-title-div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.webapp--page-navigation-title-h3 {
-  color: white;
-  padding: 20px;
-}
-
-.webapp--page-base64png-gallery--navigation-nav-item {
-  display: flex;
-  align-items: center;
-}
-
-.webapp--page-base64png-gallery--navigation-nav-item:hover {
-  width: 200px;
-}
-
-.webapp--page-base64png-gallery--navigation-nav-item-card {
-  width: 200px;
-}
-
-.webapp--page-kogito-editors-sidebar {
-  display: flex;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation {
-  background-color: rgb(24, 24, 24);
-  height: 100%;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation-nav-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation-nav-item-text-input {
-  width: 100px;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation-nav-item-div {
-  width: 100%;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation-nav-item-a {
-  color: white;
-}
-
-.webapp--page-kogito-editors-sidebar--navigation-nav-item-open-file {
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  cursor: pointer;
-  width: 100%;
-  z-index: 999;
-}
-
-.webapp--page-ping-pong-view {
-  display: flex;
-  width: 100%;
-}
-
-.webapp--page-ping-pong-view-navigation {
-  width: 200px;
-}
-
-.webapp--page-to-do-view {
-  display: flex;
-}
diff --git a/packages/README.md b/packages/README.md
new file mode 100644
index 00000000000..8be26b3f749
--- /dev/null
+++ b/packages/README.md
@@ -0,0 +1,3 @@
+# KIE Tools :: Packages
+
+This directory contains source code for packages hosting tools, libraries, apps, and container images. Head over to the [examples](../examples) directory for showcases.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f670ab4cdd..202936059b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,6 +233,78 @@ importers:
         specifier: ^5.9.0
         version: 5.9.0
 
+  examples/bpmn-editor-classic-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools/kie-bc-editors':
+        specifier: workspace:*
+        version: link:../../packages/kie-bc-editors
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/stunner-editors':
+        specifier: workspace:*
+        version: link:../../packages/stunner-editors
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      process:
+        specifier: ^0.11.10
+        version: 0.11.10
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
   examples/commit-message-validation-service:
     devDependencies:
       '@kie-tools/root-env':
@@ -245,6 +317,147 @@ importers:
         specifier: ^1.1.6
         version: 1.1.6
 
+  examples/dmn-editor-classic-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools/kie-bc-editors':
+        specifier: workspace:*
+        version: link:../../packages/kie-bc-editors
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/stunner-editors':
+        specifier: workspace:*
+        version: link:../../packages/stunner-editors
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      process:
+        specifier: ^0.11.10
+        version: 0.11.10
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/dmn-editor-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools/dmn-editor':
+        specifier: workspace:*
+        version: link:../../packages/dmn-editor
+      '@kie-tools/dmn-editor-envelope':
+        specifier: workspace:*
+        version: link:../../packages/dmn-editor-envelope
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
   examples/dmn-editor-standalone-examples:
     dependencies:
       '@kie-tools/dmn-editor-standalone':
@@ -294,6 +507,52 @@ importers:
         specifier: ^5.9.0
         version: 5.10.0
 
+  examples/dmn-editor-standalone-on-webapp:
+    dependencies:
+      '@kie-tools/dmn-editor-standalone':
+        specifier: workspace:*
+        version: link:../../packages/dmn-editor-standalone
+    devDependencies:
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      html-webpack-plugin:
+        specifier: ^5.3.2
+        version: 5.5.3(webpack@5.94.0(webpack-cli@4.10.0))
+      raw-loader:
+        specifier: ^4.0.2
+        version: 4.0.2(webpack@5.94.0(webpack-cli@4.10.0))
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-bundle-analyzer:
+        specifier: ^4.10.2
+        version: 4.10.2
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
   examples/drools-process-usertasks-quarkus-example:
     dependencies:
       '@kie-tools/jbpm-quarkus-devui':
@@ -329,6 +588,608 @@ importers:
         specifier: ^1.1.6
         version: 1.1.6
 
+  examples/kie-sandbox-commit-message-validation-service:
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      run-script-os:
+        specifier: ^1.1.6
+        version: 1.1.6
+
+  examples/micro-frontends-multiplying-architecture-base64png-editor:
+    dependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/notifications':
+        specifier: workspace:*
+        version: link:../../packages/notifications
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/workspace':
+        specifier: workspace:*
+        version: link:../../packages/workspace
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      react:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2
+      react-dom:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2(react@17.0.2)
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+
+  examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension:
+    devDependencies:
+      '@kie-tools-core/chrome-extension':
+        specifier: workspace:*
+        version: link:../../packages/chrome-extension
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-base64png-editor
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/chrome':
+        specifier: ^0.0.193
+        version: 0.0.193
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+      zip-webpack-plugin:
+        specifier: ^4.0.1
+        version: 4.0.1(webpack-sources@3.2.3)(webpack@5.94.0(webpack-cli@4.10.0))
+
+  examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-base64png-editor
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/i18n':
+        specifier: workspace:*
+        version: link:../../packages/i18n
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/vscode-extension':
+        specifier: workspace:*
+        version: link:../../packages/vscode-extension
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-base64png-editor
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/vscode':
+        specifier: 1.67.0
+        version: 1.67.0
+      '@vscode/vsce':
+        specifier: ^2.22.0
+        version: 2.22.0
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/micro-frontends-multiplying-architecture-ping-pong-view:
+    dependencies:
+      '@kie-tools-core/envelope':
+        specifier: workspace:*
+        version: link:../../packages/envelope
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      react:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2
+      react-dom:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2(react@17.0.2)
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+
+  examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular:
+    dependencies:
+      '@angular/common':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)
+      '@angular/compiler':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))
+      '@angular/core':
+        specifier: ^18.1.2
+        version: 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+      '@angular/elements':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)
+      '@angular/platform-browser':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))
+      '@angular/platform-browser-dynamic':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))
+      '@kie-tools-core/envelope':
+        specifier: workspace:*
+        version: link:../../packages/envelope
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-ping-pong-view
+      rxjs:
+        specifier: ^7.4.0
+        version: 7.8.1
+      zone.js:
+        specifier: ^0.14.8
+        version: 0.14.8
+    devDependencies:
+      '@angular-devkit/build-angular':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(@types/node@22.5.2)(chokidar@3.6.0)(html-webpack-plugin@5.5.3(webpack@5.94.0))(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.5.2))(karma@6.4.2)(stylus@0.59.0)(typescript@5.5.3)
+      '@angular/cli':
+        specifier: ^18.1.2
+        version: 18.1.3(chokidar@3.6.0)
+      '@angular/compiler-cli':
+        specifier: ^18.1.2
+        version: 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3)
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0
+
+  examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react:
+    dependencies:
+      '@kie-tools-core/envelope':
+        specifier: workspace:*
+        version: link:../../packages/envelope
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-ping-pong-view
+      react:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2
+      react-dom:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2(react@17.0.2)
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+
+  examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-ping-pong-view
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-ping-pong-view-in-angular
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-ping-pong-view-in-react
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      '@types/react-router':
+        specifier: ^5.1.20
+        version: 5.1.20
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      react-router-dom:
+        specifier: ^5.3.4
+        version: 5.3.4(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/micro-frontends-multiplying-architecture-todo-list-view:
+    dependencies:
+      '@kie-tools-core/envelope':
+        specifier: workspace:*
+        version: link:../../packages/envelope
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      react:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2
+      react-dom:
+        specifier: '>=17.0.2 <19.0.0'
+        version: 17.0.2(react@17.0.2)
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      '@types/vscode':
+        specifier: 1.67.0
+        version: 1.67.0
+      copyfiles:
+        specifier: ^2.4.1
+        version: 2.4.1
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+
+  examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-todo-list-view
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension:
+    devDependencies:
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/vscode-extension':
+        specifier: workspace:*
+        version: link:../../packages/vscode-extension
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view':
+        specifier: workspace:*
+        version: link:../micro-frontends-multiplying-architecture-todo-list-view
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@types/vscode':
+        specifier: 1.67.0
+        version: 1.67.0
+      '@vscode/vsce':
+        specifier: ^2.22.0
+        version: 2.22.0
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
   examples/ping-pong-view:
     dependencies:
       '@kie-tools-core/envelope':
@@ -464,6 +1325,132 @@ importers:
         specifier: ^5.5.3
         version: 5.5.3
 
+  examples/process-compact-architecture:
+    dependencies:
+      '@kie-tools/jbpm-quarkus-devui':
+        specifier: workspace:*
+        version: link:../../packages/jbpm-quarkus-devui
+      '@kie-tools/maven-base':
+        specifier: workspace:*
+        version: link:../../packages/maven-base
+    devDependencies:
+      '@kie-tools/kogito-management-console':
+        specifier: workspace:*
+        version: link:../../packages/kogito-management-console
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      run-script-os:
+        specifier: ^1.1.6
+        version: 1.1.6
+
+  examples/process-user-tasks-subsystem:
+    dependencies:
+      '@kie-tools/jbpm-quarkus-devui':
+        specifier: workspace:*
+        version: link:../../packages/jbpm-quarkus-devui
+      '@kie-tools/maven-base':
+        specifier: workspace:*
+        version: link:../../packages/maven-base
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      run-script-os:
+        specifier: ^1.1.6
+        version: 1.1.6
+
+  examples/serverless-workflow-editor-standalone-on-webapp:
+    devDependencies:
+      '@kie-tools-core/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@kie-tools-core/envelope-bus':
+        specifier: workspace:*
+        version: link:../../packages/envelope-bus
+      '@kie-tools-core/patternfly-base':
+        specifier: workspace:*
+        version: link:../../packages/patternfly-base
+      '@kie-tools-core/react-hooks':
+        specifier: workspace:*
+        version: link:../../packages/react-hooks
+      '@kie-tools-core/webpack-base':
+        specifier: workspace:*
+        version: link:../../packages/webpack-base
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      '@kie-tools/serverless-workflow-standalone-editor':
+        specifier: workspace:*
+        version: link:../../packages/serverless-workflow-standalone-editor
+      '@kie-tools/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+      '@patternfly/react-core':
+        specifier: ^4.276.6
+        version: 4.276.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@patternfly/react-icons':
+        specifier: ^4.93.6
+        version: 4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@types/react':
+        specifier: ^17.0.6
+        version: 17.0.21
+      '@types/react-dom':
+        specifier: ^17.0.5
+        version: 17.0.8
+      '@types/react-router':
+        specifier: ^5.1.20
+        version: 5.1.20
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
+      copy-webpack-plugin:
+        specifier: ^11.0.0
+        version: 11.0.0(webpack@5.94.0(webpack-cli@4.10.0))
+      react:
+        specifier: ^17.0.2
+        version: 17.0.2
+      react-dom:
+        specifier: ^17.0.2
+        version: 17.0.2(react@17.0.2)
+      react-router-dom:
+        specifier: ^5.3.4
+        version: 5.3.4(react@17.0.2)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      typescript:
+        specifier: ^5.5.3
+        version: 5.5.3
+      webpack:
+        specifier: ^5.94.0
+        version: 5.94.0(webpack-cli@4.10.0)
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0)
+      webpack-dev-server:
+        specifier: ^4.15.1
+        version: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
+      webpack-merge:
+        specifier: ^5.9.0
+        version: 5.10.0
+
+  examples/sonataflow-greeting:
+    dependencies:
+      '@kie-tools/maven-base':
+        specifier: workspace:*
+        version: link:../../packages/maven-base
+      '@kie-tools/sonataflow-quarkus-devui':
+        specifier: workspace:*
+        version: link:../../packages/sonataflow-quarkus-devui
+    devDependencies:
+      '@kie-tools/root-env':
+        specifier: workspace:*
+        version: link:../../packages/root-env
+      run-script-os:
+        specifier: ^1.1.6
+        version: 1.1.6
+
   examples/sonataflow-greeting-quarkus-example:
     dependencies:
       '@kie-tools/maven-base':
@@ -19166,9 +20153,6 @@ packages:
   '@types/estree@0.0.51':
     resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
 
-  '@types/estree@1.0.1':
-    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
-
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -19355,9 +20339,6 @@ packages:
   '@types/node@20.14.2':
     resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==}
 
-  '@types/node@22.0.2':
-    resolution: {integrity: sha512-yPL6DyFwY5PiMVEwymNeqUTKsDczQBJ/5T7W/46RwLU/VH+AA8aT5TZkvBviLKLbbm0hlfftEkGrNzfRk/fofQ==}
-
   '@types/node@22.5.2':
     resolution: {integrity: sha512-acJsPTEqYqulZS/Yp/S3GgeE6GZ0qYODUR8aVr/DkhHQ8l9nd4j5x1/ZJy9/gHrRlFMqkO6i0I3E27Alu4jjPg==}
 
@@ -20008,10 +20989,6 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
 
-  agent-base@7.1.0:
-    resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
-    engines: {node: '>= 14'}
-
   agent-base@7.1.1:
     resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
     engines: {node: '>= 14'}
@@ -20791,11 +21768,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  browserslist@4.23.2:
-    resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.23.3:
     resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -20965,9 +21937,6 @@ packages:
   caniuse-lite@1.0.30001600:
     resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
 
-  caniuse-lite@1.0.30001646:
-    resolution: {integrity: sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==}
-
   caniuse-lite@1.0.30001655:
     resolution: {integrity: sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==}
 
@@ -21063,10 +22032,6 @@ packages:
     resolution: {integrity: sha512-pVLljQ29SAx8KIv5tSa9sIf8GrEsAZdPJoeWOmY3/nrIzFmE+EryNNHvDkddGod0cmAFTv+GmPG0uvzxi2NWsA==}
     hasBin: true
 
-  chrome-trace-event@1.0.2:
-    resolution: {integrity: sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==}
-    engines: {node: '>=6.0'}
-
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -21136,10 +22101,6 @@ packages:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
 
-  cli-spinners@2.6.0:
-    resolution: {integrity: sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==}
-    engines: {node: '>=6'}
-
   cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
@@ -21560,6 +22521,7 @@ packages:
 
   critters@0.0.24:
     resolution: {integrity: sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==}
+    deprecated: Ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. If you'd like to keep using Critters, please switch to the actively-maintained fork at https://github.com/danielroe/beasties
 
   cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
@@ -22386,9 +23348,6 @@ packages:
   electron-to-chromium@1.5.13:
     resolution: {integrity: sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==}
 
-  electron-to-chromium@1.5.4:
-    resolution: {integrity: sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==}
-
   elkjs@0.8.2:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
 
@@ -23912,10 +24871,6 @@ packages:
     resolution: {integrity: sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA==}
     engines: {node: '>= 14'}
 
-  https-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
-    engines: {node: '>= 14'}
-
   https-proxy-agent@7.0.5:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
@@ -25169,10 +26124,6 @@ packages:
     resolution: {integrity: sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==}
     engines: {node: '>=8'}
 
-  loader-runner@4.2.0:
-    resolution: {integrity: sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==}
-    engines: {node: '>=6.11.5'}
-
   loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -27925,6 +28876,7 @@ packages:
 
   rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@3.0.2:
@@ -29334,9 +30286,6 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  undici-types@6.11.1:
-    resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==}
-
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -30480,6 +31429,105 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
+  '@angular-devkit/build-angular@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(@types/node@22.5.2)(chokidar@3.6.0)(html-webpack-plugin@5.5.3(webpack@5.94.0))(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@22.5.2))(karma@6.4.2)(stylus@0.59.0)(typescript@5.5.3)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
+      '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1(esbuild@0.21.5)))(webpack@5.92.1(esbuild@0.21.5))
+      '@angular-devkit/core': 18.1.3(chokidar@3.6.0)
+      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(@types/node@22.5.2)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.38)(stylus@0.59.0)(terser@5.29.2)(typescript@5.5.3)
+      '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3)
+      '@babel/core': 7.24.7
+      '@babel/generator': 7.24.7
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/plugin-transform-async-generator-functions': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.24.7)
+      '@babel/plugin-transform-runtime': 7.24.7(@babel/core@7.24.7)
+      '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
+      '@babel/runtime': 7.24.7
+      '@discoveryjs/json-ext': 0.5.7
+      '@ngtools/webpack': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))
+      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.3.2(@types/node@22.5.2)(less@4.2.0)(sass@1.77.6)(stylus@0.59.0)(terser@5.29.2))
+      ansi-colors: 4.1.3
+      autoprefixer: 10.4.19(postcss@8.4.38)
+      babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5))
+      browserslist: 4.23.3
+      copy-webpack-plugin: 12.0.2(webpack@5.92.1(esbuild@0.21.5))
+      critters: 0.0.24
+      css-loader: 7.1.2(webpack@5.92.1(esbuild@0.21.5))
+      esbuild-wasm: 0.21.5
+      fast-glob: 3.3.2
+      http-proxy-middleware: 3.0.0
+      https-proxy-agent: 7.0.5
+      istanbul-lib-instrument: 6.0.2
+      jsonc-parser: 3.3.1
+      karma-source-map-support: 1.4.0
+      less: 4.2.0
+      less-loader: 12.2.0(less@4.2.0)(webpack@5.92.1(esbuild@0.21.5))
+      license-webpack-plugin: 4.0.2(webpack@5.92.1(esbuild@0.21.5))
+      loader-utils: 3.3.1
+      magic-string: 0.30.10
+      mini-css-extract-plugin: 2.9.0(webpack@5.92.1(esbuild@0.21.5))
+      mrmime: 2.0.0
+      open: 10.1.0
+      ora: 5.4.1
+      parse5-html-rewriting-stream: 7.0.0
+      picomatch: 4.0.2
+      piscina: 4.6.1
+      postcss: 8.4.38
+      postcss-loader: 8.1.1(postcss@8.4.38)(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))
+      resolve-url-loader: 5.0.0
+      rxjs: 7.8.1
+      sass: 1.77.6
+      sass-loader: 14.2.1(sass@1.77.6)(webpack@5.92.1(esbuild@0.21.5))
+      semver: 7.6.2
+      source-map-loader: 5.0.0(webpack@5.92.1(esbuild@0.21.5))
+      source-map-support: 0.5.21
+      terser: 5.29.2
+      tree-kill: 1.2.2
+      tslib: 2.6.3
+      typescript: 5.5.3
+      undici: 6.19.2
+      vite: 5.3.2(@types/node@22.5.2)(less@4.2.0)(sass@1.77.6)(stylus@0.59.0)(terser@5.29.2)
+      watchpack: 2.4.1
+      webpack: 5.92.1(esbuild@0.21.5)
+      webpack-dev-middleware: 7.2.1(webpack@5.92.1(esbuild@0.21.5))
+      webpack-dev-server: 5.0.4(webpack@5.92.1(esbuild@0.21.5))
+      webpack-merge: 5.10.0
+      webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.3(webpack@5.94.0))(webpack@5.92.1(esbuild@0.21.5))
+    optionalDependencies:
+      esbuild: 0.21.5
+      jest: 29.7.0(@types/node@22.5.2)
+      jest-environment-jsdom: 29.7.0
+      karma: 6.4.2
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@swc/core'
+      - '@types/node'
+      - bufferutil
+      - chokidar
+      - debug
+      - html-webpack-plugin
+      - lightningcss
+      - node-sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - uglify-js
+      - utf-8-validate
+      - webpack-cli
+
+  '@angular-devkit/build-webpack@0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1(esbuild@0.21.5)))(webpack@5.92.1(esbuild@0.21.5))':
+    dependencies:
+      '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
+      rxjs: 7.8.1
+      webpack: 5.92.1(esbuild@0.21.5)
+      webpack-dev-server: 5.0.4(webpack@5.92.1(esbuild@0.21.5))
+    transitivePeerDependencies:
+      - chokidar
+
   '@angular-devkit/build-webpack@0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0))(webpack@5.92.1(esbuild@0.21.5))':
     dependencies:
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
@@ -30553,6 +31601,49 @@ snapshots:
       - supports-color
       - terser
 
+  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(@types/node@22.5.2)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.38)(stylus@0.59.0)(terser@5.29.2)(typescript@5.5.3)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
+      '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3)
+      '@babel/core': 7.24.7
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.24.7)
+      '@inquirer/confirm': 3.1.11
+      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.3.2(@types/node@22.5.2)(less@4.2.0)(sass@1.77.6)(stylus@0.59.0)(terser@5.29.2))
+      ansi-colors: 4.1.3
+      browserslist: 4.23.3
+      critters: 0.0.24
+      esbuild: 0.21.5
+      fast-glob: 3.3.2
+      https-proxy-agent: 7.0.5
+      lmdb: 3.0.12
+      magic-string: 0.30.10
+      mrmime: 2.0.0
+      ora: 5.4.1
+      parse5-html-rewriting-stream: 7.0.0
+      picomatch: 4.0.2
+      piscina: 4.6.1
+      rollup: 4.18.0
+      sass: 1.77.6
+      semver: 7.6.2
+      typescript: 5.5.3
+      undici: 6.19.2
+      vite: 5.3.2(@types/node@22.5.2)(less@4.2.0)(sass@1.77.6)(stylus@0.59.0)(terser@5.29.2)
+      watchpack: 2.4.1
+    optionalDependencies:
+      less: 4.2.0
+      postcss: 8.4.38
+    transitivePeerDependencies:
+      - '@types/node'
+      - chokidar
+      - lightningcss
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   '@angular/cli@18.1.3(chokidar@3.6.0)':
     dependencies:
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
@@ -30583,6 +31674,12 @@ snapshots:
       rxjs: 7.5.2
       tslib: 2.6.2
 
+  '@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)':
+    dependencies:
+      '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+      rxjs: 7.8.1
+      tslib: 2.7.0
+
   '@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(typescript@5.5.3)':
     dependencies:
       '@angular/compiler': 18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))
@@ -30598,24 +31695,57 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3)':
+    dependencies:
+      '@angular/compiler': 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))
+      '@babel/core': 7.24.9
+      '@jridgewell/sourcemap-codec': 1.4.15
+      chokidar: 3.6.0
+      convert-source-map: 1.7.0
+      reflect-metadata: 0.2.2
+      semver: 7.6.3
+      tslib: 2.7.0
+      typescript: 5.5.3
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))':
     dependencies:
       tslib: 2.6.2
     optionalDependencies:
       '@angular/core': 18.1.3(rxjs@7.5.2)(zone.js@0.14.8)
 
+  '@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))':
+    dependencies:
+      tslib: 2.7.0
+    optionalDependencies:
+      '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+
   '@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)':
     dependencies:
       rxjs: 7.5.2
       tslib: 2.6.2
       zone.js: 0.14.8
 
+  '@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)':
+    dependencies:
+      rxjs: 7.8.1
+      tslib: 2.7.0
+      zone.js: 0.14.8
+
   '@angular/elements@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2)':
     dependencies:
       '@angular/core': 18.1.3(rxjs@7.5.2)(zone.js@0.14.8)
       rxjs: 7.5.2
       tslib: 2.6.2
 
+  '@angular/elements@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)':
+    dependencies:
+      '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+      rxjs: 7.8.1
+      tslib: 2.7.0
+
   '@angular/platform-browser-dynamic@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2))(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8)))':
     dependencies:
       '@angular/common': 18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2)
@@ -30624,12 +31754,26 @@ snapshots:
       '@angular/platform-browser': 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2))(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))
       tslib: 2.6.2
 
+  '@angular/platform-browser-dynamic@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))':
+    dependencies:
+      '@angular/common': 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)
+      '@angular/compiler': 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))
+      '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+      '@angular/platform-browser': 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))
+      tslib: 2.7.0
+
   '@angular/platform-browser@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2))(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))':
     dependencies:
       '@angular/common': 18.1.3(@angular/core@18.1.3(rxjs@7.5.2)(zone.js@0.14.8))(rxjs@7.5.2)
       '@angular/core': 18.1.3(rxjs@7.5.2)(zone.js@0.14.8)
       tslib: 2.6.2
 
+  '@angular/platform-browser@18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))':
+    dependencies:
+      '@angular/common': 18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1)
+      '@angular/core': 18.1.3(rxjs@7.8.1)(zone.js@0.14.8)
+      tslib: 2.7.0
+
   '@apidevtools/json-schema-ref-parser@9.0.6':
     dependencies:
       '@jsdevtools/ono': 7.1.3
@@ -30874,11 +32018,11 @@ snapshots:
   '@ardatan/relay-compiler@12.0.0(encoding@0.1.13)(graphql@14.3.1)':
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/generator': 7.23.6
-      '@babel/parser': 7.23.9
+      '@babel/generator': 7.25.0
+      '@babel/parser': 7.25.3
       '@babel/runtime': 7.24.7
-      '@babel/traverse': 7.23.9
-      '@babel/types': 7.23.9
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
       babel-preset-fbjs: 3.4.0(@babel/core@7.24.9)
       chalk: 4.1.2
       fb-watchman: 2.0.1
@@ -31009,7 +32153,7 @@ snapshots:
   '@babel/code-frame@7.24.7':
     dependencies:
       '@babel/highlight': 7.24.7
-      picocolors: 1.0.0
+      picocolors: 1.1.0
 
   '@babel/compat-data@7.17.7': {}
 
@@ -31105,7 +32249,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
+      '@babel/generator': 7.25.0
       '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-module-transforms': 7.25.2(@babel/core@7.24.7)
       '@babel/helpers': 7.25.0
@@ -31114,7 +32258,7 @@ snapshots:
       '@babel/traverse': 7.25.3
       '@babel/types': 7.25.2
       convert-source-map: 2.0.0
-      debug: 4.3.5
+      debug: 4.3.6
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -31263,66 +32407,66 @@ snapshots:
   '@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.16.12)':
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.16.12)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
 
   '@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.18.10)':
     dependencies:
       '@babel/core': 7.18.10
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.18.10)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
 
   '@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.23.0)':
     dependencies:
       '@babel/core': 7.23.0
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.0)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
 
   '@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.9)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
 
   '@babel/helper-create-class-features-plugin@7.22.15(@babel/core@7.24.9)':
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-member-expression-to-functions': 7.23.0
       '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/helper-replace-supers': 7.22.20(@babel/core@7.24.9)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.7
       semver: 6.3.1
 
   '@babel/helper-create-class-features-plugin@7.25.0(@babel/core@7.24.7)':
@@ -31354,56 +32498,56 @@ snapshots:
   '@babel/helper-create-regexp-features-plugin@7.21.8(@babel/core@7.16.12)':
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.21.8(@babel/core@7.24.9)':
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.16.12)':
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.18.10)':
     dependencies:
       '@babel/core': 7.18.10
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.0)':
     dependencies:
       '@babel/core': 7.23.0
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.7)':
     dependencies:
       '@babel/core': 7.24.7
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
   '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.9)':
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
@@ -31544,7 +32688,7 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.23.0':
     dependencies:
-      '@babel/types': 7.23.9
+      '@babel/types': 7.25.2
 
   '@babel/helper-member-expression-to-functions@7.24.8':
     dependencies:
@@ -31683,7 +32827,7 @@ snapshots:
   '@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.16.12)':
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
       '@babel/types': 7.23.9
@@ -31691,7 +32835,7 @@ snapshots:
   '@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.24.9)':
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
       '@babel/types': 7.23.9
@@ -31699,21 +32843,21 @@ snapshots:
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.18.10)':
     dependencies:
       '@babel/core': 7.18.10
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
 
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.0)':
     dependencies:
       '@babel/core': 7.23.0
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
 
   '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.9)':
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.22.20
 
@@ -31847,8 +32991,8 @@ snapshots:
   '@babel/helper-wrap-function@7.22.20':
     dependencies:
       '@babel/helper-function-name': 7.23.0
-      '@babel/template': 7.23.9
-      '@babel/types': 7.23.9
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
 
   '@babel/helper-wrap-function@7.25.0':
     dependencies:
@@ -37031,7 +38175,7 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       '@whatwg-node/fetch': 0.8.8
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
     transitivePeerDependencies:
       - encoding
 
@@ -37040,7 +38184,7 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       dataloader: 2.2.2
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
 
   '@graphql-tools/code-file-loader@7.3.23(@babel/core@7.23.9)(graphql@14.3.1)':
@@ -37063,7 +38207,7 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       dataloader: 2.2.2
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
 
   '@graphql-tools/executor-graphql-ws@0.0.14(graphql@14.3.1)':
@@ -37074,7 +38218,7 @@ snapshots:
       graphql: 14.3.1
       graphql-ws: 5.12.1(graphql@14.3.1)
       isomorphic-ws: 5.0.0(ws@8.13.0)
-      tslib: 2.6.2
+      tslib: 2.7.0
       ws: 8.13.0
     transitivePeerDependencies:
       - bufferutil
@@ -37089,7 +38233,7 @@ snapshots:
       extract-files: 11.0.0
       graphql: 14.3.1
       meros: 1.3.0(@types/node@22.5.2)
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
     transitivePeerDependencies:
       - '@types/node'
@@ -37100,7 +38244,7 @@ snapshots:
       '@types/ws': 8.5.5
       graphql: 14.3.1
       isomorphic-ws: 5.0.0(ws@8.13.0)
-      tslib: 2.6.2
+      tslib: 2.7.0
       ws: 8.13.0
     transitivePeerDependencies:
       - bufferutil
@@ -37112,7 +38256,7 @@ snapshots:
       '@graphql-typed-document-node/core': 3.2.0(graphql@14.3.1)
       '@repeaterjs/repeater': 3.0.4
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
 
   '@graphql-tools/git-loader@7.3.0(@babel/core@7.23.9)(graphql@14.3.1)':
@@ -37150,7 +38294,7 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       globby: 11.1.0
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       unixify: 1.0.0
 
   '@graphql-tools/graphql-tag-pluck@7.5.2(@babel/core@7.23.9)(graphql@14.3.1)':
@@ -37171,14 +38315,14 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
       resolve-from: 5.0.0
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/json-file-loader@7.4.18(graphql@14.3.1)':
     dependencies:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       globby: 11.1.0
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       unixify: 1.0.0
 
   '@graphql-tools/load@7.8.14(graphql@14.3.1)':
@@ -37187,19 +38331,19 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
       p-limit: 3.1.0
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/merge@8.3.1(graphql@14.3.1)':
     dependencies:
       '@graphql-tools/utils': 8.9.0(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/merge@8.4.2(graphql@14.3.1)':
     dependencies:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/mock@8.7.20(graphql@14.3.1)':
     dependencies:
@@ -37207,12 +38351,12 @@ snapshots:
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       fast-json-stable-stringify: 2.1.0
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/optimize@1.4.0(graphql@14.3.1)':
     dependencies:
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/prisma-loader@7.2.72(@types/node@22.5.2)(encoding@0.1.13)(graphql@14.3.1)':
     dependencies:
@@ -37233,7 +38377,7 @@ snapshots:
       json-stable-stringify: 1.0.2
       lodash: 4.17.21
       scuid: 1.1.0
-      tslib: 2.6.2
+      tslib: 2.7.0
       yaml-ast-parser: 0.0.43
     transitivePeerDependencies:
       - '@types/node'
@@ -37247,7 +38391,7 @@ snapshots:
       '@ardatan/relay-compiler': 12.0.0(encoding@0.1.13)(graphql@14.3.1)
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -37257,7 +38401,7 @@ snapshots:
       '@graphql-tools/merge': 8.3.1(graphql@14.3.1)
       '@graphql-tools/utils': 8.9.0(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.11
 
   '@graphql-tools/schema@9.0.19(graphql@14.3.1)':
@@ -37265,7 +38409,7 @@ snapshots:
       '@graphql-tools/merge': 8.4.2(graphql@14.3.1)
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
 
   '@graphql-tools/url-loader@7.17.18(@types/node@22.5.2)(encoding@0.1.13)(graphql@14.3.1)':
@@ -37281,7 +38425,7 @@ snapshots:
       '@whatwg-node/fetch': 0.8.8
       graphql: 14.3.1
       isomorphic-ws: 5.0.0(ws@8.18.0)
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
       ws: 8.18.0
     transitivePeerDependencies:
@@ -37293,18 +38437,18 @@ snapshots:
   '@graphql-tools/utils@8.13.1(graphql@14.3.1)':
     dependencies:
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/utils@8.9.0(graphql@14.3.1)':
     dependencies:
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/utils@9.2.1(graphql@14.3.1)':
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@graphql-tools/wrap@9.4.2(graphql@14.3.1)':
     dependencies:
@@ -37312,7 +38456,7 @@ snapshots:
       '@graphql-tools/schema': 9.0.19(graphql@14.3.1)
       '@graphql-tools/utils': 9.2.1(graphql@14.3.1)
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
       value-or-promise: 1.0.12
 
   '@graphql-typed-document-node/core@3.2.0(graphql@14.3.1)':
@@ -37378,7 +38522,7 @@ snapshots:
       '@inquirer/figures': 1.0.5
       '@inquirer/type': 1.5.1
       '@types/mute-stream': 0.0.4
-      '@types/node': 22.0.2
+      '@types/node': 22.5.2
       '@types/wrap-ansi': 3.0.0
       ansi-escapes: 4.3.2
       cli-spinners: 2.9.2
@@ -37902,8 +39046,8 @@ snapshots:
 
   '@jridgewell/source-map@0.3.3':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
@@ -37931,21 +39075,21 @@ snapshots:
 
   '@jsdevtools/ono@7.1.3': {}
 
-  '@jsonjoy.com/base64@1.1.2(tslib@2.6.3)':
+  '@jsonjoy.com/base64@1.1.2(tslib@2.7.0)':
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
-  '@jsonjoy.com/json-pack@1.0.4(tslib@2.6.3)':
+  '@jsonjoy.com/json-pack@1.0.4(tslib@2.7.0)':
     dependencies:
-      '@jsonjoy.com/base64': 1.1.2(tslib@2.6.3)
-      '@jsonjoy.com/util': 1.3.0(tslib@2.6.3)
+      '@jsonjoy.com/base64': 1.1.2(tslib@2.7.0)
+      '@jsonjoy.com/util': 1.3.0(tslib@2.7.0)
       hyperdyperid: 1.2.0
-      thingies: 1.21.0(tslib@2.6.3)
-      tslib: 2.6.3
+      thingies: 1.21.0(tslib@2.7.0)
+      tslib: 2.7.0
 
-  '@jsonjoy.com/util@1.3.0(tslib@2.6.3)':
+  '@jsonjoy.com/util@1.3.0(tslib@2.7.0)':
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
   '@juggle/resize-observer@3.4.0': {}
 
@@ -37988,7 +39132,7 @@ snapshots:
     dependencies:
       ajv: 8.17.1
       ajv-formats: 2.1.1(ajv@8.17.1)
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@leichtgewicht/ip-codec@2.0.4': {}
 
@@ -38026,7 +39170,7 @@ snapshots:
       '@motionone/easing': 10.15.1
       '@motionone/types': 10.15.1
       '@motionone/utils': 10.15.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@motionone/dom@10.16.2':
     dependencies:
@@ -38035,18 +39179,18 @@ snapshots:
       '@motionone/types': 10.15.1
       '@motionone/utils': 10.15.1
       hey-listen: 1.0.8
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@motionone/easing@10.15.1':
     dependencies:
       '@motionone/utils': 10.15.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@motionone/generators@10.15.1':
     dependencies:
       '@motionone/types': 10.15.1
       '@motionone/utils': 10.15.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@motionone/types@10.15.1': {}
 
@@ -38054,7 +39198,7 @@ snapshots:
     dependencies:
       '@motionone/types': 10.15.1
       hey-listen: 1.0.8
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
     optional: true
@@ -38086,6 +39230,12 @@ snapshots:
       typescript: 5.5.3
       webpack: 5.92.1(esbuild@0.21.5)
 
+  '@ngtools/webpack@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3))(typescript@5.5.3)(webpack@5.92.1(esbuild@0.21.5))':
+    dependencies:
+      '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.3)
+      typescript: 5.5.3
+      webpack: 5.92.1(esbuild@0.21.5)
+
   '@nice-move/prettier-plugin-package-json@0.8.0(prettier@3.3.2)':
     dependencies:
       prettier: 3.3.2
@@ -38104,9 +39254,9 @@ snapshots:
 
   '@npmcli/agent@2.2.2':
     dependencies:
-      agent-base: 7.1.0
+      agent-base: 7.1.1
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
       lru-cache: 10.4.2
       socks-proxy-agent: 8.0.4
     transitivePeerDependencies:
@@ -38130,7 +39280,7 @@ snapshots:
       proc-log: 4.2.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.6.2
+      semver: 7.6.3
       which: 4.0.0
     transitivePeerDependencies:
       - bluebird
@@ -38155,7 +39305,7 @@ snapshots:
       json-parse-even-better-errors: 3.0.2
       normalize-package-data: 6.0.2
       proc-log: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
     transitivePeerDependencies:
       - bluebird
 
@@ -38348,7 +39498,7 @@ snapshots:
       react-dom: 17.0.2(react@17.0.2)
       react-dropzone: 11.7.1(react@17.0.2)
       tippy.js: 5.1.2
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@patternfly/react-icons@4.93.6(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
     dependencies:
@@ -38374,18 +39524,18 @@ snapshots:
     dependencies:
       asn1js: 3.0.5
       pvtsutils: 1.3.5
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@peculiar/json-schema@1.1.12':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@peculiar/webcrypto@1.4.3':
     dependencies:
       '@peculiar/asn1-schema': 2.3.6
       '@peculiar/json-schema': 1.1.12
       pvtsutils: 1.3.5
-      tslib: 2.6.2
+      tslib: 2.7.0
       webcrypto-core: 1.7.7
 
   '@pkgjs/parseargs@0.11.0':
@@ -41023,7 +42173,7 @@ snapshots:
 
   '@storybook/csf-tools@7.4.6':
     dependencies:
-      '@babel/generator': 7.23.6
+      '@babel/generator': 7.25.0
       '@babel/parser': 7.23.9
       '@babel/traverse': 7.23.9
       '@babel/types': 7.23.9
@@ -41037,7 +42187,7 @@ snapshots:
 
   '@storybook/csf-tools@7.6.13':
     dependencies:
-      '@babel/generator': 7.23.6
+      '@babel/generator': 7.25.0
       '@babel/parser': 7.23.9
       '@babel/traverse': 7.23.9
       '@babel/types': 7.23.9
@@ -41384,7 +42534,7 @@ snapshots:
       flat-cache: 3.0.4
       micromatch: 4.0.8
       react-docgen-typescript: 2.2.2(typescript@5.5.3)
-      tslib: 2.6.2
+      tslib: 2.7.0
       typescript: 5.5.3
       webpack: 5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
     transitivePeerDependencies:
@@ -41398,7 +42548,7 @@ snapshots:
       flat-cache: 3.0.4
       micromatch: 4.0.8
       react-docgen-typescript: 2.2.2(typescript@5.5.3)
-      tslib: 2.6.2
+      tslib: 2.7.0
       typescript: 5.5.3
       webpack: 5.94.0(esbuild@0.18.20)
     transitivePeerDependencies:
@@ -41412,7 +42562,7 @@ snapshots:
       flat-cache: 3.0.4
       micromatch: 4.0.8
       react-docgen-typescript: 2.2.2(typescript@5.5.3)
-      tslib: 2.6.2
+      tslib: 2.7.0
       typescript: 5.5.3
       webpack: 5.94.0(webpack-cli@4.10.0)
     transitivePeerDependencies:
@@ -41802,7 +42952,7 @@ snapshots:
 
   '@svgr/hast-util-to-babel-ast@6.2.1':
     dependencies:
-      '@babel/types': 7.23.9
+      '@babel/types': 7.25.2
       entities: 3.0.1
 
   '@svgr/plugin-jsx@6.2.1(@svgr/core@6.2.1)':
@@ -42237,17 +43387,15 @@ snapshots:
   '@types/eslint-scope@3.7.3':
     dependencies:
       '@types/eslint': 7.2.10
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
 
   '@types/eslint@7.2.10':
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       '@types/json-schema': 7.0.15
 
   '@types/estree@0.0.51': {}
 
-  '@types/estree@1.0.1': {}
-
   '@types/estree@1.0.5': {}
 
   '@types/express-serve-static-core@4.17.31':
@@ -42460,10 +43608,6 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
-  '@types/node@22.0.2':
-    dependencies:
-      undici-types: 6.11.1
-
   '@types/node@22.5.2':
     dependencies:
       undici-types: 6.19.8
@@ -42757,7 +43901,7 @@ snapshots:
       debug: 4.3.6
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.4
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@5.5.3)
     optionalDependencies:
       typescript: 5.5.3
@@ -42774,7 +43918,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.3)
       eslint: 8.52.0
       eslint-scope: 5.1.1
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -43072,7 +44216,7 @@ snapshots:
       '@types/node': 22.5.2
       '@whatwg-node/events': 0.0.2
       busboy: 1.6.0
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@whatwg-node/node-fetch@0.3.6':
     dependencies:
@@ -43080,7 +44224,7 @@ snapshots:
       busboy: 1.6.0
       fast-querystring: 1.1.2
       fast-url-parser: 1.1.3
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@wojtekmaj/date-utils@1.5.0': {}
 
@@ -43229,7 +44373,7 @@ snapshots:
   '@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.18.20)':
     dependencies:
       esbuild: 0.18.20
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   '@yarnpkg/extensions@1.1.0-rc.6(@yarnpkg/core@4.0.0-rc.50(typanion@3.9.0))':
     dependencies:
@@ -43373,13 +44517,9 @@ snapshots:
 
   acorn-globals@7.0.1:
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.12.1
       acorn-walk: 8.2.0
 
-  acorn-import-attributes@1.9.5(acorn@8.10.0):
-    dependencies:
-      acorn: 8.10.0
-
   acorn-import-attributes@1.9.5(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -43388,9 +44528,9 @@ snapshots:
     dependencies:
       acorn: 7.4.1
 
-  acorn-jsx@5.3.2(acorn@8.10.0):
+  acorn-jsx@5.3.2(acorn@8.12.1):
     dependencies:
-      acorn: 8.10.0
+      acorn: 8.12.1
 
   acorn-walk@7.2.0: {}
 
@@ -43421,12 +44561,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.1.0:
-    dependencies:
-      debug: 4.3.6
-    transitivePeerDependencies:
-      - supports-color
-
   agent-base@7.1.1:
     dependencies:
       debug: 4.3.6
@@ -43773,7 +44907,7 @@ snapshots:
 
   aria-hidden@1.2.3:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   aria-query@5.1.3:
     dependencies:
@@ -43902,7 +45036,7 @@ snapshots:
     dependencies:
       pvtsutils: 1.3.5
       pvutils: 1.1.3
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   assert-plus@1.0.0: {}
 
@@ -43920,7 +45054,7 @@ snapshots:
 
   ast-types@0.14.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   ast-types@0.15.2:
     dependencies:
@@ -43928,7 +45062,7 @@ snapshots:
 
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   astral-regex@2.0.0: {}
 
@@ -43962,11 +45096,11 @@ snapshots:
 
   autoprefixer@10.4.19(postcss@8.4.38):
     dependencies:
-      browserslist: 4.23.0
-      caniuse-lite: 1.0.30001600
+      browserslist: 4.23.3
+      caniuse-lite: 1.0.30001655
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.1.0
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
 
@@ -44873,13 +46007,6 @@ snapshots:
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
 
-  browserslist@4.23.2:
-    dependencies:
-      caniuse-lite: 1.0.30001646
-      electron-to-chromium: 1.5.4
-      node-releases: 2.0.14
-      update-browserslist-db: 1.1.0(browserslist@4.23.2)
-
   browserslist@4.23.3:
     dependencies:
       caniuse-lite: 1.0.30001655
@@ -45027,7 +46154,7 @@ snapshots:
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
       ssri: 10.0.6
-      tar: 6.2.0
+      tar: 6.2.1
       unique-filename: 3.0.0
 
   cache-base@1.0.1:
@@ -45102,7 +46229,7 @@ snapshots:
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   camelcase@4.1.0: {}
 
@@ -45123,14 +46250,12 @@ snapshots:
 
   caniuse-lite@1.0.30001600: {}
 
-  caniuse-lite@1.0.30001646: {}
-
   caniuse-lite@1.0.30001655: {}
 
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
       upper-case-first: 2.0.2
 
   capture-exit@2.0.0:
@@ -45212,7 +46337,7 @@ snapshots:
       path-case: 3.0.4
       sentence-case: 3.0.4
       snake-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   char-regex@1.0.2: {}
 
@@ -45242,7 +46367,7 @@ snapshots:
       htmlparser2: 6.1.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   chevrotain@7.1.1:
     dependencies:
@@ -45290,10 +46415,6 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  chrome-trace-event@1.0.2:
-    dependencies:
-      tslib: 1.14.1
-
   chrome-trace-event@1.0.4: {}
 
   ci-info@2.0.0: {}
@@ -45353,8 +46474,6 @@ snapshots:
     dependencies:
       restore-cursor: 5.1.0
 
-  cli-spinners@2.6.0: {}
-
   cli-spinners@2.9.2: {}
 
   cli-table3@0.6.1:
@@ -45604,7 +46723,7 @@ snapshots:
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
       upper-case: 2.0.2
 
   constants-browserify@1.0.0: {}
@@ -46050,7 +47169,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
       webpack: 5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
 
   css-loader@6.7.1(webpack@5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)):
@@ -46062,7 +47181,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
       webpack: 5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)
 
   css-loader@6.7.1(webpack@5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.1)(webpack@5.94.0))):
@@ -46074,7 +47193,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
       webpack: 5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.1)(webpack@5.94.0))
 
   css-loader@6.7.1(webpack@5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0))):
@@ -46086,7 +47205,7 @@ snapshots:
       postcss-modules-scope: 3.0.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
       webpack: 5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0))
 
   css-loader@7.1.2(webpack@5.92.1(esbuild@0.21.5)):
@@ -46098,7 +47217,7 @@ snapshots:
       postcss-modules-scope: 3.2.0(postcss@8.4.38)
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       postcss-value-parser: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
     optionalDependencies:
       webpack: 5.92.1(esbuild@0.21.5)
 
@@ -46924,7 +48043,7 @@ snapshots:
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   dotenv-expand@10.0.0: {}
 
@@ -46984,8 +48103,6 @@ snapshots:
 
   electron-to-chromium@1.5.13: {}
 
-  electron-to-chromium@1.5.4: {}
-
   elkjs@0.8.2: {}
 
   elkjs@0.9.1: {}
@@ -47651,8 +48768,8 @@ snapshots:
 
   espree@9.6.1:
     dependencies:
-      acorn: 8.10.0
-      acorn-jsx: 5.3.2(acorn@8.10.0)
+      acorn: 8.12.1
+      acorn-jsx: 5.3.2(acorn@8.12.1)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
@@ -47671,7 +48788,7 @@ snapshots:
 
   estree-to-babel@3.2.1:
     dependencies:
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.25.3
       '@babel/types': 7.25.2
       c8: 7.14.0
     transitivePeerDependencies:
@@ -48080,11 +49197,11 @@ snapshots:
 
   file-selector@0.2.4:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   file-selector@0.4.0:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   file-system-cache@2.3.0:
     dependencies:
@@ -48270,9 +49387,9 @@ snapshots:
     optionalDependencies:
       debug: 4.3.4
 
-  follow-redirects@1.15.6(debug@4.3.5):
+  follow-redirects@1.15.6(debug@4.3.6):
     optionalDependencies:
-      debug: 4.3.5
+      debug: 4.3.6
 
   for-each@0.3.3:
     dependencies:
@@ -48296,7 +49413,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.23.5
       chalk: 4.1.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       cosmiconfig: 7.0.1
       deepmerge: 4.2.2
       fs-extra: 10.1.0
@@ -48304,7 +49421,7 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.5.4
+      semver: 7.6.3
       tapable: 2.2.1
       typescript: 5.5.3
       webpack: 5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)
@@ -48313,7 +49430,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.23.5
       chalk: 4.1.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       cosmiconfig: 7.0.1
       deepmerge: 4.2.2
       fs-extra: 10.1.0
@@ -48321,7 +49438,7 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.5.4
+      semver: 7.6.3
       tapable: 2.2.1
       typescript: 5.5.3
       webpack: 5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)
@@ -48330,7 +49447,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.23.5
       chalk: 4.1.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       cosmiconfig: 7.0.1
       deepmerge: 4.2.2
       fs-extra: 10.1.0
@@ -48338,7 +49455,7 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.5.4
+      semver: 7.6.3
       tapable: 2.2.1
       typescript: 5.5.3
       webpack: 5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.1)(webpack@5.94.0))
@@ -48347,7 +49464,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.23.5
       chalk: 4.1.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       cosmiconfig: 7.0.1
       deepmerge: 4.2.2
       fs-extra: 10.1.0
@@ -48355,7 +49472,7 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.5.4
+      semver: 7.6.3
       tapable: 2.2.1
       typescript: 5.5.3
       webpack: 5.94.0(@swc/core@1.3.92)(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0))
@@ -48575,7 +49692,7 @@ snapshots:
     dependencies:
       colorette: 2.0.20
       defu: 6.1.2
-      https-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
       mri: 1.2.0
       node-fetch-native: 1.4.0
       pathe: 1.1.1
@@ -48669,7 +49786,7 @@ snapshots:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.11
+      fast-glob: 3.3.2
       ignore: 5.2.0
       merge2: 1.4.1
       slash: 3.0.0
@@ -48776,7 +49893,7 @@ snapshots:
       jiti: 1.17.1
       minimatch: 4.2.3
       string-env-interpolation: 1.0.1
-      tslib: 2.6.2
+      tslib: 2.7.0
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -48798,7 +49915,7 @@ snapshots:
   graphql-tag@2.12.6(graphql@14.3.1):
     dependencies:
       graphql: 14.3.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   graphql-ws@5.12.1(graphql@14.3.1):
     dependencies:
@@ -48908,7 +50025,7 @@ snapshots:
   header-case@2.0.4:
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   heatmap.js@2.0.5: {}
 
@@ -48991,7 +50108,7 @@ snapshots:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.19.3
+      terser: 5.31.6
 
   html-replace-webpack-plugin@2.6.0: {}
 
@@ -49145,14 +50262,14 @@ snapshots:
 
   http-proxy-agent@6.1.1:
     dependencies:
-      agent-base: 7.1.0
+      agent-base: 7.1.1
       debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.0
+      agent-base: 7.1.1
       debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
@@ -49172,11 +50289,11 @@ snapshots:
   http-proxy-middleware@3.0.0:
     dependencies:
       '@types/http-proxy': 1.17.14
-      debug: 4.3.5
-      http-proxy: 1.18.1(debug@4.3.5)
+      debug: 4.3.6
+      http-proxy: 1.18.1(debug@4.3.6)
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
     transitivePeerDependencies:
       - supports-color
 
@@ -49188,10 +50305,10 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  http-proxy@1.18.1(debug@4.3.5):
+  http-proxy@1.18.1(debug@4.3.6):
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.6(debug@4.3.5)
+      follow-redirects: 1.15.6(debug@4.3.6)
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -49263,22 +50380,15 @@ snapshots:
 
   https-proxy-agent@6.2.1:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.6
-    transitivePeerDependencies:
-      - supports-color
-
-  https-proxy-agent@7.0.2:
-    dependencies:
-      agent-base: 7.1.0
+      agent-base: 7.1.1
       debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
-      agent-base: 7.1.0
-      debug: 4.3.5
+      agent-base: 7.1.1
+      debug: 4.3.6
     transitivePeerDependencies:
       - supports-color
 
@@ -49585,7 +50695,7 @@ snapshots:
 
   is-lower-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   is-map@2.0.2: {}
 
@@ -49677,7 +50787,7 @@ snapshots:
 
   is-upper-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   is-weakmap@2.0.1: {}
 
@@ -49759,7 +50869,7 @@ snapshots:
   istanbul-lib-instrument@5.1.0:
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.3
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -49769,10 +50879,10 @@ snapshots:
   istanbul-lib-instrument@6.0.2:
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/parser': 7.23.9
+      '@babel/parser': 7.25.3
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
-      semver: 7.6.2
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -50364,7 +51474,7 @@ snapshots:
       walker: 1.0.8
       which: 2.0.2
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     transitivePeerDependencies:
       - supports-color
 
@@ -50508,7 +51618,7 @@ snapshots:
   jest-snapshot@29.7.0:
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/generator': 7.23.6
+      '@babel/generator': 7.25.0
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.24.9)
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.24.9)
       '@babel/types': 7.23.9
@@ -50526,7 +51636,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -51244,7 +52354,7 @@ snapshots:
     dependencies:
       copy-anything: 2.0.3
       parse-node-version: 1.0.1
-      tslib: 2.6.3
+      tslib: 2.7.0
     optionalDependencies:
       errno: 0.1.8
       graceful-fs: 4.2.11
@@ -51317,7 +52427,7 @@ snapshots:
       colorette: 2.0.20
       log-update: 4.0.0
       p-map: 4.0.0
-      rfdc: 1.3.0
+      rfdc: 1.4.1
       rxjs: 7.8.1
       through: 2.3.8
       wrap-ansi: 7.0.0
@@ -51355,8 +52465,6 @@ snapshots:
       strip-bom: 4.0.0
       type-fest: 0.6.0
 
-  loader-runner@4.2.0: {}
-
   loader-runner@4.3.0: {}
 
   loader-utils@2.0.2:
@@ -51489,11 +52597,11 @@ snapshots:
 
   lower-case-first@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   lower-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   lowercase-keys@2.0.0: {}
 
@@ -51679,10 +52787,10 @@ snapshots:
 
   memfs@4.11.1:
     dependencies:
-      '@jsonjoy.com/json-pack': 1.0.4(tslib@2.6.3)
-      '@jsonjoy.com/util': 1.3.0(tslib@2.6.3)
-      tree-dump: 1.0.2(tslib@2.6.3)
-      tslib: 2.6.3
+      '@jsonjoy.com/json-pack': 1.0.4(tslib@2.7.0)
+      '@jsonjoy.com/util': 1.3.0(tslib@2.7.0)
+      tree-dump: 1.0.2(tslib@2.7.0)
+      tslib: 2.7.0
 
   memoize-one@5.2.1: {}
 
@@ -52127,11 +53235,11 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   node-abi@3.43.0:
     dependencies:
-      semver: 7.5.4
+      semver: 7.6.3
 
   node-abort-controller@3.1.1: {}
 
@@ -52379,7 +53487,7 @@ snapshots:
 
   npm-install-checks@6.3.0:
     dependencies:
-      semver: 7.6.2
+      semver: 7.6.3
 
   npm-normalize-package-bin@1.0.1: {}
 
@@ -52389,7 +53497,7 @@ snapshots:
     dependencies:
       hosted-git-info: 7.0.2
       proc-log: 4.2.0
-      semver: 7.6.2
+      semver: 7.6.3
       validate-npm-package-name: 5.0.1
 
   npm-packlist@3.0.0:
@@ -52408,7 +53516,7 @@ snapshots:
       npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 11.0.2
-      semver: 7.6.2
+      semver: 7.6.3
 
   npm-registry-fetch@17.1.0:
     dependencies:
@@ -52620,7 +53728,7 @@ snapshots:
       bl: 4.1.0
       chalk: 4.1.2
       cli-cursor: 3.1.0
-      cli-spinners: 2.6.0
+      cli-spinners: 2.9.2
       is-interactive: 1.0.0
       is-unicode-supported: 0.1.0
       log-symbols: 4.1.0
@@ -52759,7 +53867,7 @@ snapshots:
       promise-retry: 2.0.1
       sigstore: 2.3.1
       ssri: 10.0.6
-      tar: 6.2.0
+      tar: 6.2.1
     transitivePeerDependencies:
       - bluebird
       - supports-color
@@ -52771,7 +53879,7 @@ snapshots:
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   parent-module@1.0.1:
     dependencies:
@@ -52835,7 +53943,7 @@ snapshots:
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   pascalcase@0.1.1: {}
 
@@ -52862,7 +53970,7 @@ snapshots:
   path-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   path-exists@3.0.0: {}
 
@@ -53011,7 +54119,7 @@ snapshots:
       https-proxy-agent: 5.0.1
       node-fetch: 2.6.11(encoding@0.1.13)
       progress: 2.0.3
-      semver: 7.5.4
+      semver: 7.6.3
       tar-fs: 2.1.1
       yargs: 16.2.0
     transitivePeerDependencies:
@@ -53119,7 +54227,7 @@ snapshots:
       cosmiconfig: 9.0.0(typescript@5.5.3)
       jiti: 1.21.6
       postcss: 8.4.38
-      semver: 7.6.2
+      semver: 7.6.3
     optionalDependencies:
       webpack: 5.92.1(esbuild@0.21.5)
     transitivePeerDependencies:
@@ -53306,13 +54414,13 @@ snapshots:
   postcss@8.4.12:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.1.0
       source-map-js: 1.2.0
 
   postcss@8.4.38:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.1.0
       source-map-js: 1.2.0
 
   postinstall-postinstall@2.1.0: {}
@@ -53540,7 +54648,7 @@ snapshots:
 
   pvtsutils@1.3.5:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   pvutils@1.1.3: {}
 
@@ -53771,7 +54879,7 @@ snapshots:
   react-docgen@5.4.3:
     dependencies:
       '@babel/core': 7.24.9
-      '@babel/generator': 7.23.6
+      '@babel/generator': 7.25.0
       '@babel/runtime': 7.24.7
       ast-types: 0.14.2
       commander: 2.20.3
@@ -53956,7 +55064,7 @@ snapshots:
     dependencies:
       react: 17.0.2
       react-style-singleton: 2.2.1(@types/react@17.0.21)(react@17.0.2)
-      tslib: 2.6.2
+      tslib: 2.7.0
     optionalDependencies:
       '@types/react': 17.0.21
 
@@ -53965,7 +55073,7 @@ snapshots:
       react: 17.0.2
       react-remove-scroll-bar: 2.3.4(@types/react@17.0.21)(react@17.0.2)
       react-style-singleton: 2.2.1(@types/react@17.0.21)(react@17.0.2)
-      tslib: 2.6.2
+      tslib: 2.7.0
       use-callback-ref: 1.3.0(@types/react@17.0.21)(react@17.0.2)
       use-sidecar: 1.1.2(@types/react@17.0.21)(react@17.0.2)
     optionalDependencies:
@@ -54035,7 +55143,7 @@ snapshots:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 17.0.2
-      tslib: 2.6.2
+      tslib: 2.7.0
     optionalDependencies:
       '@types/react': 17.0.21
 
@@ -54250,7 +55358,7 @@ snapshots:
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   rechoir@0.6.2:
     dependencies:
@@ -54613,7 +55721,7 @@ snapshots:
 
   rxjs@7.8.1:
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
   safe-array-concat@1.0.1:
     dependencies:
@@ -54861,7 +55969,7 @@ snapshots:
   sentence-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
       upper-case-first: 2.0.2
 
   serialize-javascript@6.0.1:
@@ -55090,7 +56198,7 @@ snapshots:
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   snapdragon-node@2.1.1:
     dependencies:
@@ -55272,7 +56380,7 @@ snapshots:
 
   sponge-case@1.0.1:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   sprintf-js@1.0.3: {}
 
@@ -55612,7 +56720,7 @@ snapshots:
       mime: 2.6.0
       qs: 6.13.0
       readable-stream: 3.6.0
-      semver: 7.5.4
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -55676,7 +56784,7 @@ snapshots:
 
   swap-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   swc-loader@0.2.3(@swc/core@1.3.92)(webpack@5.94.0(@swc/core@1.3.92)(esbuild@0.18.20)(webpack-cli@4.10.0)):
     dependencies:
@@ -55941,8 +57049,8 @@ snapshots:
 
   terser@5.29.2:
     dependencies:
-      '@jridgewell/source-map': 0.3.3
-      acorn: 8.10.0
+      '@jridgewell/source-map': 0.3.6
+      acorn: 8.12.1
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -55967,9 +57075,9 @@ snapshots:
 
   text-table@0.2.0: {}
 
-  thingies@1.21.0(tslib@2.6.3):
+  thingies@1.21.0(tslib@2.7.0):
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
   throttleit@1.0.0: {}
 
@@ -56011,7 +57119,7 @@ snapshots:
 
   title-case@3.0.3:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   tmp@0.0.33:
     dependencies:
@@ -56082,9 +57190,9 @@ snapshots:
 
   transformation-matrix@2.16.1: {}
 
-  tree-dump@1.0.2(tslib@2.6.3):
+  tree-dump@1.0.2(tslib@2.7.0):
     dependencies:
-      tslib: 2.6.3
+      tslib: 2.7.0
 
   tree-kill@1.2.2: {}
 
@@ -56686,8 +57794,6 @@ snapshots:
 
   undici-types@5.26.5: {}
 
-  undici-types@6.11.1: {}
-
   undici-types@6.19.8: {}
 
   undici@5.28.4:
@@ -56810,7 +57916,7 @@ snapshots:
   unplugin@1.5.0:
     dependencies:
       acorn: 8.12.1
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
 
@@ -56833,12 +57939,6 @@ snapshots:
     dependencies:
       browserslist: 4.23.0
       escalade: 3.2.0
-      picocolors: 1.0.1
-
-  update-browserslist-db@1.1.0(browserslist@4.23.2):
-    dependencies:
-      browserslist: 4.23.2
-      escalade: 3.2.0
       picocolors: 1.1.0
 
   update-browserslist-db@1.1.0(browserslist@4.23.3):
@@ -56856,11 +57956,11 @@ snapshots:
 
   upper-case-first@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   upper-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   uri-js@4.4.1:
     dependencies:
@@ -56916,7 +58016,7 @@ snapshots:
   use-callback-ref@1.3.0(@types/react@17.0.21)(react@17.0.2):
     dependencies:
       react: 17.0.2
-      tslib: 2.6.2
+      tslib: 2.7.0
     optionalDependencies:
       '@types/react': 17.0.21
 
@@ -56947,7 +58047,7 @@ snapshots:
     dependencies:
       detect-node-es: 1.1.0
       react: 17.0.2
-      tslib: 2.6.2
+      tslib: 2.7.0
     optionalDependencies:
       '@types/react': 17.0.21
 
@@ -56981,7 +58081,7 @@ snapshots:
 
   v8-to-istanbul@9.1.3:
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.18
+      '@jridgewell/trace-mapping': 0.3.25
       '@types/istanbul-lib-coverage': 2.0.1
       convert-source-map: 2.0.0
 
@@ -57259,7 +58359,7 @@ snapshots:
 
   vscode-json-languageservice@4.1.8:
     dependencies:
-      jsonc-parser: 3.2.0
+      jsonc-parser: 3.3.1
       vscode-languageserver-textdocument: 1.0.7
       vscode-languageserver-types: 3.17.2
       vscode-nls: 5.2.0
@@ -57356,7 +58456,7 @@ snapshots:
       '@peculiar/json-schema': 1.1.12
       asn1js: 3.0.5
       pvtsutils: 1.3.5
-      tslib: 2.6.2
+      tslib: 2.7.0
 
   webidl-conversions@3.0.1: {}
 
@@ -57365,7 +58465,7 @@ snapshots:
   webpack-bundle-analyzer@4.10.2:
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      acorn: 8.10.0
+      acorn: 8.12.1
       acorn-walk: 8.2.0
       commander: 7.2.0
       debounce: 1.2.1
@@ -57373,7 +58473,7 @@ snapshots:
       gzip-size: 6.0.0
       html-escaper: 2.0.2
       opener: 1.5.2
-      picocolors: 1.0.1
+      picocolors: 1.1.0
       sirv: 2.0.4
       ws: 7.5.10
     transitivePeerDependencies:
@@ -57394,7 +58494,7 @@ snapshots:
       interpret: 2.2.0
       rechoir: 0.7.0
       webpack: 5.94.0(webpack-cli@4.10.0)
-      webpack-merge: 5.9.0
+      webpack-merge: 5.10.0
     optionalDependencies:
       webpack-bundle-analyzer: 4.10.2
       webpack-dev-server: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
@@ -57413,7 +58513,7 @@ snapshots:
       interpret: 2.2.0
       rechoir: 0.7.0
       webpack: 5.94.0(webpack-cli@4.10.0)
-      webpack-merge: 5.9.0
+      webpack-merge: 5.10.0
     optionalDependencies:
       webpack-dev-server: 4.15.1(webpack-cli@4.10.0)(webpack@5.94.0)
 
@@ -57431,7 +58531,7 @@ snapshots:
       interpret: 2.2.0
       rechoir: 0.7.0
       webpack: 5.94.0(webpack-cli@4.10.0)
-      webpack-merge: 5.9.0
+      webpack-merge: 5.10.0
 
   webpack-dev-middleware@5.3.3(webpack@5.94.0(webpack-cli@4.10.0)):
     dependencies:
@@ -57495,7 +58595,7 @@ snapshots:
     dependencies:
       colorette: 2.0.20
       memfs: 4.11.1
-      mime-types: 2.1.34
+      mime-types: 2.1.35
       on-finished: 2.4.1
       range-parser: 1.2.1
       schema-utils: 4.2.0
@@ -57664,24 +58764,24 @@ snapshots:
       '@webassemblyjs/ast': 1.12.1
       '@webassemblyjs/wasm-edit': 1.12.1
       '@webassemblyjs/wasm-parser': 1.12.1
-      acorn: 8.10.0
-      acorn-import-attributes: 1.9.5(acorn@8.10.0)
-      browserslist: 4.23.2
-      chrome-trace-event: 1.0.2
+      acorn: 8.12.1
+      acorn-import-attributes: 1.9.5(acorn@8.12.1)
+      browserslist: 4.23.3
+      chrome-trace-event: 1.0.4
       enhanced-resolve: 5.17.1
-      es-module-lexer: 1.4.1
+      es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
       json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.2.0
-      mime-types: 2.1.34
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
       terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5))
-      watchpack: 2.4.1
+      watchpack: 2.4.2
       webpack-sources: 3.2.3
     transitivePeerDependencies:
       - '@swc/core'
diff --git a/repo/graph.dot b/repo/graph.dot
index be8cdef7a2e..f8a1a25983c 100644
--- a/repo/graph.dot
+++ b/repo/graph.dot
@@ -10,35 +10,44 @@ digraph G {
   "@kie-tools-scripts/update-kogito-version" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools-scripts/update-stream-name" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools-scripts/update-version" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools-examples/base64png-editor" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/bpmn-editor-classic-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-core/react-hooks" [ color = "purple", fontcolor = "purple", style = "rounded" ];
+  "@kie-tools/kie-bc-editors" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/stunner-editors" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
+  "@kie-tools-examples/dmn-editor-classic-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/dmn-editor-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools/dmn-editor-envelope" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools-examples/dmn-editor-standalone-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools/dmn-editor-standalone" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools-examples/kie-sandbox-commit-message-validation-service" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools/root-env" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools-core/editor" [ color = "purple", fontcolor = "purple", style = "rounded" ];
-  "@kie-tools-examples/base64png-editor-chrome-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools-core/chrome-extension" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools-core/webpack-base" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "kie-tools-examples-base64png-editor-vscode-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools-core/vscode-extension" [ color = "purple", fontcolor = "purple", style = "rounded" ];
-  "@kie-tools-examples/commit-message-validation-service" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools/root-env" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools-examples/dmn-editor-standalone-examples" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools/dmn-editor-standalone" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools-examples/drools-process-usertasks-quarkus-example" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-core/envelope" [ color = "purple", fontcolor = "purple", style = "rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/process-compact-architecture" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools/jbpm-quarkus-devui" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools-examples/jbpm-compact-architecture-example" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools/kogito-management-console" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools-examples/ping-pong-view" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools-core/envelope" [ color = "purple", fontcolor = "purple", style = "rounded" ];
-  "@kie-tools-examples/ping-pong-view-angular" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools-examples/ping-pong-view-react" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools-examples/sonataflow-greeting-quarkus-example" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/process-user-tasks-subsystem" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
+  "@kie-tools/serverless-workflow-standalone-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools-examples/sonataflow-greeting" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools/sonataflow-quarkus-devui" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools-examples/todo-list-view" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "kie-tools-examples-todo-list-view-vscode-extension" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools-examples/uniforms-patternfly" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
   "@kie-tools-core/patternfly-base" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools/uniforms-patternfly" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools-examples/webapp" [ color = "orange", fontcolor = "orange", style = "dashed, rounded" ];
-  "@kie-tools/kie-editors-standalone" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools/serverless-workflow-standalone-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/boxed-expression-component" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools-core/operating-system" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools/feel-input-component" [ color = "blue", fontcolor = "blue", style = "rounded" ];
@@ -48,8 +57,6 @@ digraph G {
   "@kie-tools/xml-parser-ts-codegen" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "bpmn-vscode-extension" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/form-code-generator-vscode-command" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools/kie-bc-editors" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools/stunner-editors" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/vscode-java-code-completion-extension-plugin" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "chrome-extension-pack-kogito-kie-editors" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/chrome-extension-test-helper" [ color = "blue", fontcolor = "blue", style = "rounded" ];
@@ -97,9 +104,7 @@ digraph G {
   "@kie-tools/dev-deployment-kogito-quarkus-blank-app-image" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/maven-m2-repo-via-http-image" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/dmn-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools-core/react-hooks" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools/pmml-editor-marshaller" [ color = "blue", fontcolor = "blue", style = "rounded" ];
-  "@kie-tools/dmn-editor-envelope" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/dmn-feel-antlr4-parser" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/dmn-marshaller" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/dmn-language-service" [ color = "blue", fontcolor = "blue", style = "rounded" ];
@@ -131,6 +136,7 @@ digraph G {
   "kie-editors-dev-vscode-extension" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/pmml-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/vscode-extension-common-test-helpers" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/kie-editors-standalone" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/kie-sandbox-accelerator-quarkus" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/kie-sandbox-distribution" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/kie-sandbox-extended-services-image" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
@@ -214,36 +220,50 @@ digraph G {
   "kie-tools-root" -> "@kie-tools-scripts/update-kogito-version" [ style = "dashed", color = "black" ];
   "kie-tools-root" -> "@kie-tools-scripts/update-stream-name" [ style = "dashed", color = "black" ];
   "kie-tools-root" -> "@kie-tools-scripts/update-version" [ style = "dashed", color = "black" ];
-  "@kie-tools-examples/base64png-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/base64png-editor-chrome-extension" -> "@kie-tools-core/chrome-extension" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/base64png-editor-chrome-extension" -> "@kie-tools-examples/base64png-editor" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/base64png-editor-chrome-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
-  "kie-tools-examples-base64png-editor-vscode-extension" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "orange" ];
-  "kie-tools-examples-base64png-editor-vscode-extension" -> "@kie-tools-examples/base64png-editor" [ style = "solid", color = "orange" ];
-  "kie-tools-examples-base64png-editor-vscode-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
-  "@kie-tools-examples/commit-message-validation-service" -> "@kie-tools/root-env" [ style = "dashed", color = "orange" ];
-  "@kie-tools-examples/dmn-editor-standalone-examples" -> "@kie-tools/dmn-editor-standalone" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/drools-process-usertasks-quarkus-example" -> "@kie-tools/jbpm-quarkus-devui" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/jbpm-compact-architecture-example" -> "@kie-tools/jbpm-quarkus-devui" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/jbpm-compact-architecture-example" -> "@kie-tools/kogito-management-console" [ style = "dashed", color = "orange" ];
-  "@kie-tools-examples/ping-pong-view" -> "@kie-tools-core/envelope" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/ping-pong-view-angular" -> "@kie-tools-examples/ping-pong-view" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/ping-pong-view-react" -> "@kie-tools-examples/ping-pong-view" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/sonataflow-greeting-quarkus-example" -> "@kie-tools/sonataflow-quarkus-devui" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/todo-list-view" -> "@kie-tools-core/envelope" [ style = "solid", color = "orange" ];
-  "kie-tools-examples-todo-list-view-vscode-extension" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "orange" ];
-  "kie-tools-examples-todo-list-view-vscode-extension" -> "@kie-tools-examples/todo-list-view" [ style = "solid", color = "orange" ];
-  "kie-tools-examples-todo-list-view-vscode-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/bpmn-editor-classic-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/bpmn-editor-classic-on-webapp" -> "@kie-tools/kie-bc-editors" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/bpmn-editor-classic-on-webapp" -> "@kie-tools/stunner-editors" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/dmn-editor-classic-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/dmn-editor-classic-on-webapp" -> "@kie-tools/kie-bc-editors" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/dmn-editor-classic-on-webapp" -> "@kie-tools/stunner-editors" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/dmn-editor-on-webapp" -> "@kie-tools/dmn-editor-envelope" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/dmn-editor-standalone-on-webapp" -> "@kie-tools/dmn-editor-standalone" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/kie-sandbox-commit-message-validation-service" -> "@kie-tools/root-env" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension" -> "@kie-tools-core/chrome-extension" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension" -> "@kie-tools-core/vscode-extension" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view" -> "@kie-tools-core/envelope" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" -> "@kie-tools-core/editor" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view" -> "@kie-tools-core/envelope" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp" -> "@kie-tools-core/editor" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension" -> "@kie-tools-core/vscode-extension" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
+  "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension" -> "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/process-compact-architecture" -> "@kie-tools/jbpm-quarkus-devui" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/process-compact-architecture" -> "@kie-tools/kogito-management-console" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/process-user-tasks-subsystem" -> "@kie-tools/jbpm-quarkus-devui" [ style = "solid", color = "orange" ];
+  "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp" -> "@kie-tools-core/react-hooks" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp" -> "@kie-tools/serverless-workflow-standalone-editor" [ style = "dashed", color = "orange" ];
+  "@kie-tools-examples/sonataflow-greeting" -> "@kie-tools/sonataflow-quarkus-devui" [ style = "solid", color = "orange" ];
   "@kie-tools-examples/uniforms-patternfly" -> "@kie-tools-core/patternfly-base" [ style = "solid", color = "orange" ];
   "@kie-tools-examples/uniforms-patternfly" -> "@kie-tools/uniforms-patternfly" [ style = "solid", color = "orange" ];
   "@kie-tools-examples/uniforms-patternfly" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools-examples/base64png-editor" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools-examples/ping-pong-view-angular" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools-examples/ping-pong-view-react" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools-examples/todo-list-view" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools/dmn-editor-standalone" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools/kie-editors-standalone" [ style = "solid", color = "orange" ];
-  "@kie-tools-examples/webapp" -> "@kie-tools/serverless-workflow-standalone-editor" [ style = "solid", color = "orange" ];
   "@kie-tools/boxed-expression-component" -> "@kie-tools-core/operating-system" [ style = "solid", color = "blue" ];
   "@kie-tools/boxed-expression-component" -> "@kie-tools/feel-input-component" [ style = "solid", color = "blue" ];
   "@kie-tools/boxed-expression-component" -> "@kie-tools/playwright-base" [ style = "dashed", color = "blue" ];
diff --git a/repo/graph.json b/repo/graph.json
index bb53965ede8..5a4b9408bc6 100644
--- a/repo/graph.json
+++ b/repo/graph.json
@@ -11,58 +11,93 @@
       { "id": "@kie-tools-scripts/update-version" },
       { "id": "@kie-tools-scripts/build-env" },
       { "id": "@kie-tools/tsconfig" },
-      { "id": "@kie-tools-examples/base64png-editor" },
+      { "id": "@kie-tools-examples/bpmn-editor-classic-on-webapp" },
+      { "id": "@kie-tools-core/react-hooks" },
+      { "id": "@kie-tools/kie-bc-editors" },
+      { "id": "@kie-tools/stunner-editors" },
+      { "id": "@kie-tools/eslint" },
+      { "id": "@kie-tools/root-env" },
       { "id": "@kie-tools-core/editor" },
+      { "id": "@kie-tools-core/vscode-java-code-completion" },
+      { "id": "@kie-tools/dmn-language-service" },
+      { "id": "@kie-tools/pmml-editor-marshaller" },
+      { "id": "@kie-tools/stunner-editors-dmn-loader" },
+      { "id": "@kie-tools-examples/dmn-editor-classic-on-webapp" },
+      { "id": "@kie-tools-examples/dmn-editor-on-webapp" },
+      { "id": "@kie-tools/dmn-editor-envelope" },
+      { "id": "@kie-tools/dmn-editor" },
+      { "id": "@kie-tools-examples/dmn-editor-standalone-on-webapp" },
+      { "id": "@kie-tools/dmn-editor-standalone" },
+      {
+        "id": "@kie-tools-examples/kie-sandbox-commit-message-validation-service"
+      },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor"
+      },
       { "id": "@kie-tools-core/envelope" },
       { "id": "@kie-tools-core/keyboard-shortcuts" },
       { "id": "@kie-tools-core/notifications" },
       { "id": "@kie-tools-core/patternfly-base" },
-      { "id": "@kie-tools-examples/base64png-editor-chrome-extension" },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension"
+      },
       { "id": "@kie-tools-core/chrome-extension" },
       { "id": "@kie-tools-core/webpack-base" },
-      { "id": "@kie-tools/root-env" },
-      { "id": "kie-tools-examples-base64png-editor-vscode-extension" },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp"
+      },
+      {
+        "id": "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension"
+      },
       { "id": "@kie-tools-core/vscode-extension" },
-      { "id": "@kie-tools-core/vscode-java-code-completion" },
-      { "id": "@kie-tools-examples/commit-message-validation-service" },
-      { "id": "@kie-tools-examples/dmn-editor-standalone-examples" },
-      { "id": "@kie-tools/dmn-editor-standalone" },
-      { "id": "@kie-tools/dmn-editor-envelope" },
-      { "id": "@kie-tools-examples/drools-process-usertasks-quarkus-example" },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view"
+      },
+      { "id": "@kie-tools-core/envelope-bus" },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular"
+      },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react"
+      },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp"
+      },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view"
+      },
+      {
+        "id": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp"
+      },
+      {
+        "id": "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension"
+      },
+      { "id": "@kie-tools-examples/process-compact-architecture" },
       { "id": "@kie-tools/jbpm-quarkus-devui" },
+      { "id": "@kie-tools/kogito-management-console" },
       { "id": "@kie-tools/maven-base" },
       { "id": "@kie-tools/runtime-tools-process-dev-ui-webapp" },
-      { "id": "@kie-tools-examples/jbpm-compact-architecture-example" },
-      { "id": "@kie-tools/kogito-management-console" },
       { "id": "@kie-tools/image-builder" },
       { "id": "@kie-tools/image-env-to-json" },
       { "id": "@kie-tools/runtime-tools-management-console-webapp" },
-      { "id": "@kie-tools-examples/ping-pong-view" },
-      { "id": "@kie-tools-core/envelope-bus" },
-      { "id": "@kie-tools-examples/ping-pong-view-angular" },
-      { "id": "@kie-tools-examples/ping-pong-view-react" },
-      { "id": "@kie-tools-examples/sonataflow-greeting-quarkus-example" },
+      { "id": "@kie-tools-examples/process-user-tasks-subsystem" },
+      {
+        "id": "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp"
+      },
+      { "id": "@kie-tools/serverless-workflow-standalone-editor" },
+      { "id": "@kie-tools/serverless-workflow-combined-editor" },
+      { "id": "@kie-tools-examples/sonataflow-greeting" },
       { "id": "@kie-tools/sonataflow-quarkus-devui" },
       { "id": "@kie-tools/serverless-workflow-dev-ui-webapp" },
-      { "id": "@kie-tools-examples/todo-list-view" },
-      { "id": "kie-tools-examples-todo-list-view-vscode-extension" },
       { "id": "@kie-tools-examples/uniforms-patternfly" },
       { "id": "@kie-tools/uniforms-patternfly" },
-      { "id": "@kie-tools/eslint" },
       { "id": "@kie-tools/jest-base" },
-      { "id": "@kie-tools-examples/webapp" },
-      { "id": "@kie-tools/kie-editors-standalone" },
-      { "id": "@kie-tools/serverless-workflow-standalone-editor" },
-      { "id": "@kie-tools/kie-bc-editors" },
-      { "id": "@kie-tools/stunner-editors" },
-      { "id": "@kie-tools/serverless-workflow-combined-editor" },
       { "id": "@kie-tools/boxed-expression-component" },
       { "id": "@kie-tools-core/operating-system" },
       { "id": "@kie-tools/feel-input-component" },
       { "id": "@kie-tools/playwright-base" },
       { "id": "@kie-tools/storybook-base" },
       { "id": "@kie-tools-core/monaco-editor" },
-      { "id": "@kie-tools/dmn-language-service" },
       { "id": "@kie-tools/i18n-common-dictionary" },
       { "id": "@kie-tools/bpmn-marshaller" },
       { "id": "@kie-tools/xml-parser-ts-codegen" },
@@ -71,8 +106,6 @@
       { "id": "@kie-tools/form-code-generator-vscode-command" },
       { "id": "@kie-tools/vscode-java-code-completion-extension-plugin" },
       { "id": "@kie-tools/jbpm-form-code-generator-themes" },
-      { "id": "@kie-tools/pmml-editor-marshaller" },
-      { "id": "@kie-tools/stunner-editors-dmn-loader" },
       { "id": "chrome-extension-pack-kogito-kie-editors" },
       { "id": "@kie-tools/chrome-extension-test-helper" },
       { "id": "chrome-extension-serverless-workflow-editor" },
@@ -102,7 +135,6 @@
       { "id": "@kie-tools/dashbuilder-viewer" },
       { "id": "@kie-tools/dashbuilder-viewer-deployment-webapp" },
       { "id": "@kie-tools-core/workspaces-git-fs" },
-      { "id": "@kie-tools-core/react-hooks" },
       { "id": "@kie-tools-core/workspace" },
       { "id": "@kie-tools/kie-sandbox-fs" },
       { "id": "@kie-tools-core/i18n" },
@@ -118,7 +150,6 @@
       { "id": "@kie-tools/dev-deployment-kogito-quarkus-blank-app" },
       { "id": "@kie-tools/dev-deployment-kogito-quarkus-blank-app-image" },
       { "id": "@kie-tools/maven-m2-repo-via-http-image" },
-      { "id": "@kie-tools/dmn-editor" },
       { "id": "@kie-tools/dmn-feel-antlr4-parser" },
       { "id": "@kie-tools/dmn-marshaller" },
       { "id": "@kie-tools/dmn-marshaller-backend-compatibility-tester" },
@@ -141,6 +172,7 @@
       { "id": "kie-editors-dev-vscode-extension" },
       { "id": "@kie-tools/pmml-editor" },
       { "id": "@kie-tools/vscode-extension-common-test-helpers" },
+      { "id": "@kie-tools/kie-editors-standalone" },
       { "id": "@kie-tools/kie-sandbox-accelerator-quarkus" },
       { "id": "@kie-tools/kie-sandbox-distribution" },
       { "id": "@kie-tools/kie-sandbox-extended-services-image" },
@@ -261,10 +293,60 @@
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/base64png-editor",
+        "source": "@kie-tools-examples/bpmn-editor-classic-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/bpmn-editor-classic-on-webapp",
+        "target": "@kie-tools/kie-bc-editors",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/bpmn-editor-classic-on-webapp",
+        "target": "@kie-tools/stunner-editors",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-core/react-hooks",
+        "target": "@kie-tools/eslint",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-core/react-hooks",
+        "target": "@kie-tools/root-env",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-core/react-hooks",
+        "target": "@kie-tools/tsconfig",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/kie-bc-editors",
         "target": "@kie-tools-core/editor",
         "weight": 1
       },
+      {
+        "source": "@kie-tools/kie-bc-editors",
+        "target": "@kie-tools-core/vscode-java-code-completion",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/kie-bc-editors",
+        "target": "@kie-tools/dmn-language-service",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/kie-bc-editors",
+        "target": "@kie-tools/pmml-editor-marshaller",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/stunner-editors",
+        "target": "@kie-tools/stunner-editors-dmn-loader",
+        "weight": 1
+      },
       {
         "source": "@kie-tools-core/editor",
         "target": "@kie-tools-core/envelope",
@@ -286,107 +368,102 @@
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/envelope",
-        "target": "@kie-tools-core/envelope-bus",
+        "source": "@kie-tools-core/vscode-java-code-completion",
+        "target": "@kie-tools/eslint",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/keyboard-shortcuts",
-        "target": "@kie-tools-core/envelope-bus",
+        "source": "@kie-tools-core/vscode-java-code-completion",
+        "target": "@kie-tools/root-env",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/keyboard-shortcuts",
-        "target": "@kie-tools-core/operating-system",
+        "source": "@kie-tools-core/vscode-java-code-completion",
+        "target": "@kie-tools/tsconfig",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/notifications",
-        "target": "@kie-tools-core/i18n",
+        "source": "@kie-tools/dmn-language-service",
+        "target": "@kie-tools/dmn-feel-antlr4-parser",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/notifications",
-        "target": "@kie-tools-core/workspace",
+        "source": "@kie-tools/dmn-language-service",
+        "target": "@kie-tools-core/switch-expression-ts",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/patternfly-base",
-        "target": "@kie-tools/root-env",
+        "source": "@kie-tools/pmml-editor-marshaller",
+        "target": "@kie-tools/eslint",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/base64png-editor-chrome-extension",
-        "target": "@kie-tools-core/chrome-extension",
+        "source": "@kie-tools/pmml-editor-marshaller",
+        "target": "@kie-tools/jest-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/base64png-editor-chrome-extension",
-        "target": "@kie-tools-examples/base64png-editor",
+        "source": "@kie-tools/pmml-editor-marshaller",
+        "target": "@kie-tools/tsconfig",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/base64png-editor-chrome-extension",
-        "target": "@kie-tools-core/webpack-base",
+        "source": "@kie-tools/stunner-editors-dmn-loader",
+        "target": "@kie-tools/boxed-expression-component",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/chrome-extension",
-        "target": "@kie-tools-core/editor",
+        "source": "@kie-tools/stunner-editors-dmn-loader",
+        "target": "@kie-tools/import-java-classes-component",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/webpack-base",
-        "target": "@kie-tools/root-env",
+        "source": "@kie-tools-examples/dmn-editor-classic-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-base64png-editor-vscode-extension",
-        "target": "@kie-tools-core/vscode-extension",
+        "source": "@kie-tools-examples/dmn-editor-classic-on-webapp",
+        "target": "@kie-tools/kie-bc-editors",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-base64png-editor-vscode-extension",
-        "target": "@kie-tools-examples/base64png-editor",
+        "source": "@kie-tools-examples/dmn-editor-classic-on-webapp",
+        "target": "@kie-tools/stunner-editors",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-base64png-editor-vscode-extension",
-        "target": "@kie-tools-core/webpack-base",
+        "source": "@kie-tools-examples/dmn-editor-on-webapp",
+        "target": "@kie-tools/dmn-editor-envelope",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/vscode-extension",
+        "source": "@kie-tools/dmn-editor-envelope",
         "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/vscode-extension",
-        "target": "@kie-tools-core/vscode-java-code-completion",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools-core/vscode-java-code-completion",
-        "target": "@kie-tools/eslint",
+        "source": "@kie-tools/dmn-editor-envelope",
+        "target": "@kie-tools/dmn-editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/vscode-java-code-completion",
-        "target": "@kie-tools/root-env",
+        "source": "@kie-tools/dmn-editor",
+        "target": "@kie-tools-core/react-hooks",
         "weight": 1
       },
       {
-        "source": "@kie-tools-core/vscode-java-code-completion",
-        "target": "@kie-tools/tsconfig",
+        "source": "@kie-tools/dmn-editor",
+        "target": "@kie-tools/boxed-expression-component",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/commit-message-validation-service",
-        "target": "@kie-tools/root-env",
+        "source": "@kie-tools/dmn-editor",
+        "target": "@kie-tools/pmml-editor-marshaller",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/dmn-editor-standalone-examples",
+        "source": "@kie-tools-examples/dmn-editor-standalone-on-webapp",
         "target": "@kie-tools/dmn-editor-standalone",
         "weight": 1
       },
@@ -396,102 +473,112 @@
         "weight": 1
       },
       {
-        "source": "@kie-tools/dmn-editor-envelope",
+        "source": "@kie-tools-examples/kie-sandbox-commit-message-validation-service",
+        "target": "@kie-tools/root-env",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
         "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/dmn-editor-envelope",
-        "target": "@kie-tools/dmn-editor",
+        "source": "@kie-tools-core/envelope",
+        "target": "@kie-tools-core/envelope-bus",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/drools-process-usertasks-quarkus-example",
-        "target": "@kie-tools/jbpm-quarkus-devui",
+        "source": "@kie-tools-core/keyboard-shortcuts",
+        "target": "@kie-tools-core/envelope-bus",
         "weight": 1
       },
       {
-        "source": "@kie-tools/jbpm-quarkus-devui",
-        "target": "@kie-tools/maven-base",
+        "source": "@kie-tools-core/keyboard-shortcuts",
+        "target": "@kie-tools-core/operating-system",
         "weight": 1
       },
       {
-        "source": "@kie-tools/jbpm-quarkus-devui",
-        "target": "@kie-tools/runtime-tools-process-dev-ui-webapp",
+        "source": "@kie-tools-core/notifications",
+        "target": "@kie-tools-core/i18n",
         "weight": 1
       },
       {
-        "source": "@kie-tools/maven-base",
+        "source": "@kie-tools-core/notifications",
+        "target": "@kie-tools-core/workspace",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-core/patternfly-base",
         "target": "@kie-tools/root-env",
         "weight": 1
       },
       {
-        "source": "@kie-tools/runtime-tools-process-dev-ui-webapp",
-        "target": "@kie-tools/runtime-tools-process-webapp-components",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension",
+        "target": "@kie-tools-core/chrome-extension",
         "weight": 1
       },
       {
-        "source": "@kie-tools/runtime-tools-process-dev-ui-webapp",
-        "target": "@kie-tools/runtime-tools-shared-webapp-components",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension",
+        "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/jbpm-compact-architecture-example",
-        "target": "@kie-tools/jbpm-quarkus-devui",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/jbpm-compact-architecture-example",
-        "target": "@kie-tools/kogito-management-console",
+        "source": "@kie-tools-core/chrome-extension",
+        "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kogito-management-console",
-        "target": "@kie-tools/image-builder",
+        "source": "@kie-tools-core/webpack-base",
+        "target": "@kie-tools/root-env",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kogito-management-console",
-        "target": "@kie-tools/image-env-to-json",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kogito-management-console",
-        "target": "@kie-tools/runtime-tools-management-console-webapp",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp",
+        "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools/image-builder",
-        "target": "@kie-tools/tsconfig",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/image-env-to-json",
-        "target": "@kie-tools-core/webpack-base",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension",
+        "target": "@kie-tools-core/vscode-extension",
         "weight": 1
       },
       {
-        "source": "@kie-tools/image-env-to-json",
-        "target": "@kie-tools/eslint",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension",
+        "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools/image-env-to-json",
-        "target": "@kie-tools/tsconfig",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/runtime-tools-management-console-webapp",
-        "target": "@kie-tools/runtime-tools-process-webapp-components",
+        "source": "@kie-tools-core/vscode-extension",
+        "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/runtime-tools-management-console-webapp",
-        "target": "@kie-tools/runtime-tools-shared-webapp-components",
+        "source": "@kie-tools-core/vscode-extension",
+        "target": "@kie-tools-core/vscode-java-code-completion",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/ping-pong-view",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view",
         "target": "@kie-tools-core/envelope",
         "weight": 1
       },
@@ -511,173 +598,178 @@
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/ping-pong-view-angular",
-        "target": "@kie-tools-examples/ping-pong-view",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/ping-pong-view-react",
-        "target": "@kie-tools-examples/ping-pong-view",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/sonataflow-greeting-quarkus-example",
-        "target": "@kie-tools/sonataflow-quarkus-devui",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/sonataflow-quarkus-devui",
-        "target": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+        "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
-        "target": "@kie-tools/runtime-tools-shared-webapp-components",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
         "weight": 1
       },
       {
-        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
-        "target": "@kie-tools/runtime-tools-swf-webapp-components",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+        "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
-        "target": "@kie-tools/serverless-workflow-dev-ui-monitoring-webapp",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular",
         "weight": 1
       },
       {
-        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
-        "target": "@kie-tools/sonataflow-dev-app",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/todo-list-view",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view",
         "target": "@kie-tools-core/envelope",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-todo-list-view-vscode-extension",
-        "target": "@kie-tools-core/vscode-extension",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
+        "target": "@kie-tools-core/editor",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-todo-list-view-vscode-extension",
-        "target": "@kie-tools-examples/todo-list-view",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
         "weight": 1
       },
       {
-        "source": "kie-tools-examples-todo-list-view-vscode-extension",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
         "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/uniforms-patternfly",
-        "target": "@kie-tools-core/patternfly-base",
+        "source": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/uniforms-patternfly",
-        "target": "@kie-tools/uniforms-patternfly",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension",
+        "target": "@kie-tools-core/vscode-extension",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/uniforms-patternfly",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension",
         "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools/uniforms-patternfly",
-        "target": "@kie-tools/eslint",
+        "source": "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension",
+        "target": "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view",
         "weight": 1
       },
       {
-        "source": "@kie-tools/uniforms-patternfly",
-        "target": "@kie-tools/jest-base",
+        "source": "@kie-tools-examples/process-compact-architecture",
+        "target": "@kie-tools/jbpm-quarkus-devui",
         "weight": 1
       },
       {
-        "source": "@kie-tools/uniforms-patternfly",
-        "target": "@kie-tools/tsconfig",
+        "source": "@kie-tools-examples/process-compact-architecture",
+        "target": "@kie-tools/kogito-management-console",
         "weight": 1
       },
       {
-        "source": "@kie-tools/jest-base",
-        "target": "@kie-tools/root-env",
+        "source": "@kie-tools/jbpm-quarkus-devui",
+        "target": "@kie-tools/maven-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools-examples/base64png-editor",
+        "source": "@kie-tools/jbpm-quarkus-devui",
+        "target": "@kie-tools/runtime-tools-process-dev-ui-webapp",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools-examples/ping-pong-view-angular",
+        "source": "@kie-tools/kogito-management-console",
+        "target": "@kie-tools/image-builder",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools-examples/ping-pong-view-react",
+        "source": "@kie-tools/kogito-management-console",
+        "target": "@kie-tools/image-env-to-json",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools-examples/todo-list-view",
+        "source": "@kie-tools/kogito-management-console",
+        "target": "@kie-tools/runtime-tools-management-console-webapp",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools/dmn-editor-standalone",
+        "source": "@kie-tools/maven-base",
+        "target": "@kie-tools/root-env",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools/kie-editors-standalone",
+        "source": "@kie-tools/runtime-tools-process-dev-ui-webapp",
+        "target": "@kie-tools/runtime-tools-process-webapp-components",
         "weight": 1
       },
       {
-        "source": "@kie-tools-examples/webapp",
-        "target": "@kie-tools/serverless-workflow-standalone-editor",
+        "source": "@kie-tools/runtime-tools-process-dev-ui-webapp",
+        "target": "@kie-tools/runtime-tools-shared-webapp-components",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-editors-standalone",
-        "target": "@kie-tools/kie-bc-editors",
+        "source": "@kie-tools/image-builder",
+        "target": "@kie-tools/tsconfig",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-editors-standalone",
-        "target": "@kie-tools/stunner-editors",
+        "source": "@kie-tools/image-env-to-json",
+        "target": "@kie-tools-core/webpack-base",
         "weight": 1
       },
       {
-        "source": "@kie-tools/serverless-workflow-standalone-editor",
-        "target": "@kie-tools/serverless-workflow-combined-editor",
+        "source": "@kie-tools/image-env-to-json",
+        "target": "@kie-tools/eslint",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-bc-editors",
-        "target": "@kie-tools-core/editor",
+        "source": "@kie-tools/image-env-to-json",
+        "target": "@kie-tools/tsconfig",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-bc-editors",
-        "target": "@kie-tools-core/vscode-java-code-completion",
+        "source": "@kie-tools/runtime-tools-management-console-webapp",
+        "target": "@kie-tools/runtime-tools-process-webapp-components",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-bc-editors",
-        "target": "@kie-tools/dmn-language-service",
+        "source": "@kie-tools/runtime-tools-management-console-webapp",
+        "target": "@kie-tools/runtime-tools-shared-webapp-components",
         "weight": 1
       },
       {
-        "source": "@kie-tools/kie-bc-editors",
-        "target": "@kie-tools/pmml-editor-marshaller",
+        "source": "@kie-tools-examples/process-user-tasks-subsystem",
+        "target": "@kie-tools/jbpm-quarkus-devui",
         "weight": 1
       },
       {
-        "source": "@kie-tools/stunner-editors",
-        "target": "@kie-tools/stunner-editors-dmn-loader",
+        "source": "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp",
+        "target": "@kie-tools-core/react-hooks",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp",
+        "target": "@kie-tools/serverless-workflow-standalone-editor",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/serverless-workflow-standalone-editor",
+        "target": "@kie-tools/serverless-workflow-combined-editor",
         "weight": 1
       },
       {
@@ -690,6 +782,71 @@
         "target": "@kie-tools/serverless-workflow-text-editor",
         "weight": 1
       },
+      {
+        "source": "@kie-tools-examples/sonataflow-greeting",
+        "target": "@kie-tools/sonataflow-quarkus-devui",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/sonataflow-quarkus-devui",
+        "target": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "target": "@kie-tools/runtime-tools-shared-webapp-components",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "target": "@kie-tools/runtime-tools-swf-webapp-components",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "target": "@kie-tools/serverless-workflow-dev-ui-monitoring-webapp",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/serverless-workflow-dev-ui-webapp",
+        "target": "@kie-tools/sonataflow-dev-app",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/uniforms-patternfly",
+        "target": "@kie-tools-core/patternfly-base",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/uniforms-patternfly",
+        "target": "@kie-tools/uniforms-patternfly",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools-examples/uniforms-patternfly",
+        "target": "@kie-tools-core/webpack-base",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/uniforms-patternfly",
+        "target": "@kie-tools/eslint",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/uniforms-patternfly",
+        "target": "@kie-tools/jest-base",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/uniforms-patternfly",
+        "target": "@kie-tools/tsconfig",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/jest-base",
+        "target": "@kie-tools/root-env",
+        "weight": 1
+      },
       {
         "source": "@kie-tools/boxed-expression-component",
         "target": "@kie-tools-core/operating-system",
@@ -785,16 +942,6 @@
         "target": "@kie-tools/tsconfig",
         "weight": 1
       },
-      {
-        "source": "@kie-tools/dmn-language-service",
-        "target": "@kie-tools/dmn-feel-antlr4-parser",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/dmn-language-service",
-        "target": "@kie-tools-core/switch-expression-ts",
-        "weight": 1
-      },
       {
         "source": "@kie-tools/i18n-common-dictionary",
         "target": "@kie-tools-core/i18n",
@@ -870,31 +1017,6 @@
         "target": "@kie-tools/form-code-generator-patternfly-theme",
         "weight": 1
       },
-      {
-        "source": "@kie-tools/pmml-editor-marshaller",
-        "target": "@kie-tools/eslint",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/pmml-editor-marshaller",
-        "target": "@kie-tools/jest-base",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/pmml-editor-marshaller",
-        "target": "@kie-tools/tsconfig",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/stunner-editors-dmn-loader",
-        "target": "@kie-tools/boxed-expression-component",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/stunner-editors-dmn-loader",
-        "target": "@kie-tools/import-java-classes-component",
-        "weight": 1
-      },
       {
         "source": "chrome-extension-pack-kogito-kie-editors",
         "target": "@kie-tools-core/chrome-extension",
@@ -1300,21 +1422,6 @@
         "target": "@kie-tools/kie-sandbox-fs",
         "weight": 1
       },
-      {
-        "source": "@kie-tools-core/react-hooks",
-        "target": "@kie-tools/eslint",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools-core/react-hooks",
-        "target": "@kie-tools/root-env",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools-core/react-hooks",
-        "target": "@kie-tools/tsconfig",
-        "weight": 1
-      },
       {
         "source": "@kie-tools-core/workspace",
         "target": "@kie-tools-core/operating-system",
@@ -1460,21 +1567,6 @@
         "target": "@kie-tools/root-env",
         "weight": 1
       },
-      {
-        "source": "@kie-tools/dmn-editor",
-        "target": "@kie-tools-core/react-hooks",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/dmn-editor",
-        "target": "@kie-tools/boxed-expression-component",
-        "weight": 1
-      },
-      {
-        "source": "@kie-tools/dmn-editor",
-        "target": "@kie-tools/pmml-editor-marshaller",
-        "weight": 1
-      },
       {
         "source": "@kie-tools/dmn-feel-antlr4-parser",
         "target": "@kie-tools/dmn-marshaller",
@@ -1745,6 +1837,16 @@
         "target": "@kie-tools/tsconfig",
         "weight": 1
       },
+      {
+        "source": "@kie-tools/kie-editors-standalone",
+        "target": "@kie-tools/kie-bc-editors",
+        "weight": 1
+      },
+      {
+        "source": "@kie-tools/kie-editors-standalone",
+        "target": "@kie-tools/stunner-editors",
+        "weight": 1
+      },
       {
         "source": "@kie-tools/kie-sandbox-accelerator-quarkus",
         "target": "@kie-tools/jbpm-quarkus-devui",
@@ -2579,24 +2681,66 @@
   },
   "serializedPackagesLocationByName": [
     ["kie-tools-root", ""],
-    ["@kie-tools-examples/base64png-editor", "examples/base64png-editor"],
-    ["@kie-tools-examples/base64png-editor-chrome-extension", "examples/base64png-editor-chrome-extension"],
-    ["kie-tools-examples-base64png-editor-vscode-extension", "examples/base64png-editor-vscode-extension"],
-    ["@kie-tools-examples/commit-message-validation-service", "examples/commit-message-validation-service"],
-    ["@kie-tools-examples/dmn-editor-standalone-examples", "examples/dmn-editor-standalone-examples"],
+    ["@kie-tools-examples/bpmn-editor-classic-on-webapp", "examples/bpmn-editor-classic-on-webapp"],
+    ["@kie-tools-examples/dmn-editor-classic-on-webapp", "examples/dmn-editor-classic-on-webapp"],
+    ["@kie-tools-examples/dmn-editor-on-webapp", "examples/dmn-editor-on-webapp"],
+    ["@kie-tools-examples/dmn-editor-standalone-on-webapp", "examples/dmn-editor-standalone-on-webapp"],
+    [
+      "@kie-tools-examples/kie-sandbox-commit-message-validation-service",
+      "examples/kie-sandbox-commit-message-validation-service"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor",
+      "examples/micro-frontends-multiplying-architecture-base64png-editor"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension",
+      "examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp",
+      "examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp"
+    ],
+    [
+      "kie-tools-examples-micro-frontends-multiplying-architecture-base64png-editor-vscode-extension",
+      "examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view",
+      "examples/micro-frontends-multiplying-architecture-ping-pong-view"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular",
+      "examples/micro-frontends-multiplying-architecture-ping-pong-view-in-angular"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react",
+      "examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp",
+      "examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view",
+      "examples/micro-frontends-multiplying-architecture-todo-list-view"
+    ],
+    [
+      "@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp",
+      "examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp"
+    ],
+    [
+      "kie-tools-examples-micro-frontends-multiplying-architecture-todo-list-view-vscode-extension",
+      "examples/micro-frontends-multiplying-architecture-todo-list-view-vscode-extension"
+    ],
+    ["@kie-tools-examples/process-compact-architecture", "examples/process-compact-architecture"],
+    ["@kie-tools-examples/process-user-tasks-subsystem", "examples/process-user-tasks-subsystem"],
     [
-      "@kie-tools-examples/drools-process-usertasks-quarkus-example",
-      "examples/drools-process-usertasks-quarkus-example"
+      "@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp",
+      "examples/serverless-workflow-editor-standalone-on-webapp"
     ],
-    ["@kie-tools-examples/jbpm-compact-architecture-example", "examples/jbpm-compact-architecture-example"],
-    ["@kie-tools-examples/ping-pong-view", "examples/ping-pong-view"],
-    ["@kie-tools-examples/ping-pong-view-angular", "examples/ping-pong-view-angular"],
-    ["@kie-tools-examples/ping-pong-view-react", "examples/ping-pong-view-react"],
-    ["@kie-tools-examples/sonataflow-greeting-quarkus-example", "examples/sonataflow-greeting-quarkus-example"],
-    ["@kie-tools-examples/todo-list-view", "examples/todo-list-view"],
-    ["kie-tools-examples-todo-list-view-vscode-extension", "examples/todo-list-view-vscode-extension"],
+    ["@kie-tools-examples/sonataflow-greeting", "examples/sonataflow-greeting"],
     ["@kie-tools-examples/uniforms-patternfly", "examples/uniforms-patternfly"],
-    ["@kie-tools-examples/webapp", "examples/webapp"],
     ["@kie-tools/boxed-expression-component", "packages/boxed-expression-component"],
     ["@kie-tools/bpmn-marshaller", "packages/bpmn-marshaller"],
     ["bpmn-vscode-extension", "packages/bpmn-vscode-extension"],
diff --git a/scripts/README.md b/scripts/README.md
new file mode 100644
index 00000000000..de55648e63c
--- /dev/null
+++ b/scripts/README.md
@@ -0,0 +1,3 @@
+# KIE Tools :: Scripts
+
+This directory contains source code for packages hosting scripts that are used throughout the monorepo. Packages in this directory are all dependencies of the root `package.json`, making them available at the top-level, and to all packages on `packages` and `examples` directories during their builds.