> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Нативный UI и темы

Экранные примитивы и общие view-модели, отражающие дизайн-решения веба.

## Прежде чем начать

Откройте загруженный проект supastack в Visual Studio Code, используя «Файл» → «Открыть папку», затем выберите «Терминал» → «Новый терминал». Корень репозитория — это папка, содержащая package.json, приложения и пакеты. Запустите команду ниже и оставьте терминал открытым. Если команда не распознается, завершите руководство по установке инструмента, прежде чем продолжить.

Сначала прочтите руководство по платформе. Сервер — это процесс приложения, который отвечает на запросы браузера или телефона. Веб читает apps/web/.env.local, Expo читает apps/mobile/.env.local, а команды миграции базы данных читают корневой .env. Демонстрация без базы данных / панели мониторинга отделена от реальных учетных записей / аутентификации, для которых необходимо перенести Postgres. Для оформления заказа только на телефоне или компьютере требуется отдельно работающий веб-сервер.

[Установите инструменты и получите код](https://supastack.dev/ru/docs/web/before-you-start.md)

[Изучение команд, файлов и конфигурации](https://supastack.dev/ru/docs/web/terminal-basics.md)

[Пройдите руководство по первому запуску мобильной версии](https://supastack.dev/ru/docs/mobile/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/mobile start
```


## Настройка и конфигурация

Экранные примитивы находятся в apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — и стилизуются из apps/mobile/src/theme, поэтому визуальные решения для веба напрямую отображаются в нативном интерфейсе. В настройках оформления режим «Как в веб-приложении» (apps/mobile/src/theme/synced.ts через GET/PUT /api/mobile/appearance) применяет синхронизированный веб-пакет цветов авторизованного пользователя из локального кэша.

packages/ui-native несёт кроссплатформенные хелперы view-моделей: createEntitlementCard превращает серверное состояние права доступа в title, status, detail, метку действия и метку доступности карточки, поэтому web и mobile рендерят одно и то же решение о доступе.

```
apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }
```


## Рабочий процесс внедрения

Собирайте экраны из общих примитивов до написания новых элементов; следуйте токенам и плотности модуля темы вместо захардкоженных размеров и цветов.

Держите продуктовые тексты вне примитивов — они рендерят метки, а не решения о текстах. Проводите метки доступности через кастомные строки так, как это делает createEntitlementCard.


## Проверка и устранение неполадок

Проверяйте экран в светлой и тёмной теме, на максимальном размере текста, с метками скринридера и на маленьком устройстве. Компонент, который обрезает или клипает при 200% текста, не завершён.


## Вперёд

[Мобильные права доступа](https://supastack.dev/ru/docs/mobile/entitlements.md)