@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

package/README.md

@@ -0,0 +1,717 @@
+# Header
+
+`@cloud-ru/ds-uikit-product-header` — Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.
+
+Пакет `@cloud-ru/ds-uikit-product-header` — продуктовая шапка консоли: компоновка слотов (`HeaderLayout`), главное меню навигации (`MainMenu`), меню пользователя (`UserMenu`), логотип (`Logo`), хлебные крошки (`PathBreadcrumbs`) и иконки платформ (`PlatformLogo`).
+
+## Установка
+
+```bash
+pnpm add @cloud-ru/ds-uikit-product-header
+```
+
+```ts
+import { HeaderLayout, MainMenu, UserMenu } from '@cloud-ru/ds-uikit-product-header';
+import '@cloud-ru/ds-uikit-product-header/style.css';
+```
+
+## Container
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `data-test-id` | `string` | — |  |
+
+## Content
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `activeSegmentId` | `string` | — | Активный сегмент правой панели. Не передано — неуправляемое состояние <br/> (дефолт — первый сегмент с видимыми карточками). |
+| `className` | `string` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `footer` | `ReactNode` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `loading` | `boolean` | — | Флаг загрузки данных |
+| `onActiveSegmentChange` | `((segmentId: string) => void)` | — | Колбэк смены активного сегмента правой панели. |
+| `onClose` | `(() => void)` | — |  |
+| `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — |  |
+| `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — |  |
+| `preferences` | `MainMenuPreferencesProps` | — |  |
+| `rightTop` | `ReactNode` | — | Слот над тулбаром правой колонки (например, баннеры) |
+| `search` | `ReactNode` | — |  |
+| `searchGroups` | `LinksGroup[]` | `[]` | Результаты поиска (уже смерженные); в обычном режиме не используются. |
+| `searchValue` | `string` | — |  |
+| `segmentPrefs` | `MainMenuSegmentPrefs[]` | — |  |
+| `segments` | `MainMenuSegment[]` | — |  |
+
+## ContentToolbar
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `allGroupsExpanded` | `boolean` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `onSegmentChange` | `(segment: string) => void` | — |  |
+| `onToggleAllGroupsExpanded` | `() => void` | — |  |
+| `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. |
+| `segment` | `string` | — |  |
+| `segmentItems` | `ContentToolbarSegmentItem[]` | — |  |
+
+## DraggableServiceCard
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `dragDisabled` | `boolean` | — |  |
+| `dragPreview` | `boolean` | — |  |
+| `expandable` | `{ value: boolean; onClick(): void; }` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `groupId` | `string` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `service` | `InnerLink` | — |  |
+| `showDescription` | `boolean` | — |  |
+| `tabIndex` | `number` | — |  |
+
+## EmptyFavoriteSVG
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+
+## EmptyRecentSVG
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+
+## EmptyState
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isFavoritesSegment` | `boolean` | — |  |
+| `isMobile` | `boolean` | — |  |
+
+## Favorites
+
+### Props `FavoritesProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `allServiceGroups` | `LinksGroup` | — | Группы сервисов для разрешения id в карточки |
+| `favorite` | `FavoriteProps` | — | Список избранных сервисов |
+| `headerClassName` | `string` | — | CSS-класс строки заголовка (segment + кнопка настроек) |
+| `isMobile` | `boolean` | — | Флаг мобильной раскладки |
+
+#### Related types
+
+**FavoriteProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `actions` | `BaseItemProps` | — | Действия для списка сервисов |
+| `loading` | `boolean \| undefined` | — | Флаг загрузки данных |
+| `onChange` | `(productId: string) => (addingValue: boolean, position?: number) => void` | — | Колбэк переключения избранного для карточки сервиса. <br/> `position` передаётся при добавлении через drag из сетки сервисов — индекс, <br/> на который должна встать карточка среди избранного (см. <br/> {@link <br/> FavoriteProps.onOrderChange <br/> } <br/> ). <br/> При переключении избранного кликом не передаётся. |
+| `onFavoriteServiceClick` | `((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined` | — | Колбэк клика по карточке сервиса в сегменте «Избранное» |
+| `onOrderChange` | `((orderedIds: string[]) => void) \| undefined` | — | Колбэк вызывается после перетаскивания карточек внутри избранного с новым порядком id. <br/> Добавление новой карточки через drag из сетки сервисов идёт через <br/> {@link <br/> FavoriteProps.onChange <br/> } <br/> с `position` — этот колбэк для такого добавления не вызывается. |
+| `onRecentServiceClick` | `((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined` | — | Колбэк клика по карточке сервиса в сегменте «Недавнее» |
+| `onSegmentChange` | `((segment: FavoritesSegment) => void) \| undefined` | — | Колбэк смены сегмента панели избранного. |
+| `recentServices` | `string[] \| undefined` | — | Список id недавно открытых сервисов |
+| `segment` | `"favorites"` \| `"recent"` | — | Активный сегмент («Избранное» / «Недавнее») в панели избранного. <br/> Не передано — неуправляемое состояние (дефолт `'favorites'`). |
+| `value` | `string[]` | — | Список id избранных сервисов |
+
+- `FavoritesSegment` = `"favorites"` \| `"recent"`
+
+**InnerLink**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `aliases` | `string[]` | — | Синонимы для fuzzy-поиска. |
+| `badge` | `CardServiceLightProps` \| `PromoTagPredefinedBaseProps` | — |  |
+| `description` | `string \| undefined` | — | Краткое описание сервиса — отображается при включённом переключателе «Описание». |
+| `disabled` | `boolean \| undefined` | — |  |
+| `hidden` | `boolean \| undefined` | — |  |
+| `href` | `string \| undefined` | — |  |
+| `icon` | `JSXElementConstructor<{ size?: number; className?: string; }> \| undefined` | — | Иконка карточки. <br/> Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label` <br/> (см. `getAvatarNameFromLabel`). |
+| `id` | `string` | — | Уникальный идентификатор карточки (также используется в избранном и при поиске). <br/> Один и тот же сервис может быть представлен в разных сегментах с разной <br/> детализацией (простая карточка в общем каталоге и раскрытая с вложенными <br/> сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся <br/> общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах <br/> остаётся только первое по приоритету сегментов (см. <br/> {@link <br/> MainMenuProps.segments <br/> } <br/> ). |
+| `items` | `InnerLink` | — | Вложенные сервисы подкатегории. <br/> При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка <br/> с кнопкой раскрытия, в развёрнутом — заголовок <br/> {@link <br/> TitleClickable <br/> } <br/> и сетка вложенных сервисов. |
+| `label` | `string` | — | Заголовок карточки. |
+| `onClick` | `(e?: MouseEvent<HTMLElement>) => void` | — |  |
+
+**LinksGroup**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `aliases` | `string[] \| undefined` | — | Синонимы заголовка группы для fuzzy-поиска. |
+| `blockColor` | `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"` | — | Цвет блока группы. |
+| `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточек группы в избранное. |
+| `hidden` | `boolean \| undefined` | — |  |
+| `highlight` | `boolean \| undefined` | — | Визуальное выделение группы |
+| `id` | `string` | — | Уникальный идентификатор группы (якорь скролла, поиск по id). |
+| `items` | `InnerLink` | — | Карточки сервисов или ссылок внутри группы. |
+| `label` | `LinksGroupTitle` \| `TitleClickable` \| `TitleStatic` | — | Заголовок группы в сетке карточек и в боковой навигации. |
+| `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
+
+- `LinksGroupBlockColor` = `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"`
+
+- `LinksGroupTitle` = `TitleStatic | TitleClickable`
+
+**TitleClickable**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
+| `text` | `string` | — |  |
+
+**TitleStatic**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onClick` | `undefined` | — |  |
+| `text` | `string` | — |  |
+
+## FavoritesSortable
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `favorite` | `FavoriteProps` | — |  |
+| `favoriteItems` | `InnerLink[]` | — |  |
+| `isEmpty` | `boolean` | — |  |
+| `onFavoriteServiceClick` | `(service: InnerLink) => (event: MouseEvent<HTMLElement, MouseEvent>) => void` | — |  |
+| `recentCards` | `ReactNode` | — |  |
+| `segment` | `"favorites"` \| `"recent"` | — |  |
+| `setSegment` | `(segment: FavoritesSegment) => void` | — |  |
+
+## HeaderButton
+
+### Props `HeaderButtonProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `T` | — | Элемент или компонент для рендера: 'button' \| 'a' \| ComponentType (например Link из react-router-dom) |
+| `className` | `any` | — | Дополнительный класс |
+| `counter` | `CounterProps` | — | Пропсы для counter. `appearance` можно задать явно (по умолчанию наследуется от appearance кнопки). |
+| `data-test-id` | `any` | — |  |
+| `disabled` | `any` | — | Отключена |
+| `fullWidth` | `any` | — | На всю ширину |
+| `icon` | `any` | — | Иконка |
+| `iconPosition` | `IconPosition` | — | Позиция иконки относительно текста |
+| `innerRef` | `PolymorphicRef` \| `T` | — | Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. <br/> Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт. |
+| `isMobile` | `boolean` | — |  |
+| `label` | `any` | — | Текст кнопки |
+| `loading` | `any` | — | Состояние загрузки |
+| `minWidth` | `any` | — | Минимальная ширина контейнера (`min-width` из токена размера). По умолчанию `true`. <br/> `false` — кнопка сжимается по контенту вместо фиксированного минимума. |
+| `tooltip` | `TooltipProps` | — | Настройки тултипа. `placement` и `disableSpanWrapper` зафиксированы под анатомию хедера |
+
+## HeaderLayout
+
+### Props `HeaderLayoutProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `breadcrumbs` | `ReactNode` | — |  |
+| `className` | `string` | — |  |
+| `data-test-id` | `string` | — |  |
+| `logo` | `ReactNode` | — |  |
+| `menu` | `ReactNode` | — |  |
+| `select` | `ReactNode` | — |  |
+| `toolbar` | `ReactNode` | — |  |
+
+## Logo
+
+### Props `LogoProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `data-test-id` | `string` | — |  |
+| `href` | `string` | — |  |
+| `loading` | `boolean` | — |  |
+| `mode` | `"develop"` \| `"hybrid"` \| `"prod"` \| `"stage"` | — |  |
+| `onClick` | `MouseEventHandler<HTMLAnchorElement>` | — |  |
+| `path` | `string` | — |  |
+| `tooltip` | `TooltipProps` | — |  |
+
+#### Related types
+
+- `HeaderLogoMode` = `"develop"` \| `"hybrid"` \| `"prod"` \| `"stage"`
+
+## MainMenu
+
+### Props `MainMenuProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `activeSegmentId` | `string` | — | Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}). <br/> Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками). |
+| `defaultWidth` | `number` | — | Ширина дровера, с которой открывается меню (desktop only) |
+| `disabled` | `boolean` | — |  |
+| `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
+| `favorite` | `FavoriteProps` | — |  |
+| `leftTop` | `ReactNode` | — |  |
+| `loading` | `boolean` | — | Флаг загрузки данных |
+| `logo` | `ReactNode` | — |  |
+| `onActiveSegmentChange` | `((segmentId: string) => void)` | — | Колбэк смены активного сегмента правой панели. |
+| `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
+| `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
+| `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
+| `open` | `boolean` | — |  |
+| `platformGroups` | `LinksGroup` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
+| `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. <br/> Не передано — кнопка настроек в тулбаре не отображается. |
+| `rightTop` | `ReactNode` | — |  |
+| `search` | `SearchProps` | — |  |
+| `segmentPrefs` | `MainMenuSegmentPrefs` | — | Пользовательские prefs сегментов (порядок / раскрытие групп). <br/> Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля. |
+| `segments` | `MainMenuSegment` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
+| `setOpen` | `((open: boolean) => void)` | — |  |
+| `settingItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+
+#### Related types
+
+**EmptyStateProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isFavoritesSegment` | `boolean` | — |  |
+| `isMobile` | `boolean \| undefined` | — |  |
+
+**LinksGroup**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `aliases` | `string[] \| undefined` | — | Синонимы заголовка группы для fuzzy-поиска. |
+| `blockColor` | `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"` | — | Цвет блока группы. |
+| `favoritesEnabled` | `boolean \| undefined` | — | Разрешено ли добавление карточек группы в избранное. |
+| `hidden` | `boolean \| undefined` | — |  |
+| `highlight` | `boolean \| undefined` | — | Визуальное выделение группы |
+| `id` | `string` | — | Уникальный идентификатор группы (якорь скролла, поиск по id). |
+| `items` | `InnerLink` | — | Карточки сервисов или ссылок внутри группы. |
+| `label` | `LinksGroupTitle` \| `TitleClickable` \| `TitleStatic` | — | Заголовок группы в сетке карточек и в боковой навигации. |
+| `onClick` | `((e?: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
+
+**MainMenuSegment**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Иконка сегмента в SegmentControl; без неё — только `label`. |
+| `id` | `string` | — | Уникальный идентификатор сегмента (значение SegmentControl). |
+| `items` | `LinksGroup` | — | Группы карточек сегмента (каталог). |
+| `label` | `string` | — | Подпись сегмента в SegmentControl. |
+| `pinBottomOnSearch` | `boolean \| undefined` | — | Группы сегмента в выдаче поиска — после совпадений из обычных сегментов и `platformGroups`. |
+
+**MainMenuSegmentPrefs**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `expanded` | `string[] \| undefined` | — | Id раскрытых групп. Если не передан — uncontrolled (по умолчанию все раскрыты). |
+| `id` | `string` | — | Id сегмента из <br/> {@link <br/> MainMenuSegment.id <br/> } <br/> . |
+| `order` | `string[] \| undefined` | — | Порядок id групп. Если не передан — uncontrolled для этого сегмента <br/> (дефолт = порядок `items`; новые группы добавляются в конец). |
+
+## MainMenuDndContext
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `collisionDetection` | `CollisionDetection` | — |  |
+| `dragOverlay` | `string \| number \| boolean \| Iterable<ReactNode> \| Element \| null` | — |  |
+| `modifiers` | `Modifier[]` | — |  |
+| `onDragCancel` | `(({ active }: DragCancelEvent) => void)` | — |  |
+| `onDragEnd` | `(({ active, over, delta, activatorEvent }: DragEndEvent) => void)` | — |  |
+| `onDragStart` | `(({ active }: DragStartEvent) => void)` | — |  |
+| `overlayContextValue` | `{ setGroupDragOverlay: Dispatch<SetStateAction<ReactNode>>; }` | — |  |
+| `sensors` | `SensorDescriptor<SensorOptions>[]` | — |  |
+
+## MenuBanner
+
+### Props `MenuBannerProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `afterTitle` | `ReactNode` | — | Слот справа от заголовка и промо-тега |
+| `className` | `string` | — | CSS-класс корневого элемента |
+| `data-test-id` | `string` | — |  |
+| `onClose` | `MouseEventHandler<HTMLElement>` | — | Колбэк закрытия. При наличии отображается кнопка «Закрыть» на hover |
+| `promoTag` | `PromoTagOwnProps` \| `PromoTagProps` | — | Текст промо-тега рядом с заголовком |
+| `title` | `string` | — | Заголовок баннера |
+
+## MenuDesktop
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `activeSegmentId` | `string` | — | Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}). <br/> Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками). |
+| `defaultWidth` | `number` | `1208 + 24` | Ширина дровера, с которой открывается меню (desktop only) |
+| `disabled` | `boolean` | — |  |
+| `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
+| `favorite` | `FavoriteProps` | — |  |
+| `leftTop` | `ReactNode` | — |  |
+| `loading` | `boolean` | — | Флаг загрузки данных |
+| `logo` | `ReactNode` | — |  |
+| `onActiveSegmentChange` | `((segmentId: string) => void)` | — | Колбэк смены активного сегмента правой панели. |
+| `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
+| `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
+| `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
+| `open` | `boolean` | — |  |
+| `platformGroups` | `LinksGroup[]` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
+| `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. <br/> Не передано — кнопка настроек в тулбаре не отображается. |
+| `rightTop` | `ReactNode` | — |  |
+| `search` | `SearchProps` | — |  |
+| `segmentPrefs` | `MainMenuSegmentPrefs[]` | — | Пользовательские prefs сегментов (порядок / раскрытие групп). <br/> Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля. |
+| `segments` | `MainMenuSegment[]` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
+| `setOpen` | `((open: boolean) => void)` | — |  |
+| `settingItems` | `Item[]` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+
+## MenuHeaderBrand
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `logo` | `ReactNode` | — |  |
+| `onClose` | `() => void` | — |  |
+
+## MenuMobile
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `activeSegmentId` | `string` | — | Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}). <br/> Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками). |
+| `defaultWidth` | `number` | — | Ширина дровера, с которой открывается меню (desktop only) |
+| `disabled` | `boolean` | — |  |
+| `draggerTooltip` | `string` | — | Текст подсказки для драггера (desktop only) |
+| `favorite` | `FavoriteProps` | — |  |
+| `leftTop` | `ReactNode` | — |  |
+| `loading` | `boolean` | — | Флаг загрузки данных |
+| `logo` | `ReactNode` | — |  |
+| `onActiveSegmentChange` | `((segmentId: string) => void)` | — | Колбэк смены активного сегмента правой панели. |
+| `onSegmentExpandedChange` | `((segmentId: string, expandedGroupIds: string[]) => void)` | — | Колбэк при изменении набора раскрытых групп сегмента <br/> (без id синтетической группы избранного). |
+| `onSegmentOrderChange` | `((segmentId: string, orderedGroupIds: string[]) => void)` | — | Колбэк после DnD групп в сегменте (без id синтетической группы избранного). |
+| `onWidthChangeEnd` | `((width: number) => void)` | — | Вызывается при окончании изменения ширины дровера (desktop only) |
+| `open` | `boolean` | — |  |
+| `platformGroups` | `LinksGroup[]` | — | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
+| `preferences` | `MainMenuPreferencesProps` | — | Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. <br/> Не передано — кнопка настроек в тулбаре не отображается. |
+| `rightTop` | `ReactNode` | — |  |
+| `search` | `SearchProps` | — |  |
+| `segmentPrefs` | `MainMenuSegmentPrefs[]` | — | Пользовательские prefs сегментов (порядок / раскрытие групп). <br/> Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля. |
+| `segments` | `MainMenuSegment[]` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
+| `setOpen` | `((open: boolean) => void)` | — |  |
+| `settingItems` | `Item[]` | — | Пункты левой колонки (desktop) / нижней части списка (mobile). <br/> Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей). <br/> Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах. |
+
+## MountAnimation
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `data-test-id` | `string` | — |  |
+| `type` | `"fade-in"` \| `"fade-slide-up"` \| `"fade-slide-up-right"` \| `"slide-right"` | `slide-right` |  |
+
+## PathBreadcrumbs
+
+### Props `PathBreadcrumbsProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isMobile` | `boolean` | — |  |
+| `items` | `BreadcrumbsProps` \| `Item` | — |  |
+
+## ScrollWithAnimatedStickyPanel
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `panel` | `ReactNode` | — |  |
+
+## Search
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isMobile` | `boolean` | `false` |  |
+| `onBlur` | `FocusEventHandler<HTMLInputElement>` | — | Колбек обработки потери фокуса |
+| `onChange` | `(value: string) => void` | — |  |
+| `onFocus` | `FocusEventHandler<HTMLInputElement>` | — | Колбек обработки получения фокуса |
+| `onSearchNoResult` | `((value: string) => void)` | — |  |
+| `value` | `string` | — |  |
+
+## ServiceCard
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — |  |
+| `dragPreview` | `boolean` | — |  |
+| `expandable` | `{ value: boolean; onClick(): void; }` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `service` | `InnerLink` | — |  |
+| `showDescription` | `boolean` | — |  |
+| `tabIndex` | `number` | — |  |
+
+## SortableFavoriteCard
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | CSS-класс корневого элемента |
+| `data-test-id` | `string` | — | Support prop для тестов |
+| `expandable` | `{ value: boolean; onClick(): void; }` | — |  |
+| `favorite` | `FavoriteProps` | — | Настройки кнопки «Избранное». <br/> Keyboard: ArrowRight на карточке → tooltip (если есть) → Favorite; ArrowLeft — в обратном порядке. |
+| `icon` | `ReactElement<any, string \| JSXElementConstructor<any>>` | — | Иконка сервиса |
+| `isFirst` | `boolean` | — |  |
+| `promoTag` | `Omit<PromoTagPredefinedProps, "as" \| "innerRef" \| "trigger">` | — | Настройки promo tag. При отсутствии не отображается |
+| `serviceId` | `string` | — |  |
+| `showInsertIndicatorAfter` | `boolean` | — |  |
+| `showInsertIndicatorBefore` | `boolean` | — |  |
+| `title` | `string` | — | Заголовок карточки |
+| `tooltip` | `Omit<TooltipProps, "size" \| "trigger">` | — | Подсказка с иконкой «?» рядом с заголовком |
+
+## SortableGroup
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blockColor` | `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"` | — |  |
+| `enableServiceDrag` | `boolean` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `highlight` | `boolean` | — |  |
+| `id` | `string` | — |  |
+| `isExpanded` | `boolean` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `items` | `InnerLink[]` | — |  |
+| `label` | `LinksGroupTitle` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `showDescription` | `boolean` | — |  |
+
+## SortableGroupCards
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableServiceDrag` | `boolean` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `groupId` | `string` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `items` | `InnerLink[]` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `showDescription` | `boolean` | — |  |
+
+## SortableGroupDragHandle
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `attributes` | `DraggableAttributes` | — |  |
+| `listeners` | `DraggableSyntheticListeners` | — |  |
+
+## SortableGroupDragPreview
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blockColor` | `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `highlight` | `boolean` | — |  |
+| `id` | `string` | — |  |
+| `isExpanded` | `boolean` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `items` | `InnerLink[]` | — |  |
+| `label` | `LinksGroupTitle` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `showDescription` | `boolean` | — |  |
+
+## SortableGroupHeader
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `attributes` | `DraggableAttributes` | — |  |
+| `enableServiceDrag` | `boolean` | — |  |
+| `isExpanded` | `boolean` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `label` | `LinksGroupTitle` | — |  |
+| `listeners` | `DraggableSyntheticListeners` | — |  |
+
+## SortableGroupSkeleton
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isMobile` | `boolean` | — |  |
+
+## SubCategory
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dragDisabled` | `boolean` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `groupId` | `string` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `service` | `InnerLink` | — |  |
+| `showDescription` | `boolean` | — |  |
+
+## SubCategoryTitle
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dragDisabled` | `boolean` | — |  |
+| `expandable` | `{ value: boolean; onClick(): void; }` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `groupId` | `string` | — |  |
+| `isMobile` | `boolean` | — |  |
+| `onServiceClick` | `((service: InnerLink, event: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+| `service` | `InnerLink` | — |  |
+| `showDescription` | `boolean` | — |  |
+
+## useFavoritesDnd
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `favorite` | `FavoriteProps` | — |  |
+| `favoriteItems` | `InnerLink[]` | — |  |
+| `segment` | `"favorites"` \| `"recent"` | — |  |
+| `setSegment` | `(segment: FavoritesSegment) => void` | — |  |
+
+## useLogoutItem
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onLogout` | `(() => void)` | — |  |
+
+## useMainMenuDnd
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `favorite` | `FavoriteProps` | — |  |
+| `groups` | `LinksGroup[]` | — | Все группы карточек из сегментов (для резолва сервисов при DnD в избранное). |
+| `showDescription` | `boolean` | — |  |
+
+## useMenuItems
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `platformGroups` | `LinksGroup[]` | `[]` | Платформенные группы (например «Облачные продукты», «Другие продукты»). <br/> Без поиска в сетке карточек **не отображаются**. <br/> С поиском: попадают в результаты при совпадении; порядок — <br/> после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. <br/> Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`). |
+| `search` | `SearchProps` | — |  |
+| `segments` | `MainMenuSegment[]` | — | Сегменты правой панели (сетка карточек) — только каталог. <br/> При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. <br/> Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только <br/> первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. <br/> При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). <br/> Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже. |
+
+## useProfileItem
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `email` | `string` | `` |  |
+| `fullName` | `string` | `` |  |
+| `inviteCount` | `number` | — |  |
+| `itemWrapRender` | `((node: ReactNode) => ReactNode)` | — |  |
+| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent>) => void)` | — |  |
+
+## UserMenu
+
+### Props `UserMenuProps`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `ListProps` \| `ScrollProps` | — |  |
+| `onClick` | `(() => void)` | — |  |
+| `onLogout` | `(() => void)` | — |  |
+| `open` | `boolean` | — |  |
+| `profile` | `UserProfileProps` | `{}` |  |
+| `setOpen` | `((open: boolean) => void)` | — |  |
+| `settingItems` | `BaseItemProps` | — |  |
+| `theme` | `ThemeProps` | — |  |
+| `triggerTooltip` | `string` | — |  |
+
+#### Related types
+
+**EmptyStateProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isFavoritesSegment` | `boolean` | — |  |
+| `isMobile` | `boolean \| undefined` | — |  |
+
+- `ThemeMode` = `"dark"` \| `"light"` \| `"system"`
+
+**ThemeProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onChange` | `((themeMode: ThemeMode) => void) \| undefined` | — |  |
+| `value` | `"dark"` \| `"light"` \| `"system"` | — |  |
+
+**UserProfileProps**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `email` | `string \| undefined` | — |  |
+| `fullName` | `string \| undefined` | — |  |
+| `inviteCount` | `number \| undefined` | — |  |
+| `itemWrapRender` | `((node: ReactNode) => ReactNode) \| undefined` | — |  |
+| `onClick` | `((e: MouseEvent<HTMLElement>) => void) \| undefined` | — |  |
+
+## useSegmentDnd
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `expandedIds` | `string[]` | — |  |
+| `favorite` | `FavoriteProps` | — |  |
+| `onSortableDragEnd` | `(event: DragEndEvent) => void` | — |  |
+| `showDescription` | `boolean` | — |  |
+| `showGroupsColors` | `boolean` | — |  |
+| `visibleGroups` | `LinksGroup[]` | — |  |
+
+## useThemeItem
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isMobile` | `boolean` | — |  |
+| `onChange` | `((themeMode: ThemeMode) => void)` | — |  |
+| `onClose` | `(() => void)` | — |  |
+| `value` | `"dark"` \| `"light"` \| `"system"` | — |  |