From 4c5b0a8f78a37b515fd3eef53898c5385612906e Mon Sep 17 00:00:00 2001
From: Igor Kretov <knigor1337@gmail.com>
Date: Mon, 30 Mar 2026 17:43:24 +0300
Subject: [PATCH 1/3] chore: Storybook shot selector support added

---
 Makefile                                      |  3 ++-
 .../v1-components/storybook/scripts/shot.ts   | 23 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Makefile b/Makefile
index bdfeceb4..eddef699 100644
--- a/Makefile
+++ b/Makefile
@@ -45,11 +45,12 @@ storybook.serve: .require-compose ## [Build][docker] Runs Storybook for v1-compo
 storybook.shot: .require-compose ## [Research][docker] Captures a Storybook screenshot for v1-components docs/story page
 	$(TARGET_HEADER)
 	@$(COMPOSE) up -d v1-components
-	@UID=$$(id -u) GID=$$(id -g) $(COMPOSE) run --rm playwright \
+	@$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
 		yarn workspace @retailcrm/embed-ui-v1-components run storybook:shot \
 			--base-url http://v1-components:6006 \
 			--path "$(if $(story_path),$(story_path),/iframe.html?viewMode=docs&id=components-uitable--docs)" \
 			--output "$(if $(output),$(output),artifacts/storybook/UiTable.docs.png)" \
+			$(if $(selector),--selector "$(selector)",) \
 			--wait-for-selector "$(if $(wait_for),$(wait_for),#storybook-docs)" \
 			--settle-ms "$(if $(settle_ms),$(settle_ms),2500)" \
 			--timeout-ms "$(if $(timeout_ms),$(timeout_ms),60000)" \
diff --git a/packages/v1-components/storybook/scripts/shot.ts b/packages/v1-components/storybook/scripts/shot.ts
index 51db72fb..504a3b2f 100644
--- a/packages/v1-components/storybook/scripts/shot.ts
+++ b/packages/v1-components/storybook/scripts/shot.ts
@@ -10,6 +10,7 @@ import { chromium } from 'playwright'
 type CliOptions = {
   baseUrl: string;
   output: string;
+  selector?: string;
   settleMs: number;
   storyPath: string;
   timeoutMs: number;
@@ -75,6 +76,11 @@ const parseArgs = (argv: string[]): CliOptions => {
       continue
     }
 
+    if (argument === '--selector') {
+      options.selector = readValue(argument)
+      continue
+    }
+
     if (argument === '--timeout-ms') {
       options.timeoutMs = parseInteger(readValue(argument), argument)
       continue
@@ -253,10 +259,19 @@ const run = async () => {
     await page.waitForTimeout(250)
 
     await mkdir(dirname(outputPath), { recursive: true })
-    await page.screenshot({
-      fullPage: true,
-      path: outputPath,
-    })
+    if (options.selector) {
+      const locator = page.locator(options.selector).last()
+
+      await locator.scrollIntoViewIfNeeded()
+      await locator.screenshot({
+        path: outputPath,
+      })
+    } else {
+      await page.screenshot({
+        fullPage: true,
+        path: outputPath,
+      })
+    }
 
     console.log(outputPath)
   } finally {

From d6159d15493cc962ecf88b0c01a3001b6740644f Mon Sep 17 00:00:00 2001
From: Igor Kretov <knigor1337@gmail.com>
Date: Thu, 30 Apr 2026 18:23:01 +0400
Subject: [PATCH 2/3] feat(v1-components): UiLogicTree component was added

Co-authored-by: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
---
 Makefile                                      |   12 +
 .../sprites/actions/add-square-outlined.svg   |    8 +
 .../assets/sprites/actions/drag.svg           |    8 +
 .../src/common/components/logic-tree.ts       |  139 +++
 .../src/common/components/popper.ts           |    1 +
 .../src/host/components/index.ts              |    5 +
 .../logic-tree/UiLogicTreeCaret.vue           |   19 +
 .../logic-tree/UiLogicTreeCaret.vue.d.ts      |    7 +
 .../components/logic-tree/UiLogicTreeNode.vue |  388 ++++++
 .../logic-tree/UiLogicTreeNode.vue.d.ts       |    7 +
 .../logic-tree/UiLogicTreeNodeIcon.vue        |    5 +
 .../logic-tree/UiLogicTreeNodeIcon.vue.d.ts   |    5 +
 .../logic-tree/UiLogicTreeNodeItem.vue        |   21 +
 .../logic-tree/UiLogicTreeNodeItem.vue.d.ts   |    5 +
 .../components/logic-tree/UiLogicTreeRoot.vue |   84 ++
 .../logic-tree/UiLogicTreeRoot.vue.d.ts       |    7 +
 .../src/host/components/logic-tree/i18n.ts    |   13 +
 .../components/logic-tree/i18n/en-GB.json     |    5 +
 .../components/logic-tree/i18n/es-ES.json     |    5 +
 .../components/logic-tree/i18n/ru-RU.json     |    5 +
 .../src/host/components/logic-tree/index.ts   |    5 +
 .../components/logic-tree/logic-tree.less     |  702 +++++++++++
 packages/v1-components/src/remote.ts          |    1 +
 .../components/logic-tree/UiLogicTree.vue     | 1053 +++++++++++++++++
 .../logic-tree/UiLogicTreeDragHandle.vue      |   30 +
 .../src/remote/components/logic-tree/index.ts |    9 +
 .../src/remote/components/logic-tree/parts.ts |   63 +
 .../src/remote/components/popper.ts           |   20 +-
 packages/v1-components/src/remote/endpoint.ts |    5 +
 .../storybook/createRemoteStoryRender.ts      |    6 +-
 packages/v1-components/storybook/endpoint.ts  |   34 +-
 .../storybook/host-components.ts              |   39 +
 packages/v1-components/storybook/provider.ts  |   19 +
 .../storybook/stories/UiField.stories.ts      |   15 -
 .../storybook/stories/UiLogicTree.mdx         |  188 +++
 .../UiLogicTree.remote.example.module.less    |   73 ++
 .../stories/UiLogicTree.remote.example.vue    |  715 +++++++++++
 .../storybook/stories/UiLogicTree.remote.ts   |   33 +
 .../storybook/stories/UiLogicTree.stories.ts  |  616 ++++++++++
 .../storybook/stories/UiPageHeader.stories.ts |   19 -
 .../stories/UiRadioSwitch.stories.ts          |   11 -
 .../storybook/stories/UiSelect.stories.ts     |   17 -
 .../storybook/stories/UiTab.stories.ts        |   11 -
 .../storybook/stories/UiTable.stories.ts      |   34 -
 .../stories/UiToggleGroup.stories.ts          |   11 -
 .../tests/__fixtures__/logic-tree.worker.ts   |  369 ++++++
 .../host/components/logic-tree-node.test.ts   |   95 ++
 .../tests/logic-tree.worker.e2e.ts            |  328 +++++
 48 files changed, 5118 insertions(+), 152 deletions(-)
 create mode 100644 packages/v1-components/assets/sprites/actions/add-square-outlined.svg
 create mode 100644 packages/v1-components/assets/sprites/actions/drag.svg
 create mode 100644 packages/v1-components/src/common/components/logic-tree.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue
 create mode 100644 packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/i18n.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json
 create mode 100644 packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json
 create mode 100644 packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json
 create mode 100644 packages/v1-components/src/host/components/logic-tree/index.ts
 create mode 100644 packages/v1-components/src/host/components/logic-tree/logic-tree.less
 create mode 100644 packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue
 create mode 100644 packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue
 create mode 100644 packages/v1-components/src/remote/components/logic-tree/index.ts
 create mode 100644 packages/v1-components/src/remote/components/logic-tree/parts.ts
 create mode 100644 packages/v1-components/storybook/host-components.ts
 create mode 100644 packages/v1-components/storybook/provider.ts
 create mode 100644 packages/v1-components/storybook/stories/UiLogicTree.mdx
 create mode 100644 packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less
 create mode 100644 packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue
 create mode 100644 packages/v1-components/storybook/stories/UiLogicTree.remote.ts
 create mode 100644 packages/v1-components/storybook/stories/UiLogicTree.stories.ts
 create mode 100644 packages/v1-components/tests/__fixtures__/logic-tree.worker.ts
 create mode 100644 packages/v1-components/tests/host/components/logic-tree-node.test.ts
 create mode 100644 packages/v1-components/tests/logic-tree.worker.e2e.ts

diff --git a/Makefile b/Makefile
index eddef699..c4421117 100644
--- a/Makefile
+++ b/Makefile
@@ -84,6 +84,18 @@ else
 endif
 	$(TARGET_OK)
 
+.PHONY: tests-e2e
+tests-e2e: .require-compose ## [Tests][docker] Runs v1-components browser e2e tests
+	$(TARGET_HEADER)
+ifdef cli
+	@$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
+		yarn workspace @retailcrm/embed-ui-v1-components run test:e2e $(cli)
+else
+	@$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
+		yarn workspace @retailcrm/embed-ui-v1-components run test:e2e
+endif
+	$(TARGET_OK)
+
 .PHONY: tests-coverage
 tests-coverage: .require-compose ## [Tests][docker][heavy] Runs autotests with coverage report
 	$(TARGET_HEADER)
diff --git a/packages/v1-components/assets/sprites/actions/add-square-outlined.svg b/packages/v1-components/assets/sprites/actions/add-square-outlined.svg
new file mode 100644
index 00000000..01a7bc12
--- /dev/null
+++ b/packages/v1-components/assets/sprites/actions/add-square-outlined.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        fill="currentColor"
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM19 19H5V5H19V19ZM11 13H8.5C8.22386 13 8 12.7761 8 12.5V11.5C8 11.2239 8.22386 11 8.5 11H11V8.5C11 8.22386 11.2239 8 11.5 8H12.5C12.7761 8 13 8.22386 13 8.5V11H15.5C15.7761 11 16 11.2239 16 11.5V12.5C16 12.7761 15.7761 13 15.5 13H13V15.5C13 15.7761 12.7761 16 12.5 16H11.5C11.2239 16 11 15.7761 11 15.5V13Z"
+    />
+</svg>
diff --git a/packages/v1-components/assets/sprites/actions/drag.svg b/packages/v1-components/assets/sprites/actions/drag.svg
new file mode 100644
index 00000000..4b96ef5a
--- /dev/null
+++ b/packages/v1-components/assets/sprites/actions/drag.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
+    <path
+        d="M7.4987 6.66683C8.41917 6.66683 9.16536 5.92064 9.16536 5.00016C9.16536 4.07969 8.41917 3.3335 7.4987 3.3335C6.57822 3.3335 5.83203 4.07969 5.83203 5.00016C5.83203 5.92064 6.57822 6.66683 7.4987 6.66683ZM5.83203 10.0002C5.83203 9.07969 6.57822 8.3335 7.4987 8.3335C8.41917 8.3335 9.16536 9.07969 9.16536 10.0002C9.16536 10.9206 8.41917 11.6668 7.4987 11.6668C6.57822 11.6668 5.83203 10.9206 5.83203 10.0002ZM7.4987 13.3335C6.57822 13.3335 5.83203 14.0797 5.83203 15.0002C5.83203 15.9206 6.57822 16.6668 7.4987 16.6668C8.41917 16.6668 9.16536 15.9206 9.16536 15.0002C9.16536 14.0797 8.41917 13.3335 7.4987 13.3335ZM14.1654 5.00016C14.1654 5.92064 13.4192 6.66683 12.4987 6.66683C11.5782 6.66683 10.832 5.92064 10.832 5.00016C10.832 4.07969 11.5782 3.3335 12.4987 3.3335C13.4192 3.3335 14.1654 4.07969 14.1654 5.00016ZM12.4987 8.3335C11.5782 8.3335 10.832 9.07969 10.832 10.0002C10.832 10.9206 11.5782 11.6668 12.4987 11.6668C13.4192 11.6668 14.1654 10.9206 14.1654 10.0002C14.1654 9.07969 13.4192 8.3335 12.4987 8.3335ZM10.832 15.0002C10.832 14.0797 11.5782 13.3335 12.4987 13.3335C13.4192 13.3335 14.1654 14.0797 14.1654 15.0002C14.1654 15.9206 13.4192 16.6668 12.4987 16.6668C11.5782 16.6668 10.832 15.9206 10.832 15.0002Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+    />
+</svg>
diff --git a/packages/v1-components/src/common/components/logic-tree.ts b/packages/v1-components/src/common/components/logic-tree.ts
new file mode 100644
index 00000000..e6b093bf
--- /dev/null
+++ b/packages/v1-components/src/common/components/logic-tree.ts
@@ -0,0 +1,139 @@
+export enum LogicTreeNodeKind {
+  BRANCH = 'branch',
+  CONDITION = 'condition',
+  GROUP = 'group',
+}
+
+export enum LogicTreeChildrenView {
+  GROUPED = 'grouped',
+  PLAIN = 'plain',
+}
+
+export enum LogicTreeConjunction {
+  AND = 'and',
+  OR = 'or',
+}
+
+export enum LogicTreeNodeView {
+  ACTIONS = 'actions',
+  SUMMARY = 'summary',
+}
+
+export enum LogicTreeTone {
+  BLUE = 'blue',
+  GREEN = 'green',
+  GREY = 'grey',
+  RED = 'red',
+  YELLOW = 'yellow',
+}
+
+export type UiLogicTreeConnector = {
+  continues: boolean;
+  placeholder?: boolean;
+  tone: LogicTreeTone;
+  visible: boolean;
+}
+
+export type UiLogicTreeNodeData<TNodeData extends object = Record<string, never>> = {
+  view: LogicTreeNodeView;
+  editable: boolean;
+  disabled?: boolean;
+  draggable?: boolean;
+  selected?: boolean;
+  highlighted?: boolean;
+} & TNodeData
+
+export type UiLogicTreeNode<TNodeData extends object = Record<string, never>> = {
+  id: string;
+  kind: LogicTreeNodeKind;
+  tone?: LogicTreeTone;
+  conjunction?: LogicTreeConjunction | string;
+  collapsible?: boolean;
+  expanded?: boolean;
+  childrenView?: LogicTreeChildrenView;
+  children?: UiLogicTreeNode<TNodeData>[];
+  data: UiLogicTreeNodeData<TNodeData>;
+}
+
+export type UiLogicTreeProperties<TNodeData extends object = Record<string, never>> = {
+  items?: UiLogicTreeNode<TNodeData>[];
+}
+
+export type UiLogicTreeDropPayload = {
+  itemId: string;
+  sourceContainerId: string;
+  targetContainerId: string;
+  targetIndex: number | null;
+  targetItemId: string | null;
+  placement: 'after' | 'before';
+  payload?: unknown;
+}
+
+export type UiLogicTreeNodeAddPayload = {
+  actionId: string;
+  kind: Exclude<UiLogicTreeNode['kind'], LogicTreeNodeKind.BRANCH>;
+  parentNodeId: string | null;
+  parentPathKey: string | null;
+  triggerNodeId: string;
+}
+
+export type UiLogicTreeNodeEditPayload = {
+  controlId: string;
+  nodeId: string;
+  pathKey: string;
+  value: string | number | null;
+}
+
+export type UiLogicTreeNodeRemovePayload = {
+  index: number;
+  nodeId: string;
+  parentNodeId: string | null;
+  parentPathKey: string | null;
+  pathKey: string;
+}
+
+export type UiLogicTreeNodeSlotProps<TNodeData extends object = Record<string, never>> = {
+  editing: boolean;
+  expanded: boolean;
+  grouped: boolean;
+  groupedHeader: boolean;
+  groupedPosition?: UiLogicTreeNodeProperties['groupedPosition'];
+  hasChildren: boolean;
+  highlighted: boolean;
+  disabled: boolean;
+  node: UiLogicTreeNode<TNodeData>;
+  path: number[];
+  pathKey: string;
+  nodeView: LogicTreeNodeView;
+  selected: boolean;
+  onAction: (actionId: string, kind: Exclude<UiLogicTreeNode<TNodeData>['kind'], LogicTreeNodeKind.BRANCH>) => void;
+  onControlAction: (controlId: string) => void;
+  onControlUpdate: (controlId: string, value: string | number | null) => void;
+  onRemove: () => void;
+  onToggle: () => void;
+}
+
+export type UiLogicTreeRootProperties = Record<string, never>
+
+export type UiLogicTreeCaretProperties = {
+  active?: boolean;
+}
+
+export type UiLogicTreeNodeProperties = {
+  pathKey?: string;
+  nodeView?: LogicTreeNodeView;
+  connectors?: UiLogicTreeConnector[];
+  conjunction?: string;
+  conjunctionEndPathKey?: string;
+  conjunctionLabel?: string;
+  conjunctionOffset?: number;
+  conjunctionStartPathKey?: string;
+  conjunctionTone?: LogicTreeTone;
+  groupedHeader?: boolean;
+  grouped?: boolean;
+  groupedPosition?: 'end' | 'middle' | 'single' | 'start';
+  editable?: boolean;
+  disabled?: boolean;
+  highlighted?: boolean;
+  selected?: boolean;
+}
diff --git a/packages/v1-components/src/common/components/popper.ts b/packages/v1-components/src/common/components/popper.ts
index b11e5dd2..058f5cf2 100644
--- a/packages/v1-components/src/common/components/popper.ts
+++ b/packages/v1-components/src/common/components/popper.ts
@@ -34,6 +34,7 @@ export type FloatingOptions = {
 }
 
 export type ShowingOptions = {
+  visible?: boolean;
   shown?: boolean;
   targetTriggers?: Trigger[] | TriggerSchema;
   popperTriggers?: Trigger[] | TriggerSchema;
diff --git a/packages/v1-components/src/host/components/index.ts b/packages/v1-components/src/host/components/index.ts
index f777ec60..04d9182f 100644
--- a/packages/v1-components/src/host/components/index.ts
+++ b/packages/v1-components/src/host/components/index.ts
@@ -16,6 +16,11 @@ export { default as UiImage } from '@/host/components/image/UiImage.vue'
 export { default as UiInfobox } from '@/host/components/infobox/UiInfobox.vue'
 export { default as UiLink } from '@/host/components/link/UiLink.vue'
 export { default as UiLoader } from '@/host/components/loader/UiLoader.vue'
+export { default as UiLogicTreeCaret } from '@/host/components/logic-tree/UiLogicTreeCaret.vue'
+export { default as UiLogicTreeNode } from '@/host/components/logic-tree/UiLogicTreeNode.vue'
+export { default as UiLogicTreeNodeIcon } from '@/host/components/logic-tree/UiLogicTreeNodeIcon.vue'
+export { default as UiLogicTreeNodeItem } from '@/host/components/logic-tree/UiLogicTreeNodeItem.vue'
+export { default as UiLogicTreeRoot } from '@/host/components/logic-tree/UiLogicTreeRoot.vue'
 export { default as UiMenuItem } from '@/host/components/menu/UiMenuItem.vue'
 export { default as UiMenuItemGroup } from '@/host/components/menu/UiMenuItemGroup.vue'
 export { default as UiModalSidebar } from '@/host/components/modal-sidebar/UiModalSidebar.vue'
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue
new file mode 100644
index 00000000..6b91c7bc
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue
@@ -0,0 +1,19 @@
+<template>
+    <IconCaretDown
+        :class="{
+            'ui-v1-logic-tree-caret': true,
+            'ui-v1-logic-tree-caret_active': active,
+        }"
+        aria-hidden="true"
+    />
+</template>
+
+<script lang="ts" setup>
+import type { UiLogicTreeCaretProperties } from '@/common/components/logic-tree'
+
+import IconCaretDown from '~assets/sprites/arrows/caret-down.svg'
+
+withDefaults(defineProps<UiLogicTreeCaretProperties>(), {
+  active: false,
+})
+</script>
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts
new file mode 100644
index 00000000..27832358
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts
@@ -0,0 +1,7 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiLogicTreeCaretProperties } from '@/common/components/logic-tree'
+
+declare const UiLogicTreeCaret: DefineComponent<UiLogicTreeCaretProperties>
+
+export default UiLogicTreeCaret
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue
new file mode 100644
index 00000000..62262cde
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue
@@ -0,0 +1,388 @@
+<template>
+    <div
+        ref="nodeRef"
+        :class="{
+            'ui-v1-logic-tree__node': true,
+            'ui-v1-logic-tree__node_grouped-header': groupedHeader,
+            'ui-v1-logic-tree__node_grouped': grouped,
+            'ui-v1-logic-tree__node_grouped-start': grouped && groupedPosition === 'start',
+            'ui-v1-logic-tree__node_grouped-middle': grouped && groupedPosition === 'middle',
+            'ui-v1-logic-tree__node_grouped-end': grouped && groupedPosition === 'end',
+            'ui-v1-logic-tree__node_grouped-single': grouped && groupedPosition === 'single',
+        }"
+        :data-node-path-key="pathKey"
+    >
+        <div class="ui-v1-logic-tree__node-main">
+            <div
+                v-if="connectors.length > 0"
+                class="ui-v1-logic-tree__connectors"
+            >
+                <span
+                    v-for="(connector, index) in connectors"
+                    :key="index"
+                    :class="{
+                        'ui-v1-logic-tree__connector': true,
+                        'ui-v1-logic-tree__connector_placeholder': connector.placeholder,
+                        'ui-v1-logic-tree__connector_visible': connector.visible,
+                        'ui-v1-logic-tree__connector_branch': index === connectors.length - 1,
+                        'ui-v1-logic-tree__connector_terminal': index === connectors.length - 1 && !connector.continues,
+                        'ui-v1-logic-tree__connector_with-relation': Boolean(conjunction) && index === connectors.length - 1 && !connector.placeholder,
+                        [`ui-v1-logic-tree__connector_${connector.tone}`]: true,
+                    }"
+                >
+                    <span
+                        v-if="!connector.placeholder"
+                        class="ui-v1-logic-tree__connector-stroke ui-v1-logic-tree__connector-stroke_top"
+                    />
+                    <span
+                        v-if="connector.continues && !connector.placeholder"
+                        class="ui-v1-logic-tree__connector-stroke ui-v1-logic-tree__connector-stroke_bottom"
+                    />
+                    <span
+                        v-if="index === connectors.length - 1 && !connector.placeholder"
+                        class="ui-v1-logic-tree__connector-stroke ui-v1-logic-tree__connector-stroke_middle"
+                    />
+                </span>
+            </div>
+
+            <UiPopperConnector
+                v-if="conjunction && connectors.length > 0"
+            >
+                <UiPopperTarget
+                    :class="{
+                        'ui-v1-logic-tree__relation-badge': true,
+                        'ui-v1-logic-tree__relation-badge_or': conjunctionKind === 'or',
+                        'ui-v1-logic-tree__relation-badge_and': conjunctionKind === 'and',
+                        [`ui-v1-logic-tree__relation-badge_${conjunctionTone}`]: true,
+                    }"
+                    :style="conjunctionBadgeStyle"
+                    data-skip-node-click="true"
+                    tag="button"
+                    type="button"
+                >
+                    {{ conjunctionLabel || conjunction }}
+                </UiPopperTarget>
+
+                <slot name="conjunction-poppers" />
+            </UiPopperConnector>
+
+            <div
+                class="ui-v1-logic-tree__surface-node"
+                :data-path-key="pathKey"
+                v-bind="$attrs"
+            >
+                <div
+                    :class="{
+                        'ui-v1-logic-tree__grouped-block': grouped,
+                        'ui-v1-logic-tree__grouped-block_start': grouped && groupedPosition === 'start',
+                        'ui-v1-logic-tree__grouped-block_middle': grouped && groupedPosition === 'middle',
+                        'ui-v1-logic-tree__grouped-block_end': grouped && groupedPosition === 'end',
+                        'ui-v1-logic-tree__grouped-block_single': grouped && groupedPosition === 'single',
+                    }"
+                >
+                    <div
+                        v-if="nodeView === LogicTreeNodeView.ACTIONS"
+                        class="ui-v1-logic-tree__actions-node"
+                    >
+                        <div class="ui-v1-logic-tree__node-prefix">
+                            <slot name="prefix" />
+                        </div>
+
+                        <div class="ui-v1-logic-tree__actions-node-content">
+                            <slot name="content" />
+                        </div>
+
+                        <div class="ui-v1-logic-tree__node-trailing">
+                            <slot name="trailing" />
+                        </div>
+                    </div>
+
+                    <div
+                        v-else
+                        :class="{
+                            'ui-v1-logic-tree__surface-node-content': true,
+                            'ui-v1-logic-tree__surface-node-content_active': selected,
+                            'ui-v1-logic-tree__surface-node-content_disabled': disabled,
+                            'ui-v1-logic-tree__surface-node-content_editing': isEditable,
+                            'ui-v1-logic-tree__surface-node-content_editor': isEditable,
+                            'ui-v1-logic-tree__surface-node-content_highlighted': highlighted,
+                            'ui-v1-logic-tree__surface-node-content_simple': true,
+                        }"
+                        :aria-disabled="disabled || undefined"
+                        role="button"
+                        :tabindex="disabled ? undefined : 0"
+                        @click="onClick"
+                        @keydown.enter.prevent="onKeydownActivate"
+                        @keydown.space.prevent="onKeydownActivate"
+                    >
+                        <div class="ui-v1-logic-tree__surface-node-content__main">
+                            <div class="ui-v1-logic-tree__node-prefix">
+                                <slot name="prefix" />
+                            </div>
+
+                            <div class="ui-v1-logic-tree__node-content">
+                                <slot name="content" />
+                            </div>
+                        </div>
+
+                        <div class="ui-v1-logic-tree__node-trailing">
+                            <slot name="trailing" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { CSSProperties, PropType } from 'vue'
+
+import type {
+  LogicTreeTone,
+  UiLogicTreeConnector,
+  UiLogicTreeNodeProperties,
+} from '@/common/components/logic-tree'
+
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+} from 'vue'
+
+import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
+import UiPopperTarget from '@/host/components/popper/UiPopperTarget.vue'
+
+import { LogicTreeConjunction, LogicTreeNodeView } from '@/common/components/logic-tree'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  connectors: {
+    type: Array as PropType<UiLogicTreeConnector[]>,
+    default: () => [],
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+
+  grouped: {
+    type: Boolean,
+    default: false,
+  },
+
+  groupedHeader: {
+    type: Boolean,
+    default: false,
+  },
+
+  groupedPosition: {
+    type: String as PropType<UiLogicTreeNodeProperties['groupedPosition']>,
+    default: undefined,
+  },
+
+  highlighted: {
+    type: Boolean,
+    default: false,
+  },
+
+  pathKey: {
+    type: String,
+    default: '',
+  },
+
+  conjunction: {
+    type: String,
+    default: '',
+  },
+
+  conjunctionLabel: {
+    type: String,
+    default: '',
+  },
+
+  conjunctionEndPathKey: {
+    type: String,
+    default: '',
+  },
+
+  conjunctionOffset: {
+    type: Number,
+    default: undefined,
+  },
+
+  conjunctionStartPathKey: {
+    type: String,
+    default: '',
+  },
+
+  conjunctionTone: {
+    type: String as PropType<LogicTreeTone>,
+    default: undefined,
+  },
+
+  nodeView: {
+    type: String as PropType<LogicTreeNodeView>,
+    default: LogicTreeNodeView.SUMMARY,
+  },
+
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  'node-click': [pathKey: string];
+  'node-edit': [value: boolean];
+}>()
+
+const isEditable = computed(() => props.editable)
+
+const isInteractiveDescendant = (event: Event): boolean => {
+  const target = event.target as HTMLElement | null
+  const currentTarget = event.currentTarget as HTMLElement | null
+  const interactiveTarget = target?.closest(
+    'button, input, select, textarea, [role="button"], [role="option"], [data-skip-node-click="true"]'
+  )
+
+  return Boolean(interactiveTarget && interactiveTarget !== currentTarget)
+}
+
+const onClick = (event: MouseEvent) => {
+  if (props.disabled || isInteractiveDescendant(event)) {
+    return
+  }
+
+  if (!props.editable) {
+    emit('node-edit', true)
+  }
+
+  emit('node-click', props.pathKey)
+}
+
+const onKeydownActivate = (event: KeyboardEvent) => {
+  if (props.disabled || isInteractiveDescendant(event)) {
+    return
+  }
+
+  if (!props.editable) {
+    emit('node-edit', true)
+  }
+
+  emit('node-click', props.pathKey)
+}
+
+const conjunctionKind = computed(() => {
+  if (props.conjunction === LogicTreeConjunction.OR) {
+    return 'or'
+  }
+
+  if (props.conjunction === LogicTreeConjunction.AND) {
+    return 'and'
+  }
+
+  return ''
+})
+
+const nodeRef = ref<HTMLElement | null>(null)
+const conjunctionCalculatedOffset = ref<number | undefined>(
+  props.conjunction && props.conjunctionStartPathKey && props.conjunctionEndPathKey
+    ? undefined
+    : props.conjunctionOffset
+)
+
+const resolveRelationElement = (root: HTMLElement, pathKey: string): HTMLElement | null => (
+  root.querySelector<HTMLElement>(`[data-path-key="${pathKey}"]`)
+  ?? root.querySelector<HTMLElement>(`[data-node-path-key="${pathKey}"]`)
+)
+
+const resolveRelationAnchor = (element: HTMLElement): number => {
+  const rect = element.getBoundingClientRect()
+
+  return rect.top + (rect.height / 2)
+}
+
+const recalculateConjunctionOffset = async () => {
+  if (!props.conjunction || !props.conjunctionStartPathKey || !props.conjunctionEndPathKey) {
+    conjunctionCalculatedOffset.value = props.conjunctionOffset
+    return
+  }
+
+  await nextTick()
+
+  const currentNode = nodeRef.value
+  const root = currentNode?.closest<HTMLElement>('.ui-v1-logic-tree')
+
+  if (!currentNode || !root) {
+    conjunctionCalculatedOffset.value = props.conjunctionOffset
+    return
+  }
+
+  const startNode = resolveRelationElement(root, props.conjunctionStartPathKey)
+  const endNode = resolveRelationElement(root, props.conjunctionEndPathKey)
+
+  if (!startNode || !endNode) {
+    conjunctionCalculatedOffset.value = props.conjunctionOffset
+    return
+  }
+
+  const currentTop = currentNode.getBoundingClientRect().top
+  const startAnchor = resolveRelationAnchor(startNode)
+  const endAnchor = resolveRelationAnchor(endNode)
+
+  conjunctionCalculatedOffset.value = ((startAnchor + endAnchor) / 2) - currentTop
+}
+
+const onResize = () => {
+  void recalculateConjunctionOffset()
+}
+
+onMounted(() => {
+  void recalculateConjunctionOffset()
+  window.addEventListener('resize', onResize)
+})
+
+onUpdated(() => {
+  void recalculateConjunctionOffset()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
+})
+
+const conjunctionBadgeStyle = computed<CSSProperties>(() => {
+  const left = `${Math.max(0, (props.connectors.length - 1) * 32 + 8)}px`
+  const offset = conjunctionCalculatedOffset.value
+
+  if (
+    props.conjunction
+    && props.conjunctionStartPathKey
+    && props.conjunctionEndPathKey
+    && offset === undefined
+  ) {
+    return {
+      left,
+      visibility: 'hidden',
+    }
+  }
+
+  return offset !== undefined
+    ? { left, top: `${offset}px` }
+    : { left }
+})
+</script>
+
+<style lang="less" src="./logic-tree.less" />
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue.d.ts
new file mode 100644
index 00000000..1db8d3f9
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue.d.ts
@@ -0,0 +1,7 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiLogicTreeNodeProperties } from '@/common/components/logic-tree'
+
+declare const UiLogicTreeNode: DefineComponent<UiLogicTreeNodeProperties>
+
+export default UiLogicTreeNode
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue
new file mode 100644
index 00000000..94ef8fe2
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue
@@ -0,0 +1,5 @@
+<template>
+    <span class="ui-v1-logic-tree__icon">
+        <slot />
+    </span>
+</template>
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue.d.ts
new file mode 100644
index 00000000..b93712b5
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeIcon.vue.d.ts
@@ -0,0 +1,5 @@
+import type { DefineComponent } from '@/common/vue'
+
+declare const UiLogicTreeNodeIcon: DefineComponent
+
+export default UiLogicTreeNodeIcon
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue
new file mode 100644
index 00000000..4c3be611
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="ui-v1-logic-tree-node-item">
+        <slot name="headline">
+            <span
+                v-if="$slots.title || $slots.trailing"
+                class="ui-v1-logic-tree-node-item__headline"
+            >
+                <span
+                    v-if="$slots.title"
+                    class="ui-v1-logic-tree-node-item__title"
+                >
+                    <slot name="title" />
+                </span>
+
+                <slot name="trailing" />
+            </span>
+        </slot>
+
+        <slot />
+    </div>
+</template>
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts
new file mode 100644
index 00000000..5183b3eb
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts
@@ -0,0 +1,5 @@
+import type { DefineComponent } from '@/common/vue'
+
+declare const UiLogicTreeNodeItem: DefineComponent
+
+export default UiLogicTreeNodeItem
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue
new file mode 100644
index 00000000..e5711b72
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue
@@ -0,0 +1,84 @@
+<template>
+    <div
+        ref="root"
+        class="ui-v1-logic-tree"
+        v-bind="$attrs"
+        @click="onRootClick"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const emit = defineEmits<{
+  'outside-click': [];
+}>()
+
+const root = ref<HTMLElement | null>(null)
+
+const resolveEventElement = (target: EventTarget | null): Element | null => {
+  if (target instanceof Element) {
+    return target
+  }
+
+  if (target instanceof Node) {
+    return target.parentElement
+  }
+
+  return null
+}
+
+const isIgnoredTarget = (target: EventTarget | null): boolean => {
+  const element = resolveEventElement(target)
+
+  if (!element) {
+    return false
+  }
+
+  return Boolean(element.closest([
+    '.ui-v1-logic-tree__surface-node-content',
+    '.ui-v1-logic-tree__actions-node',
+    '.ui-v1-popper',
+    '[role="listbox"]',
+    '[role="option"]',
+  ].join(', ')))
+}
+
+const onRootClick = (event: MouseEvent) => {
+  if (isIgnoredTarget(event.target)) {
+    return
+  }
+
+  emit('outside-click')
+}
+
+const onDocumentPointerDown = (event: PointerEvent) => {
+  const element = resolveEventElement(event.target)
+
+  if (!root.value || !element) {
+    return
+  }
+
+  if (root.value.contains(element) || isIgnoredTarget(element)) {
+    return
+  }
+
+  emit('outside-click')
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocumentPointerDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown)
+})
+</script>
+
+<style lang="less" src="./logic-tree.less" />
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts
new file mode 100644
index 00000000..212f41f9
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts
@@ -0,0 +1,7 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiLogicTreeRootProperties } from '@/common/components/logic-tree'
+
+declare const UiLogicTreeRoot: DefineComponent<UiLogicTreeRootProperties>
+
+export default UiLogicTreeRoot
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n.ts b/packages/v1-components/src/host/components/logic-tree/i18n.ts
new file mode 100644
index 00000000..27118d98
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n.ts
@@ -0,0 +1,13 @@
+import { define } from '@/host/i18n'
+
+import messages_en_GB from './i18n/en-GB.json'
+import messages_es_ES from './i18n/es-ES.json'
+import messages_ru_RU from './i18n/ru-RU.json'
+
+export default define({
+  messages: {
+    'en-GB': messages_en_GB,
+    'es-ES': messages_es_ES,
+    'ru-RU': messages_ru_RU,
+  },
+})
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json b/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json
new file mode 100644
index 00000000..6429bdaf
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json
@@ -0,0 +1,5 @@
+{
+  "delete": "Delete",
+  "relationAnd": "AND",
+  "relationOr": "OR"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json b/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json
new file mode 100644
index 00000000..e356bcf9
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json
@@ -0,0 +1,5 @@
+{
+  "delete": "Eliminar",
+  "relationAnd": "Y",
+  "relationOr": "O"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json b/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json
new file mode 100644
index 00000000..c1f895c2
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json
@@ -0,0 +1,5 @@
+{
+  "delete": "Удалить",
+  "relationAnd": "И",
+  "relationOr": "ИЛИ"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/index.ts b/packages/v1-components/src/host/components/logic-tree/index.ts
new file mode 100644
index 00000000..f7bcafad
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/index.ts
@@ -0,0 +1,5 @@
+export { default as UiLogicTreeCaret } from './UiLogicTreeCaret.vue'
+export { default as UiLogicTreeNodeIcon } from './UiLogicTreeNodeIcon.vue'
+export { default as UiLogicTreeNodeItem } from './UiLogicTreeNodeItem.vue'
+export { default as UiLogicTreeNode } from './UiLogicTreeNode.vue'
+export { default as UiLogicTreeRoot } from './UiLogicTreeRoot.vue'
diff --git a/packages/v1-components/src/host/components/logic-tree/logic-tree.less b/packages/v1-components/src/host/components/logic-tree/logic-tree.less
new file mode 100644
index 00000000..f81ed299
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/logic-tree.less
@@ -0,0 +1,702 @@
+@import (reference) '../../../../assets/stylesheets/geometry.less';
+@import (reference) '../../../../assets/stylesheets/palette.less';
+@import (reference) '../../../../assets/stylesheets/typography.less';
+@import (reference) '../../../../assets/stylesheets/variables.less';
+
+.ui-v1-logic-tree {
+  .reset-box-sizing();
+
+  width: 100%;
+  color: @black-500;
+  background: #fff;
+
+  &__node {
+    width: 100%;
+    overflow: visible;
+    position: relative;
+
+  }
+
+  &__children-group {
+    width: 100%;
+
+    & + & {
+      margin-top: 16px;
+    }
+  }
+
+  &__node + &__node,
+  &__node + &__children-group,
+  &__children-group + &__node {
+    margin-top: 16px;
+  }
+
+  &__node:not(&__node_grouped) &__connector:not(&__connector_terminal) &__connector-stroke_top {
+    top: -16px;
+    height: calc(50% + 16px);
+  }
+
+  &__node:not(&__node_grouped) &__connector_terminal &__connector-stroke_top {
+    top: -16px;
+    height: calc(50% + 13px);
+  }
+
+  &__node-main {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    overflow: visible;
+    position: relative;
+  }
+
+  &__connectors {
+    display: grid;
+    grid-auto-columns: 32px;
+    grid-auto-flow: column;
+    flex: none;
+    width: max-content;
+    min-width: max-content;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__relation-badge {
+    .text-tiny-accent();
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    background: transparent;
+    border: 0;
+    border-radius: 999px;
+    cursor: pointer;
+    appearance: none;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    z-index: 100;
+
+    &:focus-visible {
+      outline: 2px solid @blue-500;
+      outline-offset: 2px;
+    }
+
+    &_and {
+      min-width: 26px;
+    }
+
+    &_or {
+      min-width: 42px;
+    }
+
+    &_blue { background: @blue-300; }
+    &_green { background: @green-400; }
+    &_grey { background: @grey-800; }
+    &_red { background: @red-500; }
+    &_yellow { background: @yellow-400; }
+  }
+
+  &__connector {
+    min-height: 36px;
+    opacity: 0;
+    overflow: visible;
+    position: relative;
+    isolation: isolate;
+    z-index: 0;
+
+    &_visible {
+      opacity: 1;
+    }
+
+    &_placeholder {
+      opacity: 1;
+    }
+
+    &_with-relation {
+      z-index: 1;
+    }
+
+    &_branch &-stroke_top {
+      display: block;
+    }
+
+    &_terminal &-stroke_top {
+      height: calc(50% - 3px);
+    }
+
+    &_terminal &-stroke_middle {
+      left: 11px;
+      width: 17px;
+    }
+
+    &_terminal::after {
+      content: '';
+      width: 4px;
+      height: 4px;
+      border-left: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      border-bottom-left-radius: 4px;
+      position: absolute;
+      top: calc(50% - 3px);
+      left: 8px;
+      z-index: 1;
+    }
+
+    &:not(&_branch) &-stroke_top {
+      height: calc(90% + 14px);
+    }
+
+    &:not(&_branch) &-stroke_middle {
+      display: none;
+    }
+
+    &_blue { color: @blue-300; }
+    &_green { color: @green-400; }
+    &_grey { color: @grey-700; }
+    &_red { color: @red-500; }
+    &_yellow { color: @yellow-400; }
+  }
+
+  &__connector-stroke {
+    width: 2px;
+    background: currentColor;
+    position: absolute;
+    left: 8px;
+    z-index: 1;
+
+    &_top {
+      top: 0;
+      height: calc(50% + 12px);
+      border-radius: 0;
+    }
+
+    &_bottom {
+      top: calc(50%);
+      height: calc(50% + 16px);
+      border-radius: 0;
+    }
+
+    &_middle {
+      top: 50%;
+      left: 8px;
+      width: 20px;
+      height: 2px;
+      border-radius: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  &__surface-node {
+    flex: 1;
+    min-width: 0;
+    right: @spacing-xxs;
+    position: relative;
+    z-index: 3;
+  }
+
+  &__node_grouped {
+    & + & {
+      margin-top: 0;
+    }
+  }
+
+  &__node_grouped-end,
+  &__node_grouped-single {
+    margin-bottom: @spacing-xs;
+  }
+
+  &__node_grouped-start,
+  &__node_grouped-single {
+    margin-top: @spacing-xs;
+  }
+
+  &__grouped-block {
+    background: @grey-200;
+    border-radius: @border-radius-md;
+    position: relative;
+    right: @spacing-l;
+  }
+
+  &__grouped-block_start,
+  &__grouped-block_single {
+    padding-top: 12px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &__grouped-block_single:has(&__actions-node):not(:has(&__surface-node-content)) {
+    padding-top: 0;
+  }
+
+  &__grouped-block:has(> &__grouped-sortable > [data-dnd-placeholder='true']:first-child) {
+    padding-top: 0;
+  }
+
+  &__grouped-block_middle {
+    padding-top: 8px;
+    border-radius: 0;
+  }
+
+  &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__grouped-block,
+  &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__surface-node-content,
+  &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__actions-node,
+  &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__surface-node-content::before {
+    transition: none;
+  }
+
+  &__grouped-block_end {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  &__node_grouped &__surface-node-content,
+  &__node_grouped &__actions-node {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    padding: 16px 4px 16px 8px;
+    margin-left: 8px;
+  }
+
+  &__node_grouped &__surface-node {
+    background: transparent;
+  }
+
+  &__node_grouped &__surface-node-content:hover {
+    background: @blue-transparent;
+    border-color: transparent;
+  }
+
+  &__node_grouped &__surface-node-content_disabled:hover,
+  &__node_grouped &__surface-node-content_disabled:focus-within {
+    background: @grey-400;
+  }
+
+  &__node_grouped &__surface-node-content_editing,
+  &__node_grouped &__surface-node-content_editor,
+  &__node_grouped &__surface-node-content_editing:hover,
+  &__node_grouped &__surface-node-content_editor:hover {
+    background: transparent;
+  }
+
+  &__node_grouped-header &__surface-node-content_simple {
+    padding-left: 0;
+  }
+
+  &__actions-node {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 36px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+  }
+
+  &__surface-node-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    width: fit-content;
+    max-width: 100%;
+    vertical-align: top;
+    min-width: 0;
+    min-height: 36px;
+    padding: 6px 8px;
+    background: #fff;
+    border: 1px solid transparent;
+    border-radius: @border-radius-sm;
+    cursor: pointer;
+    transition: @transition;
+
+    &:hover {
+      background: @blue-transparent;
+    }
+
+    &:active {
+      border: 1px solid @blue-500;
+    }
+
+    &_disabled {
+      cursor: default;
+
+      &:hover,
+      &:focus-within {
+        background: @grey-100;
+        border-color: transparent;
+      }
+
+      &:active {
+        border-color: transparent;
+      }
+    }
+
+    &_editor {
+      min-height: 52px;
+    }
+
+    &_editing,
+    &_editor {
+      justify-content: flex-start;
+      gap: 8px;
+    }
+
+    &__main {
+      display: flex;
+      flex: 0 1 auto;
+      align-items: center;
+      gap: @spacing-xs;
+      min-width: 0;
+    }
+
+    &_active,
+    &_editing,
+    &_highlighted {
+      background: @blue-transparent;
+      border-color: @blue-500;
+    }
+
+    &_simple {
+      max-height: 36px;
+      background: transparent;
+      border-color: transparent;
+
+      &:hover {
+        background: @blue-transparent;
+      }
+    }
+
+    &_simple&_disabled:hover,
+    &_simple&_disabled:focus-within {
+      background: @grey-100;
+    }
+
+    &_simple&_editing,
+    &_simple&_editor {
+      background: transparent;
+      border-color: transparent;
+      min-height: 38px;
+    }
+
+    &_simple&_editor {
+      min-height: 36px;
+    }
+  }
+
+  &__surface-node-content:has(&__node-prefix:empty) {
+    padding-left: 0;
+  }
+
+  &__node-content,
+  &__actions-node-content {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &__actions-node-content {
+    gap: 8px;
+  }
+
+  &__node-trailing {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  &__surface-node-content_editing &__node-trailing,
+  &__surface-node-content_editor &__node-trailing {
+    margin-inline: 8px;
+  }
+
+  &__surface-node-content_editing,
+  &__surface-node-content_editor {
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    padding-left: 0;
+  }
+
+  &__surface-node-content_editing &__node-prefix:empty,
+  &__surface-node-content_editor &__node-prefix:empty {
+    display: none;
+  }
+
+  &__surface-node-content_editing &__node-content,
+  &__surface-node-content_editor &__node-content {
+    flex: 0 1 auto;
+  }
+
+  &__slot-placeholder {
+    width: 100%;
+    min-width: 0;
+    min-height: 36px;
+    background: fade(@blue-500, 4%);
+    border: 1px dashed fade(@blue-500, 55%);
+    border-radius: @border-radius-sm;
+
+    &_actions {
+      min-height: 36px;
+    }
+
+    &_editor {
+      min-height: 36px;
+    }
+
+    &_prefix,
+    &_trailing {
+      display: inline-flex;
+      width: 20px;
+      min-width: 20px;
+      min-height: 20px;
+      height: 20px;
+      border-radius: @border-radius-sm;
+    }
+  }
+
+  &__slot-content {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__grouped-sortable {
+    display: inline-grid;
+    grid-template-columns: minmax(560px, max-content);
+    width: auto;
+    max-width: 100%;
+  }
+
+  &__grouped-sortable-item,
+  &__grouped-sortable > &__node {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &__grouped-sortable-item {
+    transition: none;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    color: @black-500;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  [data-dnd-dragging='true'] {
+    pointer-events: none;
+  }
+
+  [data-dnd-dragging='true'] &__surface-node-content,
+  [data-dnd-dragging='true'] &__actions-node {
+    background: transparent;
+    box-shadow: none;
+    outline: 0;
+    transition: none;
+  }
+
+  [data-dnd-dragging='true'] &__node_grouped-start &__grouped-block,
+  [data-dnd-dragging='true'] &__node_grouped-single &__grouped-block {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  [data-dnd-dragging='true'] &__surface-node-content__main,
+  [data-dnd-dragging='true'] &__actions-node-content,
+  [data-dnd-dragging='true'] &__node-trailing {
+    visibility: hidden;
+  }
+
+  [data-dnd-placeholder='true'] {
+    pointer-events: none;
+  }
+
+  [data-dnd-placeholder='true'] &__surface-node-content,
+  [data-dnd-placeholder='true'] &__actions-node {
+    background: transparent;
+    box-shadow: none;
+    outline: 2px dashed @blue-500;
+    outline-offset: -2px;
+    transition: none;
+  }
+
+  [data-dnd-placeholder='true'] &__surface-node-content__main,
+  [data-dnd-placeholder='true'] &__actions-node-content,
+  [data-dnd-placeholder='true'] &__node-trailing {
+    visibility: hidden;
+  }
+
+  [data-dnd-placeholder='true'] &__node_grouped &__surface-node-content,
+  [data-dnd-placeholder='true'] &__node_grouped &__actions-node {
+    outline: none;
+    position: relative;
+  }
+
+  [data-dnd-placeholder='true'] &__node_grouped-start,
+  [data-dnd-placeholder='true'] &__node_grouped-single {
+    margin-top: 0;
+  }
+
+  [data-dnd-placeholder='true']:first-child &__grouped-block {
+    padding-top: 0;
+    border-top-right-radius: @border-radius-md;
+    border-top-left-radius: @border-radius-md;
+  }
+
+  [data-dnd-placeholder='true']:first-child + * &__node_grouped-start,
+  [data-dnd-placeholder='true']:first-child + * &__node_grouped-single {
+    margin-top: 0;
+  }
+
+  [data-dnd-placeholder='true'] &__node_grouped &__surface-node-content::before,
+  [data-dnd-placeholder='true'] &__node_grouped &__actions-node::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 16px;
+    bottom: 0;
+    left: 16px;
+    border: 2px dashed @blue-500;
+    border-radius: @border-radius-sm;
+    pointer-events: none;
+  }
+
+  [data-dnd-overlay='true'] &__surface-node-content,
+  [data-dnd-overlay='true'] &__actions-node {
+    background: #fff;
+    border-color: @grey-200;
+    border-radius: @border-radius-md;
+    box-shadow:
+      0 16px 32px rgb(30 34 72 / 16%),
+      0 4px 12px rgb(30 34 72 / 14%);
+    cursor: grabbing;
+  }
+
+  [data-dnd-overlay='true'] &__grouped-block {
+    background: transparent;
+  }
+
+}
+
+.ui-v1-logic-tree-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transition: transform @transition;
+  transform: rotate(-90deg);
+  color: @black-500;
+
+  &_active {
+    transform: none;
+  }
+}
+
+.ui-v1-logic-tree-drag-handle {
+  display: flex;
+  align-items: center;
+  color: @grey-700;
+  cursor: grab;
+
+  &_disabled {
+    cursor: default;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  [data-dnd-dragging='true'] & {
+    cursor: grabbing;
+  }
+}
+
+.ui-v1-logic-tree-node-item {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: @spacing-xs;
+  min-width: 0;
+  overflow: hidden;
+
+  &__headline {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  &__title {
+    .text-regular-accent();
+
+    color: @black-500;
+    white-space: nowrap;
+  }
+
+}
+
+[data-dnd-overlay='true'] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  width: var(--dnd-overlay-width, auto);
+  pointer-events: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__surface-node-content,
+[data-dnd-overlay='true'] .ui-v1-logic-tree__actions-node {
+  box-sizing: border-box;
+  background: @grey-500;
+  border-color: @grey-500;
+  border-radius: @border-radius-md;
+  box-shadow:
+    0 16px 32px rgb(30 34 72 / 16%),
+    0 4px 12px rgb(30 34 72 / 14%);
+  cursor: grabbing;
+  transition: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__connectors {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__grouped-block {
+  background: transparent;
+}
+
+[data-dnd-target='true'][data-dnd-drop-forbidden='true'] .ui-v1-logic-tree__surface-node-content,
+[data-dnd-target='true'][data-dnd-drop-forbidden='true'] .ui-v1-logic-tree__actions-node {
+  outline: 0;
+}
+
+[data-dnd-dragging='true'],
+[data-dnd-placeholder='true'],
+[data-dnd-target='true'],
+[data-dnd-overlay='true'] {
+  animation: none;
+}
diff --git a/packages/v1-components/src/remote.ts b/packages/v1-components/src/remote.ts
index 45fb1a9a..a2c4dc2d 100644
--- a/packages/v1-components/src/remote.ts
+++ b/packages/v1-components/src/remote.ts
@@ -14,6 +14,7 @@ export * from '@/remote/components/field'
 export * from '@/remote/components/infobox'
 export * from '@/remote/components/link'
 export * from '@/remote/components/loader'
+export * from '@/remote/components/logic-tree'
 export * from '@/remote/components/modal-sidebar'
 export * from '@/remote/components/modal-window'
 export * from '@/remote/components/modal-window-surface'
diff --git a/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue b/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue
new file mode 100644
index 00000000..e2b07365
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue
@@ -0,0 +1,1053 @@
+<template>
+    <UiLogicTreeRoot @outside-click="onOutsideClick">
+        <template
+            v-for="entry in renderEntries"
+            :key="entry.id"
+        >
+            <RemoteSortableContainer
+                v-if="entry.kind === 'grouped'"
+                as="div"
+                class="ui-v1-logic-tree__grouped-sortable"
+                :container-id="entry.containerId"
+                :accepts="[entry.containerId]"
+                :on-drop="onGroupedDrop"
+            >
+                <RemoteSortableItem
+                    v-for="(nodeEntry, index) in entry.itemNodes"
+                    :key="nodeEntry.node.id"
+                    as="div"
+                    class="ui-v1-logic-tree__grouped-sortable-item"
+                    :item-id="nodeEntry.node.id"
+                    :container-id="entry.containerId"
+                    :type="entry.containerId"
+                    :index="index"
+                    :payload="{ nodeId: nodeEntry.node.id, pathKey: pathToKey(nodeEntry.path) }"
+                    :disabled="!isGroupedDraggableNode(nodeEntry)"
+                >
+                    <UiLogicTreeNode
+                        :path-key="pathToKey(nodeEntry.path)"
+                        :node-view="resolveNodeView(nodeEntry)"
+                        :connectors="nodeEntry.connectors"
+                        :conjunction="nodeEntry.conjunction"
+                        :conjunction-end-path-key="nodeEntry.conjunctionEndPathKey"
+                        :conjunction-label="resolveConjunctionLabel(nodeEntry.conjunction)"
+                        :conjunction-offset="nodeEntry.conjunctionOffset"
+                        :conjunction-start-path-key="nodeEntry.conjunctionStartPathKey"
+                        :conjunction-tone="nodeEntry.conjunctionTone"
+                        :grouped="Boolean(nodeEntry.sectionKey)"
+                        :grouped-header="nodeEntry.node.childrenView === LogicTreeChildrenView.GROUPED"
+                        :grouped-position="nodeEntry.groupedPosition || undefined"
+                        :editable="nodeEntry.node.data.editable"
+                        :selected="isNodeSelected(nodeEntry)"
+                        :highlighted="Boolean(nodeEntry.node.data.highlighted)"
+                        :disabled="Boolean(nodeEntry.node.data.disabled)"
+                        @node-click="onNodeClick(nodeEntry)"
+                        @node-edit="setNodeEditable(nodeEntry, $event)"
+                    >
+                        <template #conjunction-poppers>
+                            <slot
+                                name="conjunction-poppers"
+                                v-bind="resolveNodeSlotProps(nodeEntry)"
+                            />
+                        </template>
+
+                        <template #prefix>
+                            <slot
+                                name="node-prefix"
+                                v-bind="resolveNodeSlotProps(nodeEntry)"
+                            />
+                        </template>
+
+                        <template #content>
+                            <div class="ui-v1-logic-tree__slot-content">
+                                <slot
+                                    name="node"
+                                    v-bind="resolveNodeSlotProps(nodeEntry)"
+                                >
+                                    <div
+                                        class="ui-v1-logic-tree__slot-placeholder"
+                                        data-ui-logic-tree-slot="node"
+                                    />
+                                </slot>
+                            </div>
+                        </template>
+
+                        <template #trailing>
+                            <slot
+                                name="node-trailing"
+                                v-bind="resolveNodeSlotProps(nodeEntry)"
+                            />
+                        </template>
+                    </UiLogicTreeNode>
+                </RemoteSortableItem>
+
+                <UiLogicTreeNode
+                    v-for="nodeEntry in entry.footerNodes"
+                    :key="nodeEntry.node.id"
+                    :path-key="pathToKey(nodeEntry.path)"
+                    :node-view="resolveNodeView(nodeEntry)"
+                    :connectors="nodeEntry.connectors"
+                    :conjunction="nodeEntry.conjunction"
+                    :conjunction-end-path-key="nodeEntry.conjunctionEndPathKey"
+                    :conjunction-label="resolveConjunctionLabel(nodeEntry.conjunction)"
+                    :conjunction-offset="nodeEntry.conjunctionOffset"
+                    :conjunction-start-path-key="nodeEntry.conjunctionStartPathKey"
+                    :conjunction-tone="nodeEntry.conjunctionTone"
+                    :grouped="Boolean(nodeEntry.sectionKey)"
+                    :grouped-header="nodeEntry.node.childrenView === LogicTreeChildrenView.GROUPED"
+                    :grouped-position="nodeEntry.groupedPosition || undefined"
+                    :editable="nodeEntry.node.data.editable"
+                    :selected="isNodeSelected(nodeEntry)"
+                    :highlighted="Boolean(nodeEntry.node.data.highlighted)"
+                    :disabled="Boolean(nodeEntry.node.data.disabled)"
+                    @node-click="onNodeClick(nodeEntry)"
+                    @node-edit="setNodeEditable(nodeEntry, $event)"
+                >
+                    <template #conjunction-poppers>
+                        <slot
+                            name="conjunction-poppers"
+                            v-bind="resolveNodeSlotProps(nodeEntry)"
+                        />
+                    </template>
+
+                    <template #prefix>
+                        <slot
+                            name="node-prefix"
+                            v-bind="resolveNodeSlotProps(nodeEntry)"
+                        />
+                    </template>
+
+                    <template #content>
+                        <div class="ui-v1-logic-tree__slot-content">
+                            <slot
+                                name="node"
+                                v-bind="resolveNodeSlotProps(nodeEntry)"
+                            >
+                                <div
+                                    class="ui-v1-logic-tree__slot-placeholder"
+                                    data-ui-logic-tree-slot="node"
+                                />
+                            </slot>
+                        </div>
+                    </template>
+
+                    <template #trailing>
+                        <slot
+                            name="node-trailing"
+                            v-bind="resolveNodeSlotProps(nodeEntry)"
+                        />
+                    </template>
+                </UiLogicTreeNode>
+            </RemoteSortableContainer>
+
+            <UiLogicTreeNode
+                v-else
+                :path-key="pathToKey(entry.item.path)"
+                :node-view="resolveNodeView(entry.item)"
+                :connectors="entry.item.connectors"
+                :conjunction="entry.item.conjunction"
+                :conjunction-end-path-key="entry.item.conjunctionEndPathKey"
+                :conjunction-label="resolveConjunctionLabel(entry.item.conjunction)"
+                :conjunction-offset="entry.item.conjunctionOffset"
+                :conjunction-start-path-key="entry.item.conjunctionStartPathKey"
+                :conjunction-tone="entry.item.conjunctionTone"
+                :grouped="Boolean(entry.item.sectionKey)"
+                :grouped-header="entry.item.node.childrenView === LogicTreeChildrenView.GROUPED"
+                :grouped-position="entry.item.groupedPosition || undefined"
+                :editable="entry.item.node.data.editable"
+                :selected="isNodeSelected(entry.item)"
+                :highlighted="Boolean(entry.item.node.data.highlighted)"
+                :disabled="Boolean(entry.item.node.data.disabled)"
+                @node-click="onNodeClick(entry.item)"
+                @node-edit="setNodeEditable(entry.item, $event)"
+            >
+                <template #conjunction-poppers>
+                    <slot
+                        name="conjunction-poppers"
+                        v-bind="resolveNodeSlotProps(entry.item)"
+                    />
+                </template>
+
+                <template #prefix>
+                    <slot
+                        name="node-prefix"
+                        v-bind="resolveNodeSlotProps(entry.item)"
+                    />
+                </template>
+
+                <template #content>
+                    <div class="ui-v1-logic-tree__slot-content">
+                        <slot
+                            name="node"
+                            v-bind="resolveNodeSlotProps(entry.item)"
+                        >
+                            <div
+                                class="ui-v1-logic-tree__slot-placeholder"
+                                data-ui-logic-tree-slot="node"
+                            />
+                        </slot>
+                    </div>
+                </template>
+
+                <template #trailing>
+                    <slot
+                        name="node-trailing"
+                        v-bind="resolveNodeSlotProps(entry.item)"
+                    />
+                </template>
+            </UiLogicTreeNode>
+        </template>
+    </UiLogicTreeRoot>
+</template>
+
+<script
+  lang="ts"
+  generic="TNodeData extends object = Record<string, never>"
+  remote
+  setup
+>
+import type { I18nLocalized } from '@/host/i18n'
+import type { RemoteSortableEvent } from '@omnicajs/vue-remote/remote'
+import type {
+  UiLogicTreeConnector,
+  UiLogicTreeDropPayload,
+  UiLogicTreeNode as UiLogicTreeNodeType,
+  UiLogicTreeNodeAddPayload,
+  UiLogicTreeNodeEditPayload,
+  UiLogicTreeNodeRemovePayload,
+  UiLogicTreeNodeSlotProps,
+  UiLogicTreeProperties,
+} from '@/common/components/logic-tree'
+
+import { RemoteSortableContainer, RemoteSortableItem } from '@omnicajs/vue-remote/remote'
+
+import {
+  computed,
+  inject,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+
+import {
+  LogicTreeChildrenView,
+  LogicTreeConjunction,
+  LogicTreeNodeKind,
+  LogicTreeNodeView,
+  LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import _i18n from '@/host/components/logic-tree/i18n'
+
+import { I18nInjectKey } from '@/host/i18n/plugin'
+
+import { UiLogicTreeNode, UiLogicTreeRoot } from './parts'
+
+type TreeNode = UiLogicTreeNodeType<TNodeData>
+type TreeProperties = UiLogicTreeProperties<TNodeData>
+type TreeNodeSlotProps = UiLogicTreeNodeSlotProps<TNodeData>
+
+type FlattenedNode = {
+  conjunction: TreeNode['conjunction'];
+  conjunctionEndPathKey: string | undefined;
+  conjunctionOffset: number | undefined;
+  conjunctionStartPathKey: string | undefined;
+  connectors: UiLogicTreeConnector[];
+  expanded: boolean;
+  groupedPosition: '' | 'end' | 'middle' | 'single' | 'start';
+  hasChildren: boolean;
+  node: TreeNode;
+  parentPath: number[];
+  path: number[];
+  conjunctionTone: LogicTreeTone;
+  sectionKey: string;
+}
+
+type RenderEntry = {
+  id: string;
+  kind: 'node';
+  item: FlattenedNode;
+} | {
+  containerId: string;
+  footerNodes: FlattenedNode[];
+  id: string;
+  itemNodes: FlattenedNode[];
+  kind: 'grouped';
+}
+
+const props = withDefaults(defineProps<TreeProperties>(), {
+  items: () => [],
+})
+
+defineSlots<{
+  'conjunction-poppers'?: (props: TreeNodeSlotProps) => unknown;
+  'node'?: (props: TreeNodeSlotProps) => unknown;
+  'node-prefix'?: (props: TreeNodeSlotProps) => unknown;
+  'node-trailing'?: (props: TreeNodeSlotProps) => unknown;
+}>()
+
+const emit = defineEmits<{
+  'action': [payload: { actionId: string; nodeId: string }];
+  'control-action': [payload: { controlId: string; nodeId: string }];
+  'control:update': [payload: { controlId: string; nodeId: string; value: string | number | null }];
+  'drop': [payload: UiLogicTreeDropPayload];
+  'remove': [nodeId: string];
+  'node:add': [payload: UiLogicTreeNodeAddPayload];
+  'node:edit': [payload: UiLogicTreeNodeEditPayload];
+  'node:remove': [payload: UiLogicTreeNodeRemovePayload];
+  'toggle': [payload: { expanded: boolean; nodeId: string }];
+  'update:items': [items: TreeNode[]];
+}>()
+
+const i18n = computed((): I18nLocalized => _i18n.init(inject(I18nInjectKey, null)?.locale ?? _i18n.fallback))
+
+const resolveConjunctionLabel = (conjunction: TreeNode['conjunction']): string => {
+  if (conjunction === LogicTreeConjunction.AND) {
+    return i18n.value.t('relationAnd')
+  }
+
+  if (conjunction === LogicTreeConjunction.OR) {
+    return i18n.value.t('relationOr')
+  }
+
+  return String(conjunction ?? '')
+}
+const itemsState = shallowRef<TreeNode[]>([])
+const activePathKey = ref('')
+
+const fallbackTone = (node: TreeNode): LogicTreeTone => (
+  node.tone
+  ?? (node.kind === LogicTreeNodeKind.GROUP
+    ? LogicTreeTone.GREEN
+    : LogicTreeTone.BLUE)
+)
+
+const resolveConjunctionTone = (
+  conjunction: TreeNode['conjunction'],
+  fallback: LogicTreeTone
+): LogicTreeTone => {
+  if (conjunction === LogicTreeConjunction.OR) {
+    return LogicTreeTone.YELLOW
+  }
+
+  if (conjunction === LogicTreeConjunction.AND) {
+    return LogicTreeTone.BLUE
+  }
+
+  return fallback
+}
+
+const DEFAULT_NODE_GAP = 16
+
+const resolveNodeConjunction = (
+  node: TreeNode,
+  index: number,
+  isGroupedSectionNode: boolean,
+  parentNode: TreeNode | null
+): TreeNode['conjunction'] => {
+  if (isGroupedSectionNode || !isConjunctionContentNode(node)) {
+    return ''
+  }
+
+  if (index === 0) {
+    return parentNode
+      && isConjunctionContentNode(parentNode)
+      && countConjunctionContentChildren(parentNode) >= 2
+      ? (node.conjunction ?? '')
+      : ''
+  }
+
+  return node.conjunction ?? ''
+}
+
+const resolveConjunctionOffset = (conjunction: TreeNode['conjunction']): number | undefined => {
+  if (!conjunction) {
+    return undefined
+  }
+
+  return -(DEFAULT_NODE_GAP / 2)
+}
+
+const resolveSubtreeEndPathKey = (source: FlattenedNode[], nodeIndex: number): string => {
+  const nodeEntry = source[nodeIndex]
+  const nodePathKey = pathToKey(nodeEntry.path)
+  const subtreePrefix = `${nodePathKey}.`
+  let endIndex = nodeIndex
+
+  for (let index = nodeIndex + 1; index < source.length; index += 1) {
+    const candidatePathKey = pathToKey(source[index].path)
+
+    if (candidatePathKey.startsWith(subtreePrefix)) {
+      endIndex = index
+      continue
+    }
+
+    break
+  }
+
+  return pathToKey(source[endIndex].path)
+}
+
+const resolveConjunctionRangeEndPathKey = (
+  source: FlattenedNode[],
+  nodeIndex: number
+): string | undefined => {
+  const nodeEntry = source[nodeIndex]
+  const siblingIndex = nodeEntry.path.at(-1)
+
+  if (siblingIndex === undefined) {
+    return undefined
+  }
+
+  let lastSiblingNodeIndex = nodeIndex
+
+  source.forEach((candidate, candidateIndex) => {
+    const candidateSiblingIndex = candidate.path.at(-1)
+
+    if (
+      candidate.path.length === nodeEntry.path.length
+      && candidateSiblingIndex !== undefined
+      && candidateSiblingIndex >= siblingIndex
+      && candidate.parentPath.length === nodeEntry.parentPath.length
+      && candidate.parentPath.every((segment, index) => segment === nodeEntry.parentPath[index])
+    ) {
+      lastSiblingNodeIndex = candidateIndex
+    }
+  })
+
+  return resolveSubtreeEndPathKey(source, lastSiblingNodeIndex)
+}
+
+const applyConjunctionToneToConnectors = (
+  connectors: UiLogicTreeConnector[],
+  conjunction: TreeNode['conjunction'],
+  conjunctionTone: LogicTreeTone
+): UiLogicTreeConnector[] => {
+  if (!conjunction || connectors.length === 0) {
+    return connectors
+  }
+
+  return connectors.map((connector, connectorIndex, source) => (
+    connectorIndex === source.length - 1
+      ? {
+        ...connector,
+        tone: conjunctionTone,
+      }
+      : connector
+  ))
+}
+
+const setConnectorToneAtIndex = (
+  nodeEntry: FlattenedNode,
+  connectorIndex: number,
+  tone: LogicTreeTone
+): FlattenedNode => {
+  if (!nodeEntry.connectors[connectorIndex]) {
+    return nodeEntry
+  }
+
+  return {
+    ...nodeEntry,
+    connectors: nodeEntry.connectors.map((connector, index) => (
+      index === connectorIndex
+        ? {
+          ...connector,
+          tone,
+        }
+        : connector
+    )),
+  }
+}
+
+const applyConjunctionBranchTones = (source: FlattenedNode[]): FlattenedNode[] => {
+  const nodes = source.map((nodeEntry) => ({
+    ...nodeEntry,
+    connectors: nodeEntry.connectors.map((connector) => ({ ...connector })),
+  }))
+
+  const startsWithPath = (path: number[], prefix: number[]) => (
+    prefix.length <= path.length
+    && prefix.every((segment, index) => path[index] === segment)
+  )
+
+  const recolorBranchLevel = (parentPath: number[], connectorIndex: number, tone: LogicTreeTone) => {
+    nodes.forEach((candidate, index) => {
+      if (!startsWithPath(candidate.path, parentPath)) {
+        return
+      }
+
+      if (!candidate.connectors[connectorIndex]) {
+        return
+      }
+
+      nodes[index] = setConnectorToneAtIndex(candidate, connectorIndex, tone)
+    })
+  }
+
+  nodes.forEach((nodeEntry) => {
+    if (!nodeEntry.conjunction) {
+      return
+    }
+
+    const connectorIndex = Math.max(0, nodeEntry.connectors.length - 1)
+
+    recolorBranchLevel(nodeEntry.parentPath, connectorIndex, nodeEntry.conjunctionTone)
+  })
+
+  return nodes
+}
+
+const applyConjunctionRanges = (source: FlattenedNode[]): FlattenedNode[] => source.map((nodeEntry, nodeIndex) => {
+  if (!nodeEntry.conjunction) {
+    return nodeEntry
+  }
+
+  const siblingIndex = nodeEntry.path.at(-1)
+  const parentPathKey = nodeEntry.parentPath.length > 0 ? pathToKey(nodeEntry.parentPath) : undefined
+  const parentEntry = parentPathKey
+    ? source.find((candidate) => pathToKey(candidate.path) === parentPathKey)
+    : undefined
+
+  if (siblingIndex === undefined) {
+    return nodeEntry
+  }
+
+  if (siblingIndex === 0) {
+    return {
+      ...nodeEntry,
+      conjunctionEndPathKey: resolveConjunctionRangeEndPathKey(source, nodeIndex),
+      conjunctionStartPathKey: parentEntry ? pathToKey(parentEntry.path) : undefined,
+    }
+  }
+
+  return {
+    ...nodeEntry,
+    conjunctionEndPathKey: resolveConjunctionRangeEndPathKey(source, nodeIndex),
+    conjunctionStartPathKey: pathToKey([...nodeEntry.parentPath, siblingIndex - 1]),
+  }
+})
+
+const pathToKey = (path: number[]): string => path.join('.')
+
+const cloneNodes = (nodes: TreeNode[]): TreeNode[] => nodes.map((node) => ({
+  ...node,
+  children: node.children ? cloneNodes(node.children) : undefined,
+  data: { ...node.data },
+}))
+
+const resolveConfiguredNodeView = (node: TreeNode): LogicTreeNodeView => (
+  node.data.view
+)
+
+const isConjunctionContentNode = (node: TreeNode): boolean => (
+  resolveConfiguredNodeView(node) !== LogicTreeNodeView.ACTIONS
+  && node.kind !== LogicTreeNodeKind.BRANCH
+)
+
+const countConjunctionContentChildren = (node: TreeNode | null): number => (
+  node?.children?.filter((child) => isConjunctionContentNode(child)).length ?? 0
+)
+
+const resolveNodeView = (nodeEntry: FlattenedNode): LogicTreeNodeView => {
+  const configuredNodeView = resolveConfiguredNodeView(nodeEntry.node)
+
+  if (configuredNodeView === LogicTreeNodeView.ACTIONS) {
+    return configuredNodeView
+  }
+
+  return configuredNodeView
+}
+
+const canToggleNode = (nodeEntry: FlattenedNode): boolean => (
+  Boolean(nodeEntry.node.collapsible)
+  && nodeEntry.hasChildren
+)
+
+const canSetNodeEditable = (nodeEntry: FlattenedNode): boolean => (
+  resolveConfiguredNodeView(nodeEntry.node) !== LogicTreeNodeView.ACTIONS
+  && !canToggleNode(nodeEntry)
+)
+
+const isNodeEditing = (nodeEntry: FlattenedNode): boolean => (
+  canSetNodeEditable(nodeEntry)
+  && Boolean(nodeEntry.node.data.editable)
+)
+
+const setNodeEditable = (nodeEntry: FlattenedNode, value: boolean) => {
+  if (!canSetNodeEditable(nodeEntry)) {
+    return
+  }
+
+  withItemsMutation((nextItems) => {
+    setEditableState(nextItems, value ? nodeEntry.path : null)
+  })
+}
+
+watch(() => props.items, (items) => {
+  itemsState.value = cloneNodes(items ?? [])
+}, { deep: true, immediate: true })
+
+const withItemsMutation = (mutator: (items: TreeNode[]) => void) => {
+  const nextItems = cloneNodes(itemsState.value)
+
+  mutator(nextItems)
+
+  itemsState.value = nextItems
+  emit('update:items', cloneNodes(itemsState.value))
+}
+
+const getBranchAtPath = (
+  nodes: TreeNode[],
+  parentPath: number[],
+  create = false
+): TreeNode[] | null => {
+  let branch = nodes
+
+  for (const index of parentPath) {
+    const node = branch[index]
+
+    if (!node) {
+      return null
+    }
+
+    if (!node.children) {
+      if (!create) {
+        return null
+      }
+
+      node.children = []
+    }
+
+    branch = node.children
+  }
+
+  return branch
+}
+
+const getNodeAtPath = (nodes: TreeNode[], path: number[]): TreeNode | null => {
+  const branch = getBranchAtPath(nodes, path.slice(0, -1))
+  const index = path.at(-1)
+
+  if (index === undefined) {
+    return null
+  }
+
+  return branch?.[index] ?? null
+}
+
+const setEditableState = (
+  nodes: TreeNode[],
+  editablePath: number[] | null = null
+) => {
+  const editablePathKey = editablePath ? pathToKey(editablePath) : ''
+
+  const walk = (branch: TreeNode[], parentPath: number[] = []) => {
+    branch.forEach((node, index) => {
+      const path = [...parentPath, index]
+      node.data.editable = editablePathKey !== '' && pathToKey(path) === editablePathKey
+
+      if (node.children?.length) {
+        walk(node.children, path)
+      }
+    })
+  }
+
+  walk(nodes)
+}
+
+const resolveParentMeta = (nodes: TreeNode[], path: number[]) => {
+  const parentPath = path.slice(0, -1)
+  const parentNode = parentPath.length > 0
+    ? getNodeAtPath(nodes, parentPath)
+    : null
+
+  return {
+    parentNode,
+    parentPath,
+    parentPathKey: parentPath.length > 0 ? pathToKey(parentPath) : null,
+  }
+}
+
+const flatten = (
+  nodes: TreeNode[],
+  ancestors: UiLogicTreeConnector[] = [],
+  parentPath: number[] = [],
+  parentTone: LogicTreeTone | null = null,
+  currentSectionKey = '',
+  parentNode: TreeNode | null = null
+): FlattenedNode[] => nodes.flatMap((node, index, siblings) => {
+  const isLast = index === siblings.length - 1
+  const path = [...parentPath, index]
+  const expanded = node.expanded !== false
+  const hasChildren = Boolean(node.children?.length)
+  const shouldPreserveChildLevel = node.kind === LogicTreeNodeKind.BRANCH && ancestors.length === 0
+  const descendsIntoChildren = hasChildren && expanded
+  const isGroupedSectionNode = Boolean(currentSectionKey)
+  const conjunction = resolveNodeConjunction(node, index, isGroupedSectionNode, parentNode)
+  const connectorTone = parentTone ?? fallbackTone(node)
+  const conjunctionTone = resolveConjunctionTone(conjunction, connectorTone)
+  const connectorContinues = !isLast || descendsIntoChildren
+  const connectors = applyConjunctionToneToConnectors([
+    ...ancestors,
+    ...(parentTone
+      ? [{
+        continues: connectorContinues,
+        tone: connectorTone,
+        visible: true,
+      } satisfies UiLogicTreeConnector]
+      : []),
+  ].map((connector, connectorIndex, source) => ({
+    ...connector,
+    placeholder: isGroupedSectionNode && connectorIndex === source.length - 1,
+  })), conjunction, conjunctionTone)
+  const conjunctionOffset = resolveConjunctionOffset(conjunction)
+
+  const flattenedNodes: FlattenedNode[] = [{
+    conjunction,
+    conjunctionEndPathKey: undefined,
+    conjunctionOffset,
+    conjunctionStartPathKey: undefined,
+    connectors,
+    expanded,
+    groupedPosition: '',
+    hasChildren,
+    node,
+    parentPath,
+    path,
+    conjunctionTone,
+    sectionKey: currentSectionKey,
+  }]
+
+  if (hasChildren && expanded) {
+    const childAncestors = shouldPreserveChildLevel
+      ? ancestors
+      : [
+        ...ancestors,
+        ...(parentTone
+          ? [{
+            continues: connectorContinues,
+            tone: connectorTone,
+            visible: true,
+          } satisfies UiLogicTreeConnector]
+          : []),
+      ]
+    const childParentTone = shouldPreserveChildLevel
+      ? parentTone ?? fallbackTone(node)
+      : fallbackTone(node)
+    const nextSectionKey = node.childrenView === LogicTreeChildrenView.GROUPED ? pathToKey(path) : ''
+
+    flattenedNodes.push(...flatten(
+      node.children ?? [],
+      childAncestors,
+      path,
+      childParentTone,
+      nextSectionKey,
+      node
+    ))
+  }
+
+  return flattenedNodes
+})
+
+const flattenedNodes = computed(() => applyConjunctionRanges(applyConjunctionBranchTones(flatten(itemsState.value))))
+
+const nodesWithGrouping = computed<FlattenedNode[]>(() => flattenedNodes.value.map((nodeEntry, index, source) => {
+  if (!nodeEntry.sectionKey) {
+    return nodeEntry
+  }
+
+  const prev = source[index - 1]
+  const next = source[index + 1]
+  const hasPrev = prev?.sectionKey === nodeEntry.sectionKey
+  const hasNext = next?.sectionKey === nodeEntry.sectionKey
+  const parentNode = nodeEntry.parentPath.length > 0
+    ? getNodeAtPath(itemsState.value, nodeEntry.parentPath)
+    : null
+  const hasGroupedHeader = parentNode?.childrenView === LogicTreeChildrenView.GROUPED
+
+  let groupedPosition: FlattenedNode['groupedPosition'] = 'single'
+
+  if (!hasPrev && hasNext) {
+    groupedPosition = 'start'
+  } else if (hasPrev && hasNext) {
+    groupedPosition = 'middle'
+  } else if (hasPrev && !hasNext) {
+    groupedPosition = 'end'
+  } else if (!hasPrev && !hasNext && hasGroupedHeader) {
+    groupedPosition = 'end'
+  }
+
+  return {
+    ...nodeEntry,
+    groupedPosition,
+  }
+}))
+
+const renderEntries = computed<RenderEntry[]>(() => {
+  const nextEntries: RenderEntry[] = []
+
+  for (let index = 0; index < nodesWithGrouping.value.length; index += 1) {
+    const nodeEntry = nodesWithGrouping.value[index]
+
+    if (!nodeEntry.sectionKey) {
+      nextEntries.push({
+        id: `node:${pathToKey(nodeEntry.path)}`,
+        kind: 'node',
+        item: nodeEntry,
+      })
+      continue
+    }
+
+    const sectionNodes = [nodeEntry]
+    let cursor = index + 1
+
+    while (nodesWithGrouping.value[cursor]?.sectionKey === nodeEntry.sectionKey) {
+      sectionNodes.push(nodesWithGrouping.value[cursor])
+      cursor += 1
+    }
+
+    nextEntries.push({
+      containerId: nodeEntry.sectionKey,
+      footerNodes: sectionNodes.filter((sectionNode) => resolveConfiguredNodeView(sectionNode.node) === LogicTreeNodeView.ACTIONS),
+      id: `group:${nodeEntry.sectionKey}`,
+      itemNodes: sectionNodes.filter((sectionNode) => resolveConfiguredNodeView(sectionNode.node) !== LogicTreeNodeView.ACTIONS),
+      kind: 'grouped',
+    })
+
+    index = cursor - 1
+  }
+
+  return nextEntries
+})
+
+const isNodeDraggable = (node: TreeNode): boolean => (
+  Boolean(node.data.draggable)
+  && !node.data.disabled
+  && resolveConfiguredNodeView(node) !== LogicTreeNodeView.ACTIONS
+)
+
+const isGroupedDraggableNode = (nodeEntry: FlattenedNode): boolean => (
+  Boolean(nodeEntry.sectionKey)
+  && isNodeDraggable(nodeEntry.node)
+)
+
+const isNodeSelected = (nodeEntry: FlattenedNode): boolean => (
+  Boolean(nodeEntry.node.data.selected)
+  || activePathKey.value === pathToKey(nodeEntry.path)
+  || isNodeEditing(nodeEntry)
+)
+
+const resolveNodeSlotProps = (nodeEntry: FlattenedNode): TreeNodeSlotProps => ({
+  editing: isNodeEditing(nodeEntry),
+  expanded: nodeEntry.expanded,
+  grouped: Boolean(nodeEntry.sectionKey),
+  groupedHeader: nodeEntry.node.childrenView === LogicTreeChildrenView.GROUPED,
+  groupedPosition: nodeEntry.groupedPosition || undefined,
+  hasChildren: nodeEntry.hasChildren,
+  highlighted: Boolean(nodeEntry.node.data.highlighted),
+  disabled: Boolean(nodeEntry.node.data.disabled),
+  node: nodeEntry.node,
+  onAction: (actionId, kind) => {
+    onAction(nodeEntry, actionId, kind)
+  },
+  onControlAction: (controlId: string) => {
+    emit('control-action', {
+      controlId,
+      nodeId: nodeEntry.node.id,
+    })
+  },
+  onControlUpdate: (controlId: string, value: string | number | null) => {
+    onControlUpdate(nodeEntry.path, controlId, value)
+  },
+  onRemove: () => {
+    onRemove(nodeEntry.path, nodeEntry.node.id)
+  },
+  onToggle: () => {
+    onToggle(nodeEntry)
+  },
+  path: [...nodeEntry.path],
+  pathKey: pathToKey(nodeEntry.path),
+  nodeView: resolveNodeView(nodeEntry),
+  selected: isNodeSelected(nodeEntry),
+})
+
+const onControlUpdate = (path: number[], controlId: string, value: string | number | null) => {
+  const currentNode = getNodeAtPath(itemsState.value, path)
+
+  if (currentNode) {
+    emit('node:edit', {
+      controlId,
+      nodeId: currentNode.id,
+      pathKey: pathToKey(path),
+      value,
+    })
+  }
+
+  emit('control:update', {
+    controlId,
+    nodeId: currentNode?.id ?? '',
+    value,
+  })
+}
+
+const onToggle = (nodeEntry: FlattenedNode) => {
+  const nextExpanded = !nodeEntry.expanded
+
+  withItemsMutation((nextItems) => {
+    const nextNode = getNodeAtPath(nextItems, nodeEntry.path)
+
+    if (nextNode) {
+      nextNode.expanded = nextExpanded
+    }
+  })
+
+  emit('toggle', {
+    expanded: nextExpanded,
+    nodeId: nodeEntry.node.id,
+  })
+}
+
+const onRemove = (path: number[], nodeId: string) => {
+  const pathKey = pathToKey(path)
+  const index = path.at(-1)
+  const { parentNode, parentPathKey } = resolveParentMeta(itemsState.value, path)
+
+  if (activePathKey.value === pathKey) {
+    activePathKey.value = ''
+  }
+
+  if (index !== undefined) {
+    emit('node:remove', {
+      index,
+      nodeId,
+      parentNodeId: parentNode?.id ?? null,
+      parentPathKey,
+      pathKey,
+    })
+  }
+
+  emit('remove', nodeId)
+}
+
+const onAction = (
+  nodeEntry: FlattenedNode,
+  actionId: string,
+  kind: Exclude<TreeNode['kind'], LogicTreeNodeKind.BRANCH>
+) => {
+  if (resolveNodeView(nodeEntry) !== LogicTreeNodeView.ACTIONS) {
+    return
+  }
+
+  const { parentNode, parentPathKey } = resolveParentMeta(itemsState.value, nodeEntry.path)
+
+  emit('node:add', {
+    actionId,
+    kind,
+    parentNodeId: parentNode?.id ?? null,
+    parentPathKey,
+    triggerNodeId: nodeEntry.node.id,
+  })
+
+  emit('action', {
+    actionId,
+    nodeId: nodeEntry.node.id,
+  })
+}
+
+const onNodeClick = (nodeEntry: FlattenedNode) => {
+  if (resolveNodeView(nodeEntry) === LogicTreeNodeView.ACTIONS) {
+    return
+  }
+
+  if (canToggleNode(nodeEntry)) {
+    onToggle(nodeEntry)
+    activePathKey.value = pathToKey(nodeEntry.path)
+
+    return
+  }
+
+  if (!canSetNodeEditable(nodeEntry)) {
+    withItemsMutation((nextItems) => {
+      setEditableState(nextItems, null)
+    })
+  }
+
+  activePathKey.value = pathToKey(nodeEntry.path)
+}
+
+const onOutsideClick = () => {
+  activePathKey.value = ''
+
+  withItemsMutation((nextItems) => {
+    setEditableState(nextItems, null)
+  })
+}
+
+const resolveGroupedDropPayload = (event: RemoteSortableEvent): UiLogicTreeDropPayload | null => {
+  if (
+    !event.accepted
+    || !event.targetContainerId
+    || event.sourceContainerId !== event.targetContainerId
+    || (event.placement !== 'before' && event.placement !== 'after')
+  ) {
+    return null
+  }
+
+  return {
+    itemId: event.itemId,
+    payload: event.payload,
+    placement: event.placement,
+    sourceContainerId: event.sourceContainerId,
+    targetContainerId: event.targetContainerId,
+    targetIndex: event.targetIndex,
+    targetItemId: event.targetItemId,
+  }
+}
+
+const onGroupedDrop = (event: RemoteSortableEvent) => {
+  const payload = resolveGroupedDropPayload(event)
+
+  if (!payload) {
+    return
+  }
+
+  const parentPath = payload.sourceContainerId
+    .split('.')
+    .filter(Boolean)
+    .map((segment) => Number(segment))
+
+  withItemsMutation((nextItems) => {
+    const branchNode = getNodeAtPath(nextItems, parentPath)
+    const children = branchNode?.children
+
+    if (!children?.length) {
+      return
+    }
+
+    const sortableChildren = children.filter((child) => resolveConfiguredNodeView(child) !== LogicTreeNodeView.ACTIONS)
+    const footerChildren = children.filter((child) => resolveConfiguredNodeView(child) === LogicTreeNodeView.ACTIONS)
+    const movedNodeIndex = sortableChildren.findIndex((child) => child.id === payload.itemId)
+
+    if (movedNodeIndex === -1) {
+      return
+    }
+
+    const [movedNode] = sortableChildren.splice(movedNodeIndex, 1)
+
+    if (!movedNode) {
+      return
+    }
+
+    const targetIndex = Math.min(
+      Math.max(payload.targetIndex ?? sortableChildren.length, 0),
+      sortableChildren.length
+    )
+
+    sortableChildren.splice(targetIndex, 0, movedNode)
+    branchNode!.children = [...sortableChildren, ...footerChildren]
+  })
+
+  emit('drop', payload)
+}
+
+</script>
diff --git a/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue b/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue
new file mode 100644
index 00000000..08b3f3aa
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue
@@ -0,0 +1,30 @@
+<template>
+    <RemoteDragHandle
+        :for="props.for"
+        :disabled="props.disabled"
+        :class="{
+            'ui-v1-logic-tree-drag-handle_disabled': props.disabled,
+        }"
+        as="span"
+        class="ui-v1-logic-tree-drag-handle"
+        data-skip-node-click="true"
+    >
+        <slot>
+            <IconDrag aria-hidden="true" />
+        </slot>
+    </RemoteDragHandle>
+</template>
+
+<script lang="ts" remote setup>
+import { RemoteDragHandle } from '@omnicajs/vue-remote/remote'
+
+import IconDrag from '~assets/sprites/actions/drag.svg'
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean;
+  for?: string;
+}>(), {
+  disabled: false,
+  for: undefined,
+})
+</script>
diff --git a/packages/v1-components/src/remote/components/logic-tree/index.ts b/packages/v1-components/src/remote/components/logic-tree/index.ts
new file mode 100644
index 00000000..6cb83510
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/index.ts
@@ -0,0 +1,9 @@
+export { default as UiLogicTree } from './UiLogicTree.vue'
+export { default as UiLogicTreeDragHandle } from './UiLogicTreeDragHandle.vue'
+
+export * from '@/common/components/logic-tree'
+export {
+  UiLogicTreeCaret,
+  UiLogicTreeNodeIcon,
+  UiLogicTreeNodeItem,
+} from './parts'
diff --git a/packages/v1-components/src/remote/components/logic-tree/parts.ts b/packages/v1-components/src/remote/components/logic-tree/parts.ts
new file mode 100644
index 00000000..a5c16fda
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/parts.ts
@@ -0,0 +1,63 @@
+import type { RemoteProperties } from '@/remote/scaffolding'
+import type { SchemaType } from '@omnicajs/vue-remote/remote'
+
+import type {
+  UiLogicTreeCaretProperties,
+  UiLogicTreeNodeProperties,
+  UiLogicTreeRootProperties,
+} from '@/common/components/logic-tree'
+
+import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
+
+export const UiLogicTreeRootType = 'UiLogicTreeRoot' as SchemaType<
+  'UiLogicTreeRoot',
+  RemoteProperties<UiLogicTreeRootProperties>
+>
+
+export const UiLogicTreeRoot = defineRemoteComponent(UiLogicTreeRootType, {
+  emits: [
+    'outsideClick',
+  ] as unknown as {
+    'outsideClick': () => boolean,
+  },
+  slots: ['default'],
+})
+
+export const UiLogicTreeNodeType = 'UiLogicTreeNode' as SchemaType<
+  'UiLogicTreeNode',
+  RemoteProperties<UiLogicTreeNodeProperties>
+>
+
+export const UiLogicTreeNode = defineRemoteComponent(UiLogicTreeNodeType, {
+  emits: [
+    'nodeClick',
+    'nodeEdit',
+  ] as unknown as {
+    'nodeClick': (pathKey: string) => boolean,
+    'nodeEdit': (value: boolean) => boolean,
+  },
+  slots: ['conjunction-poppers', 'prefix', 'content', 'trailing'],
+})
+
+export const UiLogicTreeCaretType = 'UiLogicTreeCaret' as SchemaType<
+  'UiLogicTreeCaret',
+  RemoteProperties<UiLogicTreeCaretProperties>
+>
+
+export const UiLogicTreeCaret = defineRemoteComponent(UiLogicTreeCaretType)
+
+export const UiLogicTreeNodeItemType = 'UiLogicTreeNodeItem' as SchemaType<
+  'UiLogicTreeNodeItem'
+>
+
+export const UiLogicTreeNodeItem = defineRemoteComponent(UiLogicTreeNodeItemType, {
+  slots: ['default', 'headline', 'title', 'trailing'],
+})
+
+export const UiLogicTreeNodeIconType = 'UiLogicTreeNodeIcon' as SchemaType<
+  'UiLogicTreeNodeIcon'
+>
+
+export const UiLogicTreeNodeIcon = defineRemoteComponent(UiLogicTreeNodeIconType, {
+  slots: ['default'],
+})
diff --git a/packages/v1-components/src/remote/components/popper.ts b/packages/v1-components/src/remote/components/popper.ts
index dcabdbcc..22aadd7c 100644
--- a/packages/v1-components/src/remote/components/popper.ts
+++ b/packages/v1-components/src/remote/components/popper.ts
@@ -10,7 +10,25 @@ export const UiPopperType = 'UiPopper' as SchemaType<
   RemoteProperties<UiPopperProperties>
 >
 
-export const UiPopper = defineRemoteComponent(UiPopperType)
+export const UiPopper = defineRemoteComponent(UiPopperType, {
+  emits: [
+    'attached',
+    'dispose',
+    'hide',
+    'hidden',
+    'show',
+    'shown',
+    'update:visible',
+  ] as unknown as {
+    'attached': () => boolean,
+    'dispose': () => boolean,
+    'hide': (reason?: 'generic' | 'by-miss-click') => boolean,
+    'hidden': () => boolean,
+    'show': () => boolean,
+    'shown': () => boolean,
+    'update:visible': (visible: boolean) => boolean,
+  },
+})
 
 export const UiPopperConnectorType = 'UiPopperConnector' as SchemaType<'UiPopperConnector'>
 
diff --git a/packages/v1-components/src/remote/endpoint.ts b/packages/v1-components/src/remote/endpoint.ts
index e394b60f..6ecdd8a9 100644
--- a/packages/v1-components/src/remote/endpoint.ts
+++ b/packages/v1-components/src/remote/endpoint.ts
@@ -24,6 +24,11 @@ export const createEndpointRoot = async (
     'UiInfobox',
     'UiLink',
     'UiLoader',
+    'UiLogicTreeCaret',
+    'UiLogicTreeNode',
+    'UiLogicTreeNodeIcon',
+    'UiLogicTreeNodeItem',
+    'UiLogicTreeRoot',
     'UiMenuItem',
     'UiMenuItemGroup',
     'UiModalSidebar',
diff --git a/packages/v1-components/storybook/createRemoteStoryRender.ts b/packages/v1-components/storybook/createRemoteStoryRender.ts
index 302cc8e4..231f51ad 100644
--- a/packages/v1-components/storybook/createRemoteStoryRender.ts
+++ b/packages/v1-components/storybook/createRemoteStoryRender.ts
@@ -7,15 +7,17 @@ import { createReceiver } from '@omnicajs/vue-remote/host'
 import { defineComponent } from 'vue'
 import { onUnmounted, watch } from 'vue'
 
+import { storybookHostProvider } from './provider'
+
 type RemoteStoryRenderOptions = {
-  provider: object;
+  provider?: object;
   worker: {
     new (options?: WorkerOptions): Worker;
   };
 }
 
 export const createRemoteStoryRender = <TArgs extends object>({
-  provider,
+  provider = storybookHostProvider,
   worker: Worker,
 }: RemoteStoryRenderOptions) => (args: TArgs) => defineComponent({
     name: 'RemoteStoryRender',
diff --git a/packages/v1-components/storybook/endpoint.ts b/packages/v1-components/storybook/endpoint.ts
index 6f4d1150..3d26e3cb 100644
--- a/packages/v1-components/storybook/endpoint.ts
+++ b/packages/v1-components/storybook/endpoint.ts
@@ -11,6 +11,8 @@ import { createEndpoint, release, retain } from '@remote-ui/rpc'
 
 import { createRemoteRenderer, createRemoteRoot } from '@omnicajs/vue-remote/remote'
 
+import { hostComponentNames } from './host-components'
+
 export type Lifecycle<T extends object = object> = {
   run (channel: Channel, props?: Partial<T>): Promise<void>;
   release (): void;
@@ -33,37 +35,7 @@ export interface Runner<T extends object = object> {
 
 const createRoot = async (channel: Channel) => {
   const root = createRemoteRoot(channel, {
-    components: [
-      'UiAvatar',
-      'UiButton',
-      'UiCheckbox',
-      'UiLink',
-      'UiMenuItem',
-      'UiMenuItemGroup',
-      'UiPageHeaderTitle',
-      'UiPopperConnector',
-      'UiPopperTarget',
-      'UiRadioSwitchOptionShell',
-      'UiRadioSwitchRoot',
-      'UiSelectPopper',
-      'UiSelectTrigger',
-      'UiTab',
-      'UiTabGroup',
-      'UiTableBodyCell',
-      'UiTableCol',
-      'UiTableFooterButton',
-      'UiTableFooterSection',
-      'UiTableHeadCell',
-      'UiTableRoot',
-      'UiTableRow',
-      'UiTableSection',
-      'UiTableSorter',
-      'UiTag',
-      'UiTextbox',
-      'UiTooltip',
-      'UiToggleButton',
-      'UiToggleGroupRoot',
-    ],
+    components: [...hostComponentNames],
   })
 
   await root.mount()
diff --git a/packages/v1-components/storybook/host-components.ts b/packages/v1-components/storybook/host-components.ts
new file mode 100644
index 00000000..cd096e03
--- /dev/null
+++ b/packages/v1-components/storybook/host-components.ts
@@ -0,0 +1,39 @@
+export const hostComponentNames = [
+  'UiAvatar',
+  'UiButton',
+  'UiCheckbox',
+  'UiLink',
+  'UiLogicTreeCaret',
+  'UiLogicTreeNode',
+  'UiLogicTreeNodeIcon',
+  'UiLogicTreeNodeItem',
+  'UiLogicTreeRoot',
+  'UiMenuItem',
+  'UiMenuItemGroup',
+  'UiPageHeaderTitle',
+  'UiPopper',
+  'UiPopperConnector',
+  'UiPopperTarget',
+  'UiRadioSwitchOptionShell',
+  'UiRadioSwitchRoot',
+  'UiSelectPopper',
+  'UiSelectTrigger',
+  'UiTab',
+  'UiTabGroup',
+  'UiTableBodyCell',
+  'UiTableCol',
+  'UiTableFooterButton',
+  'UiTableFooterSection',
+  'UiTableHeadCell',
+  'UiTableRoot',
+  'UiTableRow',
+  'UiTableSection',
+  'UiTableSorter',
+  'UiTag',
+  'UiTextbox',
+  'UiTooltip',
+  'UiToggleButton',
+  'UiToggleGroupRoot',
+] as const
+
+export type HostComponentName = typeof hostComponentNames[number]
diff --git a/packages/v1-components/storybook/provider.ts b/packages/v1-components/storybook/provider.ts
new file mode 100644
index 00000000..a75ad04f
--- /dev/null
+++ b/packages/v1-components/storybook/provider.ts
@@ -0,0 +1,19 @@
+import type { Component } from 'vue'
+
+import type { HostComponentName } from './host-components'
+
+import { createProvider as createRemoteHostProvider } from '@omnicajs/vue-remote/host'
+
+import * as hostComponents from '@/host/components'
+
+import { hostComponentNames } from './host-components'
+
+type StorybookHostProviderComponents = Record<HostComponentName, Component>
+
+const storybookHostProviderComponents = Object.fromEntries(
+  hostComponentNames.map((name) => [name, hostComponents[name]])
+) as StorybookHostProviderComponents
+
+export const createStorybookHostProvider = () => createRemoteHostProvider(storybookHostProviderComponents)
+
+export const storybookHostProvider = createStorybookHostProvider()
diff --git a/packages/v1-components/storybook/stories/UiField.stories.ts b/packages/v1-components/storybook/stories/UiField.stories.ts
index b923275b..4176bc45 100644
--- a/packages/v1-components/storybook/stories/UiField.stories.ts
+++ b/packages/v1-components/storybook/stories/UiField.stories.ts
@@ -2,13 +2,6 @@ import '@/host/components/field/field.less'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiPopperTarget from '@/host/components/popper/UiPopperTarget.vue'
-import UiTextbox from '@/host/components/textbox/UiTextbox.vue'
-import UiTooltip from '@/host/components/tooltip/UiTooltip.vue'
-
 import { UiField } from '../../src/remote/components/field'
 import UiFieldWorker from './UiField.remote.ts?worker'
 
@@ -27,13 +20,6 @@ type UiFieldStoryExtras = {
 }
 type UiFieldStoryArgs = UiFieldProps & UiFieldStoryExtras
 
-const provider = createProvider({
-  UiPopperConnector,
-  UiPopperTarget,
-  UiTextbox,
-  UiTooltip,
-})
-
 const meta = {
   title: 'Components/UiField',
 
@@ -59,7 +45,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiFieldWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.mdx b/packages/v1-components/storybook/stories/UiLogicTree.mdx
new file mode 100644
index 00000000..33ece001
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.mdx
@@ -0,0 +1,188 @@
+import { ArgTypes, Story } from '@storybook/addon-docs/blocks'
+import * as UiLogicTreeStories from './UiLogicTree.stories'
+
+# UiLogicTree
+
+`UiLogicTree` - slot-driven древо условий для remote-части `embed-ui`.
+Компонент управляет структурой, линиями, grouped-layout, DnD и состоянием редактирования, а пользовательский контент узлов и бизнес-логика add/edit/remove приходят снаружи.
+
+Важно: `UiLogicTree` является controlled-компонентом для действий с узлами.
+По `node:add`, `node:edit`, `node:remove` и `control-action` дерево только отдаёт событие наружу; consumer сам обновляет `items` и передаёт новый массив обратно.
+`update:items` остаётся синхронизацией для внутренних сценариев вроде DnD/reorder и toggle.
+
+## Когда использовать
+
+* Нужна древовидная структура условий, групп и действий с готовой механикой линий и вложенности.
+* Нужно собирать внешний контент узла самостоятельно: текст, кнопки, инпуты, селекты, меню и trailing-действия.
+* Нужны grouped-ветки с DnD и единый editable-flow, но без жёстко зашитого UI внутри компонента.
+
+## Публичные slots
+
+`UiLogicTree` не задаёт прикладной контент узла внутри себя. Дерево отвечает за каркас узла, линии, вложенность и состояние, а consumer через slots описывает, как конкретный узел выглядит и какие контролы в нём есть.
+
+Слоты делятся на две группы:
+
+* `node-prefix` и `node-trailing` - боковые зоны узла. Они не выбирают режим узла и рендерятся вокруг центрального контента, когда consumer возвращает из них разметку.
+* `node` - центральный контент узла. Consumer сам выбирает, что показать для read-only, edit и actions-сценариев, опираясь на `nodeView`, `editing` и данные узла.
+* `conjunction-poppers` - popper-контент для кликабельного бейджа связи (`AND`/`OR`). Сам target создаёт дерево, а consumer передаёт меню, tooltip или другой floating UI.
+
+Смысл каждого слота:
+
+* `node-prefix` - левая служебная зона. Обычно сюда попадает `drag handle`, иконка папки, маркер типа узла или другой компактный визуальный признак.
+* `node` - центральная зона узла. Здесь consumer рендерит title, inline-текст, edit-контролы, actions-кнопки и любые другие варианты представления.
+* `node-trailing` - правая зона вторичных действий узла. Подходит для delete, overflow-menu, quick action и похожих действий над текущим узлом.
+* `conjunction-poppers` - содержимое `UiPopperConnector`, связанное с бейджем conjunction текущего узла. Слот получает те же props, что и node-слоты, поэтому consumer может менять `items` по `pathKey` или `node`.
+
+Важно: слоты не являются моделью данных. `UiLogicTree` не знает, какие именно controls/actions/icons существуют у consumer. Он только передаёт текущий `node`, состояние узла и callbacks. Если центральный слот `node` не передан, дерево показывает нейтральный placeholder только в центральной зоне узла.
+
+## Строительные компоненты
+
+Для стандартной визуальной сборки узла есть небольшие primitives. Они не добавляют бизнес-логику и не требуют от дерева знания о данных consumer: это только готовые structural-компоненты поверх классов `ui-v1-logic-tree`.
+
+Основные primitives:
+
+* `UiLogicTreeNodeItem` - интерактивный элемент узла с областями `headline`, `title`, `trailing` и основным содержимым.
+* `UiLogicTreeNodeIcon` - компактная иконка узла.
+* `UiLogicTreeCaret` - иконка раскрытия ветки; по умолчанию закрыта, `active` показывает раскрытое состояние.
+* `UiLogicTreeDragHandle` - готовая remote-ручка drag'n'drop с `RemoteDragHandle`, иконкой и `data-skip-node-click`.
+
+Consumer может использовать эти primitives в `node`, `node-prefix` и `node-trailing`, либо полностью заменить их своей разметкой.
+
+## Slot props
+
+Во все публичные slots дерево передаёт `UiLogicTreeNodeSlotProps`.
+
+Основные поля:
+
+* `node` - текущий узел дерева целиком.
+* `path` и `pathKey` - адрес узла в дереве.
+* `nodeView` - текущий режим узла (`summary` или `actions`).
+* `editing` - узел сейчас в режиме редактирования.
+* `grouped`, `groupedHeader`, `groupedPosition` - информация о grouped-секции.
+* `selected`, `highlighted`, `expanded`, `hasChildren` - состояние узла.
+
+Доступные callbacks:
+
+* `onAction(actionId, kind)` - запросить добавление узла заданного типа. Consumer должен обработать `node:add` и обновить `items`.
+* `onControlUpdate(controlId, value)` - запросить обновление значения контрола. Consumer должен обработать `node:edit` и обновить `items`.
+* `onControlAction(controlId)` - выполнить action у контрола.
+* `onRemove()` - запросить удаление узла. Consumer должен обработать `node:remove` и обновить `items`.
+* `onToggle()` - раскрыть или свернуть ветку.
+
+## Как собирать узел
+
+Базовая идея такая:
+
+```vue
+<template>
+  <UiLogicTree
+    :items="items"
+    @node:add="handleNodeAdd"
+    @node:edit="handleNodeEdit"
+    @node:remove="handleNodeRemove"
+    @update:items="items = $event"
+  >
+    <template #node-prefix="{ node, editing }">
+      <UiLogicTreeDragHandle
+        v-if="node.data.draggable && !editing"
+        :for="node.id"
+      />
+      <UiLogicTreeNodeIcon v-else-if="node.data.icon && !editing">
+        <UiFolderIcon />
+      </UiLogicTreeNodeIcon>
+    </template>
+
+    <template #node="{ node, nodeView, editing, expanded, onAction, onControlUpdate, onToggle }">
+      <template v-if="nodeView === 'actions'">
+        <UiButton
+          v-for="action in node.data.actions"
+          :key="action.id"
+          appearance="tertiary"
+          size="sm"
+          @click="onAction(action.id, action.kind)"
+        >
+          {{ action.label }}
+        </UiButton>
+      </template>
+
+      <div
+        v-else-if="editing"
+        class="consumer-controls"
+      >
+        <UiSelect
+          v-for="control in node.data.controls"
+          :key="control.id"
+          :value="control.value"
+          :width="control.width"
+          @update:value="(value) => onControlUpdate(control.id, value)"
+        />
+      </div>
+
+      <UiLogicTreeNodeItem
+        v-else
+      >
+        <template #title>
+          {{ node.data.title }}
+        </template>
+
+        <template #trailing>
+          <UiButton
+            v-if="node.collapsible"
+            type="button"
+            @click.stop="onToggle"
+          >
+            <UiLogicTreeCaret :active="expanded" />
+          </UiButton>
+        </template>
+
+        <span
+          v-for="item in node.data.inline"
+          :key="item.id"
+          class="consumer-inline"
+        >
+          {{ item.text }}
+        </span>
+      </UiLogicTreeNodeItem>
+    </template>
+
+    <template #node-trailing="{ node, onRemove }">
+      <UiButton
+        v-if="node.data.removable"
+        appearance="tertiary"
+        variant="danger"
+        @click="onRemove"
+      >
+        Удалить
+      </UiButton>
+    </template>
+
+    <template #conjunction-poppers="{ node, pathKey }">
+      <UiPopper
+        :target-triggers="['click']"
+        :global-triggers="['miss-click', 'reference-hidden']"
+        placement="bottom-start"
+      >
+        <UiMenuItem @click="setConjunction(pathKey, 'and')">
+          AND
+        </UiMenuItem>
+
+        <UiMenuItem @click="setConjunction(pathKey, 'or')">
+          OR
+        </UiMenuItem>
+      </UiPopper>
+    </template>
+  </UiLogicTree>
+</template>
+```
+
+В каноничном примере ниже обработчики находятся в consumer-слое: `UiLogicTree.remote.example.vue` ловит `node:add`, `node:edit`, `node:remove` и обновляет `items` снаружи.
+
+## Каноничный пример
+
+`CampaignArbitrage` - основной пример того, как дерево собирается целиком через slots снаружи.
+
+<Story of={UiLogicTreeStories.CampaignArbitrage} />
+
+## API
+
+<ArgTypes of={UiLogicTreeStories} />
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less
new file mode 100644
index 00000000..a452b212
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less
@@ -0,0 +1,73 @@
+@import (reference) '../../assets/stylesheets/typography.less';
+@import (reference) '../../assets/stylesheets/variables.less';
+
+.controls {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: @spacing-xs;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.remove {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity @transition;
+}
+
+.inline {
+  .text-regular();
+
+  color: @black-500;
+  white-space: nowrap;
+}
+
+.inline_muted {
+  color: @grey-800;
+}
+
+.inline_separated {
+  padding-left: 12px;
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: currentColor;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+    left: 0;
+  }
+}
+
+.inline_semibold {
+  font-weight: 500;
+}
+
+.inline_blue { color: @blue-300; }
+.inline_green { color: @green-400; }
+.inline_grey { color: @grey-800; }
+.inline_red { color: @red-500; }
+.inline_yellow { color: @yellow-400; }
+
+:global(.ui-v1-logic-tree__surface-node-content:hover) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_editor) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_active) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_editing) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_highlighted) .remove,
+:global(.ui-v1-logic-tree__surface-node-content:focus-within) .remove,
+:global(.ui-v1-logic-tree__actions-node:hover) .remove,
+:global(.ui-v1-logic-tree__actions-node:focus-within) .remove {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:global([data-dnd-overlay='true']) .remove {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue
new file mode 100644
index 00000000..a3a1a6b7
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue
@@ -0,0 +1,715 @@
+<template>
+    <UiLogicTree
+        :items="tree"
+        @control-action="onControlAction"
+        @node:add="onNodeAdd"
+        @node:edit="onNodeEdit"
+        @node:remove="onNodeRemove"
+        @update:items="setTree"
+    >
+        <template #conjunction-poppers="{ node, pathKey }">
+            <UiPopper
+                :visible="activeConjunctionPathKey === pathKey"
+                :target-triggers="['click']"
+                :popper-triggers="{ hide: ['click'] }"
+                :global-triggers="['miss-click', 'reference-hidden']"
+                placement="bottom-start"
+                @update:visible="onConjunctionVisibleUpdate({ pathKey, visible: $event })"
+            >
+                <UiMenuItem
+                    v-for="option in conjunctionOptions"
+                    :key="option.value"
+                    :active="node.conjunction === option.value"
+                    size="sm"
+                    @click="onConjunctionUpdate({ pathKey, value: option.value })"
+                >
+                    {{ option.label }}
+                </UiMenuItem>
+            </UiPopper>
+        </template>
+
+        <template #node-prefix="{ node, grouped, nodeView, disabled, editing }">
+            <UiLogicTreeDragHandle
+                v-if="grouped
+                    && Boolean(node.data.draggable)
+                    && nodeView !== LogicTreeNodeView.ACTIONS
+                    && !disabled"
+                :for="node.id"
+            />
+
+            <UiLogicTreeNodeIcon v-else-if="Boolean(node.data.icon) && !editing">
+                <NodeIcon :icon="node.data.icon" />
+            </UiLogicTreeNodeIcon>
+        </template>
+
+        <template
+            #node="{
+                node,
+                pathKey,
+                nodeView,
+                editing,
+                hasChildren,
+                expanded,
+                onAction,
+                onToggle,
+                onControlUpdate,
+                onControlAction
+            }"
+        >
+            <template v-if="nodeView === LogicTreeNodeView.ACTIONS">
+                <UiButton
+                    v-for="action in (node.data.actions ?? [])"
+                    :key="action.id"
+                    appearance="tertiary"
+                    size="sm"
+                    @click="onAction(action.id, action.kind)"
+                >
+                    <IconAdd aria-hidden="true" />
+                    {{ action.label }}
+                </UiButton>
+            </template>
+
+            <div
+                v-else-if="editing"
+                :class="styles.controls"
+            >
+                <template
+                    v-for="control in (node.data.controls ?? [])"
+                    :key="control.id"
+                >
+                    <UiSelect
+                        v-if="control.kind === 'select'"
+                        :value="control.value ?? null"
+                        :placeholder="control.placeholder ?? control.label"
+                        :width="control.width"
+                        :clearable="control.clearable"
+                        :disabled="control.disabled"
+                        :invalid="control.invalid"
+                        :readonly="control.readonly"
+                        popper-fit-trigger
+                        @update:value="(value) => onControlValueUpdate({
+                            pathKey,
+                            controlId: control.id,
+                            value,
+                            onControlUpdate,
+                        })"
+                    >
+                        <UiSelectOption
+                            v-for="option in resolveOptions(control)"
+                            :key="option.id"
+                            :label="option.label"
+                            :value="option.value"
+                        />
+                    </UiSelect>
+
+                    <UiTextbox
+                        v-else-if="control.kind === 'input'"
+                        :value="control.value ?? ''"
+                        :placeholder="control.placeholder ?? control.label"
+                        :width="control.width"
+                        :disabled="control.disabled"
+                        :invalid="control.invalid"
+                        :readonly="control.readonly"
+                        @update:value="(value) => drafts.set(draftKey(pathKey, control.id), value)"
+                        @change="onTextboxValueCommit({
+                            pathKey,
+                            controlId: control.id,
+                            onControlUpdate,
+                        })"
+                        @blur="onTextboxValueCommit({
+                            pathKey,
+                            controlId: control.id,
+                            onControlUpdate,
+                        })"
+                    />
+
+                    <UiButton
+                        v-else
+                        appearance="tertiary"
+                        size="sm"
+                        @click="onControlAction(control.id)"
+                    >
+                        <NodeIcon :icon="control.icon" />
+                    </UiButton>
+                </template>
+            </div>
+
+            <UiLogicTreeNodeItem v-else>
+                <template #title>
+                    {{ node.data.title }}
+                </template>
+
+                <template #trailing>
+                    <UiButton
+                        v-if="node.collapsible && hasChildren"
+                        appearance="tertiary"
+                        size="xs"
+                        @click="onToggle"
+                    >
+                        <UiLogicTreeCaret :active="expanded" />
+                    </UiButton>
+                </template>
+
+                <span
+                    v-for="item in (node.data.inline ?? [])"
+                    :key="item.id"
+                    :class="{
+                        [styles.inline]: true,
+                        [styles.inline_muted]: item.tone === 'muted',
+                        [styles.inline_separated]: item.separated,
+                        [styles.inline_semibold]: item.weight === 'semibold',
+                        [styles.inline_blue]: item.tone === LogicTreeTone.BLUE,
+                        [styles.inline_green]: item.tone === LogicTreeTone.GREEN,
+                        [styles.inline_grey]: item.tone === LogicTreeTone.GREY,
+                        [styles.inline_red]: item.tone === LogicTreeTone.RED,
+                        [styles.inline_yellow]: item.tone === LogicTreeTone.YELLOW,
+                    }"
+                >
+                    {{ item.text }}
+                </span>
+            </UiLogicTreeNodeItem>
+        </template>
+
+        <template #node-trailing="{ node, onRemove, editing }">
+            <UiPopperConnector v-if="Boolean(node.data.removable)">
+                <UiButton
+                    :aria-label="i18n.t('delete')"
+                    :size="editing ? 'sm' : 'xs'"
+                    appearance="tertiary"
+                    :class="styles.remove"
+                    variant="danger"
+                    @click="onRemove"
+                >
+                    <IconDeleteOutlined aria-hidden="true" />
+                </UiButton>
+
+                <UiTooltip
+                    :target-triggers="{
+                        show: ['hover', 'focus'],
+                        hide: ['hover', 'focus', 'click'],
+                    }"
+                >
+                    {{ i18n.t('delete') }}
+                </UiTooltip>
+            </UiPopperConnector>
+        </template>
+    </UiLogicTree>
+</template>
+
+<script lang="ts" remote setup>
+import type {
+  UiLogicTreeNode,
+  UiLogicTreeNodeAddPayload,
+  UiLogicTreeNodeEditPayload,
+  UiLogicTreeNodeRemovePayload,
+} from '@/common/components/logic-tree'
+import type { WidthValue } from '@/common/components/width'
+
+import { computed, h, inject } from 'vue'
+import isEqual from 'lodash.isequal'
+import { ref, watch } from 'vue'
+
+import IconAdd from '~assets/sprites/actions/add.svg'
+import IconAddSquareOutlined from '~assets/sprites/actions/add-square-outlined.svg'
+import IconDeleteOutlined from '~assets/sprites/ui/delete-outlined.svg'
+import IconFolderOutlined from '~assets/sprites/files/folder-outlined.svg'
+import IconMoreHorizontal from '~assets/sprites/ui/more-horizontal.svg'
+
+import { UiButton } from '@/remote/components/button'
+import {
+  UiLogicTree,
+  UiLogicTreeCaret,
+  UiLogicTreeDragHandle,
+  UiLogicTreeNodeIcon,
+  UiLogicTreeNodeItem,
+} from '@/remote/components/logic-tree'
+import { UiMenuItem } from '@/remote/components/menu'
+import { UiPopper, UiPopperConnector } from '@/remote/components/popper'
+import { UiSelect, UiSelectOption } from '@/remote/components/select'
+import { UiTextbox } from '@/remote/components/textbox'
+import { UiTooltip } from '@/remote/components/tooltip'
+
+import {
+  LogicTreeConjunction,
+  LogicTreeNodeKind,
+  LogicTreeNodeView,
+  LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import _i18n from '@/host/components/logic-tree/i18n'
+import { I18nInjectKey } from '@/host/i18n/plugin'
+
+type TreeNodeIcon = 'folder' | 'more'
+type TreeNodeInline = {
+  id: string;
+  text: string;
+  tone?: LogicTreeTone | 'default' | 'muted';
+  weight?: 'regular' | 'semibold';
+  separated?: boolean;
+}
+type TreeNodeControl = {
+  id: string;
+  kind: 'icon' | 'input' | 'select';
+  label: string;
+  icon?: TreeNodeIcon;
+  options?: {
+    id: string;
+    label: string;
+    value: string | number;
+  }[];
+  value?: string | number | null;
+  placeholder?: string;
+  width?: WidthValue;
+  clearable?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+}
+
+type TreeNodeAction = {
+  id: string;
+  kind: Exclude<UiLogicTreeNode['kind'], LogicTreeNodeKind.BRANCH>;
+  label: string;
+}
+
+type TreeNode = UiLogicTreeNode<{
+  title: string;
+  icon?: TreeNodeIcon;
+  inline?: TreeNodeInline[];
+  controls?: TreeNodeControl[];
+  actions?: TreeNodeAction[];
+  removable?: boolean;
+}>
+
+type Styles = Partial<Record<
+  | 'controls'
+  | 'inline'
+  | 'inline_blue'
+  | 'inline_green'
+  | 'inline_grey'
+  | 'inline_muted'
+  | 'inline_red'
+  | 'inline_semibold'
+  | 'inline_separated'
+  | 'inline_yellow'
+  | 'remove',
+  string
+>>
+
+const props = defineProps<{
+  items?: TreeNode[];
+  styles?: Styles;
+}>()
+
+const styles = computed(() => props.styles ?? {})
+
+const cloneNodes = (nodes: TreeNode[]): TreeNode[] => nodes.map((node) => ({
+  ...node,
+  data: {
+    ...node.data,
+    actions: node.data.actions?.map((action) => ({ ...action })),
+    controls: node.data.controls?.map((control) => ({
+      ...control,
+      options: control.options?.map((option) => ({ ...option })),
+    })),
+    inline: node.data.inline?.map((item) => ({ ...item })),
+  },
+  children: node.children ? cloneNodes(node.children) : undefined,
+}))
+
+const parsePathKey = (pathKey: string | null): number[] => (
+  pathKey
+    ? pathKey.split('.').filter(Boolean).map((segment) => Number(segment))
+    : []
+)
+
+const branchAtPath = (
+  nodes: TreeNode[],
+  parentPath: number[]
+): TreeNode[] | null => {
+  let branch = nodes
+
+  for (const index of parentPath) {
+    const node = branch[index]
+    if (!node?.children) {
+      return null
+    }
+
+    branch = node.children
+  }
+
+  return branch
+}
+
+const nodeAtPath = (nodes: TreeNode[], path: number[]): TreeNode | null => {
+  const branch = branchAtPath(nodes, path.slice(0, -1))
+  const index = path.at(-1)
+  if (index === undefined) {
+    return null
+  }
+
+  return branch?.[index] ?? null
+}
+
+const findNodePath = (
+  nodes: TreeNode[],
+  nodeId: string,
+  parentPath: number[] = []
+): number[] | null => {
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const path = [...parentPath, index]
+
+    if (node.id === nodeId) {
+      return path
+    }
+
+    if (node.children?.length) {
+      const nestedPath = findNodePath(node.children, nodeId, path)
+      if (nestedPath) {
+        return nestedPath
+      }
+    }
+  }
+
+  return null
+}
+
+let uid = 0
+
+const nextId = (prefix: string): string => {
+  uid += 1
+
+  return `${prefix}-${uid}`
+}
+
+const isConjunctionContentNode = (node: TreeNode): boolean => (
+  node.data.view !== LogicTreeNodeView.ACTIONS
+  && node.kind !== LogicTreeNodeKind.BRANCH
+)
+
+const shouldAssignConditionConjunction = (
+  branch: TreeNode[],
+  insertionIndex: number
+): boolean => {
+  const hasPreviousContentSibling = branch
+    .slice(0, insertionIndex)
+    .some((node) => isConjunctionContentNode(node))
+
+  if (!hasPreviousContentSibling) {
+    return false
+  }
+
+  const hasExistingConjunction = branch.some((node) => (
+    isConjunctionContentNode(node)
+    && Boolean(node.conjunction)
+  ))
+
+  return !hasExistingConjunction
+}
+
+const createActionNode = (tone: LogicTreeTone): TreeNode => ({
+  id: nextId('actions'),
+  kind: LogicTreeNodeKind.CONDITION,
+  data: {
+    actions: [
+      {
+        id: nextId('add-condition'),
+        kind: LogicTreeNodeKind.CONDITION,
+        label: 'Условие',
+      },
+      {
+        id: nextId('add-group'),
+        kind: LogicTreeNodeKind.GROUP,
+        label: 'Группа',
+      },
+    ],
+    editable: false,
+    title: 'Добавить в ветку',
+    view: LogicTreeNodeView.ACTIONS,
+  },
+  tone,
+})
+
+const createConditionNode = (tone: LogicTreeTone): TreeNode => ({
+  id: nextId('condition'),
+  kind: LogicTreeNodeKind.CONDITION,
+  title: 'Новое условие',
+  data: {
+    controls: [
+      {
+        id: nextId('field'),
+        kind: 'select',
+        label: 'Поле',
+        options: [
+          { id: nextId('field-option'), label: 'Тип доставки', value: 'Тип доставки' },
+          { id: nextId('field-option'), label: 'Заказ клиента', value: 'Заказ клиента' },
+          { id: nextId('field-option'), label: 'Список обращений', value: 'Список обращений' },
+        ],
+        value: 'Тип доставки',
+        width: 198,
+      },
+      {
+        id: nextId('operator'),
+        kind: 'select',
+        label: 'Оператор',
+        options: [
+          { id: nextId('operator-option'), label: 'Равно', value: 'Равно' },
+          { id: nextId('operator-option'), label: 'Не равно', value: 'Не равно' },
+          { id: nextId('operator-option'), label: 'Есть такие', value: 'Есть такие' },
+        ],
+        value: 'Равно',
+        width: 110,
+      },
+      {
+        id: nextId('value'),
+        kind: 'input',
+        label: 'Значение',
+        placeholder: 'Введите значение',
+        value: '',
+        width: 198,
+      },
+      {
+        id: nextId('menu'),
+        kind: 'icon',
+        label: 'Дополнительно',
+        icon: 'more',
+      },
+    ],
+    view: LogicTreeNodeView.SUMMARY,
+    draggable: true,
+    editable: false,
+    removable: true,
+  },
+  tone,
+})
+
+const createGroupNode = (tone: LogicTreeTone): TreeNode => ({
+  id: nextId('group'),
+  kind: LogicTreeNodeKind.GROUP,
+  data: {
+    draggable: true,
+    editable: false,
+    inline: [
+      {
+        id: nextId('group-subtitle'),
+        text: 'Последовательное применение',
+        tone,
+      },
+      {
+        id: nextId('group-meta'),
+        separated: true,
+        text: 'Новая ветка',
+        tone: 'muted',
+      },
+    ],
+    removable: true,
+    title: 'Новая группа',
+    view: LogicTreeNodeView.SUMMARY,
+  },
+  tone,
+  children: [
+    createActionNode(tone),
+  ],
+  collapsible: true,
+  expanded: true,
+})
+
+const resolveOptions = (control: TreeNodeControl) => {
+  if (control.options?.length) {
+    return control.options
+  }
+
+  const value = control.value ?? null
+  if (value === null || value === undefined) {
+    return []
+  }
+
+  return [{
+    id: `${control.id}-option`,
+    label: String(value),
+    value,
+  }]
+}
+
+const NodeIcon = (props: { icon?: TreeNodeIcon }, bindings: { attrs: Record<string, unknown> }) => {
+  const attrs = { ...bindings.attrs, 'aria-hidden': 'true' }
+
+  return props.icon === 'folder'
+    ? h(IconFolderOutlined, attrs)
+    : props.icon === 'more'
+      ? h(IconMoreHorizontal, attrs)
+      : h(IconAddSquareOutlined, attrs)
+}
+
+const i18n = computed(() => _i18n.init(inject(I18nInjectKey, null)?.locale ?? _i18n.fallback))
+const conjunctionOptions = computed(() => [
+  {
+    label: i18n.value.t('relationAnd'),
+    value: LogicTreeConjunction.AND,
+  },
+  {
+    label: i18n.value.t('relationOr'),
+    value: LogicTreeConjunction.OR,
+  },
+])
+
+const tree = ref<TreeNode[]>([])
+const activeConjunctionPathKey = ref('')
+const setTree = (items: TreeNode[]) => {
+  if (!isEqual(tree.value, items)) {
+    tree.value = cloneNodes(items)
+  }
+}
+
+const mutate = (mutator: (nodes: TreeNode[]) => void) => {
+  const copy = cloneNodes(tree.value)
+
+  mutator(copy)
+  tree.value = copy
+}
+
+const drafts = new Map<string, string | number | null>()
+const draftKey = (pathKey: string, controlId: string) => `${pathKey}:${controlId}`
+const draftValue = (pathKey: string, controlId: string) => {
+  const key = draftKey(pathKey, controlId)
+
+  return drafts.has(key)
+    ? drafts.get(key)
+    : undefined
+}
+
+const updateControlValue = (
+  pathKey: string,
+  controlId: string,
+  value: string | number | null
+) => mutate((tree) => {
+  const node = nodeAtPath(tree, parsePathKey(pathKey))
+  const control = node?.data.controls?.find((item) => item.id === controlId)
+  if (control) {
+    control.value = value
+  }
+})
+
+const onControlValueUpdate = ({
+  pathKey,
+  controlId,
+  value,
+  onControlUpdate,
+}: {
+  pathKey: string;
+  controlId: string;
+  value: string | number | null;
+  onControlUpdate: (controlId: string, value: string | number | null) => void;
+}) => {
+  updateControlValue(pathKey, controlId, value)
+  onControlUpdate(controlId, value)
+}
+
+const onTextboxValueCommit = ({
+  pathKey,
+  controlId,
+  onControlUpdate,
+}: {
+  pathKey: string;
+  controlId: string;
+  onControlUpdate: (controlId: string, value: string | number | null) => void;
+}) => {
+  const value = draftValue(pathKey, controlId)
+  if (value === undefined) return
+
+  updateControlValue(pathKey, controlId, value)
+  drafts.delete(draftKey(pathKey, controlId))
+  onControlUpdate(controlId, value)
+}
+
+const onConjunctionVisibleUpdate = ({
+  pathKey,
+  visible,
+}: {
+  pathKey: string;
+  visible: boolean;
+}) => {
+  if (visible) {
+    activeConjunctionPathKey.value = pathKey
+    return
+  }
+
+  if (activeConjunctionPathKey.value === pathKey) {
+    activeConjunctionPathKey.value = ''
+  }
+}
+
+const onConjunctionUpdate = ({
+  pathKey,
+  value,
+}: {
+  pathKey: string;
+  value: LogicTreeConjunction;
+}) => {
+  activeConjunctionPathKey.value = ''
+
+  if (nodeAtPath(tree.value, parsePathKey(pathKey))?.conjunction === value) {
+    return
+  }
+
+  mutate((tree) => {
+    const node = nodeAtPath(tree, parsePathKey(pathKey))
+
+    if (node) {
+      node.conjunction = value
+    }
+  })
+}
+
+const onNodeAdd = ({
+  triggerNodeId,
+  parentPathKey,
+  kind,
+}: UiLogicTreeNodeAddPayload) => mutate((tree) => {
+  const triggerPath = findNodePath(tree, triggerNodeId)
+  const branch = branchAtPath(tree, parsePathKey(parentPathKey))
+  const actionIndex = triggerPath?.at(-1)
+
+  if (!triggerPath || !branch || actionIndex === undefined) return
+
+  const triggerNode = nodeAtPath(tree, triggerPath)
+  const tone = triggerNode?.tone ?? LogicTreeTone.BLUE
+  const nextNode = kind === LogicTreeNodeKind.GROUP
+    ? createGroupNode(tone)
+    : createConditionNode(tone)
+
+  if (
+    kind === LogicTreeNodeKind.CONDITION
+    && shouldAssignConditionConjunction(branch, actionIndex)
+  ) {
+    nextNode.conjunction = LogicTreeConjunction.AND
+  }
+
+  branch.splice(actionIndex, 0, nextNode)
+})
+
+const onNodeEdit = ({
+  pathKey,
+  controlId,
+  value,
+}: UiLogicTreeNodeEditPayload) => {
+  updateControlValue(pathKey, controlId, value)
+}
+
+const onNodeRemove = ({ parentPathKey, index }: UiLogicTreeNodeRemovePayload) => mutate((tree) => {
+  const branch = branchAtPath(tree, parsePathKey(parentPathKey))
+  if (branch && index >= 0 && index < branch.length) {
+    branch.splice(index, 1)
+  }
+})
+
+const onControlAction = () => {
+  // Business behavior is owned by the consumer; the demo tree keeps it as a no-op.
+}
+
+watch(() => props.items, (items) => {
+  setTree(items ?? [])
+  drafts.clear()
+}, { immediate: true })
+</script>
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.ts b/packages/v1-components/storybook/stories/UiLogicTree.remote.ts
new file mode 100644
index 00000000..c5bd002d
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.ts
@@ -0,0 +1,33 @@
+import type { UiLogicTreeNode } from '@/common/components/logic-tree'
+
+import UiLogicTreeRemoteExample from './UiLogicTree.remote.example.vue'
+
+import { createComponentEndpoint } from '../endpoint'
+
+type NodeData = {
+  title: string;
+  icon?: string;
+  controls?: unknown[];
+  actions?: Array<{
+    id: string;
+    kind: Exclude<UiLogicTreeNode['kind'], 'branch'>;
+    label: string;
+  }>;
+  inline?: unknown[];
+  removable?: boolean;
+}
+
+type Styles = Record<string, string>
+
+createComponentEndpoint<{
+  items?: UiLogicTreeNode<NodeData>[];
+  styles?: Styles;
+}>({
+  async run (createApp, root, props) {
+    const app = createApp(UiLogicTreeRemoteExample, props)
+
+    app.mount(root)
+
+    return () => app.unmount()
+  },
+}, self as unknown as Worker)
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.stories.ts b/packages/v1-components/storybook/stories/UiLogicTree.stories.ts
new file mode 100644
index 00000000..9a2bd448
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.stories.ts
@@ -0,0 +1,616 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { UiLogicTreeNode, UiLogicTreeNodeData } from '@/common/components/logic-tree'
+
+import {
+  LogicTreeChildrenView,
+  LogicTreeConjunction,
+  LogicTreeNodeKind,
+  LogicTreeNodeView,
+  LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import styles from './UiLogicTree.remote.example.module.less'
+import UiLogicTreeWorker from './UiLogicTree.remote.ts?worker'
+
+import { createRemoteStoryRender } from '../createRemoteStoryRender'
+import { UiLogicTree } from '../../src/remote/components/logic-tree'
+
+import page from './UiLogicTree.mdx'
+
+const demoControlKind = {
+  INPUT: 'input',
+  SELECT: 'select',
+} as const
+
+const demoIcon = {
+  FOLDER: 'folder',
+} as const
+
+type DemoControlKind = typeof demoControlKind[keyof typeof demoControlKind]
+type DemoIcon = typeof demoIcon[keyof typeof demoIcon]
+
+type DemoLogicTreeOption = {
+  id: string;
+  label: string;
+  value: string;
+}
+
+type DemoLogicTreeControl = {
+  id: string;
+  kind: DemoControlKind;
+  label: string;
+  options?: DemoLogicTreeOption[];
+  value: string;
+  width: number;
+}
+
+type DemoLogicTreeAction = {
+  id: string;
+  kind: Exclude<UiLogicTreeNode['kind'], LogicTreeNodeKind.BRANCH>;
+  label: string;
+}
+
+type DemoLogicTreeInlineText = {
+  id: string;
+  text: string;
+  tone?: LogicTreeTone | 'default' | 'muted';
+  separated?: boolean;
+}
+
+type DemoLogicTreeNodeData = {
+  title: string;
+  icon?: DemoIcon;
+  inline?: DemoLogicTreeInlineText[];
+  controls?: DemoLogicTreeControl[];
+  actions?: DemoLogicTreeAction[];
+  removable?: boolean;
+}
+
+type DemoLogicTreeData = UiLogicTreeNodeData<DemoLogicTreeNodeData>
+type DemoLogicTreeNode = UiLogicTreeNode<DemoLogicTreeNodeData>
+
+const inlineText = (
+  id: string,
+  text: string,
+  config: Omit<DemoLogicTreeInlineText, 'id' | 'text'> = {}
+): DemoLogicTreeInlineText => ({
+  id,
+  text,
+  ...config,
+})
+
+const selectControl = (
+  id: string,
+  label: string,
+  value: string,
+  width: number,
+  options: string[]
+) => ({
+  id,
+  kind: demoControlKind.SELECT,
+  label,
+  options: options.map((option, index) => ({
+    id: `${id}-${index + 1}`,
+    label: option,
+    value: option,
+  })),
+  value,
+  width,
+})
+
+const inputControl = (
+  id: string,
+  label: string,
+  value: string,
+  width: number
+) => ({
+  id,
+  kind: demoControlKind.INPUT,
+  label,
+  value,
+  width,
+})
+
+const groupedItemControls = (id: string) => ([
+  selectControl(
+    `${id}-type`,
+    'Тип доставки',
+    'Тип доставки',
+    260,
+    ['Тип доставки', 'Самовывоз', 'Курьер']
+  ),
+  selectControl(
+    `${id}-operator`,
+    'Равно',
+    'Равно',
+    140,
+    ['Равно', 'Не равно']
+  ),
+  inputControl(
+    `${id}-value`,
+    'Значение',
+    '',
+    260
+  ),
+])
+
+const summaryData = (
+  title: string,
+  config: Omit<DemoLogicTreeData, 'editable' | 'title' | 'view'> = {}
+): DemoLogicTreeData => ({
+  editable: false,
+  title,
+  view: LogicTreeNodeView.SUMMARY,
+  ...config,
+})
+
+const actionsData = (
+  title: string,
+  actions: NonNullable<DemoLogicTreeData['actions']>,
+  config: Omit<DemoLogicTreeData, 'actions' | 'editable' | 'title' | 'view'> = {}
+): DemoLogicTreeData => ({
+  actions,
+  editable: false,
+  title,
+  view: LogicTreeNodeView.ACTIONS,
+  ...config,
+})
+
+const conditionNode = (
+  id: string,
+  data: DemoLogicTreeData,
+  config: Omit<DemoLogicTreeNode, 'id' | 'kind' | 'data'> = {}
+): DemoLogicTreeNode => ({
+  id,
+  kind: LogicTreeNodeKind.CONDITION,
+  data,
+  ...config,
+})
+
+const groupNode = (
+  id: string,
+  data: DemoLogicTreeData,
+  config: Omit<DemoLogicTreeNode, 'id' | 'kind' | 'data'> = {}
+): DemoLogicTreeNode => ({
+  id,
+  kind: LogicTreeNodeKind.GROUP,
+  data,
+  ...config,
+})
+
+const branchNode = (
+  id: string,
+  data: DemoLogicTreeData,
+  config: Omit<DemoLogicTreeNode, 'id' | 'kind' | 'data'> = {}
+): DemoLogicTreeNode => ({
+  id,
+  kind: LogicTreeNodeKind.BRANCH,
+  data,
+  ...config,
+})
+
+const campaignTree: DemoLogicTreeNode[] = [
+  groupNode('campaign-root', summaryData('Корневая группа', {
+    controls: [
+      selectControl(
+        'interaction-edit-type',
+        'Тип доставки',
+        'Тип доставки',
+        260,
+        ['Тип доставки', 'Самовывоз', 'Курьер']
+      ),
+      selectControl(
+        'interaction-edit-operator',
+        'Равно',
+        'Равно',
+        140,
+        ['Равно', 'Не равно']
+      ),
+      selectControl(
+        'interaction-edit-value',
+        'SDEK',
+        'SDEK',
+        260,
+        ['SDEK', 'Boxberry']
+      ),
+    ],
+    removable: true,
+    disabled: true,
+    inline: [
+      inlineText('campaign-root-mode', 'Последовательное применение', { tone: LogicTreeTone.GREEN }),
+      inlineText('campaign-root-meta', 'До 5 000 ₽ скидки', { separated: true, tone: 'muted' }),
+    ],
+  }), {
+    tone: LogicTreeTone.GREEN,
+    children: [
+      groupNode('campaign-count', summaryData('8 акций', { disabled: true }), {
+        childrenView: LogicTreeChildrenView.GROUPED,
+        collapsible: true,
+        expanded: true,
+        children: [
+          conditionNode('campaign-count-item-1', summaryData('1. Название акции #1', {
+            controls: groupedItemControls('campaign-count-item-1'),
+            draggable: true,
+            inline: [
+              inlineText('campaign-count-item-1-meta', 'Бонусы', { tone: 'muted' }),
+            ],
+            removable: true,
+          })),
+          conditionNode('campaign-count-item-2', summaryData('2. Название акции #2', {
+            controls: groupedItemControls('campaign-count-item-2'),
+            draggable: true,
+            inline: [
+              inlineText('campaign-count-item-2-meta', 'Бонусы', { tone: 'muted' }),
+            ],
+            removable: true,
+          })),
+          conditionNode('campaign-count-item-3', summaryData('3. Название акции #3', {
+            controls: groupedItemControls('campaign-count-item-3'),
+            draggable: true,
+            inline: [
+              inlineText('campaign-count-item-3-meta', 'Бонусы', { tone: 'muted' }),
+            ],
+            removable: true,
+          }), {
+            conjunction: LogicTreeConjunction.AND,
+            tone: LogicTreeTone.BLUE,
+          }),
+          conditionNode('campaign-count-actions', actionsData('Добавить акцию', [
+            {
+              id: 'campaign-count-add-action',
+              kind: LogicTreeNodeKind.CONDITION,
+              label: 'Добавить акцию в группу',
+            },
+          ]), {
+            tone: LogicTreeTone.BLUE,
+          }),
+        ],
+      }),
+      groupNode('campaign-group-1', summaryData('Название группы #1', {
+        icon: demoIcon.FOLDER,
+        controls: [
+          selectControl('group-1-mode', 'Режим', 'Максимальная выгода', 220, ['Максимальная выгода', 'Последовательное применение']),
+          inputControl('group-1-meta', 'Описание', 'До 5 000 ₽ скидки', 260),
+        ],
+        inline: [
+          inlineText('campaign-group-1-mode', 'Максимальная выгода', { tone: LogicTreeTone.BLUE }),
+        ],
+        removable: true,
+      }), {
+        tone: LogicTreeTone.BLUE,
+        children: [
+          branchNode('campaign-group-1-count', summaryData('10 акций'), {
+            childrenView: LogicTreeChildrenView.GROUPED,
+            collapsible: true,
+            expanded: true,
+            children: [
+              conditionNode('campaign-group-1-actions', actionsData('Добавить акцию', [
+                {
+                  id: 'campaign-group-1-add-action',
+                  kind: LogicTreeNodeKind.CONDITION,
+                  label: 'Добавить акцию в группу',
+                },
+              ])),
+            ],
+          }),
+
+          groupNode('campaign-group-2', summaryData('Название группы #2', {
+            icon: demoIcon.FOLDER,
+            inline: [
+              inlineText('campaign-group-2-mode', 'Последовательное применение', { tone: LogicTreeTone.GREEN }),
+              inlineText('campaign-group-2-meta', 'До 5 000 ₽ оплата бонусами', { separated: true, tone: 'muted' }),
+            ],
+            removable: true,
+          }), {
+            tone: LogicTreeTone.GREEN,
+            children: [
+              branchNode('campaign-group-2-count', summaryData('12 акций'), {
+                childrenView: LogicTreeChildrenView.GROUPED,
+                collapsible: true,
+                expanded: true,
+                children: [
+                  conditionNode('campaign-group-2-actions', actionsData('Добавить акцию', [
+                    {
+                      id: 'campaign-group-2-add-action',
+                      kind: LogicTreeNodeKind.CONDITION,
+                      label: 'Добавить акцию в группу',
+                    },
+                  ])),
+                ],
+              }),
+
+              conditionNode('campaign-group-2-footer-action', actionsData('Добавить группу', [
+                {
+                  id: 'campaign-group-2-add-group',
+                  kind: LogicTreeNodeKind.GROUP,
+                  label: 'Группа',
+                },
+              ]), {
+                tone: LogicTreeTone.GREEN,
+              }),
+            ],
+          }),
+
+          groupNode('campaign-group-3', summaryData('Название группы #3', {
+            icon: demoIcon.FOLDER,
+            inline: [
+              inlineText('campaign-group-3-mode', 'Несовместимость', { tone: LogicTreeTone.RED }),
+            ],
+            removable: true,
+          }), {
+            tone: LogicTreeTone.RED,
+            children: [
+              branchNode('campaign-group-3-count', summaryData('5 акций'), {
+                childrenView: LogicTreeChildrenView.GROUPED,
+                collapsible: true,
+                expanded: true,
+                children: [
+                  conditionNode('campaign-group-3-item-1', summaryData('1. Название акции #1', {
+                    controls: groupedItemControls('campaign-group-3-item-1'),
+                    draggable: true,
+                    disabled: true,
+                    inline: [
+                      inlineText('campaign-group-3-item-1-meta', 'Бонусы', { tone: 'muted' }),
+                    ],
+                    removable: true,
+                  })),
+
+                  conditionNode('campaign-group-3-item-2', summaryData('2. Название акции #2', {
+                    controls: groupedItemControls('campaign-group-3-item-2'),
+                    draggable: true,
+                    inline: [
+                      inlineText('campaign-group-3-item-2-meta', 'Бонусы', { tone: 'muted' }),
+                    ],
+                    removable: true,
+                  })),
+
+                  conditionNode('campaign-group-3-item-3', summaryData('3. Название акции #3', {
+                    controls: groupedItemControls('campaign-group-3-item-3'),
+                    draggable: true,
+                    inline: [
+                      inlineText('campaign-group-3-item-3-meta', 'Бонусы', { tone: 'muted' }),
+                    ],
+                    removable: true,
+                  })),
+
+                  conditionNode('campaign-group-3-actions', actionsData('Добавить акцию', [
+                    {
+                      id: 'campaign-group-3-add-action',
+                      kind: LogicTreeNodeKind.CONDITION,
+                      label: 'Добавить акцию в группу',
+                    },
+                  ])),
+                ],
+              }),
+
+              conditionNode('campaign-group-3-footer-action', actionsData('Добавить группу', [
+                {
+                  id: 'campaign-group-3-add-group',
+                  kind: LogicTreeNodeKind.GROUP,
+                  label: 'Группа',
+                },
+              ]), {
+                tone: LogicTreeTone.GREEN,
+              }),
+            ],
+          }),
+
+          conditionNode('campaign-group-1-footer-action', actionsData('Добавить группу', [
+            {
+              id: 'campaign-group-1-add-group',
+              kind: LogicTreeNodeKind.GROUP,
+              label: 'Группа',
+            },
+          ]), {
+            tone: LogicTreeTone.GREEN,
+          }),
+        ],
+      }),
+      conditionNode('campaign-root-footer-action', actionsData('Добавить группу', [
+        {
+          id: 'campaign-root-add-group',
+          kind: LogicTreeNodeKind.GROUP,
+          label: 'Группа',
+        },
+        {
+          id: 'campaign-root-add-condition',
+          kind: LogicTreeNodeKind.CONDITION,
+          label: 'Условие',
+        },
+      ]), {
+        tone: LogicTreeTone.GREEN,
+      }),
+    ],
+  }),
+]
+
+const segmentsEditingTree: DemoLogicTreeNode[] = [
+  groupNode('segments-root', summaryData('Клиенты', {
+    inline: [
+      inlineText('segments-root-operator', 'Есть такие'),
+    ],
+  }), {
+    tone: LogicTreeTone.GREY,
+    children: [
+      groupNode('segments-order', summaryData('Заказ клиента', {
+        inline: [
+          inlineText('segments-order-operator', 'Есть такие'),
+        ],
+      }), {
+        tone: LogicTreeTone.YELLOW,
+        children: [
+          groupNode('segments-messenger', summaryData('Способ оформления', {
+            inline: [
+              inlineText('segments-messenger-operator', 'Равно Мессенджер'),
+            ],
+          }), {
+            tone: LogicTreeTone.BLUE,
+            conjunction: LogicTreeConjunction.OR,
+            children: [
+              conditionNode('segments-messenger-phone', summaryData('Телефон', {
+                inline: [
+                  inlineText('segments-messenger-phone-operator', 'Есть'),
+                ],
+              }), {
+                conjunction: LogicTreeConjunction.AND,
+              }),
+              conditionNode('segments-messenger-actions', actionsData('Добавить в сегмент', [
+                {
+                  id: 'segments-messenger-add-condition',
+                  kind: LogicTreeNodeKind.CONDITION,
+                  label: 'Условие',
+                },
+                {
+                  id: 'segments-messenger-add-group',
+                  kind: LogicTreeNodeKind.GROUP,
+                  label: 'Группа',
+                },
+              ])),
+            ],
+          }),
+          groupNode('segments-site', {
+            ...summaryData('Способ оформления', {
+              controls: [
+                selectControl(
+                  'segments-site-type',
+                  'Способ оформления',
+                  'Способ оформления',
+                  252,
+                  ['Способ оформления', 'Телефон', 'Канал']
+                ),
+                selectControl(
+                  'segments-site-operator',
+                  'Равно',
+                  'Равно',
+                  160,
+                  ['Равно', 'Не равно', 'Есть такие']
+                ),
+                selectControl(
+                  'segments-site-value',
+                  'Сайт',
+                  'Сайт',
+                  252,
+                  ['Сайт', 'Мессенджер']
+                ),
+              ],
+              removable: true,
+            }),
+            editable: true,
+          }, {
+            tone: LogicTreeTone.BLUE,
+            children: [
+              conditionNode('segments-site-phone', summaryData('Телефон', {
+                inline: [
+                  inlineText('segments-site-phone-operator', 'Есть'),
+                ],
+              }), {
+                conjunction: LogicTreeConjunction.AND,
+              }),
+              conditionNode('segments-site-actions', actionsData('Добавить в сегмент', [
+                {
+                  id: 'segments-site-add-condition',
+                  kind: LogicTreeNodeKind.CONDITION,
+                  label: 'Условие',
+                },
+                {
+                  id: 'segments-site-add-group',
+                  kind: LogicTreeNodeKind.GROUP,
+                  label: 'Группа',
+                },
+              ])),
+            ],
+          }),
+          conditionNode('segments-order-actions', actionsData('Добавить в заказ', [
+            {
+              id: 'segments-order-add-condition',
+              kind: LogicTreeNodeKind.CONDITION,
+              label: 'Условие',
+            },
+            {
+              id: 'segments-order-add-group',
+              kind: LogicTreeNodeKind.GROUP,
+              label: 'Группа',
+            },
+          ]), {
+            tone: LogicTreeTone.YELLOW,
+          }),
+        ],
+      }),
+      conditionNode('segments-root-actions', actionsData('Добавить в корень', [
+        {
+          id: 'segments-root-add-condition',
+          kind: LogicTreeNodeKind.CONDITION,
+          label: 'Условие',
+        },
+        {
+          id: 'segments-root-add-group',
+          kind: LogicTreeNodeKind.GROUP,
+          label: 'Группа',
+        },
+      ]), {
+        tone: LogicTreeTone.GREY,
+      }),
+    ],
+  }),
+]
+
+const meta = {
+  title: 'Components/UiLogicTree',
+  component: UiLogicTree,
+  args: {
+    items: campaignTree,
+    styles,
+  },
+  argTypes: {
+    items: {
+      control: false,
+      table: {
+        category: 'props',
+        type: {
+          summary: 'UiLogicTreeNode[]',
+        },
+      },
+    },
+    styles: {
+      control: false,
+      table: {
+        disable: true,
+      },
+    },
+    'node:add': {
+      control: false,
+      table: { category: 'events' },
+    },
+    'node:edit': {
+      control: false,
+      table: { category: 'events' },
+    },
+    'node:remove': {
+      control: false,
+      table: { category: 'events' },
+    },
+  },
+  render: createRemoteStoryRender({
+    worker: UiLogicTreeWorker,
+  }),
+  parameters: {
+    docs: { page },
+    layout: 'padded',
+  },
+} satisfies Meta<typeof UiLogicTree>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const CampaignArbitrage: Story = {
+  args: {
+    items: campaignTree,
+  },
+}
+
+export const SegmentsEditing: Story = {
+  args: {
+    items: segmentsEditingTree,
+  },
+}
diff --git a/packages/v1-components/storybook/stories/UiPageHeader.stories.ts b/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
index d8de374a..12f4969a 100644
--- a/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
+++ b/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
@@ -1,14 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiButton from '@/host/components/button/UiButton.vue'
-import UiLink from '@/host/components/link/UiLink.vue'
-import UiPageHeaderTitle from '@/host/components/page-header/UiPageHeaderTitle.vue'
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiPopperTarget from '@/host/components/popper/UiPopperTarget.vue'
-import UiTooltip from '@/host/components/tooltip/UiTooltip.vue'
-
 import { UiPageHeader } from '@/remote/components/page-header'
 
 import UiPageHeaderWorker from './UiPageHeader.remote.ts?worker'
@@ -16,15 +7,6 @@ import UiPageHeaderWorker from './UiPageHeader.remote.ts?worker'
 import { createRemoteStoryRender } from '../createRemoteStoryRender'
 import page from './UiPageHeader.mdx'
 
-const provider = createProvider({
-  UiButton,
-  UiLink,
-  UiPageHeaderTitle,
-  UiPopperConnector,
-  UiPopperTarget,
-  UiTooltip,
-})
-
 const meta = {
   title: 'Components/UiPageHeader',
 
@@ -44,7 +26,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiPageHeaderWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts b/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
index 03d65f17..0aa0fb55 100644
--- a/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
+++ b/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
@@ -1,10 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiRadioSwitchOptionShell from '@/host/components/radio-switch/UiRadioSwitchOptionShell.vue'
-import UiRadioSwitchRoot from '@/host/components/radio-switch/UiRadioSwitchRoot.vue'
-
 import { APPEARANCE, SIZE } from '@/common/components/radio-switch'
 
 import { UiRadioSwitch } from '@/remote/components/radio-switch'
@@ -22,11 +17,6 @@ type UiRadioSwitchStoryExtras = {
 }
 type UiRadioSwitchStoryArgs = UiRadioSwitchProps & UiRadioSwitchStoryExtras
 
-const provider = createProvider({
-  UiRadioSwitchOptionShell,
-  UiRadioSwitchRoot,
-})
-
 const meta = {
   title: 'Components/UiRadioSwitch',
 
@@ -52,7 +42,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiRadioSwitchWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiSelect.stories.ts b/packages/v1-components/storybook/stories/UiSelect.stories.ts
index 6f40e55b..d54e03fb 100644
--- a/packages/v1-components/storybook/stories/UiSelect.stories.ts
+++ b/packages/v1-components/storybook/stories/UiSelect.stories.ts
@@ -1,14 +1,6 @@
 import type { Meta } from '@storybook/vue3'
 import type { StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiMenuItem from '@/host/components/menu/UiMenuItem.vue'
-import UiMenuItemGroup from '@/host/components/menu/UiMenuItemGroup.vue'
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiSelectPopper from '@/host/components/select/UiSelectPopper.vue'
-import UiSelectTrigger from '@/host/components/select/UiSelectTrigger.vue'
-
 import { PLACEMENT } from '@/common/components/select'
 import { SIZE } from '@/common/components/select'
 
@@ -19,14 +11,6 @@ import { createRemoteStoryRender } from '../createRemoteStoryRender'
 import { docsOnlyStory } from '../docsOnlyStory'
 import page from './UiSelect.mdx'
 
-const provider = createProvider({
-  UiMenuItem,
-  UiMenuItemGroup,
-  UiPopperConnector,
-  UiSelectPopper,
-  UiSelectTrigger,
-})
-
 const meta = {
   title: 'Components/UiSelect',
 
@@ -63,7 +47,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiSelectWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiTab.stories.ts b/packages/v1-components/storybook/stories/UiTab.stories.ts
index c5bfb574..962820dd 100644
--- a/packages/v1-components/storybook/stories/UiTab.stories.ts
+++ b/packages/v1-components/storybook/stories/UiTab.stories.ts
@@ -1,10 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiTab from '@/host/components/tab/UiTab.vue'
-import UiTabGroup from '@/host/components/tab/UiTabGroup.vue'
-
 import { APPEARANCE, SIZE } from '@/common/components/tab'
 
 import { UiTabGroup as RemoteUiTabGroup } from '@/remote/components/tab'
@@ -24,11 +19,6 @@ type UiTabStoryExtras = {
 }
 type UiTabStoryArgs = UiTabGroupProps & UiTabStoryExtras
 
-const provider = createProvider({
-  UiTab,
-  UiTabGroup,
-})
-
 const meta = {
   title: 'Components/UiTab',
 
@@ -59,7 +49,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiTabWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiTable.stories.ts b/packages/v1-components/storybook/stories/UiTable.stories.ts
index 745ca685..ae973e48 100644
--- a/packages/v1-components/storybook/stories/UiTable.stories.ts
+++ b/packages/v1-components/storybook/stories/UiTable.stories.ts
@@ -3,22 +3,6 @@ import './UiTable.stories.less'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiAvatar from '@/host/components/avatar/UiAvatar.vue'
-import UiCheckbox from '@/host/components/checkbox/UiCheckbox.vue'
-import UiLink from '@/host/components/link/UiLink.vue'
-import UiTableBodyCell from '@/host/components/table/UiTableBodyCell.vue'
-import UiTableCol from '@/host/components/table/UiTableCol.vue'
-import UiTableFooterButton from '@/host/components/table/UiTableFooterButton.vue'
-import UiTableFooterSection from '@/host/components/table/UiTableFooterSection.vue'
-import UiTableHeadCell from '@/host/components/table/UiTableHeadCell.vue'
-import UiTableRoot from '@/host/components/table/UiTableRoot.vue'
-import UiTableRow from '@/host/components/table/UiTableRow.vue'
-import UiTableSection from '@/host/components/table/UiTableSection.vue'
-import UiTableSorter from '@/host/components/table/UiTableSorter.vue'
-import UiTag from '@/host/components/tag/UiTag.vue'
-
 import { UiTable } from '../../src/remote/components/table'
 import UiTableReferenceWorker from './UiTable.reference.remote.ts?worker'
 import UiTableWorker from './UiTable.remote.ts?worker'
@@ -39,22 +23,6 @@ type UiTableStoryExtras = {
 }
 type UiTableStoryArgs = UiTableProps & UiTableStoryExtras
 
-const provider = createProvider({
-  UiAvatar,
-  UiCheckbox,
-  UiLink,
-  UiTableBodyCell,
-  UiTableCol,
-  UiTableFooterButton,
-  UiTableFooterSection,
-  UiTableHeadCell,
-  UiTableRoot,
-  UiTableRow,
-  UiTableSection,
-  UiTableSorter,
-  UiTag,
-})
-
 const meta = {
   title: 'Components/UiTable',
 
@@ -85,7 +53,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiTableWorker,
   }),
 
@@ -191,7 +158,6 @@ export const CampaignsOverview: Story = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiTableReferenceWorker,
   }),
 
diff --git a/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts b/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
index 869575a6..eab9a85d 100644
--- a/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
+++ b/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
@@ -1,10 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiToggleButton from '@/host/components/toggle-button/UiToggleButton.vue'
-import UiToggleGroupRoot from '@/host/components/toggle-group/UiToggleGroupRoot.vue'
-
 import { UiToggleButtonSize } from '@/common/components/toggle-button'
 
 import { UiToggleGroup } from '@/remote/components/toggle-group'
@@ -22,11 +17,6 @@ type UiToggleGroupStoryExtras = {
 }
 type UiToggleGroupStoryArgs = UiToggleGroupProps & UiToggleGroupStoryExtras
 
-const provider = createProvider({
-  UiToggleButton,
-  UiToggleGroupRoot,
-})
-
 const meta = {
   title: 'Components/UiToggleGroup',
 
@@ -48,7 +38,6 @@ const meta = {
   },
 
   render: createRemoteStoryRender({
-    provider,
     worker: UiToggleGroupWorker,
   }),
 
diff --git a/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts b/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts
new file mode 100644
index 00000000..6c4836d6
--- /dev/null
+++ b/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts
@@ -0,0 +1,369 @@
+import type {
+  UiLogicTreeNode,
+  UiLogicTreeNodeAddPayload,
+  UiLogicTreeNodeEditPayload,
+  UiLogicTreeNodeRemovePayload,
+  UiLogicTreeNodeSlotProps,
+  UiLogicTreeProperties,
+} from '@/common/components/logic-tree'
+
+import {
+  computed,
+  h,
+  ref,
+  watch,
+} from 'vue'
+
+import {
+  LogicTreeNodeKind,
+  LogicTreeNodeView,
+  LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import { UiLogicTree } from '@/remote/components/logic-tree'
+
+import { createComponentEndpoint } from '../../storybook/endpoint'
+
+const fixtureControlKind = {
+  SELECT: 'select',
+} as const
+
+type FixtureControlKind = typeof fixtureControlKind[keyof typeof fixtureControlKind]
+
+type FixtureOption = {
+  id: string;
+  label: string;
+  value: string;
+}
+
+type FixtureControl = {
+  clearable?: boolean;
+  id: string;
+  kind: FixtureControlKind;
+  label: string;
+  options?: FixtureOption[];
+  value?: string | null;
+}
+
+type FixtureAction = {
+  id: string;
+  kind: Exclude<UiLogicTreeNode['kind'], LogicTreeNodeKind.BRANCH>;
+  label: string;
+}
+
+type FixtureNodeData = {
+  actions?: FixtureAction[];
+  controls?: FixtureControl[];
+  removable?: boolean;
+  title: string;
+}
+
+type FixtureNode = UiLogicTreeNode<FixtureNodeData>
+type FixtureSlotProps = Omit<UiLogicTreeNodeSlotProps, 'node'> & {
+  node: FixtureNode;
+}
+
+type UiLogicTreeWorkerProps = UiLogicTreeProperties<FixtureNodeData>
+
+const toFixtureSlotProps = (slotProps: UiLogicTreeNodeSlotProps): FixtureSlotProps => (
+  slotProps as FixtureSlotProps
+)
+
+const cloneNodes = (nodes: FixtureNode[]): FixtureNode[] => nodes.map((node) => ({
+  ...node,
+  children: node.children ? cloneNodes(node.children) : undefined,
+  data: {
+    ...node.data,
+    actions: node.data.actions?.map((action) => ({ ...action })),
+    controls: node.data.controls?.map((control) => ({
+      ...control,
+      options: control.options?.map((option) => ({ ...option })),
+    })),
+  },
+}))
+
+const parsePathKey = (pathKey: string | null): number[] => (
+  pathKey
+    ? pathKey.split('.').filter(Boolean).map((segment) => Number(segment))
+    : []
+)
+
+const getBranchAtPath = (nodes: FixtureNode[], parentPath: number[]): FixtureNode[] | null => {
+  let branch = nodes
+
+  for (const index of parentPath) {
+    const node = branch[index]
+
+    if (!node?.children) {
+      return null
+    }
+
+    branch = node.children
+  }
+
+  return branch
+}
+
+const getNodeAtPath = (nodes: FixtureNode[], path: number[]): FixtureNode | null => {
+  const branch = getBranchAtPath(nodes, path.slice(0, -1))
+  const index = path.at(-1)
+
+  if (index === undefined) {
+    return null
+  }
+
+  return branch?.[index] ?? null
+}
+
+const findNodePath = (
+  nodes: FixtureNode[],
+  nodeId: string,
+  parentPath: number[] = []
+): number[] | null => {
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const path = [...parentPath, index]
+
+    if (node.id === nodeId) {
+      return path
+    }
+
+    if (node.children?.length) {
+      const nestedPath = findNodePath(node.children, nodeId, path)
+
+      if (nestedPath) {
+        return nestedPath
+      }
+    }
+  }
+
+  return null
+}
+
+let uid = 0
+
+const nextId = (prefix: string): string => {
+  uid += 1
+
+  return `${prefix}-${uid}`
+}
+
+const createActionNode = (): FixtureNode => ({
+  id: nextId('actions'),
+  kind: LogicTreeNodeKind.CONDITION,
+  data: {
+    actions: [
+      {
+        id: nextId('add-condition'),
+        kind: LogicTreeNodeKind.CONDITION,
+        label: 'Условие',
+      },
+      {
+        id: nextId('add-group'),
+        kind: LogicTreeNodeKind.GROUP,
+        label: 'Группа',
+      },
+    ],
+    editable: false,
+    title: 'Добавить',
+    view: LogicTreeNodeView.ACTIONS,
+  },
+  tone: LogicTreeTone.BLUE,
+})
+
+const createConditionNode = (title = 'Новое условие'): FixtureNode => ({
+  id: nextId('condition'),
+  kind: LogicTreeNodeKind.CONDITION,
+  data: {
+    controls: [
+      {
+        clearable: true,
+        id: nextId('value'),
+        kind: fixtureControlKind.SELECT,
+        label: 'Значение',
+        options: [
+          { id: nextId('option'), label: 'A', value: 'A' },
+          { id: nextId('option'), label: 'B', value: 'B' },
+        ],
+        value: 'A',
+      },
+    ],
+    editable: false,
+    removable: true,
+    title,
+    view: LogicTreeNodeView.SUMMARY,
+  },
+  tone: LogicTreeTone.BLUE,
+})
+
+const createGroupNode = (): FixtureNode => ({
+  children: [createActionNode()],
+  expanded: true,
+  id: nextId('group'),
+  kind: LogicTreeNodeKind.GROUP,
+  data: {
+    editable: false,
+    removable: true,
+    title: 'Новая группа',
+    view: LogicTreeNodeView.SUMMARY,
+  },
+  tone: LogicTreeTone.GREEN,
+})
+
+createComponentEndpoint<UiLogicTreeWorkerProps>({
+  async run (createApp, root, props) {
+    const app = createApp({
+      setup () {
+        const items = ref<FixtureNode[]>([])
+        const controlActionCount = ref(0)
+        const controlledInfo = computed(() => [
+          `nodes:${items.value.length}`,
+          `control-actions:${controlActionCount.value}`,
+        ].join(' '))
+
+        const mutateItems = (mutator: (nextItems: FixtureNode[]) => void) => {
+          const nextItems = cloneNodes(items.value)
+
+          mutator(nextItems)
+          items.value = nextItems
+        }
+
+        const handleNodeAdd = (payload: UiLogicTreeNodeAddPayload) => {
+          mutateItems((nextItems) => {
+            const triggerPath = findNodePath(nextItems, payload.triggerNodeId)
+            const branch = getBranchAtPath(nextItems, parsePathKey(payload.parentPathKey))
+            const actionIndex = triggerPath?.at(-1)
+
+            if (!triggerPath || !branch || actionIndex === undefined) {
+              return
+            }
+
+            const nextNode = payload.kind === LogicTreeNodeKind.GROUP
+              ? createGroupNode()
+              : createConditionNode()
+
+            branch.splice(actionIndex, 0, nextNode)
+          })
+        }
+
+        const handleNodeEdit = (payload: UiLogicTreeNodeEditPayload) => {
+          mutateItems((nextItems) => {
+            const node = getNodeAtPath(nextItems, parsePathKey(payload.pathKey))
+            const control = node?.data.controls?.find((item) => item.id === payload.controlId)
+
+            if (control) {
+              control.value = payload.value
+            }
+          })
+        }
+
+        const handleNodeRemove = (payload: UiLogicTreeNodeRemovePayload) => {
+          mutateItems((nextItems) => {
+            const branch = getBranchAtPath(nextItems, parsePathKey(payload.parentPathKey))
+
+            if (!branch || payload.index < 0 || payload.index >= branch.length) {
+              return
+            }
+
+            branch.splice(payload.index, 1)
+          })
+        }
+
+        const handleControlAction = () => {
+          controlActionCount.value += 1
+        }
+
+        const renderSummary = (slotProps: FixtureSlotProps) => h('div', {
+          'data-test': `summary-${slotProps.node.id}`,
+        }, slotProps.node.data.title)
+
+        const renderEdit = (slotProps: FixtureSlotProps) => h('div', {
+          'data-test': `edit-${slotProps.node.id}`,
+        }, [
+          ...(slotProps.node.data.controls ?? []).flatMap((control) => [
+            h('span', {
+              'data-test': `value-${control.id}`,
+              key: `${control.id}-value`,
+            }, control.value === null ? 'null' : String(control.value ?? 'empty')),
+            h('button', {
+              'data-skip-node-click': 'true',
+              'data-test': `clear-${control.id}`,
+              key: `${control.id}-clear`,
+              onClick: () => {
+                slotProps.onControlUpdate(control.id, null)
+              },
+            }, 'clear'),
+            h('button', {
+              'data-skip-node-click': 'true',
+              'data-test': `action-${control.id}`,
+              key: `${control.id}-action`,
+              onClick: () => {
+                slotProps.onControlAction(control.id)
+              },
+            }, 'action'),
+          ]),
+        ])
+
+        const renderActions = (slotProps: FixtureSlotProps) => (
+          slotProps.node.data.actions ?? []
+        ).map((action) => h('button', {
+          'data-skip-node-click': 'true',
+          'data-test': `action-${action.id}`,
+          key: action.id,
+          onClick: () => {
+            slotProps.onAction(action.id, action.kind)
+          },
+        }, action.label))
+
+        const renderTrailing = (slotProps: FixtureSlotProps) => slotProps.node.data.removable
+          ? h('button', {
+            'data-skip-node-click': 'true',
+            'data-test': `remove-${slotProps.node.id}`,
+            onClick: slotProps.onRemove,
+          }, 'remove')
+          : null
+
+        const renderNode = (slotProps: FixtureSlotProps) => {
+          if (slotProps.nodeView === LogicTreeNodeView.ACTIONS) {
+            return renderActions(slotProps)
+          }
+
+          if (slotProps.editing) {
+            return renderEdit(slotProps)
+          }
+
+          return renderSummary(slotProps)
+        }
+
+        watch(() => props.items, (nextItems) => {
+          items.value = cloneNodes(nextItems ?? [])
+        }, { deep: true, immediate: true })
+
+        return () => h('div', {
+          'data-test': 'logic-tree-fixture',
+        }, [
+          h('div', {
+            'data-test': 'controlled-info',
+          }, controlledInfo.value),
+          h(UiLogicTree, {
+            onControlAction: handleControlAction,
+            'onNode:add': handleNodeAdd,
+            'onNode:edit': handleNodeEdit,
+            'onNode:remove': handleNodeRemove,
+            'onUpdate:items': (nextItems: FixtureNode[]) => {
+              items.value = cloneNodes(nextItems)
+            },
+            items: items.value,
+          }, {
+            'node': (slotProps: UiLogicTreeNodeSlotProps) => renderNode(toFixtureSlotProps(slotProps)),
+            'node-trailing': (slotProps: UiLogicTreeNodeSlotProps) => renderTrailing(toFixtureSlotProps(slotProps)),
+          }),
+        ])
+      },
+    })
+
+    app.mount(root)
+
+    return () => app.unmount()
+  },
+}, self as unknown as Worker)
diff --git a/packages/v1-components/tests/host/components/logic-tree-node.test.ts b/packages/v1-components/tests/host/components/logic-tree-node.test.ts
new file mode 100644
index 00000000..30329e0f
--- /dev/null
+++ b/packages/v1-components/tests/host/components/logic-tree-node.test.ts
@@ -0,0 +1,95 @@
+import type { VueWrapper } from '@vue/test-utils'
+
+import {
+  afterEach,
+  describe,
+  expect,
+  test,
+} from 'vitest'
+
+import { mount } from '@vue/test-utils'
+
+import UiLogicTreeNode from '@/host/components/logic-tree/UiLogicTreeNode.vue'
+
+import { LogicTreeConjunction, LogicTreeTone } from '@/common/components/logic-tree'
+
+describe('host/components/logic-tree-node', () => {
+  let wrapper: VueWrapper | null = null
+
+  const createComponent = (props = {}, slots = {}) => {
+    wrapper = mount(UiLogicTreeNode, {
+      props,
+      slots: {
+        ...slots,
+        content: '<span>Node content</span>',
+        trailing: '<button type="button">remove</button>',
+      },
+    })
+  }
+
+  afterEach(() => {
+    wrapper?.unmount()
+    wrapper = null
+  })
+
+  test('emits node activation events for enabled nodes', async () => {
+    createComponent({
+      pathKey: '0.1',
+    })
+
+    await wrapper?.find('.ui-v1-logic-tree__surface-node-content').trigger('click')
+
+    expect(wrapper?.emitted('node-click')).toEqual([['0.1']])
+    expect(wrapper?.emitted('node-edit')).toEqual([[true]])
+  })
+
+  test('renders disabled node as non-interactive', async () => {
+    createComponent({
+      disabled: true,
+      pathKey: '0.1',
+    })
+
+    const node = wrapper?.find('.ui-v1-logic-tree__surface-node-content')
+
+    expect(node?.classes()).toContain('ui-v1-logic-tree__surface-node-content_disabled')
+    expect(node?.attributes('aria-disabled')).toBe('true')
+    expect(node?.attributes('role')).toBe('button')
+    expect(node?.attributes('tabindex')).toBeUndefined()
+
+    await node?.trigger('click')
+    await node?.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper?.emitted('node-click')).toBeUndefined()
+    expect(wrapper?.emitted('node-edit')).toBeUndefined()
+  })
+
+  test('renders conjunction as a popper target with consumer poppers slot', async () => {
+    createComponent({
+      conjunction: LogicTreeConjunction.AND,
+      conjunctionLabel: 'AND',
+      conjunctionTone: LogicTreeTone.BLUE,
+      connectors: [
+        {
+          continues: false,
+          tone: LogicTreeTone.BLUE,
+          visible: true,
+        },
+      ],
+      pathKey: '0.1',
+    }, {
+      'conjunction-poppers': '<span data-test-id="conjunction-popper">Popper content</span>',
+    })
+
+    const target = wrapper?.find('.ui-v1-logic-tree__relation-badge')
+
+    expect(target?.element.tagName).toBe('BUTTON')
+    expect(target?.attributes('type')).toBe('button')
+    expect(target?.text()).toBe('AND')
+    expect(wrapper?.find('[data-test-id="conjunction-popper"]').exists()).toBe(true)
+
+    await target?.trigger('click')
+
+    expect(wrapper?.emitted('node-click')).toBeUndefined()
+    expect(wrapper?.emitted('node-edit')).toBeUndefined()
+  })
+})
diff --git a/packages/v1-components/tests/logic-tree.worker.e2e.ts b/packages/v1-components/tests/logic-tree.worker.e2e.ts
new file mode 100644
index 00000000..ff7f10f2
--- /dev/null
+++ b/packages/v1-components/tests/logic-tree.worker.e2e.ts
@@ -0,0 +1,328 @@
+import type { Channel } from '@omnicajs/vue-remote/remote'
+import type { Receiver } from '@omnicajs/vue-remote/host'
+import type { UiLogicTreeNode } from '@/common/components/logic-tree'
+
+import {
+  afterEach,
+  beforeEach,
+  expect,
+  test,
+} from 'vitest'
+
+import { createApp } from 'vue'
+import { createReceiver } from '@omnicajs/vue-remote/host'
+import { createEndpoint as createRpcEndpoint } from '@remote-ui/rpc'
+import { flushPromises } from '@vue/test-utils'
+import { h } from 'vue'
+import { HostedTree } from '@omnicajs/vue-remote/host'
+
+import {
+  LogicTreeNodeKind,
+  LogicTreeNodeView,
+  LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import { storybookHostProvider } from '../storybook/provider'
+
+type FixtureNodeData = {
+  actions?: Array<{
+    id: string;
+    kind: Exclude<UiLogicTreeNode['kind'], LogicTreeNodeKind.BRANCH>;
+    label: string;
+  }>;
+  controls?: Array<{
+    clearable?: boolean;
+    id: string;
+    kind: 'select';
+    label: string;
+    options?: Array<{
+      id: string;
+      label: string;
+      value: string;
+    }>;
+    value?: string | null;
+  }>;
+  removable?: boolean;
+  title: string;
+}
+
+type FixtureNode = UiLogicTreeNode<FixtureNodeData>
+
+type WorkerApi = {
+  run (channel: Channel, props?: { items?: FixtureNode[] }): Promise<void>;
+  release (): void;
+}
+
+function createHostApp (receiver: Receiver) {
+  return createApp({
+    setup () {
+      return () => h(HostedTree, {
+        provider: storybookHostProvider,
+        receiver,
+      })
+    },
+  })
+}
+
+async function flushRuntime (receiver: Receiver) {
+  await receiver.flush()
+  await flushPromises()
+}
+
+async function waitFor<T> (
+  receiver: Receiver,
+  resolver: () => T | null | undefined,
+  message: string
+): Promise<T> {
+  for (let i = 0; i < 60; i += 1) {
+    const value = resolver()
+
+    if (value) {
+      return value
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 10))
+    await flushRuntime(receiver)
+  }
+
+  throw new Error(message)
+}
+
+let mountRoot: HTMLElement | null = null
+
+beforeEach(() => {
+  mountRoot = document.createElement('div')
+  document.body.appendChild(mountRoot)
+})
+
+afterEach(() => {
+  mountRoot?.remove()
+  mountRoot = null
+})
+
+test('worker keeps add/edit/remove controlled and supports keyboard activation', async () => {
+  const worker = new Worker(new URL('./__fixtures__/logic-tree.worker.ts', import.meta.url), { type: 'module' })
+  const host = createRpcEndpoint<WorkerApi>(worker)
+  const receiver = createReceiver()
+  const mount = document.createElement('div')
+
+  const items: FixtureNode[] = [
+    {
+      id: 'condition-root',
+      kind: LogicTreeNodeKind.CONDITION,
+      data: {
+        controls: [
+          {
+            clearable: true,
+            id: 'condition-root-control',
+            kind: 'select',
+            label: 'Значение',
+            options: [
+              { id: 'condition-root-control-option-a', label: 'A', value: 'A' },
+              { id: 'condition-root-control-option-b', label: 'B', value: 'B' },
+            ],
+            value: 'A',
+          },
+        ],
+        editable: false,
+        removable: false,
+        title: 'Узел 1',
+        view: LogicTreeNodeView.SUMMARY,
+      },
+      tone: LogicTreeTone.BLUE,
+    },
+    {
+      id: 'actions-root',
+      kind: LogicTreeNodeKind.CONDITION,
+      data: {
+        actions: [
+          {
+            id: 'action-add-condition',
+            kind: LogicTreeNodeKind.CONDITION,
+            label: 'Условие',
+          },
+          {
+            id: 'action-add-group',
+            kind: LogicTreeNodeKind.GROUP,
+            label: 'Группа',
+          },
+        ],
+        editable: false,
+        title: 'Добавить',
+        view: LogicTreeNodeView.ACTIONS,
+      },
+      tone: LogicTreeTone.BLUE,
+    },
+    {
+      children: [
+        {
+          id: 'group-root-child',
+          kind: LogicTreeNodeKind.CONDITION,
+          data: {
+            editable: false,
+            removable: false,
+            title: 'Акция внутри группы',
+            view: LogicTreeNodeView.SUMMARY,
+          },
+          tone: LogicTreeTone.GREEN,
+        },
+      ],
+      collapsible: true,
+      expanded: true,
+      id: 'group-root',
+      kind: LogicTreeNodeKind.GROUP,
+      data: {
+        editable: false,
+        removable: false,
+        title: '2 акции',
+        view: LogicTreeNodeView.SUMMARY,
+      },
+      tone: LogicTreeTone.GREEN,
+    },
+  ]
+
+  mountRoot?.appendChild(mount)
+  createHostApp(receiver).mount(mount)
+
+  try {
+    await host.call.run(receiver.receive, { items })
+    await flushRuntime(receiver)
+
+    const nodeSurface = await waitFor(
+      receiver,
+      () => mount.querySelector('[data-path-key="0"] .ui-v1-logic-tree__surface-node-content') as HTMLElement | null,
+      'Timed out waiting for first logic-tree node'
+    )
+
+    const groupSurface = await waitFor(
+      receiver,
+      () => mount.querySelector('[data-path-key="2"] .ui-v1-logic-tree__surface-node-content') as HTMLElement | null,
+      'Timed out waiting for collapsible logic-tree node'
+    )
+
+    expect(mount.querySelector('[data-test="summary-group-root"]')?.textContent).toContain('2 акции')
+    expect(mount.querySelector('[data-test="summary-group-root-child"]')?.textContent).toContain('Акция внутри группы')
+
+    groupSurface.click()
+    await flushRuntime(receiver)
+
+    expect(mount.querySelector('[data-test="summary-group-root"]')?.textContent).toContain('2 акции')
+    expect(mount.querySelector('[data-test="edit-group-root"]')).toBeNull()
+
+    await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="summary-group-root-child"]') === null
+        ? mount.querySelector('[data-test="logic-tree-fixture"]')
+        : null,
+      'Timed out waiting for collapsible node to collapse'
+    )
+
+    nodeSurface.focus()
+    nodeSurface.dispatchEvent(new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key: 'Enter',
+    }))
+
+    await flushRuntime(receiver)
+
+    const editNode = await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="edit-condition-root"]') as HTMLElement | null,
+      'Timed out waiting for edit node after Enter key'
+    )
+
+    expect(editNode.textContent).toContain('A')
+
+    const clearButton = mount.querySelector('[data-test="clear-condition-root-control"]')
+
+    if (!(clearButton instanceof HTMLButtonElement)) {
+      throw new Error('Expected clear button to exist')
+    }
+
+    clearButton.click()
+    await flushRuntime(receiver)
+
+    await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="value-condition-root-control"]')?.textContent === 'null'
+        ? mount.querySelector('[data-test="value-condition-root-control"]')
+        : null,
+      'Timed out waiting for null control value'
+    )
+
+    document.body.click()
+    await flushRuntime(receiver)
+
+    nodeSurface.focus()
+    nodeSurface.dispatchEvent(new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key: ' ',
+    }))
+
+    await flushRuntime(receiver)
+
+    await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="edit-condition-root"]') as HTMLElement | null,
+      'Timed out waiting for edit node after Space key'
+    )
+
+    const addConditionButton = mount.querySelector('[data-test="action-action-add-condition"]')
+
+    if (!(addConditionButton instanceof HTMLButtonElement)) {
+      throw new Error('Expected add condition button to exist')
+    }
+
+    addConditionButton.click()
+    await flushRuntime(receiver)
+
+    await waitFor(
+      receiver,
+      () => Array.from(mount.querySelectorAll('[data-test^="summary-"]'))
+        .find((node) => node.textContent?.includes('Новое условие')) as HTMLElement | null,
+      'Timed out waiting for added condition node'
+    )
+
+    const addGroupButton = await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="action-action-add-group"]') as HTMLButtonElement | null,
+      'Timed out waiting for add group button'
+    )
+
+    addGroupButton.click()
+    await flushRuntime(receiver)
+
+    await waitFor(
+      receiver,
+      () => Array.from(mount.querySelectorAll('[data-test^="summary-"]'))
+        .find((node) => node.textContent?.includes('Новая группа')) as HTMLElement | null,
+      'Timed out waiting for added group node'
+    )
+
+    const addedConditionRemoveButton = await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="remove-condition-1"]') as HTMLButtonElement | null,
+      'Timed out waiting for remove button on added condition'
+    )
+
+    addedConditionRemoveButton.click()
+    await flushRuntime(receiver)
+
+    await waitFor(
+      receiver,
+      () => mount.querySelector('[data-test="remove-condition-1"]') === null
+        ? mount.querySelector('[data-test="logic-tree-fixture"]')
+        : null,
+      'Timed out waiting for added condition removal'
+    )
+
+    expect(
+      Array.from(mount.querySelectorAll('[data-test^="summary-"]')).some((node) => node.textContent?.includes('Новая группа'))
+    ).toBe(true)
+  } finally {
+    await host.call.release()
+    worker.terminate()
+  }
+})

From 8fb99d9f89a6ecc754998c9a1539dccd61c180f0 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Thu, 30 Apr 2026 18:23:34 +0400
Subject: [PATCH 3/3] fix(v1-components): Storybook serve allowed hosts were
 updated

---
 packages/v1-components/storybook/main.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/v1-components/storybook/main.ts b/packages/v1-components/storybook/main.ts
index b64c684e..5351986c 100644
--- a/packages/v1-components/storybook/main.ts
+++ b/packages/v1-components/storybook/main.ts
@@ -19,6 +19,7 @@ function getAbsolutePath(value: string): string {
 }
 
 const isDevelopment = process.env.NODE_ENV === 'development'
+const allowedHosts = ['v1.embed-ui.local', 'v1.embed-ui.test']
 
 export default defineMain({
   addons: [
@@ -37,7 +38,7 @@ export default defineMain({
     },
   ],
   core: {
-    allowedHosts: ['v1.embed-ui.local'],
+    allowedHosts,
     builder: {
       name: '@storybook/builder-vite',
       options: {
@@ -56,7 +57,7 @@ export default defineMain({
   ],
   viteFinal: async (config) => {
     if (config.server) {
-      config.server.allowedHosts = true
+      config.server.allowedHosts = allowedHosts
       config.server.hmr.clientPort = 80
     }
     return config