Добавление режима обучения в раздел UI

Инструкция для людей и агентов: как устроен существующий режим обучения и как делать такой же для других экранов (Аналитика, Рассылки, Таблицы и т.д.).

Эталон реализации: страница «Сценарии ботов»
client/components/editor/scenariy/learn/ + ScenariyPage.tsx + ScenariyPageHeader.tsx.

Смежный, но другой паттерн: короткий диалог без шагов на экране «нет проектов»
(NoProjectsScreen + TypewriterDialogue + no-projects-intro-storage).

Документ для пользователей: interface/learn-mode.

Когда нужен learn-режим

Добавляй, если экран:

сложный для первого визита (много вкладок / фильтров / карточек);
критичен для онбординга (создание первого проекта, запуск бота, понимание метрик);
выигрывает от постепенного раскрытия UI вместе с текстом.

Не делай «обучение ради обучения»: 3–8 шагов, один смысл на шаг. Длинный FAQ — в docs/спойлеры, не в learn.

Файл	Назначение
`{section}-learn-steps.ts`	Массив шагов: `id`, `title`, `text`, флаги UI (`visibleX`, `focusY`, `showZ`)
`{section}-learn-storage.ts`	`localStorage`: dismissed / clear / isDismissed
`use-{section}-learn.ts`	Состояние: active, stepIndex, lineReady, next/back/skip/restart
`{Section}LearnPanel.tsx`	UI панели: бейдж, прогресс, `TypewriterText`, Назад/Далее/Пропустить
`index.ts`	Публичный реэкспорт

Правила шагов и копирайта

Один блок текста на шаг — без списка реплик внутри шага (для сценариев так и сделано).
Текст простой, без жаргона редактора нод; можно назвать продукт (BotCraft), если это помогает ориентиру.
Шаг говорит только про то, что уже видно или появляется на этом шаге.
Не смешивай «Далее» с кликом по вкладке: вкладку переключает код шага (focusTab / аналог), пользователь жмёт только Далее.
Последний шаг — конкретное действие («нажмите …»), кнопка «Я понял» = dismiss.
Кнопка «Обучение» в шапке/тулбаре раздела — всегда доступна для restart.

Автостарт только при осмысленном гейте, например:

нет проектов → сценарии (isOnboarding);
первый визит раздела (свой storage-флаг);
не автостартовать гостю, пока сессия/данные грузятся (избегать мигания UI).

Чеклист внедрения в новый раздел

Шаги — описать 3–8 шагов и флаги видимости элементов экрана.
Storage — dismissed / clear / isDismissed.
Хук — active = manual \|\| (autoStart && !closed); goNext только после lineReady.
Панель — TypewriterText с key={step.id}, disabled «Далее» до onDone.
Страница раздела — при active прятать/показывать куски UI по флагам шага; useEffect на focus*.
Шапка — кнопка «Обучение» → restart.
Документация людей — обновить interface/learn-mode (таблица шагов / где доступно).
Не трогать серверные API ради обучения: только клиент + localStorage.

Фронтенд-файлы держать короткими (ориентир AGENTS.md: ~100–150 строк на файл в client/).

Анти-паттерны

Суммировать/показывать весь UI сразу, а текст «прокручивать» отдельно — теряется смысл раскрытия.
Автостарт при каждой загрузке без dismissed-флага.
Блокировать основной CTA раздела до конца обучения без Пропустить.
Дублировать TypewriterText своей реализацией печати.
Писать шаги в JSX страницы вместо отдельного *-learn-steps.ts.
Хранить прогресс на сервере без явной задачи продукта.

Кандидаты на следующий learn-режим

Приоритет по пользе для новичка (не обязательный порядок реализации):

Раздел	Что объяснить по шагам
Редактор (первый холст)	сделано: `client/components/editor/canvas/learn/`. Разделы — `editor-learn-sections.ts`: новый раздел = файл шагов + запись в `EDITOR_LEARN_SECTIONS`; задание `click` + `clickTarget` ждёт нажатия кнопки
Вкладка «Бот»	токен → запуск → статус
Аналитика	активные / новички / вернувшиеся / период
Рассылки	аудитория → текст → запуск
Пользователи / диалоги	список ↔ переписка

Сначала UI и тексты шагов, потом полировка анимаций.

Связанный код (эталон)

client/components/editor/scenariy/learn/
  scenariy-learn-steps.ts
  scenariy-learn-storage.ts
  use-scenariy-learn.ts
  ScenariyLearnPanel.tsx
  index.ts
client/components/editor/scenariy/ScenariyPage.tsx
client/components/editor/scenariy/ScenariyPageHeader.tsx
client/components/editor/auth/TypewriterText.tsx
client/components/editor/no-projects/   # диалог без шагов

Когда нужен learn-режим​

Рекомендуемая архитектура (копировать паттерн сценариев)​

Правила шагов и копирайта​

Чеклист внедрения в новый раздел​

Анти-паттерны​

Кандидаты на следующий learn-режим​

Связанный код (эталон)​