From 663c7419803fd49ec35e912671c8f612b0568e6c Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sun, 29 Dec 2024 14:57:27 +0200
Subject: [PATCH 1/4] refactor: banner component

---
 src/components/content/ProExample.vue | 48 +++++++-------------
 src/components/shared/Banner.vue      | 63 +++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 32 deletions(-)
 create mode 100644 src/components/shared/Banner.vue

diff --git a/src/components/content/ProExample.vue b/src/components/content/ProExample.vue
index 2c1d2aa..22e7068 100644
--- a/src/components/content/ProExample.vue
+++ b/src/components/content/ProExample.vue
@@ -1,15 +1,13 @@
 <template lang="pug">
-IViewAlert.alert(show-icon)
-  .content
-    .text {{ $t('examplesPage.proExample.alert') }}
-    Tooltip(placement="top")
-      template(#content)
-        .tooltip {{ $t('examplesPage.proExample.info') }}
-      Button.question(type="text" shape="circle")
-        Icon.icon(name="f7:question-circle")
-    Button.button(:to="patreon.link" target="_blank") {{ $t('examplesPage.proExample.getAccess') }}
-  template(#icon)
-    Icon.icon(name="ion:finger-print")
+Banner(
+  icon="ion:finger-print"
+  :tooltip="{ icon: 'f7:question-circle' }"
+  :action="{ label: $t('examplesPage.proExample.getAccess') }"
+  @action="openPatreon"
+)
+  template(v-slot:text) {{ $t('examplesPage.proExample.alert') }}
+  template(v-slot:tooltip) {{ $t('examplesPage.proExample.info') }}
+
 BaseExample
   iframe(
     :src="src"
@@ -19,6 +17,7 @@ BaseExample
 
 <script lang="ts">
 import sponsor from '../../consts/sponsor.json'
+import Banner from '../shared/Banner.vue'
 import BaseExample from '../shared/BaseExample.vue'
 
 export default {
@@ -30,34 +29,19 @@ export default {
       ...sponsor
     }
   },
+  methods: {
+    openPatreon() {
+      window.open(this.patreon.link, '_blank')
+    }
+  },
   components: {
+    Banner,
     BaseExample
   }
 }
 </script>
 
 <style lang="sass" scoped>
-@import '@/assets/styles/media.sass'
-
-.alert
-  padding-right: 8px
-  .content
-    display: flex
-    align-items: center
-    gap: 0.5em
-    .text
-      flex: 1
-    .tooltip
-      text-align: center
-      max-width: 14em
-      text-wrap: wrap
-  .icon
-    font-size: 1.25em
-  .question
-    padding: 0.2em 0.5em
-    .icon
-      vertical-align: text-top
-
 iframe
   width: 100%
   height: 100%
diff --git a/src/components/shared/Banner.vue b/src/components/shared/Banner.vue
new file mode 100644
index 0000000..472ccec
--- /dev/null
+++ b/src/components/shared/Banner.vue
@@ -0,0 +1,63 @@
+<template lang="pug">
+IViewAlert.banner(show-icon)
+  .content
+    .text
+      slot(name="text")
+    Tooltip(v-if="tooltip", placement="top")
+      template(#content)
+        .tooltip
+          slot(name="tooltip")
+      Button.question(
+        type="text"
+        shape="circle"
+        @click="$emit('tooltip')"
+      )
+        Icon.icon(:name="tooltip.icon")
+    Button.button(
+      v-if="action"
+      :target="action.target"
+      @click="$emit('action')"
+    ) {{ action.label }}
+  template(#icon)
+    Icon.icon(:name="icon")
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    icon: String,
+    tooltip: {
+      type: Object,
+      default: null
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import '@/assets/styles/media.sass'
+
+.banner
+  padding-right: 8px
+  .content
+    display: flex
+    align-items: center
+    gap: 0.5em
+    .text
+      flex: 1
+    .tooltip
+      text-align: center
+      max-width: 14em
+      text-wrap: wrap
+  .icon
+    font-size: 1.25em
+  .question
+    padding: 0.2em 0.5em
+    .icon
+      vertical-align: text-top
+
+</style>

From 6aa9e9072c3d13e099414f5097e4be81517c499b Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sun, 29 Dec 2024 14:57:46 +0200
Subject: [PATCH 2/4] feat: rete kit banner

---
 src/components/content/Kit.vue | 61 ++++++++++++++++++++++++++++++++++
 src/locales/en.json            | 11 ++++++
 src/locales/uk.json            | 11 ++++++
 src/plugins/main.js            |  7 +++-
 4 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/components/content/Kit.vue

diff --git a/src/components/content/Kit.vue b/src/components/content/Kit.vue
new file mode 100644
index 0000000..497a126
--- /dev/null
+++ b/src/components/content/Kit.vue
@@ -0,0 +1,61 @@
+<template lang="pug">
+Banner(
+  icon="heroicons:rocket-launch"
+  :tooltip="{ icon: 'tabler:clipboard-copy' }"
+  :action="{ label: $t('kit.banner.button') }"
+  @tooltip="copyToClipboard"
+  @action="openDocs"
+)
+  template(v-slot:text)
+    i18n-t(keypath='kit.banner.text')
+      template(v-slot:link)
+        NuxtLink(:to="link") Rete Kit
+  template(v-slot:tooltip)
+    i18n-t(keypath='kit.banner.tooltip')
+      template(v-slot:command)
+        .command {{ command }}
+</template>
+
+<script lang="ts">
+import Banner from '../shared/Banner.vue'
+
+export default {
+  data() {
+    return {
+      link: '/docs/development/rete-kit',
+      command: 'npx rete-kit app'
+    }
+  },
+  methods: {
+    async copyToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.command)
+        this.$Notice.success({
+          title: this.$t('kit.banner.copyNotification.success')
+        })
+      } catch (error) {
+        console.error(error)
+
+        this.$Notice.error({
+          title: this.$t('kit.banner.copyNotification.error')
+        })
+      }
+    },
+    openDocs() {
+      this.$router.push(this.localePath('/docs/development/rete-kit'))
+    }
+  },
+  components: {
+    Banner
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.command
+  font-family: monospace
+  border: 1px solid #e0e0e0
+  display: inline-block
+  padding: 0 0.2em
+  border-radius: 0.3em
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 07dd967..a3f2629 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -103,5 +103,16 @@
   "share": {
     "docs": "docs for Rete.js",
     "example": "example powered by Rete.js"
+  },
+  "kit": {
+    "banner": {
+      "text": "Want to start faster? Use {link} to create a fully configured project in minutes!",
+      "tooltip": "Copy the command {command} to clipboard",
+      "copyNotification": {
+        "success": "Copied to clipboard",
+        "error": "Failed to copy to clipboard"
+      },
+      "button": "Learn More"
+    }
   }
 }
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 56efe5f..a550726 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -103,5 +103,16 @@
   "share": {
     "docs": "документація Rete.js",
     "example": "приклад на базі Rete.js"
+  },
+  "kit": {
+    "banner": {
+      "text": "Хочете почати швидше? Використовуйте {link}, щоб створити повністю налаштований проект за кілька хвилин!",
+      "tooltip": "Скопіюйте команду {command} в буфер обміну",
+      "copyNotification": {
+        "success": "Скопійовано в буфер обміну",
+        "error": "Не вдалося скопіювати в буфер обміну"
+      },
+      "button": "Дізнатися більше"
+    }
   }
 }
diff --git a/src/plugins/main.js b/src/plugins/main.js
index d3de50b..631b00e 100644
--- a/src/plugins/main.js
+++ b/src/plugins/main.js
@@ -1,7 +1,7 @@
 import {
   Menu, MenuItem, Select, Submenu, Dropdown, Option,
   Drawer, Button, Alert, Tag, Tooltip, Collapse, Panel,
-  Card, Spin, Modal, SkeletonItem
+  Card, Spin, Modal, SkeletonItem, Notice
 } from "view-ui-plus-es";
 
 // eslint-disable-next-line no-undef
@@ -78,6 +78,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     SkeletonItem
   );
 
+  app.config.globalProperties.$Notice = Notice;
+  Notice.config({
+    "top": 70
+  });
+
   nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
 
     if (savedPosition) return savedPosition;

From 7888fb08f66c67674def84809b4bda918698b08c Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sun, 29 Dec 2024 15:03:33 +0200
Subject: [PATCH 3/4] feat: links in banner action button

---
 src/components/content/Kit.vue        | 6 +-----
 src/components/content/ProExample.vue | 8 +-------
 src/components/shared/Banner.vue      | 1 +
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/content/Kit.vue b/src/components/content/Kit.vue
index 497a126..38fa8c9 100644
--- a/src/components/content/Kit.vue
+++ b/src/components/content/Kit.vue
@@ -2,9 +2,8 @@
 Banner(
   icon="heroicons:rocket-launch"
   :tooltip="{ icon: 'tabler:clipboard-copy' }"
-  :action="{ label: $t('kit.banner.button') }"
+  :action="{ label: $t('kit.banner.button'), to: localePath(link) }"
   @tooltip="copyToClipboard"
-  @action="openDocs"
 )
   template(v-slot:text)
     i18n-t(keypath='kit.banner.text')
@@ -40,9 +39,6 @@ export default {
           title: this.$t('kit.banner.copyNotification.error')
         })
       }
-    },
-    openDocs() {
-      this.$router.push(this.localePath('/docs/development/rete-kit'))
     }
   },
   components: {
diff --git a/src/components/content/ProExample.vue b/src/components/content/ProExample.vue
index 22e7068..17aa52b 100644
--- a/src/components/content/ProExample.vue
+++ b/src/components/content/ProExample.vue
@@ -2,8 +2,7 @@
 Banner(
   icon="ion:finger-print"
   :tooltip="{ icon: 'f7:question-circle' }"
-  :action="{ label: $t('examplesPage.proExample.getAccess') }"
-  @action="openPatreon"
+  :action="{ label: $t('examplesPage.proExample.getAccess'), to: patreon.link, target: '_blank' }"
 )
   template(v-slot:text) {{ $t('examplesPage.proExample.alert') }}
   template(v-slot:tooltip) {{ $t('examplesPage.proExample.info') }}
@@ -29,11 +28,6 @@ export default {
       ...sponsor
     }
   },
-  methods: {
-    openPatreon() {
-      window.open(this.patreon.link, '_blank')
-    }
-  },
   components: {
     Banner,
     BaseExample
diff --git a/src/components/shared/Banner.vue b/src/components/shared/Banner.vue
index 472ccec..def1768 100644
--- a/src/components/shared/Banner.vue
+++ b/src/components/shared/Banner.vue
@@ -16,6 +16,7 @@ IViewAlert.banner(show-icon)
     Button.button(
       v-if="action"
       :target="action.target"
+      :to="action.to"
       @click="$emit('action')"
     ) {{ action.label }}
   template(#icon)

From eaffdd72ca028cc37e752f07a7f80bd58efb53e6 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sun, 29 Dec 2024 15:12:58 +0200
Subject: [PATCH 4/4] feat(banner): add kit banner to examples and docs

---
 src/content/en/docs/4.guides/1.basic.md                     | 4 +++-
 src/content/en/docs/4.guides/10.minimap.md                  | 2 ++
 src/content/en/docs/4.guides/11.dock-menu.md                | 2 ++
 src/content/en/docs/4.guides/12.connection-path.md          | 2 ++
 src/content/en/docs/4.guides/13.reroute.md                  | 2 ++
 src/content/en/docs/4.guides/14.undo-redo.md                | 2 ++
 src/content/en/docs/4.guides/15.comments.md                 | 2 ++
 src/content/en/docs/4.guides/2.renderers/1.react.md         | 2 ++
 src/content/en/docs/4.guides/2.renderers/2.vue.md           | 2 ++
 src/content/en/docs/4.guides/2.renderers/3.angular.md       | 2 ++
 src/content/en/docs/4.guides/2.renderers/4.svelte.md        | 2 ++
 src/content/en/docs/4.guides/2.renderers/5.lit.md           | 2 ++
 src/content/en/docs/4.guides/3.processing/1.dataflow.md     | 2 ++
 src/content/en/docs/4.guides/3.processing/2.control-flow.md | 2 ++
 src/content/en/docs/4.guides/3.processing/3.hybrid.md       | 2 ++
 src/content/en/docs/4.guides/4.3d/1.index.md                | 2 ++
 src/content/en/docs/4.guides/5.arrange.md                   | 2 ++
 src/content/en/docs/4.guides/6.context-menu.md              | 2 ++
 src/content/en/docs/4.guides/7.readonly.md                  | 2 ++
 src/content/en/docs/4.guides/8.scopes.md                    | 2 ++
 src/content/en/examples/1.basic/1.react.md                  | 1 +
 src/content/en/examples/1.basic/2.vue.md                    | 1 +
 src/content/en/examples/1.basic/3.angular.md                | 1 +
 src/content/en/examples/1.basic/4.svelte.md                 | 1 +
 src/content/en/examples/1.basic/5.lit.md                    | 1 +
 src/content/en/examples/10.modules.md                       | 1 +
 src/content/en/examples/10.scopes.md                        | 1 +
 src/content/en/examples/10.selectable-connections.md        | 1 +
 src/content/en/examples/11.minimap.md                       | 1 +
 src/content/en/examples/12.dock.md                          | 1 +
 src/content/en/examples/12.sankey.md                        | 1 +
 src/content/en/examples/14.connection-path.md               | 1 +
 src/content/en/examples/15.reroute.md                       | 1 +
 src/content/en/examples/17.comments.md                      | 1 +
 src/content/en/examples/18.history.md                       | 1 +
 src/content/en/examples/2.controls/1.react.md               | 1 +
 src/content/en/examples/2.controls/2.vue.md                 | 1 +
 src/content/en/examples/2.controls/3.angular.md             | 1 +
 src/content/en/examples/2.controls/4.svelte.md              | 1 +
 src/content/en/examples/2.controls/5.lit.md                 | 1 +
 src/content/en/examples/20.3d-configurator.md               | 1 +
 src/content/en/examples/21.chatbot.md                       | 1 +
 src/content/en/examples/22.3d/1.index.md                    | 1 +
 src/content/en/examples/3.customization/1.react.md          | 1 +
 src/content/en/examples/3.customization/2.vue.md            | 1 +
 src/content/en/examples/3.customization/3.angular.md        | 1 +
 src/content/en/examples/3.customization/4.svelte.md         | 1 +
 src/content/en/examples/3.customization/5.lit.md            | 1 +
 src/content/en/examples/6.performance.md                    | 1 +
 src/content/en/examples/7.area-extensions.md                | 1 +
 src/content/en/examples/7.processing/14.dataflow.md         | 1 +
 src/content/en/examples/7.processing/15.control-flow.md     | 1 +
 src/content/en/examples/7.processing/15.hybrid-engine.md    | 1 +
 src/content/en/examples/8.arrange.md                        | 1 +
 src/content/en/examples/8.insert-node.md                    | 1 +
 src/content/en/examples/8.magnetic-connection.md            | 1 +
 src/content/en/examples/8.smooth-zoom.md                    | 1 +
 src/content/en/examples/9.context-menu.md                   | 1 +
 src/content/en/examples/9.panning-boundary.md               | 1 +
 src/content/en/examples/9.readonly.md                       | 1 +
 src/content/uk/docs/4.guides/1.basic.md                     | 6 +++++-
 src/content/uk/docs/4.guides/10.minimap.md                  | 2 ++
 src/content/uk/docs/4.guides/11.dock-menu.md                | 2 ++
 src/content/uk/docs/4.guides/12.connection-path.md          | 2 ++
 src/content/uk/docs/4.guides/13.reroute.md                  | 2 ++
 src/content/uk/docs/4.guides/14.undo-redo.md                | 2 ++
 src/content/uk/docs/4.guides/15.comments.md                 | 2 ++
 src/content/uk/docs/4.guides/2.renderers/1.react.md         | 2 ++
 src/content/uk/docs/4.guides/2.renderers/2.vue.md           | 2 ++
 src/content/uk/docs/4.guides/2.renderers/3.angular.md       | 2 ++
 src/content/uk/docs/4.guides/2.renderers/4.svelte.md        | 2 ++
 src/content/uk/docs/4.guides/2.renderers/5.lit.md           | 2 ++
 src/content/uk/docs/4.guides/3.processing/1.dataflow.md     | 2 ++
 src/content/uk/docs/4.guides/3.processing/2.control-flow.md | 2 ++
 src/content/uk/docs/4.guides/3.processing/3.hybrid.md       | 2 ++
 src/content/uk/docs/4.guides/4.3d/1.index.md                | 2 ++
 src/content/uk/docs/4.guides/5.arrange.md                   | 2 ++
 src/content/uk/docs/4.guides/6.context-menu.md              | 2 ++
 src/content/uk/docs/4.guides/7.readonly.md                  | 2 ++
 src/content/uk/docs/4.guides/8.scopes.md                    | 2 ++
 src/content/uk/examples/1.basic/1.react.md                  | 1 +
 src/content/uk/examples/1.basic/2.vue.md                    | 1 +
 src/content/uk/examples/1.basic/3.angular.md                | 1 +
 src/content/uk/examples/1.basic/4.svelte.md                 | 1 +
 src/content/uk/examples/1.basic/5.lit.md                    | 1 +
 src/content/uk/examples/10.modules.md                       | 1 +
 src/content/uk/examples/10.scopes.md                        | 1 +
 src/content/uk/examples/10.selectable-connections.md        | 1 +
 src/content/uk/examples/11.minimap.md                       | 1 +
 src/content/uk/examples/12.dock.md                          | 1 +
 src/content/uk/examples/12.sankey.md                        | 1 +
 src/content/uk/examples/14.connection-path.md               | 1 +
 src/content/uk/examples/15.reroute.md                       | 1 +
 src/content/uk/examples/17.comments.md                      | 1 +
 src/content/uk/examples/18.history.md                       | 1 +
 src/content/uk/examples/2.controls/1.react.md               | 1 +
 src/content/uk/examples/2.controls/2.vue.md                 | 1 +
 src/content/uk/examples/2.controls/3.angular.md             | 1 +
 src/content/uk/examples/2.controls/4.svelte.md              | 1 +
 src/content/uk/examples/2.controls/5.lit.md                 | 1 +
 src/content/uk/examples/20.3d-configurator.md               | 1 +
 src/content/uk/examples/21.chatbot.md                       | 1 +
 src/content/uk/examples/22.3d/1.index.md                    | 1 +
 src/content/uk/examples/3.customization/1.react.md          | 1 +
 src/content/uk/examples/3.customization/2.vue.md            | 1 +
 src/content/uk/examples/3.customization/3.angular.md        | 1 +
 src/content/uk/examples/3.customization/4.svelte.md         | 1 +
 src/content/uk/examples/3.customization/5.lit.md            | 1 +
 src/content/uk/examples/6.performance.md                    | 1 +
 src/content/uk/examples/6.vertical-flow.md                  | 2 +-
 src/content/uk/examples/7.area-extensions.md                | 1 +
 src/content/uk/examples/7.processing/14.dataflow.md         | 1 +
 src/content/uk/examples/7.processing/15.control-flow.md     | 1 +
 src/content/uk/examples/7.processing/15.hybrid-engine.md    | 1 +
 src/content/uk/examples/8.arrange.md                        | 1 +
 src/content/uk/examples/8.insert-node.md                    | 1 +
 src/content/uk/examples/8.magnetic-connection.md            | 1 +
 src/content/uk/examples/8.smooth-zoom.md                    | 1 +
 src/content/uk/examples/9.context-menu.md                   | 1 +
 src/content/uk/examples/9.panning-boundary.md               | 1 +
 src/content/uk/examples/9.readonly.md                       | 1 +
 121 files changed, 165 insertions(+), 3 deletions(-)

diff --git a/src/content/en/docs/4.guides/1.basic.md b/src/content/en/docs/4.guides/1.basic.md
index e88f322..207230d 100644
--- a/src/content/en/docs/4.guides/1.basic.md
+++ b/src/content/en/docs/4.guides/1.basic.md
@@ -19,10 +19,12 @@ Follow this guide to use the corresponding render plugin in your **Angular**, **
 :ref-github{title="Connection plugin" link="https://github.com/retejs/connection-plugin"}
 ::
 
-In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally. It's highly recommended starting with [Rete Kit](/docs/development/rete-kit) and using it to build applications if you haven't done so already.
+In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally.
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
 ```
diff --git a/src/content/en/docs/4.guides/10.minimap.md b/src/content/en/docs/4.guides/10.minimap.md
index 9d066e8..d89246c 100644
--- a/src/content/en/docs/4.guides/10.minimap.md
+++ b/src/content/en/docs/4.guides/10.minimap.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-minimap-plugin
 ```
diff --git a/src/content/en/docs/4.guides/11.dock-menu.md b/src/content/en/docs/4.guides/11.dock-menu.md
index 56c99e9..0d265eb 100644
--- a/src/content/en/docs/4.guides/11.dock-menu.md
+++ b/src/content/en/docs/4.guides/11.dock-menu.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-dock-plugin
 ```
diff --git a/src/content/en/docs/4.guides/12.connection-path.md b/src/content/en/docs/4.guides/12.connection-path.md
index e3173ea..4368025 100644
--- a/src/content/en/docs/4.guides/12.connection-path.md
+++ b/src/content/en/docs/4.guides/12.connection-path.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-path-plugin d3-shape
 ```
diff --git a/src/content/en/docs/4.guides/13.reroute.md b/src/content/en/docs/4.guides/13.reroute.md
index 1377298..5b8699a 100644
--- a/src/content/en/docs/4.guides/13.reroute.md
+++ b/src/content/en/docs/4.guides/13.reroute.md
@@ -17,6 +17,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-reroute-plugin
 ```
diff --git a/src/content/en/docs/4.guides/14.undo-redo.md b/src/content/en/docs/4.guides/14.undo-redo.md
index ed473f6..4e1a937 100644
--- a/src/content/en/docs/4.guides/14.undo-redo.md
+++ b/src/content/en/docs/4.guides/14.undo-redo.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-history-plugin
 ```
diff --git a/src/content/en/docs/4.guides/15.comments.md b/src/content/en/docs/4.guides/15.comments.md
index 2fd0b95..e4e64bd 100644
--- a/src/content/en/docs/4.guides/15.comments.md
+++ b/src/content/en/docs/4.guides/15.comments.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-comment-plugin
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/1.react.md b/src/content/en/docs/4.guides/2.renderers/1.react.md
index c5582aa..06e948b 100644
--- a/src/content/en/docs/4.guides/2.renderers/1.react.md
+++ b/src/content/en/docs/4.guides/2.renderers/1.react.md
@@ -25,6 +25,8 @@ This plugin can be used in any application, regardless of your stack (**React.js
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-react-plugin rete-render-utils styled-components
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/2.vue.md b/src/content/en/docs/4.guides/2.renderers/2.vue.md
index 75bb7bb..0550536 100644
--- a/src/content/en/docs/4.guides/2.renderers/2.vue.md
+++ b/src/content/en/docs/4.guides/2.renderers/2.vue.md
@@ -28,6 +28,8 @@ You can use this plugin in any application, irrespective of the application stac
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-vue-plugin rete-render-utils
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/3.angular.md b/src/content/en/docs/4.guides/2.renderers/3.angular.md
index de4c723..364b26c 100644
--- a/src/content/en/docs/4.guides/2.renderers/3.angular.md
+++ b/src/content/en/docs/4.guides/2.renderers/3.angular.md
@@ -28,6 +28,8 @@ This plugin is **exclusively** designed for Angular applications as it requires
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-angular-plugin rete-render-utils @angular/elements@18
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/4.svelte.md b/src/content/en/docs/4.guides/2.renderers/4.svelte.md
index 4b080cb..24ba21e 100644
--- a/src/content/en/docs/4.guides/2.renderers/4.svelte.md
+++ b/src/content/en/docs/4.guides/2.renderers/4.svelte.md
@@ -26,6 +26,8 @@ Supports latest versions of Svelte: 5, 4 and 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-svelte-plugin rete-render-utils sass
 ```
diff --git a/src/content/en/docs/4.guides/2.renderers/5.lit.md b/src/content/en/docs/4.guides/2.renderers/5.lit.md
index 8ca3601..87e8767 100644
--- a/src/content/en/docs/4.guides/2.renderers/5.lit.md
+++ b/src/content/en/docs/4.guides/2.renderers/5.lit.md
@@ -26,6 +26,8 @@ Supports Lit version 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i @retejs/lit-plugin rete-render-utils lit
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/1.dataflow.md b/src/content/en/docs/4.guides/3.processing/1.dataflow.md
index dcda5c7..a029aa2 100644
--- a/src/content/en/docs/4.guides/3.processing/1.dataflow.md
+++ b/src/content/en/docs/4.guides/3.processing/1.dataflow.md
@@ -18,6 +18,8 @@ Not familiar with Dataflow concept? Check out the [Dataflow](/docs/concepts/engi
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/2.control-flow.md b/src/content/en/docs/4.guides/3.processing/2.control-flow.md
index 9074362..fc818b8 100644
--- a/src/content/en/docs/4.guides/3.processing/2.control-flow.md
+++ b/src/content/en/docs/4.guides/3.processing/2.control-flow.md
@@ -16,6 +16,8 @@ Not familiar with Control flow concept? Check out the [Control flow](/docs/conce
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/3.processing/3.hybrid.md b/src/content/en/docs/4.guides/3.processing/3.hybrid.md
index 96bc7ca..74bf46f 100644
--- a/src/content/en/docs/4.guides/3.processing/3.hybrid.md
+++ b/src/content/en/docs/4.guides/3.processing/3.hybrid.md
@@ -20,6 +20,8 @@ For a brief overview of the concept of combining Dataflow and Control flow, we r
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/en/docs/4.guides/4.3d/1.index.md b/src/content/en/docs/4.guides/4.3d/1.index.md
index b977ab6..5bff287 100644
--- a/src/content/en/docs/4.guides/4.3d/1.index.md
+++ b/src/content/en/docs/4.guides/4.3d/1.index.md
@@ -24,6 +24,8 @@ Powered by Three.js, this plugin creates a scene that contains a camera and two
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `three` peer dependency must be installed separately.
 
 ```bash
diff --git a/src/content/en/docs/4.guides/5.arrange.md b/src/content/en/docs/4.guides/5.arrange.md
index c04b00c..441749a 100644
--- a/src/content/en/docs/4.guides/5.arrange.md
+++ b/src/content/en/docs/4.guides/5.arrange.md
@@ -20,6 +20,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `elkjs` peer dependency must be installed separately.
 
 ```bash
diff --git a/src/content/en/docs/4.guides/6.context-menu.md b/src/content/en/docs/4.guides/6.context-menu.md
index 76d0844..f7a6adb 100644
--- a/src/content/en/docs/4.guides/6.context-menu.md
+++ b/src/content/en/docs/4.guides/6.context-menu.md
@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-context-menu-plugin
 ```
diff --git a/src/content/en/docs/4.guides/7.readonly.md b/src/content/en/docs/4.guides/7.readonly.md
index 1be877b..5ee4bd2 100644
--- a/src/content/en/docs/4.guides/7.readonly.md
+++ b/src/content/en/docs/4.guides/7.readonly.md
@@ -18,6 +18,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-readonly-plugin
 ```
diff --git a/src/content/en/docs/4.guides/8.scopes.md b/src/content/en/docs/4.guides/8.scopes.md
index f490f21..7ad8de3 100644
--- a/src/content/en/docs/4.guides/8.scopes.md
+++ b/src/content/en/docs/4.guides/8.scopes.md
@@ -21,6 +21,8 @@ This approach involves using nodes as parent elements for other nodes. This enab
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-scopes-plugin
 ```
diff --git a/src/content/en/examples/1.basic/1.react.md b/src/content/en/examples/1.basic/1.react.md
index d0cc839..e1cf9b8 100644
--- a/src/content/en/examples/1.basic/1.react.md
+++ b/src/content/en/examples/1.basic/1.react.md
@@ -22,4 +22,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-react-plugin` for seamless integration with **React.js**. Users have the option to select these nodes. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}
diff --git a/src/content/en/examples/1.basic/2.vue.md b/src/content/en/examples/1.basic/2.vue.md
index f32c765..049ec00 100644
--- a/src/content/en/examples/1.basic/2.vue.md
+++ b/src/content/en/examples/1.basic/2.vue.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-vue-plugin` for seamless integration with **Vue.js**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}
diff --git a/src/content/en/examples/1.basic/3.angular.md b/src/content/en/examples/1.basic/3.angular.md
index c61f1d2..14a0162 100644
--- a/src/content/en/examples/1.basic/3.angular.md
+++ b/src/content/en/examples/1.basic/3.angular.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-angular-plugin` for seamless integration with **Angular**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"}
diff --git a/src/content/en/examples/1.basic/4.svelte.md b/src/content/en/examples/1.basic/4.svelte.md
index bab79f2..e53ab53 100644
--- a/src/content/en/examples/1.basic/4.svelte.md
+++ b/src/content/en/examples/1.basic/4.svelte.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-svelte-plugin` for seamless integration with **Svelte**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"}
diff --git a/src/content/en/examples/1.basic/5.lit.md b/src/content/en/examples/1.basic/5.lit.md
index f1d2583..0d8913e 100644
--- a/src/content/en/examples/1.basic/5.lit.md
+++ b/src/content/en/examples/1.basic/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `@retejs/lit-plugin` for seamless integration with **Lit**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-lit-js-vvx95j" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.modules.md b/src/content/en/examples/10.modules.md
index 2aad8c6..f0457b2 100644
--- a/src/content/en/examples/10.modules.md
+++ b/src/content/en/examples/10.modules.md
@@ -16,4 +16,5 @@ navigation:
 
 This example showcases a schema reusability technique, where processing is carried out using `DataflowEngine`. This is accomplished by creating a dedicated `Module` node that loads a nested schema containing `Input` and `Output` nodes, subsequently generating corresponding sockets. As a result, the module node initializes the engine, feeds it with input data, executes it, and retrieves the output data.
 
+:kit
 :example{id="rete-js-v2-modules-vhr0h5" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.scopes.md b/src/content/en/examples/10.scopes.md
index cccb7c6..9927c60 100644
--- a/src/content/en/examples/10.scopes.md
+++ b/src/content/en/examples/10.scopes.md
@@ -18,4 +18,5 @@ The structures shown in this example may also be referred to as subgraphs or nes
 
 Changing a node's parent is easy: simply long-press the node and move it over the new parent node.
 
+:kit
 :example{id="rete-js-v2-scopes-grgie8" module="/src/editor.ts"}
diff --git a/src/content/en/examples/10.selectable-connections.md b/src/content/en/examples/10.selectable-connections.md
index e3a2190..eab56b4 100644
--- a/src/content/en/examples/10.selectable-connections.md
+++ b/src/content/en/examples/10.selectable-connections.md
@@ -16,5 +16,6 @@ navigation:
 
 The editor doesn't offer a built-in connection selection feature. However, if you're using `BidirectFlow` and can't delete connections from UI, or you need to select connections for other purposes, you can create a custom connection and sync it with `AreaExtensions.selector`
 
+:kit
 :example{id="rete-js-v2-selectable-connections-cfetvh" module="/src/editor.tsx"}
 
diff --git a/src/content/en/examples/11.minimap.md b/src/content/en/examples/11.minimap.md
index b2ddd50..76143ac 100644
--- a/src/content/en/examples/11.minimap.md
+++ b/src/content/en/examples/11.minimap.md
@@ -16,4 +16,5 @@ navigation:
 
 By default, a minimap is placed in the bottom-right corner and features rectangles that represent the positions of nodes and the viewport. All nodes added in the editor are dynamically displayed on the minimap, ensuring that they are all within the minimap's boundaries. Additionally, you can change the viewport's position by dragging its mini- viewport.
 
+:kit
 :example{id="rete-js-v2-minimap-ob9uqc" module="/src/editor.ts"}
diff --git a/src/content/en/examples/12.dock.md b/src/content/en/examples/12.dock.md
index 90ebd05..2c4af13 100644
--- a/src/content/en/examples/12.dock.md
+++ b/src/content/en/examples/12.dock.md
@@ -16,4 +16,5 @@ navigation:
 
 Dock menu is a section with a list of nodes that users can add to the editor by clicking or dragging. In the default preset, this menu is placed at the bottom of the editor, but you can create your own preset with custom styles. Furthermore, you can dynamically add or remove nodes from this list, configuring them with the desired properties and specifying their order
 
+:kit
 :example{id="rete-js-v2-forked-t2enm0" module="/src/editor.ts"}
diff --git a/src/content/en/examples/12.sankey.md b/src/content/en/examples/12.sankey.md
index 419535d..8837557 100644
--- a/src/content/en/examples/12.sankey.md
+++ b/src/content/en/examples/12.sankey.md
@@ -16,6 +16,7 @@ navigation:
 
 The Sankey diagram relies on the node editor's classic preset and includes custom components for nodes, connections, and sockets. Nodes are given a predefined capacity (equal to height), and ports are generated for each connection with a height (weight) equal to the connection's weight.
 
+:kit
 :example{id="rete-js-v2-sankey-diagram-v75qmr" module="/src/editor.ts"}
 
 Implementing this feature in your project is easy - just copy the `sankey` directory and some code from `editor.ts`, including the `Presets.classic.setup` options and `importGraph`. Additionally, you can restrict node movement with `createSankeyRestrictor` to keep source nodes on the left of target nodes. Finally, add an option to `arrange.layout` to increase the distance between nodes.
diff --git a/src/content/en/examples/14.connection-path.md b/src/content/en/examples/14.connection-path.md
index 82404f2..f6461e6 100644
--- a/src/content/en/examples/14.connection-path.md
+++ b/src/content/en/examples/14.connection-path.md
@@ -16,4 +16,5 @@ navigation:
 
 This example showcases the usage of a plugin for configuring connection paths. It facilitates the customization of both the paths (linear, step, monotone) and the points they traverse. Additionally, there's an option to include an arrow-shaped marker.
 
+:kit
 :example{id="rete-js-v2-connection-path-5dneyc" module="/src/editor.ts"}
diff --git a/src/content/en/examples/15.reroute.md b/src/content/en/examples/15.reroute.md
index 3a56e78..a156a44 100644
--- a/src/content/en/examples/15.reroute.md
+++ b/src/content/en/examples/15.reroute.md
@@ -16,4 +16,5 @@ navigation:
 
 This particular example shows the usage of a plugin designed for user-controlled connection rerouting. Users can insert rerouting points by clicking on a connection or remove them by right-clicking. These points can be dragged or selected by users (similarly to nodes) to move multiple points at once.
 
+:kit
 :example{id="rete-js-v2-reroute-8doi0c" module="/src/editor.ts"}
diff --git a/src/content/en/examples/17.comments.md b/src/content/en/examples/17.comments.md
index 2a82c42..dccaee6 100644
--- a/src/content/en/examples/17.comments.md
+++ b/src/content/en/examples/17.comments.md
@@ -16,4 +16,5 @@ navigation:
 
 This example demonstrates the use of the comments plugin. There are two types of comments: frames (for grouping nodes) and inline (for individual nodes). Users can add nodes to frame comments by drag and drop, while inline comments can be attached in a reverse manner by dragging and dropping them onto a node.
 
+:kit
 :example{id="rete-js-v2-comments-ql406e" module="/src/editor.ts"}
diff --git a/src/content/en/examples/18.history.md b/src/content/en/examples/18.history.md
index 83168fc..aed7039 100644
--- a/src/content/en/examples/18.history.md
+++ b/src/content/en/examples/18.history.md
@@ -18,4 +18,5 @@ This example showcases the use of the history plugin. It tracks changes in the e
 
 All undo/redo operations are automatically grouped by time (default is 200 ms). So, if a sequence of operations occurs within a short time frame, the user can undo or redo them with a single keypress.
 
+:kit
 :example{id="rete-js-v2-history-gwl0cy" module="/src/editor.ts"}
diff --git a/src/content/en/examples/2.controls/1.react.md b/src/content/en/examples/2.controls/1.react.md
index a0ee164..90d65d6 100644
--- a/src/content/en/examples/2.controls/1.react.md
+++ b/src/content/en/examples/2.controls/1.react.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **React.js**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-custom-controls-2vp0wx" module="/src/editor.tsx"}
diff --git a/src/content/en/examples/2.controls/2.vue.md b/src/content/en/examples/2.controls/2.vue.md
index 037f8df..bbf7c30 100644
--- a/src/content/en/examples/2.controls/2.vue.md
+++ b/src/content/en/examples/2.controls/2.vue.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Vue.js**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-vue-js-custom-controls-qrdo2c" module="/src/editor.ts"}
diff --git a/src/content/en/examples/2.controls/3.angular.md b/src/content/en/examples/2.controls/3.angular.md
index e1f8d8b..e32b717 100644
--- a/src/content/en/examples/2.controls/3.angular.md
+++ b/src/content/en/examples/2.controls/3.angular.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Angular**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-angular-custom-controls-cknttr" module="/src/app/editor.ts"}
diff --git a/src/content/en/examples/2.controls/4.svelte.md b/src/content/en/examples/2.controls/4.svelte.md
index 578fa38..272e152 100644
--- a/src/content/en/examples/2.controls/4.svelte.md
+++ b/src/content/en/examples/2.controls/4.svelte.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Svelte**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-svelte-controls-9dm3dn" module="/src/lib/editor.ts"}
diff --git a/src/content/en/examples/2.controls/5.lit.md b/src/content/en/examples/2.controls/5.lit.md
index d0b74da..10a892d 100644
--- a/src/content/en/examples/2.controls/5.lit.md
+++ b/src/content/en/examples/2.controls/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 This example showcases the use of a built-in input control and custom controls for **Lit**, which you can implement according to your specific needs. In this case, the custom controls include a button that randomly sets the input field's value and a radial progress indicator that synchronizes with the input field's value
 
+:kit
 :example{id="rete-js-v2-lit-js-custom-controls-3w4ypd" module="/src/editor.ts"}
diff --git a/src/content/en/examples/20.3d-configurator.md b/src/content/en/examples/20.3d-configurator.md
index 244e598..c91c635 100644
--- a/src/content/en/examples/20.3d-configurator.md
+++ b/src/content/en/examples/20.3d-configurator.md
@@ -15,4 +15,5 @@ navigation:
 
 This example showcases the use of an editor that lets you combine nodes to create unique color blends and apply them to a car's body and wheels. The editor uses `DataflowEngine` for node processing. Initial nodes are loaded from a JSON file through a custom importer implemented for this editor.
 
+:kit
 :example{id="rete-js-2-3d-configurator-43o7ex" module="/src/node-editor/index.js"}
diff --git a/src/content/en/examples/21.chatbot.md b/src/content/en/examples/21.chatbot.md
index 6cf1c17..5311b02 100644
--- a/src/content/en/examples/21.chatbot.md
+++ b/src/content/en/examples/21.chatbot.md
@@ -23,6 +23,7 @@ navigation:
 
 This is a simple demonstration of a chatbot whose behavior is programmed using a visual editor. In this implementation, all elements are customized, including animated connections. The chat window is presented as a separate node that can be moved only using special handles at the bottom and top. A dataflow and control flow-based engine is used to process the graph. There is also validation of connections by checking socket compatibility.
 
+:kit
 :example{id="rete-js-v2-chatbot-programming-nok9iq" module="/src/editor.ts"}
 
 `DataflowEngine` and `ControlFlowEngine` are being used here, just like in the [Hybrid engine](/examples/processing/hybrid-engine) example.
diff --git a/src/content/en/examples/22.3d/1.index.md b/src/content/en/examples/22.3d/1.index.md
index 90d354d..df7df4b 100644
--- a/src/content/en/examples/22.3d/1.index.md
+++ b/src/content/en/examples/22.3d/1.index.md
@@ -20,5 +20,6 @@ With the [`rete-area-3d-plugin`](https://github.com/retejs/area-3d-plugin) plugi
 
 Based on **Three.js**, this scene uses `Sky` and `Water` modules (can be found in [the official example](https://threejs.org/examples/webgl_shaders_ocean.html)) to showcase the visual effect of integrated nodes and connections on a 3D environment.
 
+:kit
 :example{id="rete-js-v2-3d-vrnzly" module="/src/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/1.react.md b/src/content/en/examples/3.customization/1.react.md
index e6f45e5..b31ce20 100644
--- a/src/content/en/examples/3.customization/1.react.md
+++ b/src/content/en/examples/3.customization/1.react.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS. Custom components visualized with **React.js** can be used independently of your tech stack, even [without JSX](https://react.dev/reference/react/createElement). Therefore, if your UI framework lacks integration, you can render parts of the editor using **React.js**, leveraging this example.
 
+:kit
 :example{id="rete-js-v2-custom-node-jpwdh3" module="/src/editor.ts"}
diff --git a/src/content/en/examples/3.customization/2.vue.md b/src/content/en/examples/3.customization/2.vue.md
index 6226307..3ab419b 100644
--- a/src/content/en/examples/3.customization/2.vue.md
+++ b/src/content/en/examples/3.customization/2.vue.md
@@ -22,5 +22,6 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS.
 
+:kit
 :example{id="rete-js-v2-vue-js-customization-ubl35h" module="/src/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/3.angular.md b/src/content/en/examples/3.customization/3.angular.md
index a33a3a6..7729329 100644
--- a/src/content/en/examples/3.customization/3.angular.md
+++ b/src/content/en/examples/3.customization/3.angular.md
@@ -22,5 +22,6 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-v2-angular-customization-w9umwf" module="/src/app/editor.ts"}
 
diff --git a/src/content/en/examples/3.customization/4.svelte.md b/src/content/en/examples/3.customization/4.svelte.md
index 660b2ae..5529b4f 100644
--- a/src/content/en/examples/3.customization/4.svelte.md
+++ b/src/content/en/examples/3.customization/4.svelte.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-svelte-forked-29v37z" module="/src/editor.ts"}
diff --git a/src/content/en/examples/3.customization/5.lit.md b/src/content/en/examples/3.customization/5.lit.md
index 67d6029..1407851 100644
--- a/src/content/en/examples/3.customization/5.lit.md
+++ b/src/content/en/examples/3.customization/5.lit.md
@@ -22,4 +22,5 @@ The following example demonstrates the implementation of custom nodes, sockets,
 
 Additionally, a grid-like gradient background has been added using pure JS and CSS
 
+:kit
 :example{id="rete-js-v2-lit-js-customization-gw7gzk" module="/src/editor.ts"}
diff --git a/src/content/en/examples/6.performance.md b/src/content/en/examples/6.performance.md
index e11863b..74bdf2c 100644
--- a/src/content/en/examples/6.performance.md
+++ b/src/content/en/examples/6.performance.md
@@ -17,4 +17,5 @@ navigation:
 
 Within this example, you can set the number of nodes to be displayed and assess the performance during their rendering. Given that visualizing a large number of elements on a page always comes with performance issues, you can explore examples such as [LOD](/examples/lod) and [LOD GPU](/examples/lod-gpu) using specialized approaches to mitigate these limitations
 
+:kit
 :example{id="rete-js-v2-performance-cnbfc0" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.area-extensions.md b/src/content/en/examples/7.area-extensions.md
index 0e24387..288b93d 100644
--- a/src/content/en/examples/7.area-extensions.md
+++ b/src/content/en/examples/7.area-extensions.md
@@ -22,4 +22,5 @@ This example showcases the use of built-in extensions provided by `rete-area-plu
 - `restrictor`: restricting zoom and pan areas within the area
 - `snapGrid`: snapping node positions to a grid
 
+:kit
 :example{id="rete-js-v2-area-extensions-rhskwv" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/14.dataflow.md b/src/content/en/examples/7.processing/14.dataflow.md
index 0143df3..6ea6ac8 100644
--- a/src/content/en/examples/7.processing/14.dataflow.md
+++ b/src/content/en/examples/7.processing/14.dataflow.md
@@ -21,4 +21,5 @@ This example showcases a data processing pipeline using `rete-engine`, where dat
 
 Each node features a `data` method, which receives arrays of incoming data from their respective input sockets and delivers an object containing data corresponding to the output sockets. To initiate their execution, you can make use of the `engine.fetch` method by specifying the identifier of the target node. Consequently, the engine will execute all predecessors recursively, extracting their output data and delivering it to the specified node.
 
+:kit
 :example{id="rete-js-v2-dataflow-engine-tyhr1e" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/15.control-flow.md b/src/content/en/examples/7.processing/15.control-flow.md
index 18253b4..9e57bcc 100644
--- a/src/content/en/examples/7.processing/15.control-flow.md
+++ b/src/content/en/examples/7.processing/15.control-flow.md
@@ -19,4 +19,5 @@ This example showcases an executing of schema via control flow using `rete-engin
 
 Each node features an `execute` method that takes an input port key as a control source, and a function for conveying control to outgoing nodes through a defined output port. To initiate the execution of the flow, you can use `engine.execute` method, specifying the identifier of the starting node. Consequently, the outgoing nodes will be executed sequentially, starting from the designated node.
 
+:kit
 :example{id="rete-js-v2-control-flow-engine-yqi8z7" module="/src/editor.ts"}
diff --git a/src/content/en/examples/7.processing/15.hybrid-engine.md b/src/content/en/examples/7.processing/15.hybrid-engine.md
index 8f56fa0..209c8e2 100644
--- a/src/content/en/examples/7.processing/15.hybrid-engine.md
+++ b/src/content/en/examples/7.processing/15.hybrid-engine.md
@@ -19,4 +19,5 @@ navigation:
 
 This example shows how `rete-engine` allows for the simultaneous integration of both dataflow and control flow. Consequently, certain nodes serve as data sources, others manage the flow, and a third set incorporates both of these approaches.
 
+:kit
 :example{id="rete-js-v2-hybrid-engine-erkdtu" module="/src/editor.ts"}
diff --git a/src/content/en/examples/8.arrange.md b/src/content/en/examples/8.arrange.md
index 85a76bd..bab1cfc 100644
--- a/src/content/en/examples/8.arrange.md
+++ b/src/content/en/examples/8.arrange.md
@@ -19,4 +19,5 @@ Automated node arrangement, or commonly referred to as layouting, enables the po
 
 Additionally, it offers extensive customization capabilities, allowing users to configure node placement through various options and an applier to assign the calculated positions to nodes (e.g incorporating animations).
 
+:kit
 :example{id="rete-js-v2-arrange-layout-nodes-ri75lp" module="/src/editor.ts"}
diff --git a/src/content/en/examples/8.insert-node.md b/src/content/en/examples/8.insert-node.md
index 92d455d..454d13d 100644
--- a/src/content/en/examples/8.insert-node.md
+++ b/src/content/en/examples/8.insert-node.md
@@ -13,6 +13,7 @@ In this scenario, the user can insert the node into connection between other nod
 
 After adding the connection, the graph is arranged with animation.
 
+:kit
 :example{id="rete-js-v2-insert-node-givohx" module="/src/editor.ts"}
 
 Use the `insert-node` directory and call `insertableNodes` with proper arguments to integrate this feature into your application.
diff --git a/src/content/en/examples/8.magnetic-connection.md b/src/content/en/examples/8.magnetic-connection.md
index b1fa462..16ca36f 100644
--- a/src/content/en/examples/8.magnetic-connection.md
+++ b/src/content/en/examples/8.magnetic-connection.md
@@ -11,6 +11,7 @@ navigation:
 
 The given example showcases a technique to enhance UX by enlarging the connection dropping area. This means that users do not have to aim directly at the socket to make a connection, particularly when the socket is small or the zoom level is low.
 
+:kit
 :example{id="rete-js-v2-magnetic-connection-078ild" module="/src/editor.ts"}
 
 In order to implement this strategy in your project, just copy the `magnetic-connection` directory and the corresponding `useMagneticConnection` function call in the `editor.ts` module. Depending on the rendering plugin you are using, you can either use the existing component from the directory or create your own.
diff --git a/src/content/en/examples/8.smooth-zoom.md b/src/content/en/examples/8.smooth-zoom.md
index 7c30e42..dddf20b 100644
--- a/src/content/en/examples/8.smooth-zoom.md
+++ b/src/content/en/examples/8.smooth-zoom.md
@@ -15,6 +15,7 @@ navigation:
 
 The editor comes with instant zoom enabled by default, with a step equivalent to one scroll wheel movement. If you require customization of this behavior, you can extend the `Zoom` class
 
+:kit
 :example{id="rete-js-v2-smooth-zoom-6sqv8j" module="/src/editor.ts"}
 
 Within this example, the core logic is contained in `src/zoom.ts`. To integrate it into the editor, just include the following line:
diff --git a/src/content/en/examples/9.context-menu.md b/src/content/en/examples/9.context-menu.md
index ef1aa0a..36a998c 100644
--- a/src/content/en/examples/9.context-menu.md
+++ b/src/content/en/examples/9.context-menu.md
@@ -18,4 +18,5 @@ This example demonstrates the use of a context menu presented as a separate plug
 
 The provided functionality relies on a classic preset, but for enhanced customization, it can be substituted to facilitate more dynamic menu item generation.
 
+:kit
 :example{id="rete-js-v2-context-menu-jcelzo" module="/src/editor.ts"}
diff --git a/src/content/en/examples/9.panning-boundary.md b/src/content/en/examples/9.panning-boundary.md
index 7be261c..af7b5b9 100644
--- a/src/content/en/examples/9.panning-boundary.md
+++ b/src/content/en/examples/9.panning-boundary.md
@@ -16,6 +16,7 @@ navigation:
 
 This example demonstrates the implementation of panning the area when the cursor with a dragged node is approaches the editor's boundary. Depending on the distance to any of the area's boundaries, starting from a certain threshold, the panning speed will be inversely proportional to the distance to the boundary.
 
+:kit
 :example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
 
 Although this example was originally designed for React.js, the showcased feature is completely framework-agnostic. You can seamlessly integrate it into your application on a different stack by copying the feature module and connecting it into your editor.
diff --git a/src/content/en/examples/9.readonly.md b/src/content/en/examples/9.readonly.md
index 4b201c8..6f5d328 100644
--- a/src/content/en/examples/9.readonly.md
+++ b/src/content/en/examples/9.readonly.md
@@ -18,4 +18,5 @@ The provided example showcases a simple plugin known as `rete-readonly-plugin`.
 
 On the other hand, the plugin intentionally lacks various customization options to keep it simple, allowing you to explore its source code and create your own solutions tailored to your specific use case (e.g. restricting the addition of specific node types only).
 
+:kit
 :example{id="rete-js-v2-readonly-4pi274" module="/src/editor.ts"}
diff --git a/src/content/uk/docs/4.guides/1.basic.md b/src/content/uk/docs/4.guides/1.basic.md
index d77e3e0..380da94 100644
--- a/src/content/uk/docs/4.guides/1.basic.md
+++ b/src/content/uk/docs/4.guides/1.basic.md
@@ -19,10 +19,14 @@ keywords: базовий,область,ядро
 :ref-github{title="Плагін з'єднань" link="https://github.com/retejs/connection-plugin"}
 ::
 
-Щоб виконати цей гайд, ви можете створити додаток на **[Codesandbox](https://codesandbox.io)**, вибравши будь-який шаблон клієнтського додатку, або створити додаток локально. Дуже рекомендується починати з [Rete Kit](/uk/docs/development/rete-kit) і використовувати його для створення додатку, якщо ви ще цього не зробили.
+Щоб виконати цей гайд, ви можете створити додаток на **[Codesandbox](https://codesandbox.io)**, вибравши будь-який шаблон клієнтського додатку, або створити додаток локально.
+
+:kit
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
 ```
diff --git a/src/content/uk/docs/4.guides/10.minimap.md b/src/content/uk/docs/4.guides/10.minimap.md
index 2e05310..71a0e7b 100644
--- a/src/content/uk/docs/4.guides/10.minimap.md
+++ b/src/content/uk/docs/4.guides/10.minimap.md
@@ -16,6 +16,8 @@ keywords: міні-карта,ux,користувацький досвід
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-minimap-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/11.dock-menu.md b/src/content/uk/docs/4.guides/11.dock-menu.md
index ad87a4b..8974a16 100644
--- a/src/content/uk/docs/4.guides/11.dock-menu.md
+++ b/src/content/uk/docs/4.guides/11.dock-menu.md
@@ -16,6 +16,8 @@ keywords: док,бічна панель,док меню,ux,користувац
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-dock-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/12.connection-path.md b/src/content/uk/docs/4.guides/12.connection-path.md
index df78bf3..ca46464 100644
--- a/src/content/uk/docs/4.guides/12.connection-path.md
+++ b/src/content/uk/docs/4.guides/12.connection-path.md
@@ -16,6 +16,8 @@ keywords: шлях,шлях з'єднання,крива,крок,безьє
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-path-plugin d3-shape
 ```
diff --git a/src/content/uk/docs/4.guides/13.reroute.md b/src/content/uk/docs/4.guides/13.reroute.md
index 51c92a6..0f9a8d5 100644
--- a/src/content/uk/docs/4.guides/13.reroute.md
+++ b/src/content/uk/docs/4.guides/13.reroute.md
@@ -17,6 +17,8 @@ keywords: перенаправлення,рероутінг підключенн
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-reroute-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/14.undo-redo.md b/src/content/uk/docs/4.guides/14.undo-redo.md
index a45e19a..9051348 100644
--- a/src/content/uk/docs/4.guides/14.undo-redo.md
+++ b/src/content/uk/docs/4.guides/14.undo-redo.md
@@ -16,6 +16,8 @@ keywords: скасувати,повторити,історія,rete-history-plug
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-history-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/15.comments.md b/src/content/uk/docs/4.guides/15.comments.md
index fd029bf..a1ea9cd 100644
--- a/src/content/uk/docs/4.guides/15.comments.md
+++ b/src/content/uk/docs/4.guides/15.comments.md
@@ -16,6 +16,8 @@ keywords: коментарі,rete-comment-plugin
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-comment-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/1.react.md b/src/content/uk/docs/4.guides/2.renderers/1.react.md
index ed3a910..43acba9 100644
--- a/src/content/uk/docs/4.guides/2.renderers/1.react.md
+++ b/src/content/uk/docs/4.guides/2.renderers/1.react.md
@@ -25,6 +25,8 @@ keywords: react,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-react-plugin rete-render-utils styled-components
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/2.vue.md b/src/content/uk/docs/4.guides/2.renderers/2.vue.md
index d2b1c2a..cba1348 100644
--- a/src/content/uk/docs/4.guides/2.renderers/2.vue.md
+++ b/src/content/uk/docs/4.guides/2.renderers/2.vue.md
@@ -28,6 +28,8 @@ keywords: vue,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-vue-plugin rete-render-utils
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/3.angular.md b/src/content/uk/docs/4.guides/2.renderers/3.angular.md
index eaf8efc..b85f22f 100644
--- a/src/content/uk/docs/4.guides/2.renderers/3.angular.md
+++ b/src/content/uk/docs/4.guides/2.renderers/3.angular.md
@@ -28,6 +28,8 @@ keywords: angular,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-angular-plugin rete-render-utils @angular/elements@18
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/4.svelte.md b/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
index a330dab..956e4f9 100644
--- a/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
+++ b/src/content/uk/docs/4.guides/2.renderers/4.svelte.md
@@ -26,6 +26,8 @@ keywords: svelte,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-svelte-plugin rete-render-utils sass
 ```
diff --git a/src/content/uk/docs/4.guides/2.renderers/5.lit.md b/src/content/uk/docs/4.guides/2.renderers/5.lit.md
index f8d2601..dc96cb3 100644
--- a/src/content/uk/docs/4.guides/2.renderers/5.lit.md
+++ b/src/content/uk/docs/4.guides/2.renderers/5.lit.md
@@ -26,6 +26,8 @@ keywords: lit,рендерінг
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i @retejs/lit-plugin rete-render-utils lit
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/1.dataflow.md b/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
index 0f6fca0..8cabbd9 100644
--- a/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
+++ b/src/content/uk/docs/4.guides/3.processing/1.dataflow.md
@@ -18,6 +18,8 @@ keywords: потік даних,дані,двигун,скидання,кеш
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/2.control-flow.md b/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
index ec901cd..06a24d1 100644
--- a/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
+++ b/src/content/uk/docs/4.guides/3.processing/2.control-flow.md
@@ -16,6 +16,8 @@ keywords: управління потоком,управління,двигун
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/3.processing/3.hybrid.md b/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
index 6478d83..d79f193 100644
--- a/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
+++ b/src/content/uk/docs/4.guides/3.processing/3.hybrid.md
@@ -19,6 +19,8 @@ keywords: гібрид,двигун,потік даних,управління 
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```
diff --git a/src/content/uk/docs/4.guides/4.3d/1.index.md b/src/content/uk/docs/4.guides/4.3d/1.index.md
index 89c1380..d39b3d0 100644
--- a/src/content/uk/docs/4.guides/4.3d/1.index.md
+++ b/src/content/uk/docs/4.guides/4.3d/1.index.md
@@ -24,6 +24,8 @@ keywords: 3d,three.js,вбудувати
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 Перед використанням цього плагіна необхідно окремо встановити однорангову залежність `three`.
 
 ```bash
diff --git a/src/content/uk/docs/4.guides/5.arrange.md b/src/content/uk/docs/4.guides/5.arrange.md
index a8ac7ac..5665ffc 100644
--- a/src/content/uk/docs/4.guides/5.arrange.md
+++ b/src/content/uk/docs/4.guides/5.arrange.md
@@ -20,6 +20,8 @@ keywords: макет,упорядкування,положення вузла
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 Перед використанням цього плагіна необхідно окремо встановити однорангову залежність `elkjs`.
 
 ```bash
diff --git a/src/content/uk/docs/4.guides/6.context-menu.md b/src/content/uk/docs/4.guides/6.context-menu.md
index 1eb1aad..f9272a5 100644
--- a/src/content/uk/docs/4.guides/6.context-menu.md
+++ b/src/content/uk/docs/4.guides/6.context-menu.md
@@ -16,6 +16,8 @@ keywords: контекстне меню,меню
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-context-menu-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/7.readonly.md b/src/content/uk/docs/4.guides/7.readonly.md
index aa96de8..4d06452 100644
--- a/src/content/uk/docs/4.guides/7.readonly.md
+++ b/src/content/uk/docs/4.guides/7.readonly.md
@@ -18,6 +18,8 @@ keywords: тільки для читання
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-readonly-plugin
 ```
diff --git a/src/content/uk/docs/4.guides/8.scopes.md b/src/content/uk/docs/4.guides/8.scopes.md
index fcdea0d..436d149 100644
--- a/src/content/uk/docs/4.guides/8.scopes.md
+++ b/src/content/uk/docs/4.guides/8.scopes.md
@@ -21,6 +21,8 @@ keywords: області,батькой-нащадок,підграф,вклад
 
 ## Встановити залежності {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-scopes-plugin
 ```
diff --git a/src/content/uk/examples/1.basic/1.react.md b/src/content/uk/examples/1.basic/1.react.md
index 9706f6d..6fc07de 100644
--- a/src/content/uk/examples/1.basic/1.react.md
+++ b/src/content/uk/examples/1.basic/1.react.md
@@ -21,4 +21,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-react-plugin` для безшовної інтеграції з **React.js**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/2.vue.md b/src/content/uk/examples/1.basic/2.vue.md
index 1812089..cc5e392 100644
--- a/src/content/uk/examples/1.basic/2.vue.md
+++ b/src/content/uk/examples/1.basic/2.vue.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-vue-plugin` для безшовної інтеграції з **Vue.js**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/3.angular.md b/src/content/uk/examples/1.basic/3.angular.md
index fe06465..6002c2a 100644
--- a/src/content/uk/examples/1.basic/3.angular.md
+++ b/src/content/uk/examples/1.basic/3.angular.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-angular-plugin` для безшовної інтеграції з **Angular**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/4.svelte.md b/src/content/uk/examples/1.basic/4.svelte.md
index d520f19..321dec9 100644
--- a/src/content/uk/examples/1.basic/4.svelte.md
+++ b/src/content/uk/examples/1.basic/4.svelte.md
@@ -19,4 +19,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `rete-svelte-plugin` для безшовної інтеграції з **Svelte**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"}
diff --git a/src/content/uk/examples/1.basic/5.lit.md b/src/content/uk/examples/1.basic/5.lit.md
index 1e578f5..5ba87fe 100644
--- a/src/content/uk/examples/1.basic/5.lit.md
+++ b/src/content/uk/examples/1.basic/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 Приклад базового редактора з двома з’єднаними вузлами, кожен з яких має поле введення. Візуалізація вузлів і з’єднань виконується за допомогою `@retejs/lit-plugin` для безшовної інтеграції з **Lit**. Користувачі мають можливість вибрати ці вузли. Позиції вузлів визначаються вручну відповідно до попередньо визначених координат.
 
+:kit
 :example{id="rete-js-v2-lit-js-vvx95j" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.modules.md b/src/content/uk/examples/10.modules.md
index 21ab626..45674e8 100644
--- a/src/content/uk/examples/10.modules.md
+++ b/src/content/uk/examples/10.modules.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє техніку повторного використання схеми, де обробка виконується за допомогою `DataflowEngine`. Це досягається шляхом створення виділеного вузла `Module`, який завантажує вкладену схему, що містить вузли `Input` і `Output`, згодом генеруючи відповідні сокети. У результаті вузол модулю ініціалізує двигун, заповнює його вхідними даними, виконує їх і отримує вихідні дані.
 
+:kit
 :example{id="rete-js-v2-modules-vhr0h5" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.scopes.md b/src/content/uk/examples/10.scopes.md
index 4144427..832cf7c 100644
--- a/src/content/uk/examples/10.scopes.md
+++ b/src/content/uk/examples/10.scopes.md
@@ -18,4 +18,5 @@ navigation:
 
 Змінити батьківський вузол легко: просто натисніть і утримуйте вузол і перемістіть його на новий батьківський вузол.
 
+:kit
 :example{id="rete-js-v2-scopes-grgie8" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/10.selectable-connections.md b/src/content/uk/examples/10.selectable-connections.md
index e924c6e..a2323b1 100644
--- a/src/content/uk/examples/10.selectable-connections.md
+++ b/src/content/uk/examples/10.selectable-connections.md
@@ -16,5 +16,6 @@ navigation:
 
 Редактор не має вбудованої функції вибору з’єднань. Однак якщо ви використовуєте `BidirectFlow` і не можете видалити з’єднання з UI, або вам потрібно вибрати з’єднання для інших цілей, ви можете створити кастомне з’єднання та синхронізувати його з `AreaExtensions.selector`
 
+:kit
 :example{id="rete-js-v2-selectable-connections-cfetvh" module="/src/editor.tsx"}
 
diff --git a/src/content/uk/examples/11.minimap.md b/src/content/uk/examples/11.minimap.md
index f9ebd45..be91090 100644
--- a/src/content/uk/examples/11.minimap.md
+++ b/src/content/uk/examples/11.minimap.md
@@ -16,4 +16,5 @@ navigation:
 
 За замовчуванням міні-карта розміщується у нижньому правому куті та містить прямокутники, які представляють положення вузлів і вьюпорту. Усі вузли, додані в редакторі, динамічно відображаються на міні-карті, гарантуючи, що всі вони знаходяться в межах міні-карти. Крім того, ви можете змінити положення вікна перегляду, перетягнувши його міні-вьюпорт.
 
+:kit
 :example{id="rete-js-v2-minimap-ob9uqc" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/12.dock.md b/src/content/uk/examples/12.dock.md
index 8dfe11e..4c7eea5 100644
--- a/src/content/uk/examples/12.dock.md
+++ b/src/content/uk/examples/12.dock.md
@@ -16,4 +16,5 @@ navigation:
 
 Док-меню — це розділ зі списком вузлів, які користувачі можуть додати до редактора шляхом кліку або перетягування. У стандартному пресеті це меню розміщено в нижній частині редактора, але ви можете створити власний пресет із власними стилями. Крім того, ви можете динамічно додавати або видаляти вузли з цього списку, налаштовуючи для них потрібні властивості та вказуючи їх порядок
 
+:kit
 :example{id="rete-js-v2-forked-t2enm0" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/12.sankey.md b/src/content/uk/examples/12.sankey.md
index 25438de..068f016 100644
--- a/src/content/uk/examples/12.sankey.md
+++ b/src/content/uk/examples/12.sankey.md
@@ -16,6 +16,7 @@ navigation:
 
 Діаграма Санкі базується на класичному пресеті редактора вузлів і включає кастомні компоненти для вузлів, з’єднань і сокетів. Вузлам надається заздалегідь визначена ємність (рівна висоті), а порти генеруються для кожного з’єднання з висотою (вагою), що дорівнює вазі з’єднання.
 
+:kit
 :example{id="rete-js-v2-sankey-diagram-v75qmr" module="/src/editor.ts"}
 
 Інтегрувати цю фічу у вашому проекті легко – просто скопіюйте каталог `sankey` і деякий код з `editor.ts`, включаючи параметри `Presets.classic.setup` та `importGraph`. Крім того, ви можете обмежити рух вузлів за допомогою `createSankeyRestrictor`, щоб вихідні вузли залишалися ліворуч від вхідних. Нарешті, додайте параметр до `arrange.layout`, щоб збільшити відстань між вузлами.
diff --git a/src/content/uk/examples/14.connection-path.md b/src/content/uk/examples/14.connection-path.md
index f80f07e..810fae6 100644
--- a/src/content/uk/examples/14.connection-path.md
+++ b/src/content/uk/examples/14.connection-path.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє використання плагіна для налаштування шляхів підключення. Це полегшує налаштування як шляхів (лінійних, ступінчастих, монотонних), так і точок, які вони проходять. Крім того, є можливість включити маркер у формі стрілки.
 
+:kit
 :example{id="rete-js-v2-connection-path-5dneyc" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/15.reroute.md b/src/content/uk/examples/15.reroute.md
index bca6d6e..bbad691 100644
--- a/src/content/uk/examples/15.reroute.md
+++ b/src/content/uk/examples/15.reroute.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей конкретний приклад показує використання плагіна, розробленого для перенаправлення з’єднання користувачем. Користувачі можуть вставляти точки зміни маршруту, натиснувши на з’єднання, або видалити їх, клацнувши правою кнопкою миші. Користувачі можуть перетягувати або вибирати ці точки (подібно до вузлів), щоб перемістити декілька точок одночасно.
 
+:kit
 :example{id="rete-js-v2-reroute-8doi0c" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/17.comments.md b/src/content/uk/examples/17.comments.md
index 0772b59..b8e2d4f 100644
--- a/src/content/uk/examples/17.comments.md
+++ b/src/content/uk/examples/17.comments.md
@@ -16,4 +16,5 @@ navigation:
 
 Цей приклад демонструє використання плагіна коментарів. Є два типи коментарів: рамки (для групування вузлів) та інлайн (для окремих вузлів). Користувачі можуть додавати вузли до коментарів фрейму шляхом перетягування, тоді як вбудовані коментарі можна приєднувати у зворотному порядку, перетягуючи їх на вузол.
 
+:kit
 :example{id="rete-js-v2-comments-ql406e" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/18.history.md b/src/content/uk/examples/18.history.md
index 6b6b94c..c9b26da 100644
--- a/src/content/uk/examples/18.history.md
+++ b/src/content/uk/examples/18.history.md
@@ -18,4 +18,5 @@ navigation:
 
 Усі операції скасування/повторення автоматично групуються за часом (за замовчуванням 200 мс). Таким чином, якщо послідовність операцій відбувається протягом короткого періоду часу, користувач може скасувати або повторити їх одним натисканням клавіші.
 
+:kit
 :example{id="rete-js-v2-history-gwl0cy" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/1.react.md b/src/content/uk/examples/2.controls/1.react.md
index a6acdc0..5e3d8e2 100644
--- a/src/content/uk/examples/2.controls/1.react.md
+++ b/src/content/uk/examples/2.controls/1.react.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **React.js**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-custom-controls-2vp0wx" module="/src/editor.tsx"}
diff --git a/src/content/uk/examples/2.controls/2.vue.md b/src/content/uk/examples/2.controls/2.vue.md
index f8ad3ad..2bd2403 100644
--- a/src/content/uk/examples/2.controls/2.vue.md
+++ b/src/content/uk/examples/2.controls/2.vue.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Vue.js**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-vue-js-custom-controls-qrdo2c" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/3.angular.md b/src/content/uk/examples/2.controls/3.angular.md
index 2a1582c..d5d0355 100644
--- a/src/content/uk/examples/2.controls/3.angular.md
+++ b/src/content/uk/examples/2.controls/3.angular.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Angular**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-angular-custom-controls-cknttr" module="/src/app/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/4.svelte.md b/src/content/uk/examples/2.controls/4.svelte.md
index 7c7235d..1757542 100644
--- a/src/content/uk/examples/2.controls/4.svelte.md
+++ b/src/content/uk/examples/2.controls/4.svelte.md
@@ -19,4 +19,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Svelte**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-svelte-controls-9dm3dn" module="/src/lib/editor.ts"}
diff --git a/src/content/uk/examples/2.controls/5.lit.md b/src/content/uk/examples/2.controls/5.lit.md
index 0ab4146..f7c170b 100644
--- a/src/content/uk/examples/2.controls/5.lit.md
+++ b/src/content/uk/examples/2.controls/5.lit.md
@@ -20,4 +20,5 @@ navigation:
 
 Цей приклад демонструє використання вбудованого контролу вводу і кастомних елементів керування для **Lit**, які ви можете застосувати відповідно до ваших конкретних потреб. У цьому випадку спеціальні елементи керування містять кнопку, яка випадковим чином встановлює значення поля вводу, і радіальний індикатор прогресу, який синхронізується зі значенням поля вводу
 
+:kit
 :example{id="rete-js-v2-lit-js-custom-controls-3w4ypd" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/20.3d-configurator.md b/src/content/uk/examples/20.3d-configurator.md
index d3a93b6..94d19b1 100644
--- a/src/content/uk/examples/20.3d-configurator.md
+++ b/src/content/uk/examples/20.3d-configurator.md
@@ -15,4 +15,5 @@ navigation:
 
 Цей приклад демонструє використання редактора, який дозволяє комбінувати вузли для створення унікальних кольорових сумішей і застосовувати їх до кузова та коліс автомобіля. Редактор використовує `DataflowEngine` для обробки вузлів. Початкові вузли завантажуються з файлу JSON через спеціальний імпортер, реалізований для цього редактора.
 
+:kit
 :example{id="rete-js-2-3d-configurator-43o7ex" module="/src/node-editor/index.js"}
diff --git a/src/content/uk/examples/21.chatbot.md b/src/content/uk/examples/21.chatbot.md
index 4d34bb9..344bfce 100644
--- a/src/content/uk/examples/21.chatbot.md
+++ b/src/content/uk/examples/21.chatbot.md
@@ -23,6 +23,7 @@ navigation:
 
 Це проста демонстрація чат-бота, поведінка якого програмується за допомогою візуального редактора. У цій реалізації всі елементи кастомізовані, включаючи анімовані з’єднання. Вікно чату представлено у вигляді окремого вузла, який можна переміщати лише за допомогою спеціальних ручок внизу та вгорі. Для обробки графіка використовується механізм на основі потоку даних і керування. Існує також валідація підключень шляхом перевірки сумісності сокетів.
 
+:kit
 :example{id="rete-js-v2-chatbot-programming-nok9iq" module="/src/editor.ts"}
 
 Тут використовуються `DataflowEngine` і `ControlFlowEngine`, так само, як і в прикладі [Гібридний двигун](/uk/examples/processing/hybrid-engine).
diff --git a/src/content/uk/examples/22.3d/1.index.md b/src/content/uk/examples/22.3d/1.index.md
index b9e8774..7ae87d4 100644
--- a/src/content/uk/examples/22.3d/1.index.md
+++ b/src/content/uk/examples/22.3d/1.index.md
@@ -20,5 +20,6 @@ navigation:
 
 Базуючись на **Three.js**, ця сцена використовує модулі `Sky` і `Water` (можна знайти в [офіційному прикладі](https://threejs.org/examples/webgl_shaders_ocean.html)), щоб продемонструвати візуальний вплив інтегрованих вузлів і з'єднань на 3D-середовище.
 
+:kit
 :example{id="rete-js-v2-3d-vrnzly" module="/src/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/1.react.md b/src/content/uk/examples/3.customization/1.react.md
index e5bb9ad..b4367cf 100644
--- a/src/content/uk/examples/3.customization/1.react.md
+++ b/src/content/uk/examples/3.customization/1.react.md
@@ -21,4 +21,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS. Кастомні компоненти, візуалізовані за допомогою **React.js**, можна використовувати незалежно від вашого стеку технологій, навіть [без JSX](https://react.dev/reference/react/createElement). Таким чином, якщо ваш UI фреймворк не інтегровано, ви можете відобразити частини редактора за допомогою **React.js**, використовуючи цей приклад.
 
+:kit
 :example{id="rete-js-v2-custom-node-jpwdh3" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/3.customization/2.vue.md b/src/content/uk/examples/3.customization/2.vue.md
index cbf64b7..e920649 100644
--- a/src/content/uk/examples/3.customization/2.vue.md
+++ b/src/content/uk/examples/3.customization/2.vue.md
@@ -21,5 +21,6 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-vue-js-customization-ubl35h" module="/src/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/3.angular.md b/src/content/uk/examples/3.customization/3.angular.md
index 2f495b0..feb1f6d 100644
--- a/src/content/uk/examples/3.customization/3.angular.md
+++ b/src/content/uk/examples/3.customization/3.angular.md
@@ -21,5 +21,6 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-angular-customization-w9umwf" module="/src/app/editor.ts"}
 
diff --git a/src/content/uk/examples/3.customization/4.svelte.md b/src/content/uk/examples/3.customization/4.svelte.md
index 14e09f9..d9c6dd9 100644
--- a/src/content/uk/examples/3.customization/4.svelte.md
+++ b/src/content/uk/examples/3.customization/4.svelte.md
@@ -21,4 +21,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-svelte-forked-29v37z" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/3.customization/5.lit.md b/src/content/uk/examples/3.customization/5.lit.md
index 7a8aadb..6a6e9a7 100644
--- a/src/content/uk/examples/3.customization/5.lit.md
+++ b/src/content/uk/examples/3.customization/5.lit.md
@@ -22,4 +22,5 @@ navigation:
 
 Крім того, додано градієнтний фон у вигляді сітки за допомогою чистого JS і CSS.
 
+:kit
 :example{id="rete-js-v2-lit-js-customization-gw7gzk" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/6.performance.md b/src/content/uk/examples/6.performance.md
index c9adf6c..21251d9 100644
--- a/src/content/uk/examples/6.performance.md
+++ b/src/content/uk/examples/6.performance.md
@@ -17,4 +17,5 @@ navigation:
 
 У цьому прикладі ви можете встановити кількість вузлів для відображення та оцінити продуктивність під час їх рендерингу. Враховуючи, що візуалізація великої кількості елементів на сторінці завжди пов’язана з проблемами продуктивності, ви можете дослідити такі приклади, як [LOD](/examples/lod) і [LOD GPU](/examples/lod-gpu), використовуючи спеціальні підходи для зменшення цих обмежень
 
+:kit
 :example{id="rete-js-v2-performance-cnbfc0" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/6.vertical-flow.md b/src/content/uk/examples/6.vertical-flow.md
index cc6c9c3..93284c4 100644
--- a/src/content/uk/examples/6.vertical-flow.md
+++ b/src/content/uk/examples/6.vertical-flow.md
@@ -16,7 +16,7 @@ navigation:
 - регулювання точок з'єднання з сокетами.
 - зміна шляху підключення на вертикальну орієнтацію.
 - зміна точок розміщення портів в аранжуванні.
--
+
 :proExample{src="https://retejs-vertical-flow.netlify.app"}
 
 Фактичний приклад створено з використанням React.js, але близько 75% перелічених змін не залежать від стеку. Це означає, що для їх використання в Angular, Vue.js або Svelte вам потрібно буде створити відповідний спеціальний компонент. Якщо ви зіткнетеся з будь-якими проблемами, не соромтеся зв’язатися через GitHub Issues у відповідному репозиторії.
diff --git a/src/content/uk/examples/7.area-extensions.md b/src/content/uk/examples/7.area-extensions.md
index 46c0ec9..a76d087 100644
--- a/src/content/uk/examples/7.area-extensions.md
+++ b/src/content/uk/examples/7.area-extensions.md
@@ -22,4 +22,5 @@ navigation:
 - `restrictor`: обмежує масштабування та панорамування в межах області
 - `snapGrid`: прив'язка позицій вузлів до сітки
 
+:kit
 :example{id="rete-js-v2-area-extensions-rhskwv" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/14.dataflow.md b/src/content/uk/examples/7.processing/14.dataflow.md
index e08b0f8..ed853e8 100644
--- a/src/content/uk/examples/7.processing/14.dataflow.md
+++ b/src/content/uk/examples/7.processing/14.dataflow.md
@@ -21,4 +21,5 @@ navigation:
 
 Кожен вузол має метод `data`, який отримує масиви вхідних даних із відповідних вхідних сокетів і доставляє об’єкт, який містить дані, що відповідають вихідним сокетам. Щоб ініціювати їх виконання, ви можете скористатися методом `engine.fetch`, вказавши ідентифікатор цільового вузла. Відповідно, двигун виконає всіх попередників рекурсивно, витягуючи їхні вихідні дані та доставляючи їх до зазначеного вузла.
 
+:kit
 :example{id="rete-js-v2-dataflow-engine-tyhr1e" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/15.control-flow.md b/src/content/uk/examples/7.processing/15.control-flow.md
index 3727727..2f79ebf 100644
--- a/src/content/uk/examples/7.processing/15.control-flow.md
+++ b/src/content/uk/examples/7.processing/15.control-flow.md
@@ -19,4 +19,5 @@ navigation:
 
 Кожен вузол має метод `execute`, який приймає ключ вхідного порту як джерело керування, і функцію для передачі керування вихідним вузлам через визначений вихідний порт. Щоб ініціювати виконання потоку, ви можете використовувати метод `engine.execute`, вказавши ідентифікатор початкового вузла. Відповідно, вихідні вузли будуть виконуватися послідовно, починаючи з призначеного вузла.
 
+:kit
 :example{id="rete-js-v2-control-flow-engine-yqi8z7" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/7.processing/15.hybrid-engine.md b/src/content/uk/examples/7.processing/15.hybrid-engine.md
index 041a841..fad9f7d 100644
--- a/src/content/uk/examples/7.processing/15.hybrid-engine.md
+++ b/src/content/uk/examples/7.processing/15.hybrid-engine.md
@@ -19,4 +19,5 @@ navigation:
 
 У цьому прикладі показано, як `rete-engine` дозволяє одночасно інтегрувати потік даних і управління потоком. Отже, певні вузли служать джерелами даних, інші керують потоком, а третій набір включає обидва ці підходи.
 
+:kit
 :example{id="rete-js-v2-hybrid-engine-erkdtu" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/8.arrange.md b/src/content/uk/examples/8.arrange.md
index 2b556cd..92e6deb 100644
--- a/src/content/uk/examples/8.arrange.md
+++ b/src/content/uk/examples/8.arrange.md
@@ -18,4 +18,5 @@ navigation:
 
 Крім того, він пропонує широкі можливості налаштування, дозволяючи користувачам налаштовувати розміщення вузлів за допомогою різних параметрів і програму застосування для призначення обчислених позицій вузлам (наприклад, включення анімації).
 
+:kit
 :example{id="rete-js-v2-arrange-layout-nodes-ri75lp" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/8.insert-node.md b/src/content/uk/examples/8.insert-node.md
index 29adf6d..5b459bf 100644
--- a/src/content/uk/examples/8.insert-node.md
+++ b/src/content/uk/examples/8.insert-node.md
@@ -13,6 +13,7 @@ navigation:
 
 Після додавання з’єднання граф упорядковується з анімацією.
 
+:kit
 :example{id="rete-js-v2-insert-node-givohx" module="/src/editor.ts"}
 
 Використовуйте директорію `insert-node` і викликайте `insertableNodes` з відповідними аргументами, щоб інтегрувати цю фічу у ваш додаток.
diff --git a/src/content/uk/examples/8.magnetic-connection.md b/src/content/uk/examples/8.magnetic-connection.md
index c9c8162..ea4a22b 100644
--- a/src/content/uk/examples/8.magnetic-connection.md
+++ b/src/content/uk/examples/8.magnetic-connection.md
@@ -11,6 +11,7 @@ navigation:
 
 Наведений приклад демонструє техніку покращення UX шляхом збільшення області відпускання з’єднання. Це означає, що користувачам не потрібно цілитися безпосередньо в сокет, щоб створити з’єднання, особливо якщо сокет невеликий або рівень масштабування низький.
 
+:kit
 :example{id="rete-js-v2-magnetic-connection-078ild" module="/src/editor.ts"}
 
 Щоб реалізувати цей підхід у вашому проекті, скопіюйте каталог `magnetic-connection` і виклик відповідної функції `useMagneticConnection` в модуль `editor.ts`. Залежно від рендер плагіна використовуйте існуючий компонент з'єднання в директорії або створіть власний.
diff --git a/src/content/uk/examples/8.smooth-zoom.md b/src/content/uk/examples/8.smooth-zoom.md
index 1428487..c62aed8 100644
--- a/src/content/uk/examples/8.smooth-zoom.md
+++ b/src/content/uk/examples/8.smooth-zoom.md
@@ -15,6 +15,7 @@ navigation:
 
 У редакторі за замовчуванням увімкнено миттєве масштабування з кроком, еквівалентним одному руху коліщатка прокручування. Якщо вам потрібно налаштувати цю поведінку, ви можете розширити клас `Zoom`
 
+:kit
 :example{id="rete-js-v2-smooth-zoom-6sqv8j" module="/src/editor.ts"}
 
 У цьому прикладі основна логіка міститься в `src/zoom.ts`. Щоб інтегрувати це в редактор, просто додайте такий рядок:
diff --git a/src/content/uk/examples/9.context-menu.md b/src/content/uk/examples/9.context-menu.md
index e7343e8..bd49827 100644
--- a/src/content/uk/examples/9.context-menu.md
+++ b/src/content/uk/examples/9.context-menu.md
@@ -18,4 +18,5 @@ navigation:
 
 Надані функції покладається на класичний пресет, але для покращеної кастомізації його можна замінити, щоб полегшити створення динамічнішого пункту меню.
 
+:kit
 :example{id="rete-js-v2-context-menu-jcelzo" module="/src/editor.ts"}
diff --git a/src/content/uk/examples/9.panning-boundary.md b/src/content/uk/examples/9.panning-boundary.md
index b1b3bb7..9ff3964 100644
--- a/src/content/uk/examples/9.panning-boundary.md
+++ b/src/content/uk/examples/9.panning-boundary.md
@@ -16,6 +16,7 @@ navigation:
 
 Цей приклад демонструє реалізацію панорамування області, коли курсор із перетягуваним вузлом наближається до межі редактора. Залежно від відстані до будь-якої з меж області, починаючи з певного порогу, швидкість панорамування буде обернено пропорційна відстані до межі.
 
+:kit
 :example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
 
 Хоча цей приклад спочатку був розроблений для React.js, показана функція повністю не залежить від фреймворку. Ви можете легко інтегрувати його у свій додаток на іншому стеку, скопіювавши модуль функцій і підключивши його до свого редактора.
diff --git a/src/content/uk/examples/9.readonly.md b/src/content/uk/examples/9.readonly.md
index d8621ff..6477d0e 100644
--- a/src/content/uk/examples/9.readonly.md
+++ b/src/content/uk/examples/9.readonly.md
@@ -18,4 +18,5 @@ navigation:
 
 З іншого боку, плагін навмисно не має різноманітних параметрів для кастомізації, щоб він був простим, дозволяючи досліджувати його вихідний код і створювати власні рішення, адаптовані до конкретного випадку використання (наприклад, обмеження додавання лише певних типів вузлів).
 
+:kit
 :example{id="rete-js-v2-readonly-4pi274" module="/src/editor.ts"}