itube-specs 0.0.922 → 0.0.927

package/DOCS/CONVENTIONS.md

@@ -0,0 +1,44 @@
+# Conventions
+
+Layer + every site. From an app: `node_modules/itube-specs/DOCS/CONVENTIONS.md`. Styles → `DOCS/STYLES.md`.
+Human-facing rationale → the layer's `README.md` (Russian).
+
+## Components
+
+`pathPrefix: true` → name = folder path + filename, repeated segments deduped by Nuxt. Folder is the
+namespace; filename must not repeat it.
+
+- `ui/icon.vue` → `<UiIcon>` · `player/core.vue` → `<PlayerCore>` · `info/grid.vue` → `<InfoGrid>` (not
+  `<InfoInfoGrid>`)
+- Folder root: `index.vue` when the deduped name is already multi-word (`card/video/index.vue` →
+  `<CardVideo>`); `main.vue` only when `index.vue` would give one word (`filter/main.vue` → `<FilterMain>`).
+  Never a single-word name — clashes with HTML elements.
+- BEM root class = kebab-case of the name: `<CardVideo>` → `.card-video`
+- `pathPrefix: true` mandatory — layers break component exports under `false` (nuxt/nuxt#30099)
+
+**App override:** an app defining the same name outranks the layer and wins auto-import; callers untouched.
+Don't fork a component when a prop expresses the difference.
+
+## Markup
+
+`<div>` is the fallback, not the default.
+
+| Need | Tag |
+|---|---|
+| text | `<span>` inline, `<p>` paragraph — never bare `<div>` |
+| structure | `header`, `nav`, `main`, `aside`, `footer`, `section`, `article` |
+| sequence of similar items | `<ul>`/`<ol>` + `<li>` — chip rows and tag clouds included |
+| action / navigation / collapsible | `<button>` / `<a>` / `<details>`+`<summary>` |
+| forms | `<label>`, `<fieldset>`, `<legend>`, native `<input>` types |
+| emphasis, figures | `<em>`/`<strong>`, `<figure>`/`<figcaption>` — not style-only spans |
+
+## TypeScript
+
+- Semicolons always. No code comments unless asked.
+- Domain string sets: `as const` PascalCase objects in `runtime/constants/`, type via
+  `typeof X[keyof typeof X]`. Never `enum` — it survives into the bundle, and `import type` erases it so
+  `X.Member` is `undefined` at runtime in a published layer; you also can't assign a raw API/URL/cookie string
+  to an enum. String values, not numeric (`0` is falsy — `if (spotType)` misreads member `0` as absent;
+  `AdSpotType` is numeric, a wart, don't copy). Framework unions (Nuxt status) stay unions.
+- `.vue` templates are NOT typechecked — `tsc` doesn't read them, `vue-tsc` isn't a gate. A clean `tsc` says
+  nothing about template expressions. Read them, or `npx vue-tsc --noEmit` ad hoc past pre-existing noise.

package/DOCS/STYLES.md

@@ -0,0 +1,136 @@
+# Styles
+
+Canonical for every itube site — the layer owns 100% of the SCSS; apps have an empty `assets/scss/` override
+slot. Read before touching any `<style lang="scss">`, `assets/scss/**`, or a theme token. Paths are
+layer-relative; from an app: `node_modules/itube-specs/DOCS/STYLES.md`. Human-facing version → `README.md`.
+
+## Co-location
+
+- Component and page styles in the SFC's own `<style lang="scss">`. **No `scoped`** — flat BEM isolates.
+- Nothing per-component or per-page in `assets/scss/`.
+- Tree: `assets/scss/` → `vars/` (palette, vars, tokens, z-index), `themes/`, `mixins/`, `base/`, `layout/`,
+  `main.scss`. `css` entry is `main.scss`, loads only `vars/tokens`, `base`, `layout`.
+- **Never `@use 'vars'`/`'mixins'` in an SFC block** — auto-injected by the *app's*
+  `vite.css.preprocessorOptions.scss.additionalData` + `loadPaths`.
+- Sass-loaded global partials: `@use` relatively within their own root, bare specifiers across roots
+  (layer↔app) so `loadPaths` resolves.
+- The layer has no `sass` package — layer styles compile only inside an app, never in the layer's vitest.
+
+## Themes
+
+Dir per theme: `assets/scss/themes/<name>/_theme.scss`. App picks one via `theme:` in its
+`config/site.config.ts` (read by its `nuxt.config.ts` *and* `app.config.ts` — `useAppConfig()` doesn't exist at
+config time), appends `themes/<theme>/` to `loadPaths`; `@forward 'theme'` in `vars/_index.scss` resolves
+there because no `_theme.scss` sits beside it.
+
+**Dir-per-theme is load-bearing** — Sass needs a literal `@use`/`@forward` path, so only the folder can vary.
+
+`loadPaths = [<app>/assets/scss, <layer>/assets/scss/themes/<theme>, <layer>/assets/scss]`. App first → a site
+overrides any partial by name (its `vars/_theme.scss` wins over loadPaths).
+
+**Every token must exist in every theme** — a missing one is a hard Sass error that kills the app build. Two
+guards, both pre-commit + CI:
+
+| Script | Proves | Blind spot |
+|---|---|---|
+| `check:themes` | themes declare the same top-level `$name:` set (`$surfaces` / `$button-variant-overrides` contents ignored — a theme may leave either empty) | token declared in **no** theme |
+| `check:styles` | every `<style>` block compiles against every theme, same preamble + loadPaths as Vite; names the failing theme (~1.5s) | — |
+
+## BEM
+
+`.block {}`, `.block__element {}`, `.block.--modifier {}` — modifier prefix `--`.
+
+**No nesting**, every selector flat with its full class name. `&` only for pseudo-classes, pseudo-elements,
+state modifiers (`&::after`, `&:focus-visible`, `&.--open`).
+
+```scss
+.layout-header {}
+.layout-header__logo {}   // not .layout-header { &__logo {} }
+```
+
+## Hover
+
+**Always `@include hover(<properties>)`, never `&:hover`.** Wraps in `@media (hover: hover)` (on touch a hover
+sticks after a tap), declares `--transition` for the listed properties, pairs `:hover` with `:focus-visible`.
+
+```scss
+.ui-btn.--muted {
+  @include hover(background-color, border) { background-color: $button-muted-bg--hover; }
+}
+```
+
+Applies to the current selector only, so hovering one element to restyle another is written flat inside your
+own media query:
+
+```scss
+@media (hover: hover) {
+  .card-round:is(:hover, :focus-visible) .card-round__img { transform: scale(1.05); }
+}
+```
+
+## Tokens
+
+Never hardcode a color, size or z-index.
+
+| File | Holds | Type |
+|---|---|---|
+| `vars/_palette.scss` | `$color-indigo-600` — raw palette | SCSS var |
+| `themes/<theme>/_theme.scss` | `$chips-text`, `$button-bg--hover` — colors, one per theme | SCSS var |
+| `vars/_vars.scss` | `$radius-*`, `$blur-*`, `$spacing` — static non-color | SCSS var |
+| `vars/_tokens.scss` | `--header-height` — changes at a breakpoint or set via JS | CSS custom prop |
+
+- Changes at a breakpoint or set via JS → CSS custom property. Everything else → SCSS var.
+- **Palette is private**, consumed only by theme files. A component must never use `$color-*` — add the token
+  to **every** theme first.
+- **No semantic tier** (`$text-muted`, `$role-border-subtle`) — themes reference palette directly.
+- Theme files hold **colors only**; radius/blur/static → `vars/_vars.scss`.
+
+### Context-dependent colors
+
+Never a theme flag in a component. Two mixins, driven from the theme file:
+
+- `surface($name)` — block declares itself an island (`.ui-popup { @include surface(overlay); }`), contents
+  pick up colors by cascade. Theme supplies deltas via `$surfaces`; no differentiation → `$surfaces: ()`.
+  Components read `var(--input-bg, #{$input-bg})`, so a single color can still be overridden directly.
+- `button-variant($key)` — place asks, theme answers by name via `$button-variant-overrides`. The element's
+  class still reflects the `theme=` prop, so the mixin prints `--button-variant` as a DevTools marker.
+
+`appConfig.theme` — structural differences only (different element, extra icon, `v-if`).
+
+### Naming
+
+`$<block>-<element>?-<modifier>?-<property>-<state>?`
+
+- block = component root · element = BEM element, optional · modifier = variant, optional
+- property — always present, always short: `bg`, `text`, `border`, `radius`, `icon`, `shadow`. Never the full
+  CSS name (`$button-background` → `$button-bg`, `$input-border-radius` → `$input-radius`). `color` is banned
+  as a property — ambiguous, use `text`.
+- state — last, after `--`: `hover`, `active`, `focus`, `disabled`, `checked`, `current`, `error`
+
+State goes last even when it reads worse: `$video-playlist-card-bg--active`, NOT
+`$video-playlist-card-active-bg`. A state-looking word can be a sub-element: `$filter-popup-active-chip-bg` is
+`active-chip`.
+
+Text-only elements (`title`, `name`, `subtext`, `description`, `label`, `count`) may drop `-text`:
+`$video-card-title`.
+
+## Typography and breakpoints
+
+- Type: `@include font-sm` (14/20), `font-xs` (12/16), `font-base` (16/24) — never raw
+  `font-size`/`line-height`.
+- Breakpoints: `@include from-br(sm)`, `to-br(xs)`. Container: `from-cq($bp)`. JS mirror of `$brkpnts` in
+  `config/`, guarded by `check:breakpoints`.
+- `$brkpnts` holds layout tiers only — points the whole page frame turns on, needed by many components. A
+  one-off threshold of a single block (how many columns fit, where a word wraps) stays a px literal next to
+  that block: `from-br`/`to-br` take a number too.
+- Card grids (videos, channels, playlists, categories) all key off `mixins/_cards-grid.scss` — one ladder
+  1 → 2 (370px) → 3 (900px) → 4 (1440px). Take columns from `@include cards-grid-columns`, set `display` and
+  `gap` yourself; don't hand-roll a per-grid column ladder or an `auto-fill` variant.
+- `$brkpnt-burger` (= `sd`, 1024px) is the burger ↔ desktop-menu line: below it the nav and the right half of
+  the header collapse into the burger. Header, nav, search, niche, language and `--header-height` key off this
+  variable, not off `sm` — move the line here, not per file. Utility classes: `._to-sd` / `._from-sd`.
+
+**All mixins** (auto-injected, never `@use`): `font-4xs|3xs|xs|2xs|sm|md|base|lg|xl|2xl|3xl|4xl`,
+`from-br|to-br`, `from-cq|to-cq`, `hover`, `surface`, `button-variant`, `page|page-title|page-footer-links`,
+`cards-grid-columns`, `video-card|video-card-grid|video-card-poster`, `area-point`. Signatures — SCSS-mixins table in the app's
+`DOCS/CATALOG.md`.

package/README.md

@@ -143,6 +143,12 @@ assets/scss/themes/dark/_theme.scss
 подставляет приложение, и компилирует по разу на тему. То же, что делает Vite, — значит ловит и неизвестные
 миксины, и неверные аргументы `@include`, и показывает, в какой теме падает.
 
+**Промежуточного семантического слоя нет** — темы ссылаются на палитру напрямую, без тира вида
+`$text-muted` / `$role-border-subtle`. Сайты форкаются с принципиально разными схемами, и каждому
+селектору может понадобиться произвольный цвет, а не одна из горстки ролей. Такой слой либо оброс бы
+ролью на селектор (и перестал быть семантическим), либо компоненты начали бы тянуться в обход него.
+Имя токена по компоненту, который он обслуживает, держит соответствие честным.
+
 Контекстные различия (контрол внутри попапа, вариант кнопки, зависящий от темы) решают миксины
 `surface()` и `button-variant()` из `mixins/`: место объявляет себя, а значения даёт тема через карты
 `$surfaces` / `$button-variant-overrides`. Компоненты про темы не знают. `appConfig.theme` — только

package/assets/scss/base/_utils.scss

@@ -6,6 +6,9 @@
 // Виден только ниже sm (960px), на sm и шире скрыт.
 @include from-br(sm) { ._to-sm { display: none !important; } }
 
+// Виден только ниже sd (1024px, граница бургера), на sd и шире скрыт.
+@include from-br(sd) { ._to-sd { display: none !important; } }
+
 // Виден только ниже md (1350px), на md и шире скрыт.
 @include from-br(md) { ._to-md { display: none !important; } }
 
@@ -18,6 +21,9 @@
 // Виден с sm (960px) и шире, ниже скрыт.
 @include to-br(sm) { ._from-sm { display: none !important; } }
 
+// Виден с sd (1024px, граница бургера) и шире, ниже скрыт.
+@include to-br(sd) { ._from-sd { display: none !important; } }
+
 // Виден с md (1350px) и шире, ниже скрыт.
 @include to-br(md) { ._from-md { display: none !important; } }
 

package/assets/scss/layout/_layout.scss

@@ -17,7 +17,7 @@
   padding-block: 12px;
   border-bottom: 1px solid $layout-header-border;
 
-  @include from-br(sm) {
+  @include from-br($brkpnt-burger) {
     padding-inline: 32px;
     padding-block: 12px;
   }

package/assets/scss/mixins/_badge.scss

@@ -0,0 +1,18 @@
+@use 'font-sizes' as *;
+@use 'vars' as *;
+
+// Плашка с кодом локали в переключателях языка (шапка, футер, список языков).
+// Цвета не задаёт — фон и текст ставит вызывающий компонент своими токенами.
+@mixin locale-badge {
+  @include font-xs;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: $radius-small;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/assets/scss/mixins/_breakpoints.scss

@@ -1,19 +1,40 @@
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:meta';
 
-// Брейкпоинты соответствуют брейкпоинтам vuetify https://v2.vuetifyjs.com/en/features/breakpoints/
+// Тиры раскладки. Сюда попадают только точки, вокруг которых перестраивается общий каркас
+// страницы, и потому нужные многим компонентам. Разовый порог одного блока (сколько колонок
+// влезло, где переносится слово) держим литералом рядом с этим блоком — from-br/to-br
+// принимают и число в px.
 
 $brkpnts: (
   xs: 475px,
   xm: 650px,
   sm: 960px,
+  sd: 1024px,
   md: 1350px,
   ml: 1500px,
   lg: 1792px,
   xl: 2560px,
 );
 
+/**
+  Граница «бургер ↔ десктопное меню»: ниже неё навигация и правая часть шапки свёрнуты
+  в бургер, выше — разложены в шапку и в строку навигации под ней. Отдельная переменная,
+  а не литерал `sd`, чтобы двигать эту границу, не перебирая шапку по файлам.
+ */
+$brkpnt-burger: sd;
+
+// Литерал-порог можно писать и как 370, и как 370px — приводим к px.
+@function _to-px($bp) {
+  @if math.is-unitless($bp) {
+    @return $bp * 1px;
+  }
+
+  @return $bp;
+}
+
 /**
   Mobile first брейкпоинты
   @include from-br(sm) { ... }
@@ -27,7 +48,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px;
+    $pixelyzed: _to-px($bp);
 
     @media (min-width: $pixelyzed) {
       @content;
@@ -49,7 +70,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px - 1px;
+    $pixelyzed: _to-px($bp) - 1px;
 
     @media (max-width: $pixelyzed) {
       @content;

package/assets/scss/mixins/_cards-grid.scss

@@ -0,0 +1,32 @@
+@use 'breakpoints' as *;
+
+/**
+  Пороги плотности сеток карточек — тумб, каналов, плейлистов, категорий. Это не тиры
+  раскладки, а ответ на вопрос «сколько карточек влезает по ширине», поэтому литералы,
+  а не ключи $brkpnts: 900px и 1440px намеренно не совпадают с sm/md и в общую карту не идут.
+ */
+$cards-grid-2-cols: 370px;
+$cards-grid-3-cols: 900px;
+$cards-grid-4-cols: 1440px;
+
+/**
+  Колонки сетки карточек: 1, 2 с 370px, 3 с 900px, 4 с 1440px. Только grid-template-columns —
+  `display` и `gap` остаются на вызывающей стороне, они у сеток разные.
+  minmax(0, 1fr) обязателен, не `1fr`: нешринкуемая мета-строка (карточка истории) задаёт
+  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
+ */
+@mixin cards-grid-columns {
+  grid-template-columns: minmax(0, 1fr);
+
+  @include from-br($cards-grid-2-cols) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-3-cols) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-4-cols) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/assets/scss/mixins/_index.scss

@@ -1,7 +1,9 @@
 @forward 'font-sizes';
 @forward 'accessibility';
+@forward 'badge';
 @forward 'breakpoints';
 @forward 'button';
+@forward 'cards-grid';
 @forward 'page';
 @forward 'surface';
 @forward 'video-card';

package/assets/scss/mixins/_page.scss

@@ -13,11 +13,15 @@
 
 // Заголовок страницы: font-lg, uppercase, 700. В разметке — глобальный класс `._title`.
 @mixin page-title {
-  @include font-lg;
+  @include font-base;
 
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   font-weight: 700;
+
+  @include from-br(xm) {
+    @include font-lg;
+  }
 }
 
 // Блок SEO-ссылок внизу страницы: прижат к низу (margin-top: auto) и отбит линией.

package/assets/scss/mixins/_video-card.scss

@@ -1,4 +1,5 @@
 @use 'breakpoints' as *;
+@use 'cards-grid' as *;
 @use 'font-sizes' as *;
 @use 'vars' as *;
 
@@ -10,27 +11,16 @@
   align-content: start;
 }
 
-/**
-  Сетка карточек видео: 2 колонки, 3 с xs, 4 с md.
-  minmax(0, 1fr) обязателен, не `1fr`: мета-строка карточки истории нешринкуема и задаёт
-  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
- */
+// Сетка карточек видео: колонки общие для всех сеток карточек, свой только зазор.
 @mixin video-card-grid {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+  @include cards-grid-columns;
 
   @include from-br(sm) {
     gap: 24px;
   }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
 }
 
 // Постер карточки: 16/9, скруглённый, с обрезкой — база для абсолютных бейджей поверх.

package/assets/scss/themes/dark/_theme.scss

@@ -367,6 +367,8 @@ $language-icon: $color-zinc-400;
 $language--current: $color-zinc-500;
 $language-title: $color-zinc-500;
 $language-item-text: $color-zinc-300;
+$language-code-bg: $color-zinc-700;
+$language-code-text: $color-zinc-200;
 $language-item-bg--hover: $color-zinc-800;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-zinc-700;
@@ -390,11 +392,12 @@ $niche-item-bg--current: $color-zinc-700;
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
 $footer-language-text: $color-zinc-400;
-$footer-language-menu-bg: $color-zinc-800;
-$footer-language-menu-border: $color-zinc-700;
-$footer-language-item-text: $color-zinc-300;
-$footer-language-item-bg--active: $color-indigo-600-20;
-$footer-language-item-text--active: $color-indigo-400;
+$footer-language-badge-bg: $color-zinc-800;
+$footer-language-badge-text: $color-zinc-200;
+$footer-language-menu-bg: $color-night;
+$footer-language-menu-border: $color-zinc-800;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -422,9 +425,12 @@ $header-bg: $color-black;
 $header-burger-icon: $color-zinc-200;
 $header-user-icon: $color-zinc-500;
 $header-language-trigger: $color-zinc-400;
-$header-language-angle--hover: $color-white;
+$header-language-trigger--hover: $color-white;
+$header-language-badge-bg: $color-zinc-800;
+$header-language-badge-text: $color-zinc-200;
 $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── notifications ───
@@ -540,6 +546,10 @@ $swiper-nav-bg--hover: transparent;
 $swiper-nav-text: $color-white;
 $swiper-nav-shadow: transparent;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-zinc-400;
+$section-swiper-cards-link--hover: $color-white;
+
 // ─── Select ───
 $select-icon: $color-zinc-400;
 $select-bg: $color-zinc-800-60;

package/assets/scss/themes/light/_theme.scss

@@ -424,6 +424,8 @@ $language-icon: $color-gray-400;
 $language--current: $color-gray-400;
 $language-title: $color-gray-400;
 $language-item-text: $color-gray-300;
+$language-code-bg: $color-slate-700;
+$language-code-text: $color-white;
 $language-item-bg--hover: $color-white-5;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-slate-750;
@@ -447,11 +449,12 @@ $niche-item-bg--current: $color-indigo-soft;
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
 $footer-language-text: $color-white;
-$footer-language-menu-bg: $color-slate-750;
-$footer-language-menu-border: $color-slate-700;
-$footer-language-item-text: $color-gray-300;
-$footer-language-item-bg--active: $color-indigo-soft;
-$footer-language-item-text--active: $color-white;
+$footer-language-badge-bg: $color-slate-850;
+$footer-language-badge-text: $color-white;
+$footer-language-menu-bg: $color-slate-850;
+$footer-language-menu-border: $color-white-10;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-white-5;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -479,9 +482,12 @@ $header-bg: $color-slate-800;
 $header-burger-icon: $color-gray-200;
 $header-user-icon: $color-gray-500;
 $header-language-trigger: $color-gray-500;
-$header-language-angle--hover: $color-gray-300;
+$header-language-trigger--hover: $color-gray-300;
+$header-language-badge-bg: $color-slate-750;
+$header-language-badge-text: $color-white;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-white-5;
 $notifications-icon: $color-gray-300;
 $notifications-icon--mobile: $color-gray-200;
@@ -591,6 +597,10 @@ $swiper-nav-bg: $color-white;
 $swiper-nav-bg--hover: $color-gray-300;
 $swiper-nav-shadow: $mono-black-10;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-gray-600;
+$section-swiper-cards-link--hover: $color-gray-900;
+
 // ─── Select ───
 $select-bg: $color-white;
 $select-icon: $color-gray-500;

package/assets/scss/vars/_tokens.scss

@@ -38,9 +38,13 @@
     --container-padding-inline: 24px;
     --chips-height: 32px;
     --chips-height-small: 28px;
-    --header-height: 71px;
     --control-min-width: 296px;
     --max-width-container: 1600px;
     --card-round-size: 96px;
   }
+
+  // Высота шапки меняется вместе с её раскладкой, а не на общем тире sm.
+  @include from-br($brkpnt-burger) {
+    --header-height: 71px;
+  }
 }

package/components/grid/categories.vue

@@ -1,4 +1,4 @@
-<!-- Адаптивная сетка карточек категорий (auto-fill) -->
+<!-- Сетка карточек категорий, 1-4 колонки -->
 <template>
   <div class="grid-categories">
     <CardCategory
@@ -22,15 +22,12 @@ defineProps<{
 
 <style lang="scss">
 .grid-categories {
-  --min-width: 150px;
-
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
 
-  @include from-br(sm) {
-    --min-width: 250px;
+  @include cards-grid-columns;
 
+  @include from-br(sm) {
     gap: 16px;
   }
 }

package/components/grid/channels.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек каналов, 2-4 колонки -->
+<!-- Сетка карточек каналов, 1-4 колонки -->
 <template>
   <div
     id="anchor"
@@ -28,16 +28,6 @@ defineProps<{
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>

package/components/grid/playlists.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек плейлистов, 2-4 колонки; попап шаринга — один на список -->
+<!-- Сетка карточек плейлистов, 1-4 колонки; попап шаринга — один на список -->
 <template>
   <div class="grid-playlists">
     <CardPlaylist
@@ -64,12 +64,6 @@ function onShare(card: IPlaylistCard) {
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>

package/components/layout/burger.vue

@@ -74,6 +74,7 @@
       />
 
       <LayoutLanguage
+        burger
         class="layout-burger__language"
         icon-size="20"
       />
@@ -117,13 +118,13 @@ const { isAuthorized } = useUser(AuthorizationApiService);
 const burgerRef = ref();
 
 const breakpoints = CSS_BREAKPOINTS;
-const { isMobile } = checkDeviceWidth(breakpoints);
+const { isBurgerMenu } = checkDeviceWidth(breakpoints);
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
 watch(() => props.modelValue, (value) => {
   if (value) {
-    if (isMobile.value) {
+    if (isBurgerMenu.value) {
       burgerRef.value.showModal();
       scrollLock();
     } else {
@@ -132,7 +133,7 @@ watch(() => props.modelValue, (value) => {
   } else {
     burgerRef.value.close();
 
-    if (isMobile.value) {
+    if (isBurgerMenu.value) {
       scrollUnlock();
     }
   }