itube-specs 0.0.212 → 0.0.215

package/README.md

@@ -1,121 +1,13 @@
-Порядок действий:  
-1) `npm login` = логинимся к npm (bitbucket);  
-2) `npm version patch` - патчит версию (можно и минорить или мажорить по ситуации);  
-3) `npm publish --access public` - публикуем версию (или сразу `npm run public` - обьединяет два действия);  
-4) ставим пакет в проекте;  
-5) проекте самом в `nuxt.config.ts` добавляем;  
-```bash
-    extends: [
-        process.env.LAYER_PATH || '@test/test'
-    ],
-```
-6) Если не первый раз то обновляем пакет `npm install @test/test@latest`, если пакет уже установлен можно в ручную поменять версию и `npm install` (если пакет недавно обновился, сразу npm install может не подхватить последнюю версию);  
-7) `npx nuxi prepare`  
-8) если есть проблемы с runtime запустить в пакете npm run dev он перегенерирует tsconfig и eslint.config.mjs   
-9) и запускаем либо `npm run dev`
-
-`nuxt.config.ts`
-
-```bash
-import { fileURLToPath } from 'node:url'
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['@nuxt/eslint'],
-  eslint: {
-    config: {
-      // Use the generated ESLint config for lint root project as well
-      rootDir: fileURLToPath(new URL('..', import.meta.url))
-    }
-  },
-  components: {
-    dirs: [
-      {
-        path: './components',
-        pathPrefix: false
-      }
-    ]
-  }
-})
-```
-
-`package.json` - версии nuxt && vue должны быть идентичны проекту
-```bash
-{
-  "name": "@test/test", // свое
-  "type": "module",
-  "version": "0.0.1",
-  "main": "./nuxt.config.ts",
-  "types": "./types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./nuxt.config.ts",
-      "default": "./nuxt.config.ts"
-    },
-    "./types": {
-      "types": "./types/index.d.ts",
-      "default": "./types/index.d.ts"
-    },
-    "./runtime": {
-      "import": "./runtime/index.ts",
-      "default": "./runtime/index.ts"
-    },
-    "./*": "./*"
-  },
-  "files": [
-    "components/",
-    "composables/",
-    "types/",
-    "nuxt.config.ts"
-  ],
-  "devDependencies": {
-    "@nuxt/eslint": "latest",
-    "@types/node": "^20.19.19",
-    "eslint": "^9.37.0",
-    "nuxt": "3.17.6",
-    "typescript": "^5.9.3",
-    "vue": "3.5.17"
-  }
-}
-```
-Импорт typescript типов осуществляется за счет этих опций 
-```
-"types": "./types/index.d.ts",
-"exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./nuxt.config.ts",
-      "default": "./nuxt.config.ts"
-    },
-    "./types": {
-      "types": "./types/index.d.ts",
-      "default": "./types/index.d.ts"
-    },
-    "./runtime": {
-      "import": "./runtime/index.ts",
-      "default": "./runtime/index.ts"
-    },
-    "./*": "./*"
-},
-```
-Где:
-- "types" указывает TypeScript, где лежит корневой файл с типами;  
-- "exports" сообщает Node и TS, какие модули доступны для импорта;  
-- "./types" позволяет писать коротко:  
+Пакет является nuxt layer проектов itube;
+Как работать:  
+1) коммитим, потом `npm run patch` - патчит версию;     
+2) `npm i itube-specs` ставим пакет в проекте;  
+3) Если не первый раз то обновляем пакет `npm install @test/test@latest` или `npm run spec`;  
+4) npx nuxi prepare` при необходимости (могут не подсасаться композиблы или компоненты в автоимпорте);  
+5) если есть проблемы с runtime запустить в пакете npm run dev он перегенерирует tsconfig и eslint.config.mjs;  
 
 ```
 import type { IUser } from '@test/test/types'
 ```
-Типы не импортируются автоматически, каждый тип в свою очередь экспортируется в index.d.ts (обязательно указывать расширение при эскпорте d.ts) общий файл откуда уже и берутся все типы в проект.
-
-`tsconfig.json` 
-
-```bash
-{
-  "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "types": ["node"]
-  }
-}
-```
+Types не импортируются автоматически, каждый тип в свою очередь экспортируется в index.d.ts (обязательно указывать расширение при эскпорте d.ts) общий файл откуда уже и берутся все типы в проект.  
+Все что кроме nuxt сущностей (composables, components) устанавливается прописывается вручную.  

package/components/cards/s-video-mini-card.vue

@@ -6,7 +6,7 @@
     :to="link ? generateLink(`/playlists/${prefix}/${card.id}`) : null"
 >
   <div class="s-video-mini-card__img-wrapper">
-    <FImg
+    <SImg
         class="s-video-mini-card__img"
         sizes="96px"
         :src="card.thumbUrl"
@@ -14,11 +14,11 @@
         height="64"
         :alt="card.title"
     />
-    <FLabel
+    <SLabel
         class="s-video-mini-card__duration"
         theme="black"
         :text="duration"
-    ></FLabel>
+    ></SLabel>
   </div>
   <p class="s-video-mini-card__description _truncate">{{ card.title }}</p>
 </component>

package/components/page-components/s-chips-panel.vue

@@ -14,7 +14,7 @@
     >
       <slot name="prepend"></slot>
       <slot>
-        <FChips
+        <SChips
             v-for="item in itemsResult"
             :item="item"
             :key="item.title"
@@ -29,7 +29,7 @@
           class="f-chips-panel__more-wrapper"
           :class="{'--small': mini}"
       >
-        <FChips
+        <SChips
             class="f-chips-panel__button --more"
             :item="{
               title: moreButtonName,

package/components/page-components/s-filter-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <FButton
+  <SButton
       class="s-filter-button"
       :size="size"
       :theme="theme"
@@ -7,17 +7,17 @@
       :title="t('filter')"
       @click="emit('update:modelValue', true)"
   >
-    <FIcon name="adjustments-horizontal" size="16"/>
+    <SIcon name="adjustments-horizontal" size="16"/>
     <span class="_from-sm"
     >{{ buttonName }}
       </span>
-    <FIcon
+    <SIcon
         class="s-filter-button__icon _to-sm"
         name="chevron-down"
         size="16"
         :class="{'--open': modelValue}"
     />
-    <FIcon
+    <SIcon
         v-if="count > 0"
         class="f-filter-button__reset _from-sm"
         name="close"
@@ -30,7 +30,7 @@
         v-if="count > 0"
         class="f-filter-button__mobile-count _to-sm"
     >{{ mobileCount }}</span>
-  </FButton>
+  </SButton>
 </template>
 
 <script setup lang="ts">

package/components/page-components/s-filter-chips.vue

@@ -1,6 +1,6 @@
 <template>
-  <FChipsPanel v-if="items.length > 0">
-    <FChips
+  <SChipsPanel v-if="items.length > 0">
+    <SChips
         v-for="(item, index) in items"
         class="s-filter-chips"
         with-close
@@ -8,8 +8,8 @@
         bright
         :item="item"
         @click="onChipsClick(item)"
-    ></FChips>
-  </FChipsPanel>
+    ></SChips>
+  </SChipsPanel>
 </template>
 
 <script setup lang="ts">

package/components/page-components/s-filter-model-chips.vue

@@ -1,5 +1,5 @@
 <template>
-  <FFilterChips
+  <SFilterChips
       :items="chipsItems"
       @click="(e: IChipsItem)=> onChipsClick(e)"
   />

package/components/page-components/s-filter-page.vue

@@ -12,7 +12,7 @@
             class="s-filter-page__group-title"
         >
           {{ group?.title }}
-          <FIcon
+          <SIcon
               class="s-filter-page__group-title-icon"
               size="32"
               name="chevron-down"
@@ -21,7 +21,7 @@
         <div class="s-filter-page__items">
           <template v-for="(item, subIndex) in filters">
             <ClientOnly>
-              <FSlider
+              <SSlider
                   v-if="(item.kind === 'range') && (item.group.name === group?.name)"
                   :min="getRangeInfo(item.options)?.min"
                   :max="getRangeInfo(item.options)?.max"
@@ -38,7 +38,7 @@
                   @update:model-value="val => updateRangeFilter(item, val)"
               />
             </ClientOnly>
-            <FSelect
+            <SSelect
                 v-if="(item.kind === 'select') && (item.group.name === group?.name)"
                 :name="item.name"
                 :model-value="getSelectValue(item.name)"
@@ -55,18 +55,18 @@
     </div>
     <div class="s-filter-page__footer _from-sm">
       <p class="s-filter-page__footer-results">
-        <FIcon name="filter" size="24"/>
+        <SIcon name="filter" size="24"/>
         <span class="s-filter-page__footer-text">{{ `${count} ${t('results_found')}` }}</span>
       </p>
       <div class="s-filter-page__footer-buttons">
-        <FButton
+        <SButton
             wide
             class="s-filter-page__reset"
             :disabled="!isFiltered"
             @click="onResetClick"
             theme="secondary"
         >{{ t('reset_all') }}
-        </FButton>
+        </SButton>
       </div>
     </div>
   </div>

package/components/page-components/s-filter-popup.vue

@@ -1,5 +1,5 @@
 <template>
-  <FPopup
+  <SPopup
       v-model="isOpen"
       v-if="isOpen"
       sheet
@@ -9,14 +9,14 @@
 
     <template #fixedContent>
       <div class="s-filter-popup__main-filters">
-        <FSelect
+        <SSelect
             name="duration"
             v-model="durationValue"
             :items="durationItems"
             :placeholder="t('duration')"
             icon="tape"
         />
-        <FSelect
+        <SSelect
             name="added"
             v-model="addedValue"
             :items="addedItems"
@@ -31,12 +31,12 @@
           v-for="(item, index) in scheme"
           :key="`scheme-${index}`"
       >
-        <FInput
+        <SInput
             v-if="item.type === 'input'"
             v-model="filterValue[item.title]"
             :label="item?.label"
         />
-        <FSelect
+        <SSelect
             v-if="item.type === 'select'"
             :name="item.title"
             v-model="filterValue[item.title]"
@@ -49,21 +49,21 @@
 
     <template #footer>
       <div class="s-filter-popup__buttons">
-        <FButton
+        <SButton
             theme="secondary"
             wide
             :disabled="!isFiltered"
             @click="reset"
         >{{ t('reset_all') }}
-        </FButton>
-        <FButton
+        </SButton>
+        <SButton
             wide
             @click="saveResult"
         >{{ t('apply') }}
-        </FButton>
+        </SButton>
       </div>
     </template>
-  </FPopup>
+  </SPopup>
 </template>
 
 <script setup lang="ts">

package/components/page-components/s-filter-videos-chips.vue

@@ -1,5 +1,5 @@
 <template>
-  <FFilterChips
+  <SFilterChips
       :items="chipsItems"
       @click="(e: IChipsItem) => onChipsClick(e)"
   />

package/components/page-components/s-filter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="s-filter">
-    <FFilterButton
+    <SFilterButton
         :count="filterCount"
         v-model="filterOpen"
         :theme="buttonTheme"
@@ -8,7 +8,7 @@
     />
 
     <transition>
-      <FFilterPopup
+      <SFilterPopup
           v-if="filterOpen"
           v-model="filterOpen"
           :scheme="scheme"

package/components/page-components/s-info-socials.vue

@@ -9,7 +9,7 @@
         :aria-label="item.title"
         :title="item.title"
     >
-      <FIcon
+      <SIcon
           :size="iconSize"
           prefix="socials"
           :name="knownIcons.includes(item?.icon?.toLowerCase() || '') ? `${item?.icon?.toLowerCase()}` : 'globe'"

package/components/page-components/s-model-filters.vue

@@ -1,20 +1,20 @@
 <template>
-  <FFilterModelChips :filters="data.filters"/>
-  <FFilterPage
+  <SFilterModelChips :filters="data.filters"/>
+  <SFilterPage
       class="s-model-filters__filters _from-sm"
       :filters="data.filters"
       :count="data.total"
       :class="{'_loading': status === 'pending'}"
   />
   <transition>
-    <FPopup
+    <SPopup
         v-if="model"
         v-model="model"
         sheet
         class="s-model-filters__popup"
     >
       <template #title>{{ popupTitle }}</template>
-      <FFilterPage
+      <SFilterPage
           class="s-model-filters__filters _to-sm"
           :filters="data.filters"
           :count="data.total"
@@ -22,23 +22,23 @@
       />
       <template #footer>
         <div class="s-model-filters__footer-buttons _to-sm">
-          <FButton
+          <SButton
               wide
               class="s-model-filters__reset"
               :disabled="!isFiltered"
               @click="onResetClick"
               theme="secondary"
           >{{ t('reset_all') }}
-          </FButton>
-          <FButton
+          </SButton>
+          <SButton
               wide
               class="_to-sm"
               @click="onShowClick"
           >{{ `${t('show_results')} (${data.total})` }}
-          </FButton>
+          </SButton>
         </div>
       </template>
-    </FPopup>
+    </SPopup>
   </transition>
 </template>
 

package/components/page-components/s-pagination.vue

@@ -88,32 +88,32 @@
         </NuxtLink>
       </template>
     </div>
-    <FLink
+    <SLink
         wide
         class="f-pagination__prev"
         :to="linkTo(previousValue)"
         :class="{'--disabled': activeNumber <= 1}"
     >
-      <FIcon
+      <SIcon
           v-if="arrowIcon"
           name="arrow-left"
           size="24"
       />
       {{ t('previous' )}}
-    </FLink>
-    <FLink
+    </SLink>
+    <SLink
         wide
         class="f-pagination__next"
         :class="{'--disabled': activeNumber >= length}"
         :to="linkTo(nextValue)"
     >
       {{ t('next') }}
-      <FIcon
+      <SIcon
           v-if="arrowIcon"
           name="arrow-right"
           size="24"
       />
-    </FLink>
+    </SLink>
   </nav>
 </template>
 

package/components/page-components/s-report.vue

@@ -1,6 +1,6 @@
 <template>
   <transition mode="out-in">
-    <FPopup
+    <SPopup
         v-if="isReportPopupOpen"
         v-model="isReportPopupOpen"
     >
@@ -25,7 +25,7 @@
                 class="f-report__form-button"
             >
               {{ t(`report_form.${item.title}`) }}
-              <FIcon
+              <SIcon
                   class="f-report__form-icon"
                   name="chevron-down"
                   size="24"
@@ -56,7 +56,7 @@
                   v-for="(subItem, subIndex) in item.items"
                   :key="`${subItem.label}-${subIndex}`"
               >
-                <FInput
+                <SInput
                     v-if="['text', 'tel', 'textarea'].includes(subItem.type)"
                     v-model="form.data[subItem.value] as string"
                     :key="`report-form-${index}`"
@@ -67,7 +67,7 @@
                     :error="error[subItem.value]"
                     @update:error="(val: boolean) => error[subItem.value] = val"
                 />
-                <FCheckbox
+                <SCheckbox
                     v-if="subItem.type === 'checkbox'"
                     v-model="form.data[subItem.value] as boolean"
                     class="--wide"
@@ -75,8 +75,8 @@
                     :error="error[subItem.value]"
                     @update:error="(val: boolean) => error[subItem.value] = val"
                 >{{  t(`report_form.${subItem.text}`) }}
-                </FCheckbox>
-                <FRadio
+                </SCheckbox>
+                <SRadio
                     v-if="subItem.type === 'radio' "
                     v-model="reasonValue"
                     name="report-radio-value"
@@ -89,22 +89,22 @@
                 />
               </template>
             </form>
-            <FButton
+            <SButton
                 :disabled="loading"
                 wide
                 @click="submit"
             >{{ t('report_form.send_report') }}
-            </FButton>
+            </SButton>
           </details>
         </div>
-        <FButton
+        <SButton
             wide
             theme="secondary"
             @click="closeReportPopup"
         >{{ t('cancel') }}
-        </FButton>
+        </SButton>
       </div>
-    </FPopup>
+    </SPopup>
   </transition>
 </template>
 

package/components/page-components/s-share.vue

@@ -1,6 +1,6 @@
 <template>
   <transition mode="out-in">
-    <FPopup
+    <SPopup
         v-model="isSharePopupOpen"
         v-if="isSharePopupOpen"
         sheet
@@ -20,7 +20,7 @@
               :key="`share-button-${index}`"
               :href="item.link"
           >
-            <FImg
+            <SImg
                 sizes="24px"
                 width="24"
                 height="24"
@@ -29,7 +29,7 @@
             {{ item.text }}
           </a>
         </div>
-        <FInput
+        <SInput
             class="f-share__copy"
             :label="inputText"
             :title="fullUrl"
@@ -38,13 +38,13 @@
             :model-value="fullUrl"
             @click="copyUrl"
         />
-        <FButton
+        <SButton
             wide
             theme="ghost"
             @click="closeSharePopup"
-        >{{ $t('cancel') }}</FButton>
+        >{{ $t('cancel') }}</SButton>
       </div>
-    </FPopup>
+    </SPopup>
   </transition>
 </template>
 

package/components/page-components/s-sort.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-sort">
-    <FLink
+    <SLink
         class="f-sort__button"
         v-for="(item, index) in items"
         :key="`sort-item-${index}`"
@@ -10,7 +10,7 @@
         :theme="theme"
     >
         {{ t(item.title) }}
-    </FLink>
+    </SLink>
   </div>
 </template>
 

package/components/page-components/s-videos-title.vue

@@ -3,7 +3,7 @@
     <component :is="titleTag" class="f-videos-title__title _title">
       <slot></slot>
     </component>
-    <FCount class="f-videos-title__count" v-if="count">{{ count }}</FCount>
+    <SCount class="f-videos-title__count" v-if="count">{{ count }}</SCount>
   </div>
 </template>
 

package/components/ui/s-checkbox.vue

@@ -15,7 +15,7 @@
         v-bind="$attrs"
     >
     <span class="f-checkbox__check">
-      <FIcon
+      <SIcon
           class="f-checkbox__check-icon"
           name="check"
           size="20"

package/components/ui/s-chips.vue

@@ -14,13 +14,13 @@
       :title="name"
       @click="onButtonClick"
   >
-    <FIcon
+    <SIcon
         v-if="item.icon"
         :name="item.icon"
         size="16"
     />
     {{ name }}
-    <FIcon
+    <SIcon
         v-if="(isActive && !withoutClose && item.value !== 'reset' && !mini) || withClose"
         class="s-chips__close"
         name="close"

package/components/ui/s-country.vue

@@ -1,5 +1,5 @@
 <template>
-<FImg
+<SImg
     class="s-country"
     :sizes="sizes"
     :width="width"

package/components/ui/s-dropdown.vue

@@ -38,7 +38,7 @@
             type="button"
             @click="close"
         >
-          <FIcon name="close" size="16"/>
+          <SIcon name="close" size="16"/>
         </button>
         <slot name="header"></slot>
         <div class="s-dropdown__menu-items" v-if="$slots.items">

package/components/ui/s-input.vue

@@ -65,7 +65,7 @@
           class="f-input__button"
           @click="onButtonInputClick"
       >
-        <FIcon
+        <SIcon
             :name="isPassword ? 'show' : icon || ''"
             class="f-input__button-icon"
             size="24"
@@ -76,7 +76,7 @@
 <!--        v-if="error"-->
 <!--        class="f-input__error"-->
 <!--    >-->
-<!--      <FIcon-->
+<!--      <SIcon-->
 <!--          name="danger"-->
 <!--          size="16"-->
 <!--      />-->

package/components/ui/s-model-tag.vue

@@ -3,7 +3,7 @@
     class="s-model-tag"
     :to="generateLink(`/models/${convertString().toSlug(card.title)}`)"
 >
-  <FImg
+  <SImg
       class="s-model-tag__img"
       sizes="20px sm:24px"
       :src="card.primaryImageUrl || placeholder"

package/components/ui/s-notification.vue

@@ -21,7 +21,7 @@
             aria-label="close"
             @click="close"
         >
-          <FIcon class="s-notification__close-icon" name="close" size="16"/>
+          <SIcon class="s-notification__close-icon" name="close" size="16"/>
         </button>
       </header>
       <div class="s-notification__content">

package/components/ui/s-popup.vue

@@ -38,7 +38,7 @@
           type="button"
           @click="$emit('back')"
       >
-        <FIcon name="angle-left" size="24" />
+        <SIcon name="angle-left" size="24" />
       </button>
       <div
           v-if="$slots.title"
@@ -51,7 +51,7 @@
           type="button"
           @click="close"
       >
-        <FIcon name="close" size="24" />
+        <SIcon name="close" size="24" />
       </button>
     </header>
     <div
@@ -75,7 +75,7 @@
   </div>
 
   <transition mode="out-in">
-    <FSnackbar
+    <SSnackbar
         v-if="snackbarText && isSnackBarInPopup"
     />
   </transition>

package/components/ui/s-select.vue

@@ -12,10 +12,10 @@
   >
     <span class="s-select__label" v-if="label">
       {{ label }}
-      <FCount class="s-select__count" v-if="count">{{ count }}</FCount>
+      <SCount class="s-select__count" v-if="count">{{ count }}</SCount>
     </span>
     <span class="s-select__wrapper">
-      <FIcon
+      <SIcon
           v-if="icon"
           :name="icon"
           size="24"
@@ -43,7 +43,7 @@
             :selected="item.value === modelValue && item.value !== placeholder"
         >{{ capitalize(item.title as string || item.name as string) }}</option>
       </select>
-      <FIcon
+      <SIcon
           class="s-select__icon"
           name="dropdown"
           size="24"

package/components/ui/s-snackbar.vue

@@ -3,18 +3,18 @@
       class="s-snackbar"
       :class="`--${snackbarTheme}`"
   >
-    <FIcon class="s-snackbar__icon" :name="snackbarIcon" size="24"/>
+    <SIcon class="s-snackbar__icon" :name="snackbarIcon" size="24"/>
     {{
       te(`snackbar.${convertSnackKey}`)
           ? t(`snackbar.${convertSnackKey}`)
           : t('snackbar.something_went_wrong')
     }}
-    <FButton
+    <SButton
         theme="secondary"
         size="s"
         @click="close"
     >{{ t('close') }}
-    </FButton>
+    </SButton>
   </div>
 </template>
 

package/components/ui/s-timestamp.vue

@@ -13,7 +13,7 @@
 
   <slot/>
 
-  <FIcon
+  <SIcon
       class="s-timestamp__icon"
       name="forward-step"
       size="16"

package/components/video/s-video-autoplay.vue

@@ -7,7 +7,7 @@
     >
       {{ $t('autoplay_next_video')}}
     </button>
-    <FToggle
+    <SToggle
         class="s-video-autoplay__toggle"
         v-model="value"
     />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.212",
+  "version": "0.0.215",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/types/raw/raw-category-card.d.ts

@@ -13,7 +13,7 @@ export interface IRawCategoryCard {
   language_title: string; // unused
   is_top: boolean; // unused
   is_primary_filter: boolean; // unused
-  videosCount: number; // ✅ used (в FLabel)
+  videosCount: number; // ✅ used (в SLabel)
   video_guid: string; // unused
   video_md5: string; // unused
   thumb_number: number; // unused

package/types/raw/raw-playlist-data.d.ts

@@ -10,7 +10,7 @@ export interface IPlaylistThumb {
 export interface IRawPlaylistData {
   guid: string; // unused
   created: number; // unused
-  updated: number; // ✅ used → <FInfoChips :updated="playlistsData.updated" />
+  updated: number; // ✅ used → <SInfoChips :updated="playlistsData.updated" />
   id: string; // ✅ used → :playlist-id="playlistsData.id", link to `/playlists/${id}`
   name: string; // ✅ used → title, heading, dropdown alignment
   identity_guid: string; // unused
@@ -19,10 +19,10 @@ export interface IRawPlaylistData {
   niche: string; // unused
   domain: string; // unused
   thumbs: IPlaylistThumb[]; // unused
-  videos_count: number; // ✅ used → <FInfoChips :videos-count="..." />
-  first_video_id: string; // ✅ used → <FLink :to="`/playlists/${id}/${firstVideoId}`" />
+  videos_count: number; // ✅ used → <SInfoChips :videos-count="..." />
+  first_video_id: string; // ✅ used → <SLink :to="`/playlists/${id}/${firstVideoId}`" />
   search_tags: string[]; // ✅ used → searchTags computed
-  views: number; // ✅ used → <FInfoChips :views="..." />
+  views: number; // ✅ used → <SInfoChips :views="..." />
   likes: number; // ✅ used (but assigned as **dislikes**)
   dislikes: number; // ✅ used (but assigned as **likes**)
   available_videos: number; // unused