From 93e46e535560a558646c253e506605659b6a50f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9A=D1=80=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2?= <kretov@retailcrm.ru>
Date: Tue, 13 Jan 2026 18:20:38 +0300
Subject: [PATCH 1/9] feat(v1-components): UiSelect, UiMenuItem components
 added

* UiMenuItem, UiSelectTrigger, UiSelectPopper on host - can be used to create alternative UiSelect if needed
* UiSelect, UiSelectOption, UiSelectOptionGroup on remote
---
 .../assets/stylesheets/motion.less            |   1 +
 .../assets/stylesheets/typography.less        |   9 +
 .../src/common/components/menu.ts             |  30 ++
 .../src/common/components/select.ts           | 111 ++++++
 packages/v1-components/src/host.ts            |   6 +-
 .../src/host/components/menu/UiMenuItem.vue   | 161 +++++++++
 .../host/components/menu/UiMenuItem.vue.d.ts  |   9 +
 .../host/components/menu/UiMenuItemGroup.vue  |  42 +++
 .../components/menu/UiMenuItemGroup.vue.d.ts  |   6 +
 .../src/host/components/menu/menu.less        | 204 +++++++++++
 .../src/host/components/popper/UiPopper.vue   |   5 +
 .../host/components/select/UiSelectPopper.vue | 206 +++++++++++
 .../components/select/UiSelectPopper.vue.d.ts |  14 +
 .../components/select/UiSelectTrigger.vue     | 279 +++++++++++++++
 .../select/UiSelectTrigger.vue.d.ts           |  13 +
 .../src/host/components/select/i18n.ts        |  13 +
 .../host/components/select/i18n/en-GB.json    |   7 +
 .../host/components/select/i18n/es-ES.json    |   7 +
 .../host/components/select/i18n/ru-RU.json    |   7 +
 .../src/host/components/select/injection.ts   |  34 ++
 .../src/host/components/select/select.less    | 124 +++++++
 .../src/host/components/textbox/textbox.less  |  18 +-
 packages/v1-components/src/remote.ts          |   2 +
 .../src/remote/components/menu.ts             |  38 ++
 .../src/remote/components/select/UiSelect.vue | 338 ++++++++++++++++++
 .../components/select/UiSelectOption.vue      | 223 ++++++++++++
 .../components/select/UiSelectOptionGroup.vue | 156 ++++++++
 .../select/UiSelectOptionGroupHeader.vue      |  26 ++
 .../src/remote/components/select/index.ts     |   3 +
 .../src/remote/components/select/parts.ts     |  78 ++++
 packages/v1-components/storybook/endpoint.ts  | 107 ++++++
 .../storybook/stories/UiMenuItem.example.vue  |  88 +++++
 .../storybook/stories/UiMenuItem.mdx          |  44 +++
 .../storybook/stories/UiMenuItem.stories.ts   |  60 ++++
 .../storybook/stories/UiSelect.mdx            |   3 +
 .../storybook/stories/UiSelect.remote.ts      |  73 ++++
 .../storybook/stories/UiSelect.stories.ts     | 120 +++++++
 .../v1-components/storybook/tsconfig.json     |   6 +-
 38 files changed, 2667 insertions(+), 4 deletions(-)
 create mode 100644 packages/v1-components/assets/stylesheets/motion.less
 create mode 100644 packages/v1-components/src/common/components/menu.ts
 create mode 100644 packages/v1-components/src/common/components/select.ts
 create mode 100644 packages/v1-components/src/host/components/menu/UiMenuItem.vue
 create mode 100644 packages/v1-components/src/host/components/menu/UiMenuItem.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue
 create mode 100644 packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/menu/menu.less
 create mode 100644 packages/v1-components/src/host/components/select/UiSelectPopper.vue
 create mode 100644 packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/select/UiSelectTrigger.vue
 create mode 100644 packages/v1-components/src/host/components/select/UiSelectTrigger.vue.d.ts
 create mode 100644 packages/v1-components/src/host/components/select/i18n.ts
 create mode 100644 packages/v1-components/src/host/components/select/i18n/en-GB.json
 create mode 100644 packages/v1-components/src/host/components/select/i18n/es-ES.json
 create mode 100644 packages/v1-components/src/host/components/select/i18n/ru-RU.json
 create mode 100644 packages/v1-components/src/host/components/select/injection.ts
 create mode 100644 packages/v1-components/src/host/components/select/select.less
 create mode 100644 packages/v1-components/src/remote/components/menu.ts
 create mode 100644 packages/v1-components/src/remote/components/select/UiSelect.vue
 create mode 100644 packages/v1-components/src/remote/components/select/UiSelectOption.vue
 create mode 100644 packages/v1-components/src/remote/components/select/UiSelectOptionGroup.vue
 create mode 100644 packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
 create mode 100644 packages/v1-components/src/remote/components/select/index.ts
 create mode 100644 packages/v1-components/src/remote/components/select/parts.ts
 create mode 100644 packages/v1-components/storybook/endpoint.ts
 create mode 100644 packages/v1-components/storybook/stories/UiMenuItem.example.vue
 create mode 100644 packages/v1-components/storybook/stories/UiMenuItem.mdx
 create mode 100644 packages/v1-components/storybook/stories/UiMenuItem.stories.ts
 create mode 100644 packages/v1-components/storybook/stories/UiSelect.mdx
 create mode 100644 packages/v1-components/storybook/stories/UiSelect.remote.ts
 create mode 100644 packages/v1-components/storybook/stories/UiSelect.stories.ts

diff --git a/packages/v1-components/assets/stylesheets/motion.less b/packages/v1-components/assets/stylesheets/motion.less
new file mode 100644
index 00000000..30866886
--- /dev/null
+++ b/packages/v1-components/assets/stylesheets/motion.less
@@ -0,0 +1 @@
+@transition: 0.25s ease;
\ No newline at end of file
diff --git a/packages/v1-components/assets/stylesheets/typography.less b/packages/v1-components/assets/stylesheets/typography.less
index 2ff34301..0f835c38 100644
--- a/packages/v1-components/assets/stylesheets/typography.less
+++ b/packages/v1-components/assets/stylesheets/typography.less
@@ -8,6 +8,9 @@
 @font-size-small: 14px;
 @font-size-tiny: 12px;
 
+@font-weight-accent: 500;
+@font-weight-normal: 400;
+
 @line-height-h1: 44px;
 @line-height-h2: 32px;
 @line-height-h3: 32px;
@@ -42,3 +45,9 @@
 
 .text-tiny        (@lh: (14/12)) { .text(400, @font-size-tiny, @lh); }
 .text-tiny-accent (@lh: (14/12)) { .text(500, @font-size-tiny, @lh); }
+
+.ellipsis () {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/packages/v1-components/src/common/components/menu.ts b/packages/v1-components/src/common/components/menu.ts
new file mode 100644
index 00000000..af7a3166
--- /dev/null
+++ b/packages/v1-components/src/common/components/menu.ts
@@ -0,0 +1,30 @@
+export enum SIZE {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+export type UiMenuItemProperties = {
+    description?: string;
+    counter?: string | number | null;
+    accent?: boolean;
+    active?: boolean;
+    danger?: boolean;
+    ticker?: boolean;
+    simple?: boolean;
+    size?: `${SIZE}`;
+    disabled?: boolean;
+}
+
+type StyleDeclaration = CSSStyleDeclaration & {
+    '--delta-width': string
+}
+
+export const deltaTransition = (el: HTMLElement): Partial<StyleDeclaration> => {
+  const delta = el.scrollWidth - el.clientWidth
+  return delta !== 0 ? {
+    '--delta-width': `-${delta}px`,
+    animationDuration: `${delta * 15}ms`,
+  } : {}
+}
diff --git a/packages/v1-components/src/common/components/select.ts b/packages/v1-components/src/common/components/select.ts
new file mode 100644
index 00000000..5b63cfb0
--- /dev/null
+++ b/packages/v1-components/src/common/components/select.ts
@@ -0,0 +1,111 @@
+import type { Alignment } from '@floating-ui/dom'
+import type { PlacementOptions } from '@/common/components/popper'
+import type { Side } from '@floating-ui/dom'
+import type { Trigger } from '@/common/components/popper'
+import type { TriggerSchema } from '@/common/components/popper'
+import type { UiPopperProperties } from '@/common/components/popper'
+
+export enum SIZE {
+  XS = 'xs',
+  SM = 'sm',
+  XL = 'xl',
+}
+
+export enum PLACEMENT {
+  TOP = 'top',
+  TOP_START = 'top-start',
+  TOP_END = 'top-end',
+  BOTTOM = 'bottom',
+  BOTTOM_START = 'bottom-start',
+  BOTTOM_END = 'bottom-end',
+  LEFT = 'left',
+  LEFT_START = 'left-start',
+}
+
+export type Option = {
+  id: string;
+  value: unknown;
+  label: string;
+  isMatched (): boolean;
+}
+
+export type UiSelectTriggerProperties = {
+    value?: unknown|unknown[];
+    clearable?: boolean;
+    filter?: string;
+    invalid?: boolean;
+    multiple?: boolean;
+    opened?: boolean;
+    expanded?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    onlyPlaceholder?: boolean;
+    inputSize?: SIZE | `${SIZE}`;
+}
+
+export type UiSelectTriggerMethods = {
+  open (): void;
+  close (): void;
+  onClick (): void;
+  onInput (event: Event): void;
+  onFocus (event: Event): void;
+  onBlur (event: Event): void;
+  onClear (event: MouseEvent): void;
+}
+
+export type UiSelectPopperProperties = {
+    opened?: boolean;
+    targetTriggers?: Trigger[] | TriggerSchema;
+    popperTriggers?: Trigger[] | TriggerSchema;
+    popperFitTrigger?: boolean;
+    placement?: Side | `${Side}-${Alignment}` | PlacementOptions;
+    popperClass?: string;
+    popperOptions?: Omit<UiPopperProperties, 'placement' | 'shown' | 'target' | 'triggers'>;
+    disabled?: boolean;
+    readonly?: boolean;
+    multiple?: boolean;
+    ticker?: boolean;
+}
+
+export type UiSelectPopperMethods = {
+  autoScroll (): void;
+  updateWidth (): void;
+}
+
+export type UiSelectOptionProperties = {
+  value: unknown | unknown[];
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  multiple?: boolean;
+  active?: boolean;
+  size?: SIZE | `${SIZE}`;
+  counter?: string | number | null;
+  accent?: boolean;
+}
+
+const escapeSpecialSymbols = (text: string): string => text.replace(
+  /([\\^$.*+?()[\]{}|=!<>:-])/g,
+  '\\$1'
+)
+
+/**
+ * @param text Текст, в котором ищем слово
+ * @param term Подсвечиваемое слово
+ * @param style Стиль подсветки
+ * @return Исходный текст со вставками span тегов в местах, где встречается слово term
+ */
+export const highlight = (text: string, term: string, style: string): string => text.replace(
+  new RegExp(`(${escapeSpecialSymbols(term)})`, 'gi'),
+  `<span style="${style}">$1</span>`
+)
+
+let counter = 0
+
+/**
+ * @param prefix
+ * @return Идентификатор, уникальный в рамках генерируемой функцией последовательности
+ */
+export const uid = (prefix = 'ui-v1-select') => `${prefix}-${++counter}`
diff --git a/packages/v1-components/src/host.ts b/packages/v1-components/src/host.ts
index 999a17f7..53e464d3 100644
--- a/packages/v1-components/src/host.ts
+++ b/packages/v1-components/src/host.ts
@@ -8,20 +8,24 @@ export { default as UiError } from '@/host/components/error/UiError.vue'
 export { default as UiImage } from '@/host/components/image/UiImage.vue'
 export { default as UiLink } from '@/host/components/link/UiLink.vue'
 export { default as UiLoader } from '@/host/components/loader/UiLoader.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'
 export { default as UiModalWindow } from '@/host/components/modal-window/UiModalWindow.vue'
 export { default as UiModalWindowSurface } from '@/host/components/modal-window/UiModalWindowSurface.vue'
 export { default as UiPopper } from '@/host/components/popper/UiPopper.vue'
 export { default as UiPopperConnector } from '@/host/components/popper/UiPopperConnector.vue'
 export { default as UiPopperTarget } from '@/host/components/popper/UiPopperTarget.vue'
-export { default as UiTooltip } from '@/host/components/tooltip/UiTooltip.vue'
 export { default as UiRadio } from '@/host/components/radio/UiRadio.vue'
 export { default as UiScrollBox } from '@/host/components/scroll-box/UiScrollBox.vue'
+export { default as UiSelectPopper } from '@/host/components/select/UiSelectPopper.vue'
+export { default as UiSelectTrigger } from '@/host/components/select/UiSelectTrigger.vue'
 export { default as UiTag } from '@/host/components/tag/UiTag.vue'
 export { default as UiTextbox } from '@/host/components/textbox/UiTextbox.vue'
 export { default as UiToolbar } from '@/host/components/toolbar/UiToolbar.vue'
 export { default as UiToolbarButton } from '@/host/components/toolbar/UiToolbarButton.vue'
 export { default as UiToolbarLink } from '@/host/components/toolbar/UiToolbarLink.vue'
+export { default as UiTooltip } from '@/host/components/tooltip/UiTooltip.vue'
 export { default as UiTransition } from '@/host/components/transition/UiTransition.vue'
 export { default as UiYandexMap } from '@/host/components/yandex-map/UiYandexMap.vue'
 
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItem.vue b/packages/v1-components/src/host/components/menu/UiMenuItem.vue
new file mode 100644
index 00000000..18ba0b8c
--- /dev/null
+++ b/packages/v1-components/src/host/components/menu/UiMenuItem.vue
@@ -0,0 +1,161 @@
+<template>
+    <div
+        :class="{
+            'ui-v1-menu-item': true,
+            [`ui-v1-menu-item_${size}`]: true,
+            'ui-v1-menu-item_accent': accent,
+            'ui-v1-menu-item_active': active,
+            'ui-v1-menu-item_danger': danger,
+            'ui-v1-menu-item_simple': simple,
+            'ui-v1-menu-item_disabled': disabled,
+        }"
+        v-bind="$attrs"
+    >
+        <div
+            :class="{
+                'ui-v1-menu-item__inner': true,
+                'ui-v1-menu-item__inner_centered': $slots['avatar'] && !$slots['description'],
+                'ui-v1-menu-item__inner_disabled': disabled,
+            }"
+            @mouseover.once="onHover"
+        >
+            <div
+                v-if="$slots['avatar']"
+                class="ui-v1-menu-item__avatar"
+            >
+                <!-- @slot Слот для аватара. Располагается слева -->
+                <slot name="avatar" />
+            </div>
+
+            <div
+                v-else-if="$slots['leading-icon']"
+                class="ui-v1-menu-item__icon ui-v1-menu-item__icon_leading"
+            >
+                <!-- @slot Иконка слева -->
+                <slot name="leading-icon" />
+            </div>
+
+            <div class="ui-v1-menu-item__content">
+                <div class="ui-v1-menu-item__text">
+                    <div
+                        v-if="ticker"
+                        ref="textRef"
+                        :style="textStyle"
+                        class="ui-v1-menu-item__ticker"
+                    >
+                        <!-- @slot Основной текст -->
+                        <slot />
+                    </div>
+                    <template v-else>
+                        <!-- @slot Основной текст -->
+                        <slot />
+                    </template>
+                </div>
+
+                <div
+                    v-if="$slots['description'] || description"
+                    class="ui-v1-menu-item__description"
+                >
+                    <!-- @slot Дополнительный текст -->
+                    <slot name="description">
+                        {{ description }}
+                    </slot>
+                </div>
+            </div>
+
+            <div
+                v-if="counter !== null"
+                class="ui-v1-menu-item__counter"
+            >
+                {{ counter }}
+            </div>
+
+            <div
+                v-if="$slots['trailing-icon']"
+                class="ui-v1-menu-item__icon ui-v1-menu-item__icon_trailing"
+            >
+                <!-- @slot Иконка справа -->
+                <slot name="trailing-icon" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import { ref } from 'vue'
+
+import {
+  deltaTransition,
+  SIZE,
+} from '@/common/components/menu'
+
+const props = defineProps({
+  /** Размер */
+  size: {
+    type: String as unknown as PropType<SIZE>,
+    default: SIZE.MD,
+  },
+
+  /** Описание */
+  description: {
+    type: String,
+    default: null,
+  },
+
+  /** Счетчик количества */
+  counter: {
+    type: null as unknown as PropType<string|number|null>,
+    validator: (counter: unknown) => counter === null || ['string', 'number'].includes(typeof counter),
+    default: null,
+  },
+
+  /** Жирное начертание */
+  accent: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Состояние нажатия */
+  active: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Индикация опасного действия */
+  danger: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Анимация бегущей строки при наведении */
+  ticker: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Делает заголовок синим и убирает внутренние отступы на корневом элементе */
+  simple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Заблокированный */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const textRef = ref<HTMLDivElement | null>(null)
+const textStyle = ref({})
+
+const onHover = (): void => {
+  if (props.ticker && textRef.value) {
+    textStyle.value = deltaTransition(textRef.value)
+  }
+}
+</script>
+
+<style lang="less" src="./menu.less"/>
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItem.vue.d.ts b/packages/v1-components/src/host/components/menu/UiMenuItem.vue.d.ts
new file mode 100644
index 00000000..9486d3b0
--- /dev/null
+++ b/packages/v1-components/src/host/components/menu/UiMenuItem.vue.d.ts
@@ -0,0 +1,9 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiMenuItemProperties } from '@/common/components/menu'
+
+declare const UiMenuItem: DefineComponent<
+  UiMenuItemProperties
+>
+
+export default UiMenuItem
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue
new file mode 100644
index 00000000..62621372
--- /dev/null
+++ b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="ui-v1-menu-item-group">
+        <div class="ui-v1-menu-item-group__head">
+            <div
+                v-if="$slots.option"
+                class="ui-v1-menu-item-group__head-option"
+            >
+                <!-- @slot Слот заголовка группы -->
+                <slot name="option" />
+            </div>
+
+            <div
+                v-else
+                class="ui-v1-menu-item-group__head-inner"
+            >
+                <div
+                    :class="{
+                        'ui-v1-menu-item-group__title': true,
+                        'ui-v1-menu-item-group__title_upper': !$slots.option
+                    }"
+                >
+                    <!-- @slot Заголовок -->
+                    <slot name="label" />
+                </div>
+
+                <div
+                    v-if="$slots.quantity"
+                    class="ui-v1-menu-item-group__count"
+                >
+                    <!-- @slot Счетчик количества -->
+                    <slot name="quantity" />
+                </div>
+            </div>
+        </div>
+
+        <!-- @slot Основной контент -->
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
new file mode 100644
index 00000000..4e3a023a
--- /dev/null
+++ b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
@@ -0,0 +1,6 @@
+import type { DefineComponent } from '@/common/vue'
+
+
+declare const UiMenuItemGroup: DefineComponent
+
+export default UiMenuItemGroup
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/menu/menu.less b/packages/v1-components/src/host/components/menu/menu.less
new file mode 100644
index 00000000..c67f23aa
--- /dev/null
+++ b/packages/v1-components/src/host/components/menu/menu.less
@@ -0,0 +1,204 @@
+@import (reference) '../../../../assets/stylesheets/geometry.less';
+@import (reference) '../../../../assets/stylesheets/layout';
+@import (reference) '../../../../assets/stylesheets/motion';
+@import (reference) '../../../../assets/stylesheets/palette.less';
+@import (reference) '../../../../assets/stylesheets/typography.less';
+@import (reference) '../../../../assets/stylesheets/variables.less';
+
+.ui-v1-menu-item {
+  .reset-box-sizing();
+
+  --ui-v1-menu-item-background-color: @blue-100;
+  --ui-v1-menu-item-main-color: @blue-500;
+
+  width: 100%;
+  padding: 2px 4px;
+
+  &_danger {
+    --ui-v1-menu-item-background-color: @red-100;
+    --ui-v1-menu-item-main-color: @red-500;
+  }
+
+  &_simple {
+    padding: 0;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: flex-start;
+    padding: 6px 8px 6px 12px;
+    border: 1px solid transparent;
+    border-radius: @border-radius-md;
+    cursor: pointer;
+    transition: @transition;
+
+    &_centered {
+      align-items: center;
+    }
+
+    &:not(&_disabled):hover {
+      background: var(--ui-v1-menu-item-background-color);
+    }
+  }
+
+  &__add-icon { opacity: 0; }
+  &:not(&_disabled):hover &__add-icon {
+    opacity: 1;
+  }
+
+  &__checkmark-icon,
+  &__add-icon {
+    color: @blue-500;
+  }
+
+  &:active &__inner,
+  &_active &__inner {
+    background: var(--ui-v1-menu-item-background-color);
+    border: 1px solid var(--ui-v1-menu-item-main-color);
+  }
+
+  &__inner:not(&__inner_disabled):hover &__icon_leading {
+    color: var(--ui-v1-menu-item-main-color);
+  }
+
+  &__inner:not(&__inner_disabled):hover &__icon_leading svg {
+    fill: var(--ui-v1-menu-item-main-color);
+  }
+
+  &__inner:not(&__inner_disabled):hover &__ticker {
+    animation: ui-v1-menu-item-ticker 2s linear 0.1s infinite alternate;
+    overflow: visible;
+  }
+
+  &__inner:not(:hover) &__text {
+    text-overflow: ellipsis;
+  }
+
+  &__content {
+    flex: 1 0 1px;
+    min-width: 0;
+  }
+
+  &__text {
+    padding-right: @spacing-xxs;
+    color: @black-500;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &_md &__text { .text-regular(); }
+  &_sm &__text { .text-small(); }
+
+  &_simple &__text {
+    color: var(--ui-v1-menu-item-main-color);
+  }
+
+  &__ticker {
+    .ellipsis();
+  }
+
+  &__description {
+    color: @grey-900;
+    .text-small();
+    margin-top: @spacing-xxs;
+  }
+
+  &__icon {
+    .square(24px);
+
+    &_leading {
+      margin-right: @spacing-xs;
+      margin-left: -@spacing-xxs;
+    }
+
+    &_trailing {
+      margin-left: @spacing-xxs;
+    }
+
+    svg {
+      transition: @transition;
+    }
+  }
+
+  &__avatar {
+    margin-right: 8px;
+  }
+
+  &__counter {
+    max-width: 60%;
+    color: @grey-800;
+    .text-small();
+    .ellipsis();
+    margin-left: @spacing-xs;
+    margin-top: 2px;
+  }
+
+  &_md &__counter { margin-top: 3px; }
+
+  &_disabled {
+    cursor: default;
+    opacity: 0.6;
+    user-select: none;
+  }
+
+  &_sm { padding: 2px 4px; }
+
+  &_sm &__inner {
+    padding: 2px 8px;
+    border-radius: @border-radius-md;
+  }
+
+  &_sm &__icon { .square(20px); }
+  &_sm &__icon_leading {
+    margin-right: @spacing-xxs;
+  }
+
+  &_accent &__text {
+    font-weight: @font-weight-accent;
+  }
+
+  @keyframes ui-v1-menu-item-ticker {
+    0%   { transform: translateX(0); }
+    80%  { transform: translateX(var(--delta-width)); }
+    100% { transform: translateX(var(--delta-width)); }
+  }
+}
+
+.ui-v1-menu-item-group {
+  transform: translate3d(0, 0, 0);
+
+  &__head {
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(15px);
+    transition: @transition;
+    position: sticky;
+    top: 0;
+
+    @supports not (backdrop-filter: none) {
+      background: #fff;
+    }
+  }
+
+  &__head-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: @spacing-xs 10px 6px @spacing-s;
+  }
+
+  &__title {
+    color: @grey-800;
+    .text-small-accent();
+
+    &_upper {
+      text-transform: uppercase;
+    }
+  }
+
+  &__count {
+    .text-regular();
+    margin-left: @spacing-xs;
+    color: @grey-800;
+  }
+}
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/popper/UiPopper.vue b/packages/v1-components/src/host/components/popper/UiPopper.vue
index b7d4bce3..6199456b 100644
--- a/packages/v1-components/src/host/components/popper/UiPopper.vue
+++ b/packages/v1-components/src/host/components/popper/UiPopper.vue
@@ -171,6 +171,8 @@ const props = defineProps({
 })
 
 const emit = defineEmits([
+  /** Элемент добавлен на страницу */
+  'attached',
   /** Смена значения флага видимости плавающего элемента */
   'update:visible',
   /** Появление плавающего элемента */
@@ -292,6 +294,8 @@ const show = (immediately = false) => {
   state.hiding = false
   state.attached = true
 
+  emit('attached')
+
   showingScheduler.schedule(doShow, immediately ? 0 : delay.value.show)
 
   emit('show')
@@ -424,6 +428,7 @@ watch(() => state.attached, (isAttached, wasAttached) => {
   if (isAttached && !wasAttached) {
     nextTick(async () => {
       if (state.visible) {
+        emit('attached')
         autoAdjustOff()
         await adjust()
         autoAdjustOn()
diff --git a/packages/v1-components/src/host/components/select/UiSelectPopper.vue b/packages/v1-components/src/host/components/select/UiSelectPopper.vue
new file mode 100644
index 00000000..6665a3ec
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/UiSelectPopper.vue
@@ -0,0 +1,206 @@
+<template>
+    <UiPopper
+        :id="id + '-popper'"
+        ref="popper"
+        :visible="visible"
+        :target-triggers="targetTriggers"
+        :popper-triggers="popperTriggers"
+        :popper-options="popperOptions"
+        :global-triggers="['miss-click']"
+        :placement="placement"
+        :aria-hidden="!visible ? 'true' : 'false'"
+        :aria-multiselectable="multiple ? 'true' : 'false'"
+        :class="['ui-v1-select__popper', popperClass]"
+        :disabled="disabled || readonly"
+        v-bind="$attrs"
+        role="listbox"
+        @attached="autoScroll"
+        @show="$emit('show', $event)"
+        @shown="$emit('shown', $event)"
+        @hide="$emit('hide', $event)"
+        @hidden="$emit('hidden', $event)"
+        @dispose="$emit('dispose', $event)"
+    >
+        <div
+            ref="scrollable"
+            :style="scrollableStyle"
+            :class="{
+                'ui-v1-select__content': true,
+                'ui-v1-select__content_long': ticker,
+            }"
+        >
+            <div>
+                <!-- @slot Дефолтный слот, содержащий пункты выпадающего списка -->
+                <slot />
+            </div>
+        </div>
+    </UiPopper>
+</template>
+
+<script lang="ts" setup>
+import type { Alignment } from '@floating-ui/dom'
+import type { CSSProperties } from 'vue'
+import type { PropType } from 'vue'
+import type { Side } from '@floating-ui/dom'
+import type { UiPopperProperties } from '@/common/components/popper'
+
+import {
+  PlacementOptions,
+  Trigger,
+  TriggerSchema,
+  isPlacementLiteral,
+  isPlacementOptions,
+} from '@/common/components/popper'
+
+import UiPopper from '@/host/components/popper/UiPopper.vue'
+
+import { computed } from 'vue'
+import { onMounted } from 'vue'
+import { ref } from 'vue'
+import { useElementRef } from '@/host/composables'
+import { watch } from 'vue'
+
+import { PLACEMENT } from '@/common/components/select'
+
+const props = defineProps({
+  /** Атрибут id корневого элемента выпадающего списка. Должен быть уникальным на странице */
+  id: {
+    type: String,
+    default: undefined,
+  },
+
+  /** Начальное состояние выпадающего списка - открыт/закрыт */
+  opened: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** События целевого элемента, по которым производится переключение видимости */
+  targetTriggers: {
+    type: [Array, Object] as PropType<Trigger[] | TriggerSchema>,
+    default: () => ({
+      show: ['click'],
+    }),
+  },
+
+  /** События плавающего элемента, по которым производится переключение видимости */
+  popperTriggers: {
+    type: [Array, Object] as PropType<Trigger[] | TriggerSchema>,
+    default: () => [],
+  },
+
+  /**
+   * Флаг, устанавливающий ширину выпадающего списка по ширине целевого элемента.
+   * По-умолчанию отключает такое поведение
+   */
+  popperFitTrigger: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Сторона цели, у которой появится плавающий элемент,
+   * или подробный объект настройки положения и адаптации положения при нехватке места
+   */
+  placement: {
+    type: [String, Object] as PropType<Side | `${Side}-${Alignment}` | PlacementOptions>,
+    validator: (value: unknown) => isPlacementLiteral(value) || isPlacementOptions(value),
+    default: PLACEMENT.BOTTOM,
+  },
+
+  /** Стиль для плавающего элемента */
+  popperClass: {
+    type: String,
+    default: null,
+  },
+
+  /** Набор свойств плавающего элемента. See @/common/components/popper */
+  popperOptions: {
+    type: Object as PropType<Omit<UiPopperProperties, 'placement' | 'shown' | 'target' | 'triggers'>>,
+    default: () => ({}),
+  },
+
+  /** Блокировка поля ввода */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Устанавливает поле ввода в состояние доступное только для чтения */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Наличие множественного выбора среди элементов выпадающего списка */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Добавляет анимацию показала полной строки при переполнении */
+  ticker: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+defineEmits([
+  /** Смена значения флага видимости плавающего элемента */
+  'update:visible',
+  /** Появление плавающего элемента */
+  'show',
+  /** Сокрытие плавающего элемента */
+  'hide',
+  /** Появление плавающего элемента после окончания перехода */
+  'shown',
+  /** Сокрытие плавающего элемента после окончания перехода */
+  'hidden',
+  /** Удаление с формы плавающего элемента */
+  'dispose',
+])
+
+const target = useElementRef<HTMLElement>()
+const popper = ref<InstanceType<typeof UiPopper> | null>(null)
+const scrollable = ref<HTMLElement | null>(null)
+const width = ref<string>('auto')
+
+const visible = computed(() => props.opened)
+
+const autoScroll = async () => {
+  const option = scrollable.value?.querySelector<HTMLElement>('.ui-v1-select-option_selected')
+  if (scrollable.value && option) {
+    scrollable.value.scrollTop = option.offsetTop
+  }
+}
+
+const updateWidth = () => width.value = `${target.value?.clientWidth}px`
+
+const scrollableStyle = computed((): CSSProperties => {
+  if (props.popperFitTrigger) {
+    return { minWidth: width.value }
+  }
+
+  const style: CSSProperties = { width: width.value }
+
+  if (parseInt(width.value) > 500) {
+    style.maxWidth = width.value
+  }
+
+  return style
+})
+
+defineExpose({
+  adjust: () => popper.value?.adjust(),
+  dispose: () => popper.value?.dispose(),
+  show: () => popper.value?.show(),
+  hide: () => popper.value?.hide(),
+})
+
+watch(() => props.opened, () => updateWidth())
+
+onMounted(() => {
+})
+</script>
+
+<style lang="less" src="./select.less" />
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts b/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
new file mode 100644
index 00000000..acd3c966
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
@@ -0,0 +1,14 @@
+import type { DefineComponent } from '@/common/vue'
+import type { Ref } from 'vue'
+
+import {
+  UiPopperProperties,
+  UiPopperMethods,
+} from '@/common/components/popper'
+
+declare const UiSelectPopper: DefineComponent<
+    UiPopperProperties, { target: Ref<HTMLElement | null> },
+    UiPopperMethods
+>
+
+export default UiSelectPopper
diff --git a/packages/v1-components/src/host/components/select/UiSelectTrigger.vue b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue
new file mode 100644
index 00000000..f3874ecc
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue
@@ -0,0 +1,279 @@
+<template>
+    <div
+        ref="trigger"
+        :aria-controls="id + '-popper'"
+        :aria-expanded="expanded ? 'true' : 'false'"
+        :aria-invalid="invalid ? 'true' : 'false'"
+        role="combobox"
+        aria-haspopup="listbox"
+        :class="{
+            'ui-v1-select': true,
+            'ui-v1-select_active': expanded,
+            'ui-v1-select_disabled': disabled,
+            'ui-v1-select_filterable': filterable,
+        }"
+        @click="onClick"
+    >
+        <div
+            v-if="multiple && !$slots.trigger"
+            ref="touchstone"
+            class="ui-v1-select__touchstone"
+        >
+            {{ selectionLabels }}
+        </div>
+        <!-- @slot Разметка переключателя выпадающего списка -->
+        <slot name="trigger">
+            <UiTextbox
+                :id="id"
+                :value="inputValue"
+                :placeholder="!inputReadonly && expanded ? i18n.t('search.placeholder') : placeholder"
+                :active="expanded"
+                :clearable="clearable"
+                :invalid="invalid"
+                :readonly="inputReadonly"
+                :size="inputSize"
+                :disabled="disabled"
+                class="ui-v1-select__trigger"
+                @input="onInput"
+                @focus="onFocus"
+                @blur="onBlur"
+                @clear="onClear"
+            >
+                <template v-if="$slots['leading-icon']" #leading-icon>
+                    <!-- @slot Иконка слева от поля ввода -->
+                    <slot name="leading-icon" />
+                </template>
+
+                <template #trailing-icon>
+                    <!-- @slot Иконка справа от поля ввода (по-умолчанию каретка) -->
+                    <slot name="trailing-icon">
+                        <IconCaret aria-hidden="true" class="ui-v1-select__caret" />
+                    </slot>
+                </template>
+            </UiTextbox>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { I18nLocalized } from '@/host/i18n'
+import type { Option } from '@/host/components/select/injection'
+import type { PropType } from 'vue'
+
+import {
+  computed,
+  inject,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+
+import { UiTextbox } from '@/host'
+import IconCaret from '~assets/sprites/arrows/caret-down.svg'
+
+import _i18n from '@/host/components/select/i18n'
+
+import { SIZE } from '@/common/components/textbox'
+
+import { I18nInjectKey } from '@/host/i18n/plugin'
+
+const props = defineProps({
+  /** Атрибут id корневого элемента выпадающего списка. Должен быть уникальным на странице */
+  id: {
+    type: String,
+    default: undefined,
+  },
+
+  /** Атрибут value, содержащий выбранный элемент из выпадающего списка */
+  value: {
+    type: null as unknown as PropType<unknown|unknown[]>,
+    default: undefined,
+  },
+
+  /** Текст фильтра для поиска */
+  filter: {
+    type: String,
+    default: '',
+  },
+
+  /** Отображает иконку сброса введённого или выбранного значения в виде крестика */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Фильтрация строк выпадающего списка на соответствие введённого выражения в input */
+  filterable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Подсвечивает поле как содержащее некорректное значение */
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Наличие множественного выбора среди элементов выпадающего списка */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Начальное состояние выпадающего списка - открыт/закрыт */
+  opened: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Атрибут placeholder нативного поля ввода input */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+
+  /** Устанавливает поле ввода в состояние доступное только для чтения */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Блокировка поля ввода */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Устанавливает в качестве выводимого в input значения только содержимое placeholder */
+  onlyPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Размер поля ввода */
+  inputSize: {
+    type: String as unknown as PropType<SIZE | `${SIZE}`>,
+    validator: (size: string) => Object.values(SIZE).includes(size as SIZE),
+    default: SIZE.SM,
+  },
+
+  /** Состояние открытия выпадающего списка */
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Выбранные элементы из выпадающего списка. Должен содержать значение или массив значений, соответствующих атрибуту value опций из выпадающего списка */
+  selection: {
+    type: Array as PropType<Option[]>,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits([
+  /** Ввод значения в поле ввода */
+  'input',
+  /** Установка фокуса на поле ввода */
+  'focus',
+  /** Потеря фокуса полем ввода */
+  'blur',
+  /** Сброс значения фильтра */
+  'clear',
+  /** Изменение значения */
+  'update:value',
+  /** Открытие выпадающего списка */
+  'update:expanded',
+])
+
+const trigger = ref<HTMLElement | null>(null)
+const touchstone = ref<HTMLElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+const i18n = computed((): I18nLocalized => _i18n.init(inject(I18nInjectKey, null)?.locale ?? _i18n.fallback))
+
+const inputReadonly = computed(
+  () => props.readonly || !props.filterable
+)
+
+const selectionLabels = computed((): string => props.selection.map(o => o.label).join(', '))
+const selectionText = computed((): string => {
+  if (props.placeholder && (props.onlyPlaceholder)) return props.placeholder
+  if (props.multiple) {
+    const width =  input.value?.clientWidth ?? 0
+    if (width > 0 && selectionWidth.value > width) {
+      return `${i18n.value.t('selected')}: ${props.selection.length}`
+    }
+  }
+
+  return selectionLabels.value
+})
+
+const selectionWidth = ref(0)
+
+const updateSelectionWidth = () => {
+  if (touchstone.value && !props.onlyPlaceholder) {
+    nextTick().then(() => {
+      selectionWidth.value = touchstone.value?.clientWidth ?? 0
+    })
+  }
+}
+
+const inputValue = computed(() => {
+  if (!inputReadonly.value && props.expanded) {
+    if (props.multiple && !props.filter) {
+      return selectionText.value
+    }
+    return props.filter
+  }
+
+  return selectionText.value
+})
+
+const open = () => {
+  if (props.expanded) return
+
+  emit('update:expanded', true)
+}
+
+const close = () => {
+  if (!props.expanded) return
+
+  emit('update:expanded', false)
+}
+
+const onClick = () => {
+  if (props.disabled || props.readonly) return
+
+  return props.expanded ? close() : open()
+}
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | null
+  emit('input', target?.value ?? '')
+}
+const onFocus = (event: Event) => emit('focus', event)
+const onBlur = (event: Event) => emit('blur', event)
+
+const onClear = (event?: MouseEvent) => {
+  const value = props.multiple ? [] : null
+  emit('update:value', value)
+  emit('clear', event)
+}
+
+watch(() => props.value, () => {
+  updateSelectionWidth()
+
+  if (props.multiple && props.expanded) {
+    nextTick(() => input.value?.focus())
+  }
+})
+
+watch(() => props.opened, opened => opened ? open() : close())
+
+onMounted(async () => {
+  input.value = trigger.value?.querySelector('input') ?? null
+
+  updateSelectionWidth()
+})
+</script>
+<style lang="less" src="./select.less" />
diff --git a/packages/v1-components/src/host/components/select/UiSelectTrigger.vue.d.ts b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue.d.ts
new file mode 100644
index 00000000..99fc7ee2
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue.d.ts
@@ -0,0 +1,13 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type {
+  UiSelectTriggerProperties,
+  UiSelectTriggerMethods,
+} from '@/common/components/select'
+
+declare const UiSelectTrigger: DefineComponent<
+  UiSelectTriggerProperties,
+  UiSelectTriggerMethods
+>
+
+export default UiSelectTrigger
diff --git a/packages/v1-components/src/host/components/select/i18n.ts b/packages/v1-components/src/host/components/select/i18n.ts
new file mode 100644
index 00000000..27118d98
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/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/select/i18n/en-GB.json b/packages/v1-components/src/host/components/select/i18n/en-GB.json
new file mode 100644
index 00000000..3544b2a1
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/i18n/en-GB.json
@@ -0,0 +1,7 @@
+{
+  "selected": "Selected",
+  "search": {
+    "placeholder": "",
+    "noResult": "Nothing found"
+  }
+}
diff --git a/packages/v1-components/src/host/components/select/i18n/es-ES.json b/packages/v1-components/src/host/components/select/i18n/es-ES.json
new file mode 100644
index 00000000..1cf6132c
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/i18n/es-ES.json
@@ -0,0 +1,7 @@
+{
+  "selected": "Seleccionado",
+  "search": {
+    "placeholder": "",
+    "noResult": "No se ha encontrado"
+  }
+}
diff --git a/packages/v1-components/src/host/components/select/i18n/ru-RU.json b/packages/v1-components/src/host/components/select/i18n/ru-RU.json
new file mode 100644
index 00000000..8a18cbda
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/i18n/ru-RU.json
@@ -0,0 +1,7 @@
+{
+  "selected": "Выбрано",
+  "search": {
+    "placeholder": "",
+    "noResult": "Ничего не найдено"
+  }
+}
diff --git a/packages/v1-components/src/host/components/select/injection.ts b/packages/v1-components/src/host/components/select/injection.ts
new file mode 100644
index 00000000..2123db8a
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/injection.ts
@@ -0,0 +1,34 @@
+import type {
+  InjectionKey,
+  ComputedRef,
+} from 'vue'
+
+export type Option = {
+  id: string;
+  value: unknown;
+  label: string;
+  isMatched (): boolean;
+}
+
+export type Group = {
+  id: string;
+  matchedQuantity: () => number;
+  isMatched (): boolean;
+}
+
+export const IsSelectedKey = Symbol('UiSelectedIsSelected') as InjectionKey<ComputedRef<(value: unknown) => boolean>>
+export const RegisterKey = Symbol('UiSelectRegister') as InjectionKey<(option: Option) => void>
+export const SyncKey = Symbol('UiSelectSync') as InjectionKey<(id: string, data: { label: string; value: unknown }) => void>
+export const UnregisterKey = Symbol('UiSelectUnregister') as InjectionKey<(id: string) => void>
+export const ToggleKey = Symbol('UiSelectToggle') as InjectionKey<(value: unknown) => void>
+export const FilterKey = Symbol('UiSelectFilter') as InjectionKey<ComputedRef<string>>
+export const FilteredKey = Symbol('UiSelectFiltered') as InjectionKey<ComputedRef<boolean>>
+export const TickerKey = Symbol('UiSelectTicker') as InjectionKey<ComputedRef<boolean>>
+export const MultipleKey = Symbol('UiSelectMultiple') as InjectionKey<ComputedRef<boolean>>
+export const FastenedKey = Symbol('UiSelectFastened') as InjectionKey<ComputedRef<boolean>>
+export const UnregisterOptionKey = Symbol('UiSelectUnregisterOption') as InjectionKey<(id: string) => void>
+export const RegisterOptionKey = Symbol('UiSelectRegisterOption') as InjectionKey<(option: Option) => void>
+export const RegisterGroupKey = Symbol('UiSelectOptionGroupRegister') as InjectionKey<(group: Group) => void>
+export const UnregisterGroupKey = Symbol('UiSelectOptionGroupUnregister') as InjectionKey<(id: string) => void>
+export const RegisterHeaderOptionKey = Symbol('UiSelectOptionGroupRegisterHeaderOption') as InjectionKey<(option: Option) => void>
+export const UnregisterHeaderOptionKey = Symbol('UiSelectOptionGroupUnregisterHeaderOption') as InjectionKey<(id: string) => void>
diff --git a/packages/v1-components/src/host/components/select/select.less b/packages/v1-components/src/host/components/select/select.less
new file mode 100644
index 00000000..b1e80eab
--- /dev/null
+++ b/packages/v1-components/src/host/components/select/select.less
@@ -0,0 +1,124 @@
+@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-select {
+  .reset-box-sizing();
+
+  &__trigger {
+    width: 100%;
+    max-width: 100%;
+    position: relative;
+    text-align: left;
+  }
+
+  &__touchstone {
+    .text-regular();
+    opacity: 0;
+    white-space: nowrap;
+    transform: translateZ(0);
+    visibility: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &__input { text-overflow: ellipsis; }
+
+  &__popper {
+    --ui-v1-popper-padding: 2px 0;
+    --ui-v1-popper-roundings: @border-radius-lg;
+    font-family: @font-family;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  &__content {
+    max-height: 210px;
+    max-width: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: @grey-500 transparent;
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 6px;
+    }
+
+
+    &:hover .ui-v1-scroll-rail:not(.ui-v1-scroll-rail:hover):not(.ui-v1-scroll-rail_active) .ui-v1-scroll-rail__slider {
+      width: 6px;
+    }
+
+    &_locked {
+      pointer-events: none;
+    }
+  }
+
+  &__content_long { max-width: 656px; }
+
+  &__no-results-text {
+    padding: @spacing-xs @spacing-s;
+    background: @grey-100;
+    border-radius: @border-radius-sm;
+    color: @grey-900;
+    word-break: break-all;
+    margin: @spacing-xxs;
+  }
+
+  &_active {
+    --border-color: var(--ui-v1-textbox-primary-color);
+    --active-color: var(--ui-v1-textbox-primary-color);
+  }
+
+  &_active &__caret {
+    color: var(--active-color);
+  }
+
+  &:not(&_active) .ui-v1-textbox {
+    --border-color: @grey-500;
+    --active-color: @grey-500;
+  }
+
+  &:not(&_active) .ui-v1-textbox.ui-v1-textbox_outlined {
+    box-shadow: none;
+  }
+
+  &_filterable {
+    cursor: text;
+  }
+}
+
+.ui-v1-select-option {
+  &_hidden {
+    display: none;
+  }
+
+  &__add-icon { opacity: 0; }
+
+  &:not(&_disabled):hover &__add-icon {
+    opacity: 1;
+  }
+
+  &__checkmark-icon,
+  &__add-icon {
+    color: @blue-500;
+  }
+}
+
+.ui-v1-select-option-group {
+  & + & {
+    padding-top: 3px;
+    border-top: 1px solid @grey-500;
+    margin-top: @spacing-xxs;
+  }
+
+  &:nth-last-child(1) { padding-bottom: 0; }
+
+  &_hidden {
+    display: none;
+  }
+}
diff --git a/packages/v1-components/src/host/components/textbox/textbox.less b/packages/v1-components/src/host/components/textbox/textbox.less
index b68a258e..e36b2dbf 100644
--- a/packages/v1-components/src/host/components/textbox/textbox.less
+++ b/packages/v1-components/src/host/components/textbox/textbox.less
@@ -73,6 +73,13 @@
     line-height: var(--height);
   }
 
+  &_outlined:has(input[readonly]:not(:disabled)),
+  &_outlined:has(input[readonly]:not(:disabled):hover),
+  &_outlined input[readonly]:not(:disabled),
+  &_outlined input[readonly]:not(:disabled):hover {
+    cursor: pointer;
+  }
+
   &_outlined&_xs {
     --height: 24px;
     --padding: 8px;
@@ -161,8 +168,14 @@
     box-shadow: 0 0 0 4px var(--shadow-color);
   }
 
-  &_active {
-    border-color: var(--active-color);
+  &:not(&_active):has(input[readonly]:focus:not(:disabled)),
+  &:not(&_active):has(textarea[readonly]:focus:not(:disabled)) {
+    --border-color: @grey-500;
+  }
+
+  &_outlined:not(&_active):has(input[readonly]:focus),
+  &_outlined:not(&_active):has(textarea[readonly]:focus) {
+    box-shadow: none;
   }
 
   &__eraser {
@@ -195,6 +208,7 @@
     padding-block-start: calc((var(--height) - var(--icon-size)) / 2);
     justify-content: center;
     z-index: 2;
+    color: var(--ui-v1-textbox-icon-color);
 
     svg {
       .square(var(--icon-size));
diff --git a/packages/v1-components/src/remote.ts b/packages/v1-components/src/remote.ts
index b7c95cad..be3fd43f 100644
--- a/packages/v1-components/src/remote.ts
+++ b/packages/v1-components/src/remote.ts
@@ -19,6 +19,8 @@ export * from '@/remote/components/toolbar-link'
 export * from '@/remote/components/tooltip'
 export * from '@/remote/components/transition'
 export * from '@/remote/components/yandex-map'
+export * from '@/remote/components/menu'
+export * from '@/remote/components/select'
 
 export { usePreview } from '@/common/preview'
 
diff --git a/packages/v1-components/src/remote/components/menu.ts b/packages/v1-components/src/remote/components/menu.ts
new file mode 100644
index 00000000..a6040e24
--- /dev/null
+++ b/packages/v1-components/src/remote/components/menu.ts
@@ -0,0 +1,38 @@
+import type { RemoteProperties } from '@/remote/scaffolding'
+import type { SchemaType } from '@omnicajs/vue-remote/remote'
+
+import { UiMenuItemProperties } from '@/common/components/menu'
+
+import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
+
+export const UiMenuItemType = 'UiMenuItem' as SchemaType<
+    'UiMenuItem',
+    RemoteProperties<UiMenuItemProperties>
+>
+
+export const UiMenuItem = defineRemoteComponent(
+  UiMenuItemType,
+  [],
+  [
+    'default',
+    'avatar',
+    'leading-icon',
+    'description',
+    'trailing-icon',
+  ]
+)
+
+export const UiMenuItemGroupType = 'UiMenuItemGroup' as SchemaType<
+  'UiMenuItemGroup'
+>
+
+export const UiMenuItemGroup = defineRemoteComponent(
+  UiMenuItemGroupType,
+  [],
+  [
+    'default',
+    'option',
+    'label',
+    'quantity',
+  ]
+)
diff --git a/packages/v1-components/src/remote/components/select/UiSelect.vue b/packages/v1-components/src/remote/components/select/UiSelect.vue
new file mode 100644
index 00000000..5a957e04
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/UiSelect.vue
@@ -0,0 +1,338 @@
+<template>
+    <UiPopperConnector>
+        <UiSelectTrigger
+            :id="id"
+            :clearable="clearable"
+            :disabled="disabled"
+            :expanded="state.expanded"
+            :filter="state.filter"
+            :filterable="filterable"
+            :input-size="inputSize"
+            :invalid="invalid"
+            :multiple="multiple"
+            :only-placeholder="onlyPlaceholder"
+            :opened="state.expanded"
+            :placeholder="placeholder"
+            :readonly="readonly"
+            :value="state.value"
+            :selection="selection"
+            @input="onInput"
+            @update:value="state.value = $event"
+            @update:expanded="state.expanded = $event"
+        />
+
+        <UiSelectPopper
+            :id="id"
+            :disabled="disabled || readonly"
+            :multiple="multiple"
+            :opened="state.expanded"
+            :placement="placement"
+            :popper-class="popperClass"
+            :popper-fit-trigger="popperFitTrigger"
+            :popper-options="popperOptions"
+            :popper-triggers="popperTriggers"
+            :readonly="readonly"
+            :target-triggers="targetTriggers"
+            :ticker="ticker"
+            :filterable="filterable"
+            :options-registry="optionsRegistry"
+            @hide="close"
+        >
+            <div
+                v-if="filterable && optionsRegistry.every(o => !o.isMatched()) && noResult"
+                class="ui-v1-select__no-results-text"
+            >
+                {{ noResult }}
+            </div>
+
+            <slot />
+        </UiSelectPopper>
+    </UiPopperConnector>
+</template>
+
+<script lang="ts" setup>
+import type { Option } from '@/host/components/select/injection'
+import type { PropType } from 'vue'
+import type { Trigger } from '@/common/components/popper'
+import type { TriggerSchema } from '@/common/components/popper'
+import type { UiSelectPopperProperties } from '@/common/components/select'
+import type { I18nLocalized } from '@/host/i18n'
+
+type A<T> = T extends unknown[] ? T : T[]
+
+import { UiPopperConnector } from '@/remote/components/popper'
+import { UiSelectPopper } from './parts'
+import { UiSelectTrigger } from './parts'
+
+import { computed } from 'vue'
+import { inject } from 'vue'
+import { provide } from 'vue'
+import { ref } from 'vue'
+import { reactive } from 'vue'
+import { watch } from 'vue'
+
+import _18n from '@/host/components/select/i18n'
+
+import { PLACEMENT } from '@/common/components/select'
+import { SIZE } from '@/common/components/textbox'
+
+import {
+  IsSelectedKey,
+  RegisterKey,
+  SyncKey,
+  UnregisterKey,
+  ToggleKey,
+  FilterKey,
+  FilteredKey,
+  TickerKey,
+  MultipleKey,
+} from '@/host/components/select/injection'
+import { I18nInjectKey } from '@/host/i18n/plugin'
+
+const props = defineProps({
+  /** Атрибут id корневого элемента выпадающего списка. Должен быть уникальным на странице */
+  id: {
+    type: String,
+    default: undefined,
+  },
+
+  /** Атрибут value, содержащий выбранный элемент из выпадающего списка */
+  value: {
+    type: null as unknown as PropType<unknown|unknown[]>,
+    default: undefined,
+  },
+
+  /** Атрибут placeholder нативного поля ввода input */
+  placeholder: {
+    type: String,
+    default: 'test',
+  },
+
+  /** Отображает иконку сброса введённого или выбранного значения в виде крестика */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Фильтрация строк выпадающего списка на соответствие введённого выражения в input */
+  filterable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Подсвечивает поле как содержащее некорректное значение */
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Устанавливает поле ввода в состояние доступное только для чтения */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Блокировка поля ввода */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Функция для проверки равенства элементов */
+  equalsFn: {
+    type: Function as unknown as PropType<(a: unknown, b: unknown) => boolean>,
+    default: (a: unknown, b: unknown): boolean => a === b,
+  },
+
+  /**
+   * Сторона цели, у которой появится плавающий элемент,
+   * или подробный объект настройки положения и адаптации положения при нехватке места
+   */
+  placement: {
+    type: String as PropType<PLACEMENT | `${PLACEMENT}`>,
+    validator: (placement: string) => Object.values(PLACEMENT).includes(placement as PLACEMENT),
+    default: PLACEMENT.BOTTOM,
+  },
+
+  /** События целевого элемента, по которым производится переключение видимости */
+  targetTriggers: {
+    type: [Array, Object] as PropType<Trigger[] | TriggerSchema>,
+    default: () => ({
+      show: ['click'],
+    }),
+  },
+
+  /** События плавающего элемента, по которым производится переключение видимости */
+  popperTriggers: {
+    type: [Array, Object] as PropType<Trigger[] | TriggerSchema>,
+    default: () => [],
+  },
+
+  /**
+   * Флаг, устанавливающий ширину выпадающего списка по ширине целевого элемента.
+   * По-умолчанию отключает такое поведение
+   */
+  popperFitTrigger: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Стиль для плавающего элемента */
+  popperClass: {
+    type: String,
+    default: null,
+  },
+
+  /** Набор свойств плавающего элемента. See @/common/components/popper */
+  popperOptions: {
+    type: Object as PropType<UiSelectPopperProperties['popperOptions']>,
+    default: () => ({}),
+  },
+
+  /** Размер поля ввода */
+  inputSize: {
+    type: String as unknown as PropType<SIZE | `${SIZE}`>,
+    validator: (size: string) => Object.values(SIZE).includes(size as SIZE),
+    default: SIZE.SM,
+  },
+
+  /** Наличие множественного выбора среди элементов выпадающего списка */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Состояние открытия выпадающего списка */
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Устанавливает в качестве выводимого в input значения только содержимое placeholder */
+  onlyPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Добавляет анимацию показала полной строки при переполнении */
+  ticker: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const state = reactive({
+  expanded: props.expanded,
+  filter: '',
+  value: props.value as unknown | unknown[],
+})
+
+const i18n = computed((): I18nLocalized => _18n.init(inject(I18nInjectKey, null)?.locale ?? _18n.fallback))
+const noResult = computed(() => i18n.value.t('search.noResult', { filter: state.filter }))
+
+const optionsRegistry = ref<Option[]>([])
+
+const selection = computed(() => {
+  const model = arraify<unknown>(state.value)
+
+  const selectedOptions: Option[] = []
+  model.forEach(item => {
+    const option = optionsRegistry.value.find(o => equals(o.value, item))
+    if (option) {
+      selectedOptions.push(option)
+    }
+  })
+
+  return selectedOptions
+})
+
+const arraify = <T> (value: T): A<T> => Array.isArray(value)
+  ? [...value] as A<T>
+  : (typeof value === 'number' || typeof value === 'boolean'  ||  value ? [value] : []) as A<T>
+
+const equals = (a: unknown, b: unknown) => props.equalsFn(a, b)
+
+const contains = (array: unknown[], value: unknown) => array.some(v => equals(v, value))
+
+provide(RegisterKey, (option: Option) => {
+  if (optionsRegistry.value.some(item => item.id === option.id)) {
+    throw new Error(`[UiSelect] Component with id ${option.id} already registered. Unregister it before using again.`)
+  }
+
+  optionsRegistry.value.push(option)
+})
+
+provide(SyncKey, (id: string, data: { label: string; value: unknown }) => {
+  const option = optionsRegistry.value.find(option => option.id === id)
+  if (option) {
+    option.label = data.label
+    option.value = data.value
+  }
+})
+
+provide(UnregisterKey, (id: string) => {
+  const index = optionsRegistry.value.findIndex(option => option.id === id)
+
+  if (index !== -1) {
+    optionsRegistry.value.splice(index, 1)
+  }
+})
+
+provide(IsSelectedKey, computed(() => (value: unknown): boolean => {
+  return Array.isArray(state.value)
+    ? contains(state.value as unknown[], value)
+    : equals(state.value, value)
+}))
+
+provide(ToggleKey, (value: unknown) => {
+  if (props.multiple) {
+    const model = arraify<unknown>(state.value)
+    const index = model.findIndex(item => equals(item, value))
+
+
+    console.log('toggle', value)
+    if (index !== -1) {
+      model.splice(index, 1)
+    } else {
+      model.push(value)
+    }
+
+    state.value = model
+
+    if (!props.multiple) {
+      close()
+    }
+
+  } else {
+    state.value = value
+
+    close()
+  }
+})
+
+provide(FilterKey, computed(() => state.filter))
+provide(FilteredKey, computed(() => props.filterable && state.filter.length > 0))
+provide(TickerKey, computed(() => props.ticker))
+provide(MultipleKey, computed(() => props.multiple))
+
+const onInput = (value: string) => {
+  state.filter = value
+}
+
+const close = () => {
+  if (state.expanded) {
+    state.expanded = false
+    state.filter = ''
+  }
+
+  console.log('expanded', state.value)
+}
+
+watch(() => props.expanded, (newVal) => {
+  state.expanded = newVal
+  if (!newVal) {
+    state.filter = ''
+  }
+})
+watch(() => props.value, (newVal) => { state.value = newVal as unknown | unknown[] })
+</script>
diff --git a/packages/v1-components/src/remote/components/select/UiSelectOption.vue b/packages/v1-components/src/remote/components/select/UiSelectOption.vue
new file mode 100644
index 00000000..937026e9
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/UiSelectOption.vue
@@ -0,0 +1,223 @@
+<template>
+    <div
+        v-bind="$attrs"
+        :aria-selected="selected ? 'true' : 'false'"
+        :class="{
+            'ui-v1-select-option': true,
+            'ui-v1-select-option_selected': selected,
+            'ui-v1-select-option_disabled': disabled,
+            'ui-v1-select-option_hidden': hidden,
+        }"
+        role="option"
+        @click="onClick"
+    >
+        <!-- @slot Слот для переопределения всего контента опции -->
+        <slot :highlight="highlight" :selected="selected">
+            <UiMenuItem
+                :accent="accent"
+                :counter="counter"
+                :disabled="disabled"
+                :size="size"
+                :ticker="ticker"
+            >
+                <template v-if="$slots['leading-icon']" #leading-icon>
+                    <!-- @slot Иконка слева от заголовка и описания -->
+                    <slot name="leading-icon" :selected="selected" />
+                </template>
+
+                <!-- @slot Текстовая метка опции -->
+                <slot name="value" :selected="selected">
+                    <!-- eslint-disable-next-line -->
+          <span v-html="texts.label" />
+                </slot>
+
+                <template v-if="texts.description" #description>
+                    <!-- eslint-disable-next-line -->
+          <span v-html="texts.description" />
+                </template>
+
+                <template #trailing-icon>
+                    <!-- @slot Иконка справа от заголовка и описания -->
+                    <slot name="trailing-icon" :selected="selected">
+                        <IconCheckmarkCircle
+                            v-if="selected"
+                            class="ui-v1-select-option__checkmark-icon"
+                            aria-hidden="true"
+                        />
+                        <IconAddCircleOutlined
+                            v-else-if="multiple"
+                            class="ui-v1-select-option__add-icon"
+                            aria-hidden="true"
+                        />
+                    </slot>
+                </template>
+            </UiMenuItem>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Option } from '@/common/components/select'
+import type {
+  PropType,
+  Ref,
+} from 'vue'
+
+import IconCheckmarkCircle from '~assets/sprites/actions/checkmark-circle.svg'
+import IconAddCircleOutlined from '~assets/sprites/actions/add-circle-outlined.svg'
+
+import { UiMenuItem } from '@/remote/components/menu'
+
+import isEqual from 'lodash.isequal'
+
+import {
+  highlight as _highlight,
+  uid,
+} from '@/common/components/select'
+
+import {
+  computed,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from 'vue'
+
+import { SIZE } from '@/common/components/menu'
+
+import {
+  IsSelectedKey,
+  RegisterKey,
+  SyncKey,
+  UnregisterKey,
+  ToggleKey,
+  FilterKey,
+  FilteredKey,
+  TickerKey,
+  MultipleKey,
+  RegisterOptionKey,
+  UnregisterOptionKey,
+  FastenedKey,
+} from '@/host/components/select/injection'
+
+const props = defineProps({
+  /** Значение опции */
+  value: {
+    type: null as unknown as PropType<unknown>,
+    required: true,
+  },
+
+  /** Заголовок */
+  label: {
+    type: String,
+    required: true,
+  },
+
+  /** Описание */
+  description: {
+    type: String,
+    default: '',
+  },
+
+  /** Опция выбрана/не выбрана в списке */
+  active: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Заблокированный */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /** Размер шрифта, иконок и внутренних отступов компонента */
+  size: {
+    type: String as unknown as PropType<SIZE>,
+    validator: (size: string) => Object.values(SIZE).includes(size as SIZE),
+    default: SIZE.MD,
+  },
+
+  /** Счетчик количества */
+  counter: {
+    type: null as unknown as PropType<string|number|null>,
+    validator: (counter: unknown) => counter === null || ['string', 'number'].includes(typeof counter),
+    default: null,
+  },
+
+  /** Жирное начертание текста */
+  accent: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const id = uid('u1-v1-select-option')
+
+const syncInSelect = inject<(id: string, data: {
+  label: string;
+  value: unknown;
+}) => void>(SyncKey, () => {})
+
+const registerInSelect = inject<(option: Option) => void>(RegisterKey, () => {})
+const unregisterInSelect = inject<(id: string) => void>(UnregisterKey, () => {})
+
+const registerInGroup = inject<(option: Option) => void>(RegisterOptionKey, () => {})
+const unregisterInGroup = inject<(id: string) => void>(UnregisterOptionKey, () => {})
+const isSelected = inject<Ref<(value: unknown) => boolean>>(IsSelectedKey, ref(() => false))
+const toggle = inject<(value: unknown) => void>(ToggleKey, () => {})
+
+const fastened = inject<boolean>(FastenedKey, false)
+const filter = inject<Ref<string>>(FilterKey, ref(''))
+const filtered = inject<Ref<boolean>>(FilteredKey, ref(false))
+const ticker = inject<Ref<boolean>>(TickerKey, ref(false))
+const multiple = inject<Ref<boolean>>(MultipleKey, ref(false))
+
+const highlight = (text: string, style = 'font-weight: 500;') => _highlight(text, filter.value, style)
+
+const texts = computed(() => ({
+  label: filtered.value ? highlight(props.label) : props.label,
+  description: filtered.value ? highlight(props.description, 'font-weight: 600;') : props.description,
+}))
+
+const matched = computed((): boolean => texts.value.label !== props.label || texts.value.description !== props.description)
+const selected = computed((): boolean => props.active || isSelected.value(props.value))
+const hidden = computed((): boolean => !(fastened || !filtered.value || matched.value))
+
+const onClick = () => {
+  if (!props.disabled) {
+    toggle(props.value)
+  }
+}
+
+const off = watch([
+  () => props.label,
+  () => props.value,
+], ([newLabel, newValue], [oldLabel, oldValue]) => {
+  if (newLabel !== oldLabel || !isEqual(newValue, oldValue)) {
+    syncInSelect(id, {
+      label: newLabel,
+      value: newValue,
+    })
+  }
+})
+
+onBeforeMount(() => {
+  const option: Option = {
+    id,
+    value: props.value,
+    label: props.label,
+    isMatched: () => !filtered.value || matched.value,
+  }
+
+  registerInSelect(option)
+  registerInGroup(option)
+})
+
+onBeforeUnmount(() => {
+  off()
+  unregisterInSelect(id)
+  unregisterInGroup(id)
+})
+</script>
diff --git a/packages/v1-components/src/remote/components/select/UiSelectOptionGroup.vue b/packages/v1-components/src/remote/components/select/UiSelectOptionGroup.vue
new file mode 100644
index 00000000..bb9e67e8
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/UiSelectOptionGroup.vue
@@ -0,0 +1,156 @@
+<template>
+    <div
+        v-bind="$attrs"
+        :class="{
+            'ui-v1-select-option-group': true,
+            'ui-v1-select-option-group_hidden': hidden,
+        }"
+    >
+        <UiMenuItemGroup>
+            <template v-if="$slots.option" #option>
+                <UiSelectOptionGroupHeader>
+                    <!-- @slot Разметка блока группировки опций -->
+                    <slot name="option" />
+                </UiSelectOptionGroupHeader>
+            </template>
+
+            <template #label>
+                <!-- @slot Заголовок -->
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </template>
+
+            <template #quantity>
+                <!-- @slot Счетчик количества элементов внутри группы -->
+                <slot name="quantity" :quantity="matchedOptionsQuantity">
+                    {{ matchedOptionsQuantity }}
+                </slot>
+            </template>
+
+            <!-- @slot Иное содержимое компонента -->
+            <slot />
+        </UiMenuItemGroup>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import type {
+  Option,
+  Group,
+} from '@/host/components/select/injection'
+
+import { UiMenuItemGroup } from '@/remote/components/menu'
+
+import UiSelectOptionGroupHeader from './UiSelectOptionGroupHeader.vue'
+
+import {
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  provide,
+  ref,
+} from 'vue'
+
+import { uid } from '@/common/components/select'
+
+import {
+  FastenedKey,
+  FilteredKey,
+  RegisterGroupKey,
+  RegisterHeaderOptionKey,
+  RegisterOptionKey,
+  UnregisterGroupKey,
+  UnregisterHeaderOptionKey,
+  UnregisterOptionKey,
+} from '@/host/components/select/injection'
+
+defineProps({
+  /** Заголовок группы опций */
+  label: {
+    type: String,
+    default: '',
+  },
+})
+
+const id = uid('u1-v1-select-option-group')
+const options = ref<Option[]>([])
+const groups = ref<Group[]>([])
+const headerOptions = ref<Option[]>([])
+
+const COMPONENT_ALREADY_REGISTERED = (prefix: string, id: string) => {
+  return `[${prefix}] Component with id ${id} already registered. Unregister it before using again.`
+}
+
+provide(RegisterOptionKey, (option: Option) => {
+  if (options.value.some(item => item.id === option.id)) {
+    throw new Error(COMPONENT_ALREADY_REGISTERED('UiSelect', option.id))
+  }
+
+  options.value.push(option)
+})
+
+provide(UnregisterOptionKey, (id: string) => {
+  const index = options.value.findIndex(option => option.id === id)
+  if (index !== -1) {
+    options.value.splice(index, 1)
+  }
+})
+
+provide(RegisterGroupKey, (group: Group) => {
+  if (groups.value.some(g => g.id === group.id)) {
+    throw new Error(COMPONENT_ALREADY_REGISTERED('UiSelectOptionGroup', group.id))
+  }
+
+  groups.value.push(group)
+})
+
+provide(UnregisterGroupKey, (id: string) => {
+  const index = groups.value.findIndex(group => group.id === id)
+  if (index !== -1) {
+    groups.value.splice(index, 1)
+  }
+})
+
+provide(RegisterHeaderOptionKey, (option: Option) => {
+  if (headerOptions.value.some(item => item.id === option.id)) {
+    throw new Error(COMPONENT_ALREADY_REGISTERED('UiSelectOptionGroupHeader', option.id))
+  }
+
+  headerOptions.value.push(option)
+})
+
+provide(UnregisterHeaderOptionKey, (id: string) => {
+  const index = headerOptions.value.findIndex(o => o.id === id)
+  if (index !== -1) {
+    headerOptions.value.splice(index, 1)
+  }
+})
+
+provide(FastenedKey, computed(() => false))
+
+const registerInGroup = inject<((group: Group) => void)>(RegisterGroupKey, () => {})
+const unregisterInGroup = inject<((id: string) => void)>(UnregisterGroupKey, () => {})
+
+const filtered = inject<Ref<boolean|null>>(FilteredKey, ref(false))
+
+const matchedOptionsQuantity = computed((): number => {
+  return options.value.filter(o => o.isMatched()).length
+    + groups.value.reduce((total, g) => total + g.matchedQuantity(), 0)
+})
+
+const matched = computed((): boolean => !!matchedOptionsQuantity.value || headerOptions.value.some(o => o.isMatched())
+  || groups.value.some(g => g.isMatched()))
+
+const hidden = computed(() => !filtered.value || matched.value)
+
+onMounted(() => registerInGroup({
+  id,
+  matchedQuantity: () => matchedOptionsQuantity.value,
+  isMatched: () => matched.value,
+}))
+
+onBeforeUnmount(() => unregisterInGroup(id))
+</script>
diff --git a/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue b/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
new file mode 100644
index 00000000..2c77dc02
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Option } from '@/host/components/select/injection'
+
+import { computed, inject, provide } from 'vue'
+
+import {
+  FastenedKey,
+  RegisterHeaderOptionKey,
+  UnregisterHeaderOptionKey,
+  RegisterOptionKey,
+  UnregisterOptionKey,
+} from '@/host/components/select/injection'
+
+const registerHeaderOption = inject<(option: Option) => void>(RegisterHeaderOptionKey, () => {})
+const unregisterHeaderOption = inject<(id: string) => void>(UnregisterHeaderOptionKey, () => {})
+
+provide(RegisterOptionKey, registerHeaderOption)
+provide(UnregisterOptionKey, unregisterHeaderOption)
+provide(FastenedKey, computed(() => true))
+</script>
diff --git a/packages/v1-components/src/remote/components/select/index.ts b/packages/v1-components/src/remote/components/select/index.ts
new file mode 100644
index 00000000..9f775f10
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/index.ts
@@ -0,0 +1,3 @@
+export { default as UiSelect } from './UiSelect.vue'
+export { default as UiSelectOption } from './UiSelectOption.vue'
+export { default as UiSelectOptionGroup } from './UiSelectOptionGroup.vue'
\ No newline at end of file
diff --git a/packages/v1-components/src/remote/components/select/parts.ts b/packages/v1-components/src/remote/components/select/parts.ts
new file mode 100644
index 00000000..19a0ce16
--- /dev/null
+++ b/packages/v1-components/src/remote/components/select/parts.ts
@@ -0,0 +1,78 @@
+import type { RemoteProperties } from '@/remote/scaffolding'
+import type { RemoteCallable } from '@remote-ui/rpc'
+import type { SchemaType } from '@omnicajs/vue-remote/remote'
+
+import type {
+  SerializedEvent,
+  SerializedFocusEvent,
+  SerializedInputEvent,
+} from '@omnicajs/vue-remote/types/events'
+
+import type {
+  UiSelectOptionProperties,
+  UiSelectPopperMethods,
+  UiSelectPopperProperties,
+  UiSelectTriggerMethods,
+  UiSelectTriggerProperties,
+} from '@/common/components/select'
+
+import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
+
+export const UiSelectTriggerType = 'UiSelectTrigger' as SchemaType<
+  'UiSelectTrigger',
+  RemoteProperties<UiSelectTriggerProperties>,
+  RemoteCallable<UiSelectTriggerMethods>
+>
+
+export const UiSelectTrigger = defineRemoteComponent(
+  UiSelectTriggerType,
+  [
+    'input',
+    'focus',
+    'blur',
+    'clear',
+    'update:value',
+    'update:expanded',
+  ] as unknown as {
+    'input': (event: SerializedInputEvent) => boolean,
+    'focus': (event: SerializedFocusEvent) => boolean,
+    'blur': (event: SerializedEvent) => boolean,
+    'clear': () => boolean,
+    'update:value': (value: string | number) => boolean,
+    'update:expanded': (expanded: boolean) => boolean,
+  }
+)
+
+export const UiSelectPopperType = 'UiSelectPopper' as SchemaType<
+  'UiSelectPopper',
+  RemoteProperties<UiSelectPopperProperties>,
+  RemoteCallable<UiSelectPopperMethods>
+>
+
+export const UiSelectPopper = defineRemoteComponent(
+  UiSelectPopperType,
+  [
+    'update:visible',
+    'show',
+    'hide',
+    'shown',
+    'hidden',
+    'dispose',
+  ] as unknown as {
+    'update:visible': (visible: boolean) => boolean,
+    'show': () => boolean,
+    'hide': () => boolean,
+    'shown': () => boolean,
+    'hidden': () => boolean,
+    'dispose': () => boolean,
+  }
+)
+
+export const UiSelectOptionType = 'UiSelectOption' as SchemaType<
+  'UiSelectOption',
+  RemoteProperties<UiSelectOptionProperties>
+>
+
+export const UiSelectOption = defineRemoteComponent(
+  UiSelectOptionType
+)
diff --git a/packages/v1-components/storybook/endpoint.ts b/packages/v1-components/storybook/endpoint.ts
new file mode 100644
index 00000000..e5dd2d67
--- /dev/null
+++ b/packages/v1-components/storybook/endpoint.ts
@@ -0,0 +1,107 @@
+import type {
+  Channel,
+  RemoteRoot,
+  SchemaOf,
+} from '@omnicajs/vue-remote/remote'
+import type { ShallowReactive } from 'vue'
+
+import {
+  Component,
+  CreateAppFunction,
+  shallowReactive,
+} from 'vue'
+
+import type {
+  Endpoint,
+  MessageEndpoint,
+} from '@remote-ui/rpc'
+
+import {
+  createEndpoint,
+  release,
+  retain,
+} from '@remote-ui/rpc'
+
+
+import {
+  createRemoteRenderer,
+  createRemoteRoot,
+} from '@omnicajs/vue-remote/remote'
+
+export type Lifecycle<T extends object = object> = {
+  run (channel: Channel, props?: Partial<T>): Promise<void>;
+  release (): void;
+}
+
+export interface Callable<T extends object = object> {
+  setProps (props: Partial<T>): void;
+}
+
+export interface Runner<T extends object = object> {
+  run(
+    createApp: CreateAppFunction<
+      | Component<RemoteRoot<SchemaOf<string>>>
+      | RemoteRoot<SchemaOf<string>>
+    >,
+    root: RemoteRoot<SchemaOf<string>>,
+    props: ShallowReactive<Partial<T>>,
+  ): Promise<() => void>;
+
+}
+
+const createRoot = async (channel: Channel) => {
+  const root = createRemoteRoot(channel, {
+    components: [
+      'UiMenuItem',
+      'UiMenuItemGroup',
+      'UiPopperConnector',
+      'UiSelectPopper',
+      'UiSelectTrigger',
+    ],
+  })
+
+  await root.mount()
+
+  return root
+}
+
+export const createComponentEndpoint = <T extends object = object>(
+  runner: Runner<T>,
+  messenger: MessageEndpoint
+): Endpoint<Callable<T> & Lifecycle> => {
+  const endpoint = createEndpoint<Callable<T> & Lifecycle>(messenger)
+
+  let onRelease = () => {}
+
+  const currentProps = shallowReactive<Partial<T>>({})
+
+  endpoint.expose({
+    async run (channel: Channel, props?: Partial<T> ) {
+      retain(channel)
+      Object.assign(currentProps, props)
+
+      const root = await createRoot(channel)
+      await root.mount()
+
+      const { createApp } = createRemoteRenderer(root)
+
+      const destroy = await runner.run(createApp, root, currentProps)
+
+      onRelease = () => {
+        destroy()
+        release(channel)
+      }
+    },
+
+    setProps (props: Partial<T>) {
+      Object.assign(currentProps, props)
+    },
+
+    release () {
+      onRelease()
+      onRelease = () => {}
+    },
+  })
+
+  return endpoint
+}
diff --git a/packages/v1-components/storybook/stories/UiMenuItem.example.vue b/packages/v1-components/storybook/stories/UiMenuItem.example.vue
new file mode 100644
index 00000000..6eca5dd3
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiMenuItem.example.vue
@@ -0,0 +1,88 @@
+<template>
+    <UiMenuItem
+        :class="$style['item']"
+        :size="size"
+        :counter="counter"
+        :accent="accent"
+    >
+        {{ text }}
+
+        <template v-if="avatar" #avatar>
+            <UiAvatar :name="text" />
+        </template>
+
+        <template v-if="description" #description>
+            {{ description }}
+        </template>
+
+        <template v-if="leadingIcon" #leading-icon>
+            <IconUserOutlined :class="$style['icon']" />
+        </template>
+
+        <template v-if="trailingIcon" #trailing-icon>
+            <IconCheckmarkCircle :class="$style['icon']" />
+        </template>
+    </UiMenuItem>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+import IconUserOutlined from '~assets/sprites/user/user-outlined.svg'
+import IconCheckmarkCircle from '~assets/sprites/actions/checkmark-circle.svg'
+
+import UiMenuItem from '@/host/components/menu/UiMenuItem.vue'
+import UiAvatar from '@/host/components/avatar/UiAvatar.vue'
+
+import { SIZE } from '@/common/components/menu'
+
+defineProps({
+  avatar: {
+    type: Boolean,
+    default: false,
+  },
+
+  text: {
+    type: String,
+    default: 'Audrey Robertson',
+  },
+
+  description: {
+    type: String,
+    default: '',
+  },
+
+  counter: {
+    type: [String, Number],
+    default: null,
+  },
+
+  size: {
+    type: String as PropType<SIZE | `${SIZE}`>,
+    default: SIZE.MD,
+  },
+
+  accent: {
+    type: Boolean,
+    default: false,
+  },
+
+  leadingIcon: {
+    type: Boolean,
+    default: false,
+  },
+
+  trailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style lang="less" module>
+@import (reference) '~assets/stylesheets/palette.less';
+
+.item { max-width: 220px; }
+
+.icon { color: @blue-500; }
+</style>
diff --git a/packages/v1-components/storybook/stories/UiMenuItem.mdx b/packages/v1-components/storybook/stories/UiMenuItem.mdx
new file mode 100644
index 00000000..82f13187
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiMenuItem.mdx
@@ -0,0 +1,44 @@
+import ToReact from '../ToReact.ts'
+
+import UiMenuItem from './UiMenuItem.example.vue'
+
+# UiMenuItem
+
+Используется для отображения элемента выпадающего списка (меню)
+
+## Механика работы
+Содержит основной текст, может содержать иконку слева, справа или дополнительный текст
+
+## Только основной текст (Дефолтный слот)
+
+<ToReact is={UiMenuItem} />
+
+## Жирный текст со счетчиком справа
+
+<ToReact is={UiMenuItem} counter="15" accent />
+
+## Основной текст и описание
+
+<ToReact is={UiMenuItem} description="Менеджер" />
+
+## Слот для аватара
+
+<ToReact is={UiMenuItem} avatar />
+
+## Слот для аватара и слот для description
+
+<ToReact is={UiMenuItem} avatar description="Менеджер" />
+
+## Иконка слева
+
+<ToReact is={UiMenuItem} leading-icon />
+
+## Иконка справа
+<ToReact is={UiMenuItem} trailing-icon />
+
+## Иконки слева и справа
+<ToReact is={UiMenuItem} leading-icon trailing-icon />
+
+## Уменьшенный размер (size="sm")
+
+<ToReact is={UiMenuItem} size="sm" />
diff --git a/packages/v1-components/storybook/stories/UiMenuItem.stories.ts b/packages/v1-components/storybook/stories/UiMenuItem.stories.ts
new file mode 100644
index 00000000..8048b079
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiMenuItem.stories.ts
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj} from '@storybook/vue3'
+
+import UiMenuItem from '@/host/components/menu/UiMenuItem.vue'
+
+import page from './UiMenuItem.mdx'
+
+import { SIZE } from '@/common/components/menu'
+
+const meta = {
+  id: 'UiMenuItem',
+
+  title: 'Components/UiMenuItem',
+
+  component: UiMenuItem,
+
+  argTypes: {
+    size: {
+      options: Object.values(SIZE),
+    },
+
+    counter: {
+      control: { type: 'number' },
+    },
+  },
+
+  render: (args) => ({
+    components: {
+      UiMenuItem,
+    },
+
+    setup: () => ({ args }),
+
+    template: `
+      <UiMenuItem v-bind="args">
+          Audrey Robertson
+      </UiMenuItem>
+    `,
+  }),
+
+  parameters: {
+    docs: { page },
+    layout: 'centered',
+  },
+} satisfies Meta<typeof UiMenuItem>
+
+// noinspection JSUnusedGlobalSymbols
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Sandbox: Story = {
+  args: {
+    size: 'md',
+    description: '',
+    counter: 0,
+    accent: true,
+    active: false,
+    danger: false,
+  },
+}
\ No newline at end of file
diff --git a/packages/v1-components/storybook/stories/UiSelect.mdx b/packages/v1-components/storybook/stories/UiSelect.mdx
new file mode 100644
index 00000000..5bd29ccf
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiSelect.mdx
@@ -0,0 +1,3 @@
+# UiSelect
+
+test
\ No newline at end of file
diff --git a/packages/v1-components/storybook/stories/UiSelect.remote.ts b/packages/v1-components/storybook/stories/UiSelect.remote.ts
new file mode 100644
index 00000000..f86e3c9e
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiSelect.remote.ts
@@ -0,0 +1,73 @@
+import { UiSelect } from '../../src/remote/components/select'
+import { UiSelectOption } from '../../src/remote/components/select'
+
+import { createComponentEndpoint } from '../endpoint'
+import { h } from 'vue'
+
+import IconNotification from '../../assets/sprites/alerts/notifications.svg'
+import IconWarning from '../../assets/sprites/alerts/warning.svg'
+import IconError from '../../assets/sprites/alerts/error-outlined.svg'
+
+type UiSelectProps = InstanceType<typeof UiSelect>['$props']
+
+createComponentEndpoint<UiSelectProps>({
+  async run (createApp, root, props) {
+    const app = createApp({
+      setup ( ) {
+        return () => h(UiSelect, {
+          ...props,
+          equalsFn: (a: unknown, b: unknown) => a === b,
+        },{
+          default: () =>
+            [
+              'Kyle Simmmons',
+              'Eduardo Henry',
+              'Philip Williamson',
+              'Max Miles',
+              'Caroline Allen',
+              'Joanne Thompson Joanne Thompson Joanne Thompson Thompson Thompson',
+              'DAD',
+            ].map(t =>
+              h(UiSelectOption, {
+                value: t,
+                label: t,
+              }, {
+                'leading-icon': ({ selected }: { selected: boolean }) => {
+                  if (selected) {
+                    return h(IconWarning, {
+                      class: 'ui-v1-select-option__checkmark-icon',
+                      'aria-hidden': 'true',
+                    })
+                  }
+
+                  return null
+                },
+
+                'trailing-icon': ({ selected }: { selected: boolean }) => {
+                  if (selected) {
+                    return h(IconNotification, {
+                      class: 'ui-v1-select-option__checkmark-icon',
+                      'aria-hidden': 'true',
+                    })
+                  }
+
+                  if (props.multiple) {
+                    return h(IconError, {
+                      class: 'ui-v1-select-option__add-icon',
+                      'aria-hidden': 'true',
+                    })
+                  }
+
+                  return null
+                },
+              })
+            ),
+        })
+      },
+    })
+
+    app.mount(root)
+
+    return () => app.unmount()
+  },
+}, self as unknown as Worker)
diff --git a/packages/v1-components/storybook/stories/UiSelect.stories.ts b/packages/v1-components/storybook/stories/UiSelect.stories.ts
new file mode 100644
index 00000000..c18d07dc
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiSelect.stories.ts
@@ -0,0 +1,120 @@
+import type { Callable } from '../endpoint'
+import type { Lifecycle } from '../endpoint'
+import type { Meta } from '@storybook/vue3'
+import type { StoryObj } from '@storybook/vue3'
+
+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 { UiSelect } from '../../src/remote/components/select'
+
+import { HostedTree } from '@omnicajs/vue-remote/host'
+import { createEndpoint } from '@remote-ui/rpc'
+import { createProvider } from '@omnicajs/vue-remote/host'
+import { createReceiver } from '@omnicajs/vue-remote/host'
+import { watch } from 'vue'
+
+import page from './UiSelect.mdx'
+
+import { SIZE } from '@/common/components/select'
+import { PLACEMENT } from '@/common/components/select'
+
+const provider = createProvider({
+  UiMenuItem,
+  UiMenuItemGroup,
+  UiPopperConnector,
+  UiSelectPopper,
+  UiSelectTrigger,
+})
+const receiver = createReceiver()
+
+const meta = {
+  title: 'Components/UiSelect',
+
+  component: UiSelect,
+
+  argTypes: {
+    id: { control: false },
+    value: { control: false },
+    expanded: { control: 'boolean' },
+    clearable: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    filterable: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    onlyPlaceholder: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    ticker: { control: 'boolean' },
+
+    inputSize: {
+      options: Object.values(SIZE),
+    },
+
+    placement: {
+      options: Object.values(PLACEMENT),
+    },
+
+    popperFitTrigger: { control: 'boolean' },
+    popperClass: { control: 'text' },
+    popperOptions: { control: false },
+    targetTriggers: { control: false },
+    popperTriggers: { control: false },
+  },
+
+  render: (args) => ({
+    components: {
+      HostedTree,
+      UiMenuItem,
+      UiMenuItemGroup,
+      UiPopperConnector,
+      UiSelectPopper,
+      UiSelectTrigger,
+    },
+
+    setup () {
+      const worker = new Worker(new URL('./UiSelect.remote.ts', import.meta.url), { type: 'module'})
+
+      const endpoint = createEndpoint<Callable & Lifecycle>(worker)
+
+      endpoint.call.run(receiver.receive, args)
+
+      watch(args, (newArgs) => {
+        endpoint.call.setProps(newArgs)
+      })
+
+      return {
+        args,
+        provider,
+        receiver,
+      }
+    },
+
+    template: `
+      <HostedTree :provider="provider" :receiver="receiver" />
+    `,
+  }),
+
+  parameters: {
+    docs: { page },
+    layout: 'centered',
+  },
+} satisfies Meta<typeof UiSelectTrigger>
+
+// noinspection JSUnusedGlobalSymbols
+export default meta
+
+type Story = StoryObj<typeof meta>;
+
+export const Sandbox: Story = {
+  args: {
+    placeholder: 'test123',
+    ticker: false,
+    disabled: false,
+    multiple: false,
+    filterable: false,
+  },
+}
diff --git a/packages/v1-components/storybook/tsconfig.json b/packages/v1-components/storybook/tsconfig.json
index 856762ce..4862b74a 100644
--- a/packages/v1-components/storybook/tsconfig.json
+++ b/packages/v1-components/storybook/tsconfig.json
@@ -2,6 +2,10 @@
   "extends": "../tsconfig.json",
   "include": [
     "storybook/**/*.stories.ts",
-    "storybook/**/*.vue"
+    "storybook/**/*.vue",
+    "stories/**/*.ts",
+    "stories/**/*.vue",
+    "stories/**/*.mdx",
+    "./../shims-*.d.ts",
   ]
 }

From 55cdfaed1bcafbfd2bfac73988aa131f77434f9e Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 20:05:59 +0400
Subject: [PATCH 2/9] style: Eslint rules update

---
 eslint.config.js | 72 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 68 insertions(+), 4 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 73e4e7f3..66b3830f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -15,6 +15,9 @@ export default [
       },
     },
     rules: {
+      'brace-style': ['error', '1tbs', {
+        allowSingleLine: true,
+      }],
       'comma-dangle': ['error', {
         arrays: 'always-multiline',
         exports: 'always-multiline',
@@ -22,13 +25,43 @@ export default [
         imports: 'always-multiline',
         objects: 'always-multiline',
       }],
+      'eqeqeq': ['error', 'always'],
       'indent': ['error', 2, {
-        'ignoreComments': true,
-        'SwitchCase': 1,
+        ignoreComments: true,
+        SwitchCase: 1,
+      }],
+      'keyword-spacing': ['error', {
+        before: true,
+        after: true,
+        overrides: {
+          catch: { before: true, after: true },
+        },
       }],
+      'linebreak-style': [2, 'unix'],
+      'no-debugger': 'error',
+      'no-empty': 'off',
+      'no-multiple-empty-lines': ['error', {
+        max: 1,
+        maxBOF: 0,
+        maxEOF: 0,
+      }],
+      'no-new-wrappers': 'error',
+      'no-prototype-builtins': 'error',
+      'no-shadow-restricted-names': 'error',
+      'no-throw-literal': 'error',
+      'no-trailing-spaces': ['error'],
+      'no-unsafe-optional-chaining': 'off',
+      'no-useless-escape': 'off',
+      'object-curly-spacing': ['error', 'always'],
+      'padded-blocks': ['error', 'never'],
       'quotes': ['error', 'single'],
       'semi': ['error', 'never'],
+      'space-infix-ops': ['error', { 'int32Hint': false }],
 
+      '@typescript-eslint/consistent-type-imports': ['error', {
+        prefer: 'type-imports',
+        fixStyle: 'separate-type-imports',
+      }],
       '@typescript-eslint/naming-convention': 'off',
     },
   },
@@ -41,10 +74,41 @@ export default [
       parserOptions: { parser: pluginTs.parser },
     },
     rules: {
-      'vue/html-indent': ['error', 4],
+      'vue/attributes-order': 'error',
+      'vue/component-definition-name-casing': ['error', 'PascalCase'],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+      'vue/first-attribute-linebreak': 'error',
+      'vue/html-closing-bracket-newline': ['error', {
+        multiline: 'always',
+        singleline: 'never',
+      }],
+      'vue/html-closing-bracket-spacing': 'error',
+      'vue/html-indent': ['error', 4, {
+        attribute: 1,
+        closeBracket: 0,
+        alignAttributesVertically: true,
+        ignores: [],
+      }],
+      'vue/html-self-closing': ['error', {
+        html: {
+          component: 'always',
+          normal: 'always',
+          void: 'always',
+        },
+        math: 'always',
+        svg: 'always',
+      }],
+      'vue/no-required-prop-with-default': 'error',
+      'vue/max-attributes-per-line': ['error', {
+        singleline: 4,
+        multiline: {
+          max: 1,
+        },
+      }],
+      'vue/one-component-per-file': 'off',
       'indent': ['error', 2, { ignoreComments: true, SwitchCase: 1 }],
     },
   },
   { ignores: ['dist/*'] },
   { ignores: ['**/dist/*'] },
-]
\ No newline at end of file
+]

From 0f4905090198670592c2be5df6ece7221a944dbb Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 20:16:34 +0400
Subject: [PATCH 3/9] style: Applied updated eslint rules

---
 index.d.ts                                    |  2 +-
 .../src/common/components/tag.ts              |  2 +-
 .../v1-components/src/common/predicate.ts     |  2 +-
 .../src/host/components/avatar/injection.ts   |  2 +-
 .../host/components/checkbox/UiCheckbox.vue   |  2 +-
 .../components/copy-button/UiCopyButton.vue   |  2 +-
 .../src/host/components/date/UiDate.vue.d.ts  |  1 -
 .../src/host/components/image/UiImage.vue     |  2 +-
 .../src/host/components/menu/UiMenuItem.vue   |  2 +-
 .../components/menu/UiMenuItemGroup.vue.d.ts  |  1 -
 .../src/host/components/modal/layer.ts        | 30 ++++++++---------
 .../host/components/popper/UiPopper.vue.d.ts  |  2 +-
 .../src/host/components/popper/composables.ts |  2 +-
 .../src/host/components/radio/UiRadio.vue     |  2 +-
 .../host/components/select/UiSelectPopper.vue |  8 ++---
 .../components/select/UiSelectPopper.vue.d.ts |  2 +-
 .../components/tooltip/UiTooltip.vue.d.ts     |  2 +-
 .../src/remote/components/menu.ts             |  2 +-
 .../src/remote/components/modal-sidebar.ts    |  2 +-
 .../src/remote/components/select/UiSelect.vue |  2 --
 .../components/select/UiSelectOption.vue      | 32 +++++++++----------
 .../src/remote/components/yandex-map.ts       |  2 +-
 packages/v1-components/storybook/endpoint.ts  |  7 ++--
 .../storybook/stories/UiLink.stories.ts       |  2 +-
 .../storybook/stories/UiMenuItem.stories.ts   |  2 +-
 .../stories/UiModalWindow.stories.ts          |  8 ++---
 .../storybook/stories/UiSelect.stories.ts     |  2 +-
 packages/v1-contexts/src/common/order/card.ts |  2 +-
 packages/v1-contexts/src/common/settings.ts   |  2 +-
 .../tests/__util__/createAccessor.ts          |  2 +-
 src/composables.ts                            |  2 +-
 tests/__util__/createAccessor.ts              |  2 +-
 32 files changed, 65 insertions(+), 72 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index ada78497..f72ff0f6 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -9,7 +9,7 @@ import type {
   RemoteCallable,
 } from '@remote-ui/rpc'
 
-import {
+import type {
   ContextAccessor,
   ContextSchema,
   CustomFieldKind,
diff --git a/packages/v1-components/src/common/components/tag.ts b/packages/v1-components/src/common/components/tag.ts
index 0ab249af..c268ecaa 100644
--- a/packages/v1-components/src/common/components/tag.ts
+++ b/packages/v1-components/src/common/components/tag.ts
@@ -22,7 +22,7 @@ type StyleDeclaration = CSSStyleDeclaration & {
 export function deltaTransition(el: HTMLElement): Partial<StyleDeclaration> {
   const delta = el.scrollWidth - el.clientWidth
   const animationDuration = `${((el.scrollWidth / el.clientWidth) * 2).toFixed(2)}s`
-  
+
   return delta !== 0 ? {
     '--delta-width': `-${delta}px`,
     animationDuration,
diff --git a/packages/v1-components/src/common/predicate.ts b/packages/v1-components/src/common/predicate.ts
index d1ac1edd..eebd2cd5 100644
--- a/packages/v1-components/src/common/predicate.ts
+++ b/packages/v1-components/src/common/predicate.ts
@@ -13,6 +13,6 @@ export const isURL = (href: string, loose = true): boolean => {
       ].some(href => isURL(href, false))
     }
 
-    return false 
+    return false
   }
 }
diff --git a/packages/v1-components/src/host/components/avatar/injection.ts b/packages/v1-components/src/host/components/avatar/injection.ts
index 9f5d9173..5cd51990 100644
--- a/packages/v1-components/src/host/components/avatar/injection.ts
+++ b/packages/v1-components/src/host/components/avatar/injection.ts
@@ -3,6 +3,6 @@ import type {
   ComputedRef,
 } from 'vue'
 
-import { SIZE } from '@/common/components/avatar'
+import type { SIZE } from '@/common/components/avatar'
 
 export const AvatarSizeKey = Symbol('UiAvatarSize') as InjectionKey<ComputedRef<SIZE | `${SIZE}`>>
diff --git a/packages/v1-components/src/host/components/checkbox/UiCheckbox.vue b/packages/v1-components/src/host/components/checkbox/UiCheckbox.vue
index d0e47545..fb50bb4b 100644
--- a/packages/v1-components/src/host/components/checkbox/UiCheckbox.vue
+++ b/packages/v1-components/src/host/components/checkbox/UiCheckbox.vue
@@ -20,7 +20,7 @@
             type="checkbox"
             class="ui-v1-checkbox__input"
             @change="onChange"
-        >
+        />
 
         <span class="ui-v1-checkbox__checkmark">
             <IconDone
diff --git a/packages/v1-components/src/host/components/copy-button/UiCopyButton.vue b/packages/v1-components/src/host/components/copy-button/UiCopyButton.vue
index d2f9ba62..d846c0b6 100644
--- a/packages/v1-components/src/host/components/copy-button/UiCopyButton.vue
+++ b/packages/v1-components/src/host/components/copy-button/UiCopyButton.vue
@@ -42,7 +42,7 @@
             :value="text"
             class="ui-v1-copy-button__area"
             type="text"
-        >
+        />
     </div>
 </template>
 
diff --git a/packages/v1-components/src/host/components/date/UiDate.vue.d.ts b/packages/v1-components/src/host/components/date/UiDate.vue.d.ts
index d820a997..31fce10f 100644
--- a/packages/v1-components/src/host/components/date/UiDate.vue.d.ts
+++ b/packages/v1-components/src/host/components/date/UiDate.vue.d.ts
@@ -9,4 +9,3 @@ declare const UiDate: DefineComponent<
 >
 
 export default UiDate
-
diff --git a/packages/v1-components/src/host/components/image/UiImage.vue b/packages/v1-components/src/host/components/image/UiImage.vue
index 790650dd..57630075 100644
--- a/packages/v1-components/src/host/components/image/UiImage.vue
+++ b/packages/v1-components/src/host/components/image/UiImage.vue
@@ -3,7 +3,7 @@
         :alt="alt"
         :src="url"
         v-bind="$attrs"
-    >
+    />
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItem.vue b/packages/v1-components/src/host/components/menu/UiMenuItem.vue
index 18ba0b8c..dd74eb43 100644
--- a/packages/v1-components/src/host/components/menu/UiMenuItem.vue
+++ b/packages/v1-components/src/host/components/menu/UiMenuItem.vue
@@ -158,4 +158,4 @@ const onHover = (): void => {
 }
 </script>
 
-<style lang="less" src="./menu.less"/>
\ No newline at end of file
+<style lang="less" src="./menu.less" />
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
index 4e3a023a..55eefdf1 100644
--- a/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
+++ b/packages/v1-components/src/host/components/menu/UiMenuItemGroup.vue.d.ts
@@ -1,6 +1,5 @@
 import type { DefineComponent } from '@/common/vue'
 
-
 declare const UiMenuItemGroup: DefineComponent
 
 export default UiMenuItemGroup
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/modal/layer.ts b/packages/v1-components/src/host/components/modal/layer.ts
index 04029ed2..6fb0a91f 100644
--- a/packages/v1-components/src/host/components/modal/layer.ts
+++ b/packages/v1-components/src/host/components/modal/layer.ts
@@ -11,19 +11,19 @@ export interface Layer {
 export class LayerRegistry {
   private registry: Layer[]
   private started = false
-  
+
   constructor () {
     this.registry = []
   }
-  
+
   public start () {
     if (!this.started) {
       this.started = true
-      
+
       document.addEventListener('keydown', (event: KeyboardEvent) => {
         if (event.key === 'Escape' && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
           const layer = this.registry.find(layer => !layer.isOverlapped())
-          
+
           if (layer) {
             layer.emitEscape()
           }
@@ -31,51 +31,51 @@ export class LayerRegistry {
       })
     }
   }
-  
+
   public add (layer: Layer) {
     if (!this.registry.some(l => l.id === layer.id)) {
       this.registry.push(layer)
       this.refresh()
     }
   }
-  
+
   public remove (layer: Layer) {
     this.registry = this.registry.filter(l => l.id !== layer.id)
     this.refresh()
   }
-  
+
   public replace (id: string, layer: Layer)  {
     const index = this.registry.findIndex(l => l.id === id)
     if (index === -1) {
       throw new Error('[@embed-ui/modal] replace(): layer was not found')
     }
-    
+
     this.registry.splice(index, 1, layer)
     this.refresh()
   }
-  
+
   public refresh () {
     if (!this.registry.length) {
       this.toggleOverflow()
       return
     }
-    
+
     let overlapped = false
-    
+
     for (let i = this.registry.length - 1; i >= 0; i--) {
       this.registry[i].setIsOverlapped(overlapped)
-      
+
       if (!overlapped) {
         overlapped = this.registry[i].isBlocker()
       }
     }
-    
+
     this.toggleOverflow()
   }
-  
+
   private toggleOverflow () {
     const style = document.documentElement.style
-    
+
     if (this.registry.some(l => l.isBlocker())) {
       style.overflow = 'hidden'
     } else if (style.overflow === 'hidden') {
diff --git a/packages/v1-components/src/host/components/popper/UiPopper.vue.d.ts b/packages/v1-components/src/host/components/popper/UiPopper.vue.d.ts
index eec8b317..05774478 100644
--- a/packages/v1-components/src/host/components/popper/UiPopper.vue.d.ts
+++ b/packages/v1-components/src/host/components/popper/UiPopper.vue.d.ts
@@ -1,7 +1,7 @@
 import type { DefineComponent } from '@/common/vue'
 import type { Ref } from 'vue'
 
-import {
+import type {
   UiPopperProperties,
   UiPopperMethods,
 } from '@/common/components/popper'
diff --git a/packages/v1-components/src/host/components/popper/composables.ts b/packages/v1-components/src/host/components/popper/composables.ts
index 92eab258..0a58617d 100644
--- a/packages/v1-components/src/host/components/popper/composables.ts
+++ b/packages/v1-components/src/host/components/popper/composables.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   ComputedRef,
   InjectionKey,
   Ref,
diff --git a/packages/v1-components/src/host/components/radio/UiRadio.vue b/packages/v1-components/src/host/components/radio/UiRadio.vue
index ad3e1f22..d3c67a83 100644
--- a/packages/v1-components/src/host/components/radio/UiRadio.vue
+++ b/packages/v1-components/src/host/components/radio/UiRadio.vue
@@ -18,7 +18,7 @@
             type="radio"
             class="ui-v1-radio__input"
             @change="onChange"
-        >
+        />
 
         <span class="ui-v1-radio__checkmark" />
     </span>
diff --git a/packages/v1-components/src/host/components/select/UiSelectPopper.vue b/packages/v1-components/src/host/components/select/UiSelectPopper.vue
index 6665a3ec..663cafbd 100644
--- a/packages/v1-components/src/host/components/select/UiSelectPopper.vue
+++ b/packages/v1-components/src/host/components/select/UiSelectPopper.vue
@@ -42,12 +42,12 @@ import type { Alignment } from '@floating-ui/dom'
 import type { CSSProperties } from 'vue'
 import type { PropType } from 'vue'
 import type { Side } from '@floating-ui/dom'
-import type { UiPopperProperties } from '@/common/components/popper'
-
-import {
+import type { UiPopperProperties ,
   PlacementOptions,
   Trigger,
-  TriggerSchema,
+  TriggerSchema } from '@/common/components/popper'
+
+import {
   isPlacementLiteral,
   isPlacementOptions,
 } from '@/common/components/popper'
diff --git a/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts b/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
index acd3c966..8e689a60 100644
--- a/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
+++ b/packages/v1-components/src/host/components/select/UiSelectPopper.vue.d.ts
@@ -1,7 +1,7 @@
 import type { DefineComponent } from '@/common/vue'
 import type { Ref } from 'vue'
 
-import {
+import type {
   UiPopperProperties,
   UiPopperMethods,
 } from '@/common/components/popper'
diff --git a/packages/v1-components/src/host/components/tooltip/UiTooltip.vue.d.ts b/packages/v1-components/src/host/components/tooltip/UiTooltip.vue.d.ts
index d56bfebd..f7e18d92 100644
--- a/packages/v1-components/src/host/components/tooltip/UiTooltip.vue.d.ts
+++ b/packages/v1-components/src/host/components/tooltip/UiTooltip.vue.d.ts
@@ -1,7 +1,7 @@
 import type { DefineComponent } from '@/common/vue'
 import type { Ref } from 'vue'
 
-import {
+import type {
   UiPopperProperties,
   UiPopperMethods,
 } from '@/common/components/popper'
diff --git a/packages/v1-components/src/remote/components/menu.ts b/packages/v1-components/src/remote/components/menu.ts
index a6040e24..bbec48b3 100644
--- a/packages/v1-components/src/remote/components/menu.ts
+++ b/packages/v1-components/src/remote/components/menu.ts
@@ -1,7 +1,7 @@
 import type { RemoteProperties } from '@/remote/scaffolding'
 import type { SchemaType } from '@omnicajs/vue-remote/remote'
 
-import { UiMenuItemProperties } from '@/common/components/menu'
+import type { UiMenuItemProperties } from '@/common/components/menu'
 
 import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
 
diff --git a/packages/v1-components/src/remote/components/modal-sidebar.ts b/packages/v1-components/src/remote/components/modal-sidebar.ts
index 2b7324f3..d5c9e4e2 100644
--- a/packages/v1-components/src/remote/components/modal-sidebar.ts
+++ b/packages/v1-components/src/remote/components/modal-sidebar.ts
@@ -5,7 +5,7 @@ import type { UiModalSidebarProperties } from '@/common/components/modal-sidebar
 
 import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
 
-import { CLOSE_METHOD } from '@/common/components/modal-sidebar'
+import type { CLOSE_METHOD } from '@/common/components/modal-sidebar'
 
 export const UiModalSidebarType = 'UiModalSidebar' as SchemaType<
   'UiModalSidebar',
diff --git a/packages/v1-components/src/remote/components/select/UiSelect.vue b/packages/v1-components/src/remote/components/select/UiSelect.vue
index 5a957e04..e64b44a2 100644
--- a/packages/v1-components/src/remote/components/select/UiSelect.vue
+++ b/packages/v1-components/src/remote/components/select/UiSelect.vue
@@ -289,7 +289,6 @@ provide(ToggleKey, (value: unknown) => {
     const model = arraify<unknown>(state.value)
     const index = model.findIndex(item => equals(item, value))
 
-
     console.log('toggle', value)
     if (index !== -1) {
       model.splice(index, 1)
@@ -302,7 +301,6 @@ provide(ToggleKey, (value: unknown) => {
     if (!props.multiple) {
       close()
     }
-
   } else {
     state.value = value
 
diff --git a/packages/v1-components/src/remote/components/select/UiSelectOption.vue b/packages/v1-components/src/remote/components/select/UiSelectOption.vue
index 937026e9..1b027e77 100644
--- a/packages/v1-components/src/remote/components/select/UiSelectOption.vue
+++ b/packages/v1-components/src/remote/components/select/UiSelectOption.vue
@@ -87,18 +87,18 @@ import {
 import { SIZE } from '@/common/components/menu'
 
 import {
-  IsSelectedKey,
-  RegisterKey,
-  SyncKey,
-  UnregisterKey,
-  ToggleKey,
+  FastenedKey,
   FilterKey,
   FilteredKey,
-  TickerKey,
+  IsSelectedKey,
   MultipleKey,
+  RegisterKey,
   RegisterOptionKey,
+  SyncKey,
+  TickerKey,
+  ToggleKey,
+  UnregisterKey,
   UnregisterOptionKey,
-  FastenedKey,
 } from '@/host/components/select/injection'
 
 const props = defineProps({
@@ -155,18 +155,16 @@ const props = defineProps({
 
 const id = uid('u1-v1-select-option')
 
-const syncInSelect = inject<(id: string, data: {
-  label: string;
-  value: unknown;
-}) => void>(SyncKey, () => {})
+const isSelected = inject(IsSelectedKey, ref(() => false))
+
+const syncInSelect = inject(SyncKey, () => {})
 
-const registerInSelect = inject<(option: Option) => void>(RegisterKey, () => {})
-const unregisterInSelect = inject<(id: string) => void>(UnregisterKey, () => {})
+const registerInGroup = inject(RegisterOptionKey, () => {})
+const registerInSelect = inject(RegisterKey, () => {})
+const unregisterInGroup = inject(UnregisterOptionKey, () => {})
+const unregisterInSelect = inject(UnregisterKey, () => {})
 
-const registerInGroup = inject<(option: Option) => void>(RegisterOptionKey, () => {})
-const unregisterInGroup = inject<(id: string) => void>(UnregisterOptionKey, () => {})
-const isSelected = inject<Ref<(value: unknown) => boolean>>(IsSelectedKey, ref(() => false))
-const toggle = inject<(value: unknown) => void>(ToggleKey, () => {})
+const toggle = inject(ToggleKey, () => {})
 
 const fastened = inject<boolean>(FastenedKey, false)
 const filter = inject<Ref<string>>(FilterKey, ref(''))
diff --git a/packages/v1-components/src/remote/components/yandex-map.ts b/packages/v1-components/src/remote/components/yandex-map.ts
index b5968dae..5b6aec1d 100644
--- a/packages/v1-components/src/remote/components/yandex-map.ts
+++ b/packages/v1-components/src/remote/components/yandex-map.ts
@@ -1,7 +1,7 @@
 import type { RemoteProperties } from '@/remote/scaffolding'
 import type { SchemaType } from '@omnicajs/vue-remote/remote'
 
-import { UiYandexMapProperties } from '@/common/components/yandex-map'
+import type { UiYandexMapProperties } from '@/common/components/yandex-map'
 
 import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
 
diff --git a/packages/v1-components/storybook/endpoint.ts b/packages/v1-components/storybook/endpoint.ts
index e5dd2d67..e3e42cc0 100644
--- a/packages/v1-components/storybook/endpoint.ts
+++ b/packages/v1-components/storybook/endpoint.ts
@@ -3,11 +3,11 @@ import type {
   RemoteRoot,
   SchemaOf,
 } from '@omnicajs/vue-remote/remote'
-import type { ShallowReactive } from 'vue'
+import type { ShallowReactive ,
+  Component,
+  CreateAppFunction } from 'vue'
 
 import {
-  Component,
-  CreateAppFunction,
   shallowReactive,
 } from 'vue'
 
@@ -22,7 +22,6 @@ import {
   retain,
 } from '@remote-ui/rpc'
 
-
 import {
   createRemoteRenderer,
   createRemoteRoot,
diff --git a/packages/v1-components/storybook/stories/UiLink.stories.ts b/packages/v1-components/storybook/stories/UiLink.stories.ts
index da50fe9d..72cec840 100644
--- a/packages/v1-components/storybook/stories/UiLink.stories.ts
+++ b/packages/v1-components/storybook/stories/UiLink.stories.ts
@@ -29,7 +29,7 @@ const meta = {
       control: 'select',
       options: Object.values(SIZE),
     },
-    
+
     default: { control: false },
     icon: { control: false },
   },
diff --git a/packages/v1-components/storybook/stories/UiMenuItem.stories.ts b/packages/v1-components/storybook/stories/UiMenuItem.stories.ts
index 8048b079..76cc5d56 100644
--- a/packages/v1-components/storybook/stories/UiMenuItem.stories.ts
+++ b/packages/v1-components/storybook/stories/UiMenuItem.stories.ts
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj} from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3'
 
 import UiMenuItem from '@/host/components/menu/UiMenuItem.vue'
 
diff --git a/packages/v1-components/storybook/stories/UiModalWindow.stories.ts b/packages/v1-components/storybook/stories/UiModalWindow.stories.ts
index 62576115..d8c970bc 100644
--- a/packages/v1-components/storybook/stories/UiModalWindow.stories.ts
+++ b/packages/v1-components/storybook/stories/UiModalWindow.stories.ts
@@ -34,7 +34,7 @@ const meta = {
       control: 'select',
       options: Object.values(APPEARANCE),
     },
-    
+
     scrolling: {
       control: 'select',
       options: Object.values(SCROLLING),
@@ -44,20 +44,20 @@ const meta = {
     default: { control: false },
     footer: { control: false },
   },
-  
+
   render: (args: unknown) => ({
     components: {
       UiButton,
       UiModalWindow,
     },
-    
+
     setup () {
       return {
         args,
         open: ref(false),
       }
     },
-    
+
     template: `
       <UiButton appearance="secondary" @click="open = true">
         Открыть
diff --git a/packages/v1-components/storybook/stories/UiSelect.stories.ts b/packages/v1-components/storybook/stories/UiSelect.stories.ts
index c18d07dc..4f1fd484 100644
--- a/packages/v1-components/storybook/stories/UiSelect.stories.ts
+++ b/packages/v1-components/storybook/stories/UiSelect.stories.ts
@@ -76,7 +76,7 @@ const meta = {
     },
 
     setup () {
-      const worker = new Worker(new URL('./UiSelect.remote.ts', import.meta.url), { type: 'module'})
+      const worker = new Worker(new URL('./UiSelect.remote.ts', import.meta.url), { type: 'module' })
 
       const endpoint = createEndpoint<Callable & Lifecycle>(worker)
 
diff --git a/packages/v1-contexts/src/common/order/card.ts b/packages/v1-contexts/src/common/order/card.ts
index bce524d3..893c415f 100644
--- a/packages/v1-contexts/src/common/order/card.ts
+++ b/packages/v1-contexts/src/common/order/card.ts
@@ -233,7 +233,7 @@ export const description: ContextSchemaDescription<Schema> = {
     description: {
       'en-GB': 'The order ID in the external source system',
       'es-ES': 'El ID del pedido en el sistema de origen externo',
-      'ru-RU': 'Идентифкатор заказа во внешней системе источника',
+      'ru-RU': 'Идентификатор заказа во внешней системе источника',
     },
   },
   'type': {
diff --git a/packages/v1-contexts/src/common/settings.ts b/packages/v1-contexts/src/common/settings.ts
index 782b7b97..c66d788c 100644
--- a/packages/v1-contexts/src/common/settings.ts
+++ b/packages/v1-contexts/src/common/settings.ts
@@ -10,7 +10,7 @@ import type {
   Schema,
 } from '~types/settings'
 
-import {
+import type {
   Route,
   RoutesMap,
   RoutingData,
diff --git a/packages/v1-contexts/tests/__util__/createAccessor.ts b/packages/v1-contexts/tests/__util__/createAccessor.ts
index a122f2b9..62df3408 100644
--- a/packages/v1-contexts/tests/__util__/createAccessor.ts
+++ b/packages/v1-contexts/tests/__util__/createAccessor.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   ContextSchema,
   FieldAccessor,
   FieldGetters,
diff --git a/src/composables.ts b/src/composables.ts
index 7d081036..5e927ca6 100644
--- a/src/composables.ts
+++ b/src/composables.ts
@@ -2,7 +2,7 @@ import type { Callable } from '~types/host/callable'
 
 import type { RouteParams } from '@omnicajs/symfony-router'
 
-import {
+import type {
   Context,
   ContextAccessor,
   ContextSchema,
diff --git a/tests/__util__/createAccessor.ts b/tests/__util__/createAccessor.ts
index 3c62fa27..54d88320 100644
--- a/tests/__util__/createAccessor.ts
+++ b/tests/__util__/createAccessor.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   ContextSchema,
   FieldAccessor,
   FieldGetters,

From 8512908ddcb3f9ab789d09a0749be3a3c86c8f22 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 20:54:34 +0400
Subject: [PATCH 4/9] refactor(v1-components): UiSelect: unify prop naming and
 document usage

---
 .../src/common/components/select.ts           |  23 ++--
 .../components/select/UiSelectTrigger.vue     |  34 ++---
 .../src/remote/components/select/UiSelect.vue |  26 ++--
 .../select/UiSelectOptionGroupHeader.vue      |  11 +-
 .../storybook/stories/UiSelect.mdx            | 118 +++++++++++++++++-
 .../storybook/stories/UiSelect.stories.ts     |   4 +-
 6 files changed, 157 insertions(+), 59 deletions(-)

diff --git a/packages/v1-components/src/common/components/select.ts b/packages/v1-components/src/common/components/select.ts
index 5b63cfb0..c3449916 100644
--- a/packages/v1-components/src/common/components/select.ts
+++ b/packages/v1-components/src/common/components/select.ts
@@ -30,18 +30,17 @@ export type Option = {
 }
 
 export type UiSelectTriggerProperties = {
-    value?: unknown|unknown[];
-    clearable?: boolean;
-    filter?: string;
-    invalid?: boolean;
-    multiple?: boolean;
-    opened?: boolean;
-    expanded?: boolean;
-    placeholder?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-    onlyPlaceholder?: boolean;
-    inputSize?: SIZE | `${SIZE}`;
+  value?: unknown|unknown[];
+  clearable?: boolean;
+  filter?: string;
+  invalid?: boolean;
+  multiple?: boolean;
+  expanded?: boolean;
+  placeholder?: string;
+  placeholderOnly?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  textboxSize?: SIZE | `${SIZE}`;
 }
 
 export type UiSelectTriggerMethods = {
diff --git a/packages/v1-components/src/host/components/select/UiSelectTrigger.vue b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue
index f3874ecc..9b5cd3ab 100644
--- a/packages/v1-components/src/host/components/select/UiSelectTrigger.vue
+++ b/packages/v1-components/src/host/components/select/UiSelectTrigger.vue
@@ -31,7 +31,7 @@
                 :clearable="clearable"
                 :invalid="invalid"
                 :readonly="inputReadonly"
-                :size="inputSize"
+                :size="textboxSize"
                 :disabled="disabled"
                 class="ui-v1-select__trigger"
                 @input="onInput"
@@ -121,12 +121,6 @@ const props = defineProps({
     default: false,
   },
 
-  /** Начальное состояние выпадающего списка - открыт/закрыт */
-  opened: {
-    type: Boolean,
-    default: false,
-  },
-
   /** Атрибут placeholder нативного поля ввода input */
   placeholder: {
     type: String,
@@ -146,13 +140,13 @@ const props = defineProps({
   },
 
   /** Устанавливает в качестве выводимого в input значения только содержимое placeholder */
-  onlyPlaceholder: {
+  placeholderOnly: {
     type: Boolean,
     default: false,
   },
 
   /** Размер поля ввода */
-  inputSize: {
+  textboxSize: {
     type: String as unknown as PropType<SIZE | `${SIZE}`>,
     validator: (size: string) => Object.values(SIZE).includes(size as SIZE),
     default: SIZE.SM,
@@ -186,18 +180,17 @@ const emit = defineEmits([
   'update:expanded',
 ])
 
-const trigger = ref<HTMLElement | null>(null)
-const touchstone = ref<HTMLElement | null>(null)
-const input = ref<HTMLInputElement | null>(null)
 const i18n = computed((): I18nLocalized => _i18n.init(inject(I18nInjectKey, null)?.locale ?? _i18n.fallback))
 
-const inputReadonly = computed(
-  () => props.readonly || !props.filterable
-)
+const input = ref<HTMLInputElement | null>(null)
+const inputReadonly = computed(() => props.readonly || !props.filterable)
+
+const trigger = ref<HTMLElement | null>(null)
+const touchstone = ref<HTMLElement | null>(null)
 
-const selectionLabels = computed((): string => props.selection.map(o => o.label).join(', '))
-const selectionText = computed((): string => {
-  if (props.placeholder && (props.onlyPlaceholder)) return props.placeholder
+const selectionLabels = computed(() => props.selection.map(o => o.label).join(', '))
+const selectionText = computed(() => {
+  if (props.placeholder && (props.placeholderOnly)) return props.placeholder
   if (props.multiple) {
     const width =  input.value?.clientWidth ?? 0
     if (width > 0 && selectionWidth.value > width) {
@@ -211,7 +204,7 @@ const selectionText = computed((): string => {
 const selectionWidth = ref(0)
 
 const updateSelectionWidth = () => {
-  if (touchstone.value && !props.onlyPlaceholder) {
+  if (touchstone.value && !props.placeholderOnly) {
     nextTick().then(() => {
       selectionWidth.value = touchstone.value?.clientWidth ?? 0
     })
@@ -268,12 +261,11 @@ watch(() => props.value, () => {
   }
 })
 
-watch(() => props.opened, opened => opened ? open() : close())
-
 onMounted(async () => {
   input.value = trigger.value?.querySelector('input') ?? null
 
   updateSelectionWidth()
 })
 </script>
+
 <style lang="less" src="./select.less" />
diff --git a/packages/v1-components/src/remote/components/select/UiSelect.vue b/packages/v1-components/src/remote/components/select/UiSelect.vue
index e64b44a2..38589d78 100644
--- a/packages/v1-components/src/remote/components/select/UiSelect.vue
+++ b/packages/v1-components/src/remote/components/select/UiSelect.vue
@@ -2,20 +2,19 @@
     <UiPopperConnector>
         <UiSelectTrigger
             :id="id"
-            :clearable="clearable"
-            :disabled="disabled"
-            :expanded="state.expanded"
+            :value="state.value"
+            :multiple="multiple"
+            :selection="selection"
             :filter="state.filter"
             :filterable="filterable"
-            :input-size="inputSize"
+            :clearable="clearable"
+            :expanded="state.expanded"
             :invalid="invalid"
-            :multiple="multiple"
-            :only-placeholder="onlyPlaceholder"
-            :opened="state.expanded"
-            :placeholder="placeholder"
+            :disabled="disabled"
             :readonly="readonly"
-            :value="state.value"
-            :selection="selection"
+            :placeholder-only="placeholderOnly"
+            :placeholder="placeholder"
+            :textbox-size="textboxSize"
             @input="onInput"
             @update:value="state.value = $event"
             @update:expanded="state.expanded = $event"
@@ -190,7 +189,7 @@ const props = defineProps({
   },
 
   /** Размер поля ввода */
-  inputSize: {
+  textboxSize: {
     type: String as unknown as PropType<SIZE | `${SIZE}`>,
     validator: (size: string) => Object.values(SIZE).includes(size as SIZE),
     default: SIZE.SM,
@@ -209,7 +208,7 @@ const props = defineProps({
   },
 
   /** Устанавливает в качестве выводимого в input значения только содержимое placeholder */
-  onlyPlaceholder: {
+  placeholderOnly: {
     type: Boolean,
     default: false,
   },
@@ -289,7 +288,6 @@ provide(ToggleKey, (value: unknown) => {
     const model = arraify<unknown>(state.value)
     const index = model.findIndex(item => equals(item, value))
 
-    console.log('toggle', value)
     if (index !== -1) {
       model.splice(index, 1)
     } else {
@@ -322,8 +320,6 @@ const close = () => {
     state.expanded = false
     state.filter = ''
   }
-
-  console.log('expanded', state.value)
 }
 
 watch(() => props.expanded, (newVal) => {
diff --git a/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue b/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
index 2c77dc02..fa19c4f2 100644
--- a/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
+++ b/packages/v1-components/src/remote/components/select/UiSelectOptionGroupHeader.vue
@@ -5,22 +5,17 @@
 </template>
 
 <script lang="ts" setup>
-import type { Option } from '@/host/components/select/injection'
-
 import { computed, inject, provide } from 'vue'
 
 import {
   FastenedKey,
   RegisterHeaderOptionKey,
-  UnregisterHeaderOptionKey,
   RegisterOptionKey,
+  UnregisterHeaderOptionKey,
   UnregisterOptionKey,
 } from '@/host/components/select/injection'
 
-const registerHeaderOption = inject<(option: Option) => void>(RegisterHeaderOptionKey, () => {})
-const unregisterHeaderOption = inject<(id: string) => void>(UnregisterHeaderOptionKey, () => {})
-
-provide(RegisterOptionKey, registerHeaderOption)
-provide(UnregisterOptionKey, unregisterHeaderOption)
+provide(RegisterOptionKey, inject(RegisterHeaderOptionKey, () => {}))
+provide(UnregisterOptionKey, inject(UnregisterHeaderOptionKey, () => {}))
 provide(FastenedKey, computed(() => true))
 </script>
diff --git a/packages/v1-components/storybook/stories/UiSelect.mdx b/packages/v1-components/storybook/stories/UiSelect.mdx
index 5bd29ccf..b8b98bf9 100644
--- a/packages/v1-components/storybook/stories/UiSelect.mdx
+++ b/packages/v1-components/storybook/stories/UiSelect.mdx
@@ -1,3 +1,119 @@
+import { ArgTypes } from '@storybook/addon-docs/blocks'
+
 # UiSelect
 
-test
\ No newline at end of file
+`UiSelect` - выпадающий список для выбора одного или нескольких значений.
+Компонент собирается из `UiSelect` + `UiSelectOption` (и при необходимости `UiSelectOptionGroup`).
+
+## Когда использовать
+
+* Нужно выбрать одно значение из набора (статус, исполнитель, категория).
+* Нужен множественный выбор (`multiple`) с отображением количества выбранных элементов.
+* Нужен поиск по опциям (`filterable`), включая подсветку совпадений в `UiSelectOption`.
+
+## Базовое применение
+
+```html
+<template>
+    <UiSelect placeholder="Исполнитель">
+        <UiSelectOption value="kyle" label="Kyle Simmons" />
+        <UiSelectOption value="eduardo" label="Eduardo Henry" />
+        <UiSelectOption value="philip" label="Philip Williamson" />
+    </UiSelect>
+</template>
+
+<script lang="ts" setup>
+import {
+  UiSelect,
+  UiSelectOption,
+} from '@retailcrm/embed-ui-v1-components/remote'
+</script>
+```
+
+## Множественный выбор
+
+Для множественного режима включите `multiple`.
+
+```html
+<template>
+    <UiSelect multiple clearable placeholder="Исполнители">
+        <UiSelectOption value="kyle" label="Kyle Simmons" />
+        <UiSelectOption value="eduardo" label="Eduardo Henry" />
+        <UiSelectOption value="philip" label="Philip Williamson" />
+    </UiSelect>
+</template>
+```
+
+## Поиск по опциям
+
+Чтобы включить поиск, передайте `filterable`.
+В этом режиме ввод в триггере используется как строка фильтра, а опции автоматически скрываются/подсвечиваются по совпадению.
+
+```html
+<template>
+    <UiSelect filterable placeholder="Найти пользователя">
+        <UiSelectOption value="kyle" label="Kyle Simmons" />
+        <UiSelectOption value="eduardo" label="Eduardo Henry" />
+        <UiSelectOption value="philip" label="Philip Williamson" />
+    </UiSelect>
+</template>
+```
+
+## Опции как объекты
+
+Если `value` у опций - объекты, задайте `equalsFn`, чтобы корректно сравнивать значения.
+
+```html
+<template>
+    <UiSelect
+        :value="{ id: 2, name: 'Eduardo Henry' }"
+        :equals-fn="(a, b) => a?.id === b?.id"
+        placeholder="Пользователь"
+    >
+        <UiSelectOption :value="{ id: 1, name: 'Kyle Simmons' }" label="Kyle Simmons" />
+        <UiSelectOption :value="{ id: 2, name: 'Eduardo Henry' }" label="Eduardo Henry" />
+    </UiSelect>
+</template>
+```
+
+## Группировка опций
+
+Для групп используйте `UiSelectOptionGroup`.
+
+```html
+<template>
+    <UiSelect placeholder="Сотрудник">
+        <UiSelectOptionGroup label="Отдел продаж">
+            <UiSelectOption value="kyle" label="Kyle Simmons" />
+            <UiSelectOption value="eduardo" label="Eduardo Henry" />
+        </UiSelectOptionGroup>
+
+        <UiSelectOptionGroup label="Поддержка">
+            <UiSelectOption value="philip" label="Philip Williamson" />
+        </UiSelectOptionGroup>
+    </UiSelect>
+</template>
+
+<script lang="ts" setup>
+import {
+  UiSelect,
+  UiSelectOption,
+  UiSelectOptionGroup,
+} from '@retailcrm/embed-ui-v1-components/remote'
+</script>
+```
+
+## Важные свойства
+
+* `placeholderOnly` - всегда отображает `placeholder` в поле, вместо текста выбранных опций.
+* `textboxSize` - размер текстового поля триггера (`xs`, `sm`, `xl`).
+* `expanded` - внешний флаг открытия/закрытия списка.
+* `placement`, `targetTriggers`, `popperTriggers`, `popperFitTrigger`, `popperOptions` - настройка поведения и позиционирования выпадающего списка.
+
+## Слоты
+
+* `default` - содержимое выпадающего списка (обычно `UiSelectOption` и `UiSelectOptionGroup`).
+
+## API
+
+<ArgTypes />
diff --git a/packages/v1-components/storybook/stories/UiSelect.stories.ts b/packages/v1-components/storybook/stories/UiSelect.stories.ts
index 4f1fd484..e288b95e 100644
--- a/packages/v1-components/storybook/stories/UiSelect.stories.ts
+++ b/packages/v1-components/storybook/stories/UiSelect.stories.ts
@@ -44,13 +44,13 @@ const meta = {
     placeholder: { control: 'text' },
     filterable: { control: 'boolean' },
     invalid: { control: 'boolean' },
-    onlyPlaceholder: { control: 'boolean' },
+    placeholderOnly: { control: 'boolean' },
     readonly: { control: 'boolean' },
     disabled: { control: 'boolean' },
     multiple: { control: 'boolean' },
     ticker: { control: 'boolean' },
 
-    inputSize: {
+    textboxSize: {
       options: Object.values(SIZE),
     },
 

From b2c91631c0c1f246635c7569ef2500927a50c963 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 21:15:45 +0400
Subject: [PATCH 5/9] docs: AGENTS and commit workflow skills were aligned with
 repository rules

---
 AGENTS.md                                     | 127 ++++++++++++++++++
 skills/commit-workflow/SKILL.md               |  77 +++++++++++
 skills/yarn-lock-conflict-resolution/SKILL.md |  76 +++++++++++
 3 files changed, 280 insertions(+)
 create mode 100644 AGENTS.md
 create mode 100644 skills/commit-workflow/SKILL.md
 create mode 100644 skills/yarn-lock-conflict-resolution/SKILL.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..7ff25b3f
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,127 @@
+# AGENTS.md
+
+## Goals
+- Avoid clarification loops by proposing a concrete interpretation when details are missing.
+- Default to the language of the user's initial message unless they explicitly request a different language.
+- Match the tone and formality of the user's initial message unless they explicitly ask for a change.
+- Treat a language switch in the user's message as an explicit request to respond in that language.
+- If a message is mixed-language, reply in the dominant language unless the user specifies otherwise.
+
+## Purpose
+This file defines practical instructions for working in the `@retailcrm/embed-ui` repository.
+
+## Repository Structure
+- This project is a Yarn Workspaces monorepo.
+- Workspace glob: `packages/*`.
+- Current workspace folders:
+  - `v1-components`
+  - `v1-contexts`
+  - `v1-testing`
+  - `v1-types`
+- Workspace package names may differ from folder names, but commit scopes in this repository are based on workspace folder names.
+
+## Local Environment Prerequisites
+- Yarn version is `4.12.0` (see `packageManager` in `package.json` and `yarnPath` in `.yarnrc.yml`).
+- Package manager mode is `node-modules` (see `.yarnrc.yml`).
+- Local Yarn config is generated from `.yarnrc.dist.yml` using:
+```bash
+make .yarnrc.yml
+```
+- Root install:
+```bash
+yarn install
+```
+
+## Running Checks
+
+### Local Path (without Docker)
+- Prepare Yarn config:
+```bash
+make .yarnrc.yml
+```
+- Install dependencies:
+```bash
+yarn install
+```
+- Build all workspaces:
+```bash
+yarn workspaces foreach -A --topological-dev run build
+```
+- Run lint:
+```bash
+yarn eslint
+```
+- Run tests:
+```bash
+yarn test
+```
+
+### Docker Path (Makefile)
+- Install dependencies in container:
+```bash
+make node_modules
+```
+- Build all workspaces:
+```bash
+make build
+```
+- Run tests:
+```bash
+make tests
+```
+- Pass custom Vitest CLI arguments via Makefile:
+```bash
+make tests cli="-t outOfRangeErrorText"
+```
+
+## Related Commands
+- Build root package only:
+```bash
+yarn build
+```
+- Build root code artifacts only:
+```bash
+yarn build:code
+```
+- Build root meta artifacts only:
+```bash
+yarn build:meta
+```
+- Build Storybook for `v1-components`:
+```bash
+yarn workspace @retailcrm/embed-ui-v1-components run storybook:build
+```
+
+## Commit Workflow
+- Commit format: Conventional Commits.
+- Commit message language: English.
+- Scope rule: use workspace folder name (not npm package name).
+- Valid workspace scopes currently are:
+  - `v1-components`
+  - `v1-contexts`
+  - `v1-testing`
+  - `v1-types`
+- For root/global changes, scope may be omitted.
+- Split commits by logical intent.
+- Keep commit subject concise and factual.
+- Start commit subject description with an uppercase letter.
+- Mention affected component(s) or area in subject description when applicable.
+- Commit subject should describe completed change in past tense.
+- Prefer passive voice for changelog-friendly phrasing.
+- Do not amend/rewrite history unless explicitly requested.
+
+Examples:
+- `feat(v1-components): UiSelect searchable option group header added`
+- `fix(v1-contexts): OrderContext missing customer id handling corrected`
+- `docs: AGENTS commit workflow section updated`
+
+## Skills
+- Repository-local skills are available under `skills/`.
+- If a skill conflicts with this file, follow `AGENTS.md`.
+- Current local skills:
+  - `skills/commit-workflow/SKILL.md`
+  - `skills/yarn-lock-conflict-resolution/SKILL.md`
+
+## Notes
+- Do not assume legacy rules from other repositories (especially `omnica`) apply here.
+- If repository policy is unclear, ask a short clarifying question before making irreversible actions.
diff --git a/skills/commit-workflow/SKILL.md b/skills/commit-workflow/SKILL.md
new file mode 100644
index 00000000..1e360a8b
--- /dev/null
+++ b/skills/commit-workflow/SKILL.md
@@ -0,0 +1,77 @@
+---
+name: commit-workflow
+description: Use this skill when creating commits in this repository. It standardizes commit splitting, Conventional Commit type/scope selection, and English commit messages with workspace-folder scopes.
+---
+
+# Commit Workflow
+
+## When To Use
+Use this skill when the user asks to:
+- create one or more commits;
+- split changes into multiple commits;
+- choose commit message types/scopes;
+- validate commit format before committing.
+
+## Source Of Truth
+- `AGENTS.md`
+- root `package.json` (`workspaces: ["packages/*"]`)
+- actual workspace folders under `packages/`
+
+## Required Rules
+- Commit format: Conventional Commits.
+- Commit message language: English.
+- Allowed types: `feat`, `fix`, `build`, `ci`, `perf`, `docs`, `refactor`, `style`, `test`, `chore`.
+- Scope rule for workspace changes: use workspace folder name (not npm package name).
+  - Current workspace scopes:
+    - `v1-components`
+    - `v1-contexts`
+    - `v1-testing`
+    - `v1-types`
+- For root/global repository changes, scope may be omitted.
+- Split commits by logical intent.
+- If one change affects multiple workspaces, split by workspace unless user explicitly asks to combine.
+- Keep subject concise and factual.
+- Start subject description with an uppercase letter.
+- Mention affected component(s) or area in subject description when applicable.
+- Subject should describe completed change in past tense.
+- Prefer passive voice for changelog-friendly phrasing.
+- Do not amend/rewrite history unless explicitly requested.
+
+## Workflow
+1. Inspect pending changes:
+```bash
+git status --short
+git diff
+```
+2. Map changed files to workspace folders (`packages/<workspace>/...`) or root/global files.
+3. Group changes into commit batches by logical intent and workspace boundary.
+4. Choose commit header:
+```text
+<type>(<workspace-scope>): <short english summary>
+```
+or for global changes:
+```text
+<type>: <short english summary>
+```
+5. Stage only files for the current batch:
+```bash
+git add <files>
+```
+6. Create commit (non-interactive):
+```bash
+git commit -m "<type>(<scope>): <summary>"
+```
+7. Verify result:
+```bash
+git show --name-status --oneline -n 1
+```
+
+## Practical Patterns
+- Workspace feature:
+`feat(v1-components): UiSelect searchable select option groups added`
+- Workspace fix:
+`fix(v1-contexts): OrderContext missing order id handling corrected`
+- Global docs update:
+`docs: AGENTS repository agent instructions updated`
+- Root tooling/config change:
+`chore: Root yarn workspace build flow updated`
diff --git a/skills/yarn-lock-conflict-resolution/SKILL.md b/skills/yarn-lock-conflict-resolution/SKILL.md
new file mode 100644
index 00000000..4e7c7d6d
--- /dev/null
+++ b/skills/yarn-lock-conflict-resolution/SKILL.md
@@ -0,0 +1,76 @@
+---
+name: yarn-lock-conflict-resolution
+description: Use this skill when resolving merge/rebase conflicts in yarn.lock. It standardizes taking yarn.lock from the target branch, reconciling it with yarn install, and reusing a successful resolution across repeated conflict rounds.
+---
+
+# Yarn.lock Conflict Resolution
+
+## When To Use
+Use this skill when:
+- `yarn.lock` has merge/rebase conflicts;
+- conflict resolution should be repeatable and low-risk;
+- the same conflict appears in multiple rounds of one rebase/merge sequence.
+
+## Source Of Truth Policy
+- Rebase: take `yarn.lock` from the branch you rebase onto.
+- Merge: take `yarn.lock` from `HEAD` (current target branch).
+- After taking baseline, run `yarn install` to reconcile lock metadata with current manifests.
+
+## Required Rules
+- Do not manually resolve conflict markers inside `yarn.lock`.
+- Replace `yarn.lock` completely from the selected baseline.
+- Reuse previous successful resolution for repeated rounds in the same sequence.
+- If dependency updates were intentional in the rebased commit, replay dependency commands after conflict resolution.
+
+## Workflow
+1. Ensure conflict exists:
+```bash
+git status --short
+```
+2. (Optional) Ensure Yarn config exists:
+```bash
+make .yarnrc.yml
+```
+3. Resolve first conflict round for rebase:
+```bash
+ONTO=$(cat .git/rebase-merge/onto 2>/dev/null || cat .git/rebase-apply/onto)
+git show "$ONTO:yarn.lock" > yarn.lock
+yarn install
+git add yarn.lock
+cp yarn.lock .git/yarn-lock-resolution-base
+```
+4. Resolve first conflict round for merge:
+```bash
+git show "HEAD:yarn.lock" > yarn.lock
+yarn install
+git add yarn.lock
+cp yarn.lock .git/yarn-lock-resolution-base
+```
+5. Resolve repeated rounds in the same sequence:
+```bash
+cp .git/yarn-lock-resolution-base yarn.lock
+yarn install
+git add yarn.lock
+cp yarn.lock .git/yarn-lock-resolution-base
+```
+6. Continue operation:
+```bash
+git rebase --continue
+# or
+git merge --continue
+```
+7. Cleanup after finish:
+```bash
+rm -f .git/yarn-lock-resolution-base
+```
+8. If dependency updates must be replayed, run original dependency command and commit lockfile update with an English Conventional Commit message, for example:
+```bash
+yarn up <packages>
+git add yarn.lock
+git commit -m "chore: refresh yarn.lock"
+```
+
+## Validation
+- `git status --short` has no unresolved conflicts for `yarn.lock`.
+- `yarn.lock` is staged before `--continue`.
+- Resolution follows source-of-truth policy above.

From ebae6510289b55f042d4fa3ea649ba934ba2a684 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 21:35:09 +0400
Subject: [PATCH 6/9] fix: CreateRoot host registry was synchronized with
 v1-components render graph

---
 src/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 9ed494a2..9e7f9650 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -81,6 +81,8 @@ const createRoot = async (channel: Channel) => {
       'UiImage',
       'UiLink',
       'UiLoader',
+      'UiMenuItem',
+      'UiMenuItemGroup',
       'UiModalSidebar',
       'UiModalWindow',
       'UiModalWindowSurface',
@@ -89,6 +91,8 @@ const createRoot = async (channel: Channel) => {
       'UiPopperTarget',
       'UiRadio',
       'UiScrollBox',
+      'UiSelectPopper',
+      'UiSelectTrigger',
       'UiTag',
       'UiTextbox',
       'UiToolbarButton',

From 515b59306cc28540db8d68f5299dc5adb2ae7775 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 21:35:14 +0400
Subject: [PATCH 7/9] docs: AGENTS and SyncRemoteHostRegistry skill were
 updated

---
 AGENTS.md                                 |  1 +
 skills/sync-remote-host-registry/SKILL.md | 62 +++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 skills/sync-remote-host-registry/SKILL.md

diff --git a/AGENTS.md b/AGENTS.md
index 7ff25b3f..0f4da1d0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -120,6 +120,7 @@ Examples:
 - If a skill conflicts with this file, follow `AGENTS.md`.
 - Current local skills:
   - `skills/commit-workflow/SKILL.md`
+  - `skills/sync-remote-host-registry/SKILL.md`
   - `skills/yarn-lock-conflict-resolution/SKILL.md`
 
 ## Notes
diff --git a/skills/sync-remote-host-registry/SKILL.md b/skills/sync-remote-host-registry/SKILL.md
new file mode 100644
index 00000000..35402e32
--- /dev/null
+++ b/skills/sync-remote-host-registry/SKILL.md
@@ -0,0 +1,62 @@
+---
+name: sync-remote-host-registry
+description: Use this skill when updating remote-to-host component registries (for example createRoot component lists) to keep them aligned with the actual render graph instead of naive host export parity.
+---
+
+# Sync Remote Host Registry
+
+## When To Use
+Use this skill when:
+- updating `createRoot(..., { components: [...] })` lists;
+- updating Storybook provider/receiver setups for remote rendering;
+- checking whether a host component should be added to or removed from a remote render registry.
+
+## Source Of Truth
+- `src/index.ts` (`createRoot` in root package)
+- `packages/v1-components/src/host.ts`
+- `packages/v1-components/src/remote.ts`
+- `packages/v1-components/src/remote/components/**/*`
+- `packages/v1-components/storybook/endpoint.ts`
+- `packages/v1-components/storybook/stories/UiSelect.stories.ts`
+- `packages/v1-components/storybook/stories/UiSelect.remote.ts`
+
+## Core Model
+- `host.ts` is the catalog of available host implementations.
+- `remote.ts` is the public remote API surface.
+- Registries like `createRoot(...components)` must include host components that are schema-reachable from remote rendering flow.
+- Non-1:1 mapping is valid:
+  - one remote component may render through multiple host primitives;
+  - host-only components can exist and must not be added if remote flow never emits them.
+
+## Practical Rules
+- Do not assume parity with `host.ts`.
+- Include a host component if remote rendering can emit its schema in this runtime path.
+- Exclude host-only components that are not emitted by remote instructions in this runtime path.
+- For Storybook remote stories, provider can stay minimal and story-specific.
+- For product/runtime `src/index.ts`, registry should cover all host schemas used by runtime remote render graph.
+
+## Workflow
+1. Inspect current registry and target area:
+```bash
+nl -ba src/index.ts | sed -n '68,120p'
+```
+2. Inspect host export catalog:
+```bash
+nl -ba packages/v1-components/src/host.ts | sed -n '1,120p'
+```
+3. Inspect remote public surface:
+```bash
+nl -ba packages/v1-components/src/remote.ts | sed -n '1,120p'
+```
+4. Inspect composite remote components (especially non-1:1 cases) and their internal parts.
+5. Update registry by render-graph reachability, not by export parity.
+6. Validate:
+```bash
+yarn eslint src/index.ts
+```
+
+## Review Checklist
+- Every newly added registry item is justified by remote render flow.
+- Removed items are proven host-only for this runtime path.
+- Composite components (like select) are checked through their internal remote parts.
+- Storybook-specific minimal providers are not blindly copied into runtime and vice versa.

From e4ad40ae4f34280fff0e3505d6ddab75b8b34102 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 22:03:42 +0400
Subject: [PATCH 8/9] docs: Architecture document was added and quality
 development plan was outlined

---
 ARCHITECTURE.md | 143 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 ARCHITECTURE.md

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
new file mode 100644
index 00000000..99614531
--- /dev/null
+++ b/ARCHITECTURE.md
@@ -0,0 +1,143 @@
+# Архитектура `@retailcrm/embed-ui`
+
+## 1. Назначение
+
+Репозиторий содержит библиотечный слой для JS-расширений RetailCRM:
+
+- контракт и транспорт между `remote` (код расширения) и `host` (CRM-страница);
+- UI-компоненты с разделением на remote-описания и host-реализации;
+- реактивные контексты (предопределенные и пользовательские);
+- вспомогательные типы и тестовые утилиты.
+
+Ключевая идея: расширение не рендерит «реальный DOM» CRM напрямую.  
+Оно отправляет инструкции рендера и вызовов в host-часть через RPC/remote-runtime.
+
+## 2. Структура монорепозитория
+
+Монорепозиторий на Yarn Workspaces (`packages/*`), Yarn `4.12.0`, linker `node-modules`.
+
+### `src/` (корневой пакет `@retailcrm/embed-ui`)
+
+- точка входа SDK для расширений;
+- `createWidgetEndpoint(widget, messenger)` поднимает endpoint и lifecycle `run/release`;
+- создает remote-root с whitelist host-компонентов (`createRoot`);
+- подключает Pinia + плагины доступа к контекстам (`injectEndpoint`, `injectAccessor`);
+- экспортирует публичный API контекстов и composables (`useField`, `useCustomField`, `useHost`, `useRouter`).
+
+### `packages/v1-components`
+
+- UI-библиотека разделена на два entrypoint:
+- `src/host.ts`: host-компоненты для реального рендера в CRM;
+- `src/remote.ts`: remote-компоненты (описания/схемы для передачи в host).
+- Storybook живет здесь и используется как витрина компонентов и сценариев.
+
+### `packages/v1-contexts`
+
+- слой реактивных контекстов и action-вызовов;
+- `src/host.ts`: сборка host-accessor’ов (`createGetter`, `createSetter`, `createContextAccessor`, `createCustomContextAccessor`) и типизированные ошибки (`HostError`, `LogicalError`, `RuntimeError`);
+- `src/remote.ts`: Pinia-обертки для предопределенных контекстов (`defineContext`) и инвокаций (`defineActions`);
+- `src/remote/custom.ts`: доступ к пользовательским полям и словарям.
+
+### `packages/v1-types`
+
+- базовые TS-контракты (контексты, поля, отклонения, action-схемы и пр.);
+- используется всеми остальными workspace.
+
+### `packages/v1-testing`
+
+- тестовые утилиты для runtime-сценариев (RPC/polyfill и хелперы событий).
+
+## 3. Runtime-модель host/remote
+
+### 3.1 Поток инициализации виджета
+
+1. CRM (host) создает `messenger` и вызывает `createWidgetEndpoint(...)` из корневого SDK.
+2. SDK поднимает RPC endpoint и экспортирует методы lifecycle: `run(channel, target)`, `release()`.
+3. При `run(...)` создается remote-root с допустимыми host-компонентами, инициализируется Pinia с endpoint-плагинами контекстов, после чего вызывается `widget.run(createApp, root, pinia, target)`.
+4. При `release()` вызывается destroy-функция виджета и освобождаются RPC-ресурсы.
+
+### 3.2 Каналы ответственности
+
+- `remote`: бизнес-логика расширения, декларативная сборка UI через remote-компоненты, чтение/запись контекстов через Pinia stores.
+- `host`: фактический рендер, геометрия, DOM, popper/positioning, интерактивность, предоставление данных контекста и invokable-методов (`goTo`, `httpCall`, domain actions).
+
+## 4. Архитектура компонентов
+
+### 4.1 Общий паттерн
+
+Для большинства компонентов сохраняется 1:1 соответствие:
+
+- remote-компонент описывает схему и события;
+- host-компонент выполняет фактический рендер.
+
+Примеры: `UiButton`, `UiCheckbox`, `UiTooltip`.
+
+### 4.2 Важный частный случай: `UiSelect`
+
+`UiSelect` — первый явно композиционный пример, где соответствие не 1:1:
+
+- remote-слой содержит семейство: `UiSelect`, `UiSelectOption`, `UiSelectOptionGroup`, `UiSelectOptionGroupHeader`;
+- host-рендер опирается на `UiSelectTrigger` + `UiSelectPopper` + menu/popper-примитивы;
+- состояние выбора/фильтрации и регистрация опций координируются через `provide/inject`-ключи.
+
+Следствие: host-реестр компонентов должен отражать не только «публичные remote-компоненты», но и необходимые host-примитивы, из которых они фактически собираются.
+
+### 4.3 Реестр host-компонентов: что в него входит
+
+Реестр в `src/index.ts` должен содержать только те host-компоненты, которые достижимы из remote-схемы рендера.
+
+- часть host-компонентов может быть внутренней (не remote-публичной) и потому не обязана попадать в реестр root SDK;
+- обратный случай тоже возможен: один remote-компонент может требовать несколько host-примитивов;
+- пример host-only компонента: `UiToolbar` экспортируется в `v1-components/host`, но не участвует в текущем remote render graph корневого SDK.
+
+## 5. Контексты и данные
+
+### 5.1 Предопределенные контексты
+
+- контекст задается описанием схемы полей;
+- remote-store инициализируется через `endpoint.call.get(context, '~')`;
+- подписки на изменения поля устанавливаются через `endpoint.call.on('change:field', ...)`;
+- запись идет через `endpoint.call.set(...)` с валидацией по schema.
+
+### 5.2 Пользовательские контексты (custom fields)
+
+- схема контекста запрашивается динамически у host;
+- значения и типы полей становятся известны после `initialize()`;
+- чтение/запись выполняются через `getCustomField/setCustomField`;
+- словари грузятся отдельным каналом `getCustomDictionary`.
+
+### 5.3 Ошибки и отклонения
+
+- host-часть разделяет логические и runtime-ошибки;
+- remote-часть может получать `Rejection` через callback `onReject`;
+- в composables заданы безопасные обработчики по умолчанию (логирование в `console.error`).
+
+## 6. Storybook как архитектурная песочница
+
+`packages/v1-components/storybook` выполняет две роли:
+
+- документация и интерактивная проверка host-компонентов;
+- демонстрация host/remote-связки (сейчас явно показана в `UiSelect`-истории через worker + endpoint + HostedTree/provider/receiver).
+
+Текущее состояние: bridge-механика визуально раскрыта не во всех историях, что усложняет onboarding для новых участников.
+
+## 7. Сборка, релиз, CI
+
+- сборка корня: `vite build` + генерация meta (`scripts/build.meta.ts`);
+- workspace-сборка в CI: `yarn workspaces foreach -A --topological-dev run build`;
+- тестовый workflow: Node `22.x` и `24.x`, шаги build + eslint + test;
+- release workflow: build/lint/test, bump/release scripts, публикация npm, деплой Storybook (`version` + обновление `latest`).
+
+## 8. Дальнейшее развитие качества
+
+Следующий этап развития проекта направлен на усиление автоматизированного контроля качества и формализацию ключевых архитектурных инвариантов.
+
+## 9. Планы по усилению контроля качества
+
+Ближайшие шаги:
+
+1. Ввести обязательный typecheck в локальный и CI-пайплайн.
+2. Расширить тесты на ключевые контракты host/remote и на синхронизацию реестров компонентов.
+3. Добавить автоматические проверки целостности render graph (минимум smoke/contract test).
+4. Расширить Storybook-документацию: явно показывать host/remote-binding не только для `UiSelect`.
+5. После стабилизации перейти к автоматизации registry/provider (кодогенерация) как к следующему этапу эволюции.

From 97f880310dd8d5a3cb40aab454e4b159628f5574 Mon Sep 17 00:00:00 2001
From: Kirill Zaytsev <zaytsev.cmath10@gmail.com>
Date: Wed, 11 Feb 2026 23:15:14 +0400
Subject: [PATCH 9/9] test: IsShape typecheck tests were added and CI workflows
 were updated

---
 .github/workflows/release.yml                 |   3 +
 .github/workflows/tests.yml                   |   3 +
 Makefile                                      |  15 ++
 .../v1-contexts/tests/predicates.test-d.ts    | 132 ++++++++++++++++++
 4 files changed, 153 insertions(+)
 create mode 100644 packages/v1-contexts/tests/predicates.test-d.ts

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 16e76a59..1569215d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -51,6 +51,9 @@ jobs:
       - name: Run tests
         run: yarn test
 
+      - name: Run typecheck tests
+        run: yarn vitest run -c packages/v1-contexts/vitest.config.ts --typecheck.only --typecheck.checker tsc --typecheck.tsconfig packages/v1-contexts/tsconfig.json
+
       - name: Run release [${{ inputs.prerelease }}]
         if: ${{ inputs.prerelease != 'none' }}
         run: yes | npx tsx scripts/release.ts -p ${{ inputs.prerelease }}
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index d2cc84d9..553d9875 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -90,3 +90,6 @@ jobs:
 
       - name: Run tests
         run: yarn test
+
+      - name: Run typecheck tests
+        run: yarn vitest run -c packages/v1-contexts/vitest.config.ts --typecheck.only --typecheck.checker tsc --typecheck.tsconfig packages/v1-contexts/tsconfig.json
diff --git a/Makefile b/Makefile
index 8c094476..2fff1bb2 100644
--- a/Makefile
+++ b/Makefile
@@ -39,6 +39,21 @@ else
 	$(YARN) test
 endif
 
+.PHONY: tests-typecheck-contexts
+tests-typecheck-contexts: ## Runs typecheck tests (test-d.ts) for v1-contexts
+	$(TARGET_HEADER)
+ifdef cli
+	$(YARN) vitest run -c packages/v1-contexts/vitest.config.ts --typecheck.only --typecheck.checker tsc --typecheck.tsconfig packages/v1-contexts/tsconfig.json $(cli)
+else
+	$(YARN) vitest run -c packages/v1-contexts/vitest.config.ts --typecheck.only --typecheck.checker tsc --typecheck.tsconfig packages/v1-contexts/tsconfig.json
+endif
+
+.PHONY: tests-typecheck-v1-contexts
+tests-typecheck-v1-contexts: tests-typecheck-contexts ## Alias for tests-typecheck-contexts
+
+.PHONY: tests-typecheck
+tests-typecheck: tests-typecheck-contexts ## Runs typecheck tests (currently v1-contexts)
+
 .PHONY: help
 help: ## Calls recipes list
 	@cat $(MAKEFILE_LIST) | grep -e "^[a-zA-Z_\-]*: *.*## *" | awk '\
diff --git a/packages/v1-contexts/tests/predicates.test-d.ts b/packages/v1-contexts/tests/predicates.test-d.ts
new file mode 100644
index 00000000..be744b7b
--- /dev/null
+++ b/packages/v1-contexts/tests/predicates.test-d.ts
@@ -0,0 +1,132 @@
+import {
+  isNumber,
+  isShape,
+  isString,
+} from '@/predicates'
+import {
+  assertType,
+  describe,
+  expectTypeOf,
+  it,
+  test,
+} from 'vitest'
+
+type InferShape<S> = S extends (value: unknown) => value is infer U
+  ? U
+  : never
+
+describe('isShape type inference', () => {
+  test('infers required fields', () => {
+    const isMoney = isShape({
+      amount: [isNumber, true],
+      currency: [isString, true],
+    })
+
+    assertType<(value: unknown) => value is {
+      amount: number;
+      currency: string;
+    }>(isMoney)
+
+    type Money = InferShape<typeof isMoney>
+
+    expectTypeOf<Money>().toEqualTypeOf<{
+      amount: number;
+      currency: string;
+    }>()
+
+    assertType<Money>({
+      amount: 100,
+      currency: 'USD',
+    })
+  })
+
+  it('keeps optional field as T | undefined and not as optional key', () => {
+    const isProductWhereNameIsOptional = isShape({
+      id: [isNumber, true],
+      name: [isString, false],
+    })
+
+    assertType<(value: unknown) => value is {
+      id: number;
+      name: string | undefined;
+    }>(isProductWhereNameIsOptional)
+
+    type ProductWithOptionalName = InferShape<typeof isProductWhereNameIsOptional>
+
+    expectTypeOf<ProductWithOptionalName>().toEqualTypeOf<{
+      id: number;
+      name: string | undefined;
+    }>()
+
+    assertType<ProductWithOptionalName>({
+      id: 1,
+      name: undefined,
+    })
+
+    // @ts-expect-error Current inference model marks optional fields as `T | undefined`, but not optional keys.
+    assertType<ProductWithOptionalName>({
+      id: 1,
+    })
+  })
+
+  test('infers nested shapes and spread-based composition', () => {
+    const isMoney = isShape({
+      amount: [isNumber, true],
+      currency: [isString, true],
+    })
+
+    const isPrice = isShape({
+      ...isMoney.shape,
+      type: [isShape({
+        id: [isNumber, true],
+        code: [isString, false],
+      }), true],
+    })
+
+    type Price = InferShape<typeof isPrice>
+
+    expectTypeOf<Price>().toEqualTypeOf<{
+      amount: number;
+      currency: string;
+      type: {
+        id: number;
+        code: string | undefined;
+      };
+    }>()
+
+    const isProduct = isShape({
+      id: [isNumber, true],
+      name: [isString, true],
+      price: [isPrice, true],
+      cost: [isMoney, true],
+    })
+
+    type Money = InferShape<typeof isMoney>
+
+    assertType<(value: unknown) => value is {
+      id: number;
+      name: string;
+      price: Price;
+      cost: Money;
+    }>(isProduct)
+
+    type Product = InferShape<typeof isProduct>
+
+    expectTypeOf<Product>().toEqualTypeOf<{
+      id: number;
+      name: string;
+      price: {
+        amount: number;
+        currency: string;
+        type: {
+          id: number;
+          code: string | undefined;
+        };
+      };
+      cost: {
+        amount: number;
+        currency: string;
+      };
+    }>()
+  })
+})