itube-specs 0.0.862 → 0.0.864

package/README.md

@@ -61,11 +61,15 @@ npm run lint         # ESLint (гейтит на ноль варнингов)
 npm run lint:fix     # ESLint --fix
 npm run lint:css     # Stylelint по **/*.{scss,vue}
 npm run lint:css:fix # Stylelint --fix
+npm run check:themes # сверяет наборы имён токенов во всех темах
+npm run check:styles # компилирует стили каждого SFC каждой темой (~1.5s)
 npm run test         # vitest однократно
 npm run patch        # npm version patch — бамп версии перед публикацией
 ```
 
 Pre-commit (husky + lint-staged): на закоммиченных файлах прогоняются `eslint --fix` и `stylelint --fix`.
+Если в коммите есть `assets/scss/themes/**`, гоняется `check:themes`; если любой `.vue` или `assets/scss/**` —
+`check:styles`. Оба есть и в CI, в шаге Lint.
 ⚠️ **Шаблоны `.vue` не типизируются вообще.** Обычный `tsc` их не читает, а `vue-tsc` не подключён (накопился
 бэклог ошибок в шаблонах, подключение — отдельная задача). Значит чистый `tsc` ничего не говорит про выражения
 в шаблоне: арифметика над строковым union, неверный тип пропа, переименованное поле пройдут молча.
@@ -126,8 +130,15 @@ assets/scss/themes/dark/_theme.scss
 `loadPaths`). Это точка пер-сайтовой темизации.
 
 **Все токены обязаны быть во всех темах.** Отсутствующий токен — жёсткая ошибка Sass в момент, когда
-тема выбрана, то есть падает вся сборка сайта, а не «поехал цвет». Сверять набор имён после любой
-правки темы.
+тема выбрана, то есть падает вся сборка сайта, а не «поехал цвет». Это гейтит `npm run check:themes`
+(pre-commit при правке тем + CI). Сверяются только верхнеуровневые `$name:`, поэтому начинка
+`$surfaces` / `$button-variant-overrides` игнорируется — она по замыслу разная.
+
+Паритет доказывает лишь то, что темы согласованы **между собой**. Токен, использованный в компоненте, но не
+заведённый **ни в одной** теме, эту проверку пройдёт и всё равно уронит сборку — для этого есть
+`npm run check:styles`: он достаёт каждый `<style lang="scss">`, приписывает тот же `@use`-префикс, что
+подставляет приложение, и компилирует по разу на тему. То же, что делает Vite, — значит ловит и неизвестные
+миксины, и неверные аргументы `@include`, и показывает, в какой теме падает.
 
 Контекстные различия (контрол внутри попапа, вариант кнопки, зависящий от темы) решают миксины
 `surface()` и `button-variant()` из `mixins/`: место объявляет себя, а значения даёт тема через карты

package/assets/scss/mixins/_surface.scss

@@ -64,16 +64,18 @@ $surface-roles: (
 
   $overrides: map.get($surfaces, $name);
 
-  @each $role, $value in if($overrides, $overrides, ()) {
-    $props: map.get($surface-roles, $role);
+  @if $overrides {
+    @each $role, $value in $overrides {
+      $props: map.get($surface-roles, $role);
 
-    @if not $props {
-      @error 'surface(#{$name}): неизвестная роль `#{$role}`. Допустимые: #{map.keys($surface-roles)}';
-    }
+      @if not $props {
+        @error 'surface(#{$name}): неизвестная роль `#{$role}`. Допустимые: #{map.keys($surface-roles)}';
+      }
 
-    @if $value {
-      @each $prop in $props {
-        #{$prop}: #{$value};
+      @if $value {
+        @each $prop in $props {
+          #{$prop}: #{$value};
+        }
       }
     }
   }

package/components/card/channel.vue

@@ -61,7 +61,7 @@
 <script setup lang="ts">
 import { convertString, formatDate } from '../../runtime';
 import type { IChannelCard } from '../../types';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   card: IChannelCard

package/components/card/playlist.vue

@@ -176,7 +176,7 @@
 import { formatDate, ThumbSize } from '../../runtime';
 import type { IPlaylistCard, IProfileData, IThumbUrls } from '../../types';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   card: IPlaylistCard

package/components/card/video/index.vue

@@ -137,7 +137,7 @@
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
 import { convertString, getDuration } from '../../../runtime';
-import { CSS_BREAKPOINTS } from '../../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 

package/components/filter/selects.vue

@@ -111,7 +111,7 @@
 import type { IModelFilter } from '../../types';
 import { onClickOutside } from '@vueuse/core';
 import { convertString, checkDeviceWidth } from '../../runtime';
-import { CSS_BREAKPOINTS } from '../../lib/css-breakpoints';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 const props = defineProps<{
   filters: IModelFilter[]

package/components/layout/burger.vue

@@ -78,7 +78,8 @@
 
 <script setup lang="ts">
 import { AuthSteps, onBackdropClick, checkDeviceWidth } from '../../runtime';
-import type { CssBreakpoints, IProfileData  } from '../../types';
+import type { IProfileData } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 import { getNavigationItems } from '../../lib';
@@ -110,7 +111,7 @@ const { isAuthorized } = useUser(AuthorizationApiService);
 
 const burgerRef = ref();
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();

package/components/ui/dropdown.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 // На компоненте обязательно вызывать пропсы слота и вешать слот пропс (className) на непосредственных детей
 import { checkDeviceWidth } from '../../runtime';
-import type { CssBreakpoints } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { onClickOutside } from '@vueuse/core';
 
 const dropdownRef = ref();
@@ -89,7 +89,7 @@ onClickOutside(dropdownRef, () => {
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
 function checkPosition() {

package/components/ui/tooltip.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { checkDeviceWidth } from '../../runtime';
 import { onClickOutside } from '@vueuse/core';
-import type { CssBreakpoints } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 defineProps<{
   right?: boolean
@@ -38,7 +38,7 @@ defineProps<{
 const tooltipRef = ref<HTMLElement>();
 const isOpen = ref(false);
 
-const breakpoints = useAppConfig().cssBreakpoints as Record<CssBreakpoints, number>;
+const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
 
 onClickOutside(tooltipRef, () => {

package/config/css-breakpoints.ts

@@ -0,0 +1,22 @@
+/** Имя брейкпоинта. Совпадает с ключами `$brkpnts` в assets/scss/mixins/_breakpoints.scss. */
+export type CssBreakpointName = 'xs' | 'xm' | 'sm' | 'md' | 'ml' | 'lg' | 'xl';
+
+/**
+ * JS-зеркало брейкпоинтов из SCSS.
+ *
+ * Источник истины — `$brkpnts` в assets/scss/mixins/_breakpoints.scss: по нему работают
+ * миксины вёрстки. JS прочитать SCSS не может, поэтому здесь зеркало — оно нужно там, где
+ * ширину надо знать в скрипте: `sizes` у картинок, брейкпоинты свайпера, checkDeviceWidth.
+ *
+ * Значения обязаны совпадать с SCSS — это проверяет `check:breakpoints`. Разойдутся —
+ * атрибут `sizes` начнёт врать браузеру про точку переключения раскладки.
+ */
+export const CSS_BREAKPOINTS: Record<CssBreakpointName, number> = {
+  xs: 475,
+  xm: 650,
+  sm: 960,
+  md: 1350,
+  ml: 1500,
+  lg: 1792,
+  xl: 2560,
+};

package/config/index.ts

@@ -0,0 +1,2 @@
+export * from './themes';
+export * from './css-breakpoints';

package/config/themes.ts

@@ -0,0 +1,29 @@
+/** Имя темы = имя папки в assets/scss/themes/. */
+export type ThemeName = 'light' | 'dark';
+
+export interface ThemeMeta {
+  /** Подсказка браузеру для нативных контролов и скроллбаров. */
+  colorScheme: 'light' | 'dark';
+  /** Цвет хрома браузера. Обязан совпадать с `$body-bg` этой темы. */
+  themeColor: string;
+}
+
+/**
+ * JS-сторона тем: то, что нужно знать о теме вне Sass.
+ *
+ * Цвета живут в SCSS (assets/scss/themes/<name>/_theme.scss), но `theme-color` и
+ * `color-scheme` нужны в `nuxt.config` на этапе сборки, куда SCSS не дотягивается.
+ * Поэтому здесь минимальное дублирование — только хром браузера.
+ *
+ * Список должен совпадать с папками в assets/scss/themes/ — это проверяет `check:themes`.
+ */
+export const themes: Record<ThemeName, ThemeMeta> = {
+  light: {
+    colorScheme: 'light',
+    themeColor: '#1e2a3a', // = $body-bg темы light ($color-slate-800)
+  },
+  dark: {
+    colorScheme: 'dark',
+    themeColor: '#0d0d0d', // = $body-bg темы dark ($color-black)
+  },
+};

package/lib/index.ts

@@ -15,4 +15,3 @@ export * from './scheme/categories-navigation';
 export * from './scheme/navigation-items';
 export * from './scheme/profile-navigation-items';
 export * from './scheme/additional-links-items';
-export * from './css-breakpoints';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.862",
+  "version": "0.0.864",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -11,6 +11,9 @@
     "lint:fix": "eslint . --fix",
     "lint:css": "stylelint \"**/*.{scss,vue}\" --max-warnings=0 --allow-empty-input",
     "lint:css:fix": "stylelint \"**/*.{scss,vue}\" --fix --allow-empty-input",
+    "check:themes": "node scripts/check-themes.mjs",
+    "check:styles": "node scripts/check-styles.mjs",
+    "check:breakpoints": "node scripts/check-breakpoints.mjs",
     "test": "NODE_OPTIONS='--no-warnings' vitest",
     "prepare": "husky"
   },
@@ -39,6 +42,10 @@
       "import": "./lib/index.ts",
       "default": "./lib/index.ts"
     },
+    "./config": {
+      "import": "./config/index.ts",
+      "default": "./config/index.ts"
+    },
     "./services/*": "./services/*.ts",
     "./composables/*": "./composables/*.ts",
     "./utils/*": "./utils/*.ts",
@@ -51,6 +58,7 @@
     "services/",
     "utils/",
     "types/",
+    "config/",
     "lib/",
     "middleware/",
     "plugins/",
@@ -69,26 +77,27 @@
   ],
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^4.5.1",
-    "@nuxt/eslint": "latest",
+    "@nuxt/eslint": "^1.16.0",
     "@nuxt/icon": "1.15.0",
     "@nuxt/test-utils": "^3.23.0",
     "@nuxtjs/i18n": "9.5.6",
     "@types/node": "^20.19.19",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.37.0",
+    "@vue/test-utils": "^2.4.11",
+    "eslint": "^9.39.5",
     "happy-dom": "^18.0.1",
     "husky": "^9.1.7",
     "lint-staged": "^17.0.7",
     "nuxt": "^3.21.8",
     "postcss-html": "^1.8.1",
+    "sass": "^1.102.0",
     "stylelint": "^17.13.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4",
+    "vitest": "^3.2.7",
     "vue": "3.5.17"
   },
   "dependencies": {
-    "@sentry/nuxt": "^10.53.1",
+    "@sentry/nuxt": "^10.69.0",
     "@vueform/slider": "2.1.10",
     "@vueuse/core": "12.8.2"
   }

package/pages/videos/[slug].vue

@@ -28,7 +28,7 @@ import { SearchApiService } from '../../services/api/search.service';
 import { VideosApiService } from '../../services/api/videos.service';
 import { ModelsApiService } from '../../services/api/models.service';
 import { AsyncData, ThumbSize } from '../../runtime';
-import { CSS_BREAKPOINTS } from '../../lib';
+import { CSS_BREAKPOINTS } from '../../config';
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 

package/runtime/utils/check-device-width.ts

@@ -1,7 +1,7 @@
 import { useBreakpoints } from '@vueuse/core';
-import type { CssBreakpoints } from '../../types';
+import type { CssBreakpointName } from '../../config/css-breakpoints';
 
-function breakpoints(breakpoints: Record<CssBreakpoints, number>) {
+function breakpoints(breakpoints: Record<CssBreakpointName, number>) {
   return useBreakpoints(
     {
       xs: breakpoints.xs,
@@ -17,7 +17,7 @@ function breakpoints(breakpoints: Record<CssBreakpoints, number>) {
 * Возвращает реактивные флаги isMobile и isTablet на основе переданных breakpoints.
 * @param projectBreakpoints - набор брейкпоинтов проекта (xs, sm, md, lg, xl) в пикселях
 */
-export const checkDeviceWidth = (projectBreakpoints: Record<CssBreakpoints, number>) => {
+export const checkDeviceWidth = (projectBreakpoints: Record<CssBreakpointName, number>) => {
   const isMobile = breakpoints(projectBreakpoints).smaller('sm');
   const isTablet = breakpoints(projectBreakpoints).smaller('md');
 

package/runtime/utils/server/server-api-helper.ts

@@ -17,7 +17,7 @@ export class ServerApiHelper {
       });
       return response.data;
     } catch (error: any) {
-      throw new Error(`Cannot fetch ${url}: ${error?.data ?? error?.message ?? error}`);
+      throw new Error(`Cannot fetch ${url}: ${error?.data ?? error?.message ?? error}`, { cause: error });
     }
   }
 }

package/types/index.d.ts

@@ -57,7 +57,6 @@ export * from './search-top-models.d.ts';
 export * from './select-item.d.ts';
 export * from './model-group.d.ts';
 export * from './change-email-form.d.ts';
-export * from './css-breakpoints.d.ts';
 export * from './button-sizes.d.ts';
 export * from './button-themes.d.ts';
 export * from './report-request.d.ts';

package/lib/css-breakpoints.ts

@@ -1,15 +0,0 @@
-export type CssBreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-/**
- * Брейкпоинты на проекте,
- * должны совпадать с тем что в CSS assets/scss/_breakpoints.scss
- *
- * Используется для свайпера, для установки брейкпоинтов у него.
- */
-export const CSS_BREAKPOINTS: Record<CssBreakpointName, number> = {
-  xs: 475,
-  sm: 960,
-  md: 1350,
-  lg: 1600,
-  xl: 2560,
-};

package/types/css-breakpoints.d.ts

@@ -1 +0,0 @@
-export type CssBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';