---
title: Архитектура SDK
description: Структура папок, границы публичного API и паттерны компоновки в @open-pencil/vue.
---

# Архитектура SDK

`@open-pencil/vue` — Vue-слой поверх `@open-pencil/core`.

Пакет не владеет самой моделью редактора. Он адаптирует движок к Vue через:

- Vue-инъекцию
- реактивные компосаблы
- headless-структурные примитивы
- подключение холста и обработку ввода

## Структура папок

Пакет организован по доменам.

### Семейства компонентов

- `Canvas/`
- `ColorPicker/`
- `FillPicker/`
- `FontPicker/`
- `GradientEditor/`
- `LayerTree/`
- `PageList/`
- `PropertyList/`
- `ScrubInput/`
- `Toolbar/`

Содержат структурные/headless-примитивы и локальные вспомогательные функции.

### Controls

`controls/` содержит компосаблы для панелей свойств и элементов управления редактора:

- `usePosition`
- `useLayout`
- `useAppearance`
- `useTypography`
- `useExport`
- `useFillControls`
- `useStrokeControls`
- `useEffectsControls`
- `useNodeProps`
- `usePropScrub`

### Variables

`VariablesEditor/` содержит компосаблы и подключение состояния для домена переменных.

### Selection

`selection/` содержит производное состояние редактора и возможности, основанные на выделении.

### Context

`context/` содержит хелперы для инъекции редактора:

- `EDITOR_KEY`
- `provideEditor`
- `useEditor`

### Internal

`internal/` содержит сквозные утилиты, не предназначенные как основные headless-примитивы.

## Философия публичного API

### Предпочитайте компосаблы

Если задача — это преимущественно управляющая логика, вывод состояния или действия редактора, оформите её как компосабл.

### Headless-примитивы — только для значимой структуры

Используйте корневые компоненты, когда они координируют структуру, дочерние элементы, слоты или контекст.

Примеры:

- `PageListRoot`
- `PropertyListRoot`
- `ToolbarRoot`

### Избегайте широких слотов с дампом контекста

Предпочитайте целенаправленные пропы слотов или прямое использование компосаблов — вместо гигантских нагрузок `v-slot="ctx"`.

## Ответственность: приложение vs SDK

### SDK отвечает за

- интеграцию с редактором
- переиспользуемую headless-логику
- переиспользуемую структуру UI без предположений о стилях
- интеграцию рендеринга холста

### Приложение отвечает за

- стили
- оболочки макетов
- маршрутизацию
- файловые потоки продукта
- тосты, меню и UX, специфичный для приложения

## Практическое правило

Если кусок логики можно переиспользовать в другом приложении на базе OpenPencil без привнесения стилей — скорее всего, ему место в `@open-pencil/vue`.

## Связанные страницы

- [Начало работы с SDK](./getting-started)
- [Справочник API](./api/)