🔒 Обязательные • • defineOptions({ name }) • runtime defineProps({}) • отдельный index.ts • отдельный types.ts • Story + Test обязательны

🚫 Запрещено • withDefaults(defineProps<>) в SF-kit • автоимпорт компонентов через glob • JSX • default export из src/components/index.ts

Генерация компонента

npm run generate <ИмяКомпонента>

Обновить snaphots
npm run test -- -u

## Использование

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import SfKit, { install as SfKitPlugin } from '@arlin13sb/sf-kit'
// Стили из бандла (при cssCodeSplit: true), но их можно не тянуть, если настроены в проекте
import '@arlin13sb/sf-kit/style.css'

const app = createApp(App)

// SSR-friendly: передайте user-agent, если есть
app.use(SfKitPlugin, { ssrUA: navigator.userAgent })
app.mount('#app')

Точечный импорт компонентов (treeshake)

import { defineAsyncComponent } from 'vue'

const UiButton = defineAsyncComponent(() =>
  import('@arlin13sb/sf-kit/components/Button')
)
// стили — общий индекс или отдельные, если появятся
import '@arlin13sb/sf-kit/style.css'

Тесты

npm test           # vitest + jsdom
npm test -- -u     # обновить снапшоты

SSR / Nuxt пример

// plugins/sf-kit.client.ts (Nuxt 3)
import SfKit from '@arlin13sb/sf-kit'
import '@arlin13sb/sf-kit/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  // a) если хотим сами детектить по UA
  const ua = process.server
    ? useRequestHeaders()['user-agent'] || ''
    : navigator.userAgent

  nuxtApp.vueApp.use(SfKit, { ssrUA: ua })
})

Использование готового состояния (например, nuxt/device)

import SfKit from '@arlin13sb/sf-kit'
import { useDevice as useNuxtDevice } from '#imports' // из nuxt/device
import { getCurrentDevice } from '@arlin13sb/sf-kit/composables' // быстрый доступ к актуальному состоянию

export default defineNuxtPlugin((nuxtApp) => {
  const nuxtDevice = useNuxtDevice()
  // пробрасываем готовый стор, SF-kit не будет пересчитывать
  nuxtApp.vueApp.use(SfKit, { deviceState: nuxtDevice, bindResize: true })
})

// позже, в любом месте (где есть общий инстанс), можно получить текущее состояние:
const device = getCurrentDevice() // reactive DeviceState или null, если плагин не инициализирован
console.log(device?.isMobile)

Использование в приложении без глобального плагина

import { createSSRApp } from 'vue' import App from './App.vue' import { provideDevice } from '@arlin13sb/sf-kit/composables'

const app = createSSRApp(App) const device = provideDevice(app, { ssrUA: req.headers['user-agent'] }) app.mount('#app')

Если есть внешний стор (nuxt/device):

import { provideDevice } from '@arlin13sb/sf-kit/composables' import { useDevice as useNuxtDevice } from '#imports'

const device = useNuxtDevice() provideDevice(app, { state: device, bindResize: true })