# Getting Started

## Установка и сборка

```bash
npm install
npm run dev
```

Production build:

```bash
npm run build
```

Сборка кладет результат в `dist/`:

- `dist/css/kit.css`
- `dist/css/demo.css`
- `dist/js/gnexus-ui-kit.js`
- `dist/vue/index.js`
- `dist/index.html`
- `dist/assets/*`

## Подключение в HTML

Минимально нужны иконки, CSS kit и JS bundle:

```html
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<script src="/js/gnexus-ui-kit.js"></script>
```

Если странице не нужны интерактивные компоненты, JS можно не подключать. Но для drawer, modals, toasts, overlays, accordion, date picker helpers и file upload previews нужен `gnexus-ui-kit.js`.

## Базовая страница

```html
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
  <link rel="stylesheet" href="/css/kit.css">
</head>
<body>
  <header class="page-header">
    <div>
      <h1 class="page-title">Projects</h1>
      <p class="page-subtitle">Internal workspace</p>
    </div>
    <div class="page-actions">
      <button class="btn btn-accent with-icon" type="button">
        <i class="ph ph-plus"></i>
        Create
      </button>
    </div>
  </header>

  <script src="/js/gnexus-ui-kit.js"></script>
</body>
</html>
```

## Assets

Kit ожидает локальные assets из `dist/assets`:

- IBM Plex Mono fonts
- Phosphor icon font
- highlight.js для demo/docs
- `gnexus-mark.svg`

В приложении можно использовать свои пути, но классы с `.ph` предполагают, что Phosphor Icons подключены.

## Vue

Для Vue 3 проектов используйте официальный adapter:

```js
import "gnexus-ui-kit/dist/css/kit.css";
import "gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
import { GnButton, GnModal } from "gnexus-ui-kit/vue";
```

Подробнее: [Vue Adapter](vue.md).

## Версия

Текущая версия пакета: `0.2.0`.
