@mobilon-dev/chotto 0.3.24 → 0.3.26

package/README.md

@@ -10,12 +10,12 @@
 
 - 📚 **[Документация](https://mobilon-dev.github.io/chotto-docs/)** - Полное руководство по использованию
 - 🎨 **[Storybook](https://mobilon-dev.github.io/chotto/)** - Интерактивные примеры 20+ компонентов
-- 🎯 **[Демо-приложения](https://mobilon-dev.github.io/chotto-demo/)** - 7 готовых примеров использования
+- 🎯 **[Демо-приложения](https://mobilon-dev.github.io/chotto-demo/)** - 10 готовых примеров использования
 - 💬 **[Telegram чат разработчиков](https://t.me/chottodev)** - Сообщество и поддержка
 
 ## 🖼️ Скриншоты
 
-![Chotto UI Screenshot](images/screenshot7.png)
+![Chotto UI Screenshot](images/screenshot8.png)
 
 ## 🎥 Видео-обзоры
 
@@ -36,7 +36,9 @@
 - 🎬 Видео сообщения с встроенным плеером
 - 📎 Файлы с превью и загрузкой
 - 📞 Звонки с транскрипцией
+- 🎭 Стикеры (включая анимированные)
 - 💬 Ответы на сообщения
+- 😊 Эмодзи-реакции на сообщения
 - 📅 Разделители дат
 - ⚙️ Системные уведомления
 - ⌨️ Индикатор печати
@@ -54,6 +56,9 @@
 - 📝 **Шаблоны сообщений** (WABA, групповые)
 - 🎤 **Запись аудио и видео**
 - 😊 **Поддержка эмодзи**
+- ⚙️ **Контекстное меню сообщений** с настраиваемыми действиями
+- ✅ **Статусы доставки сообщений** (отправка, доставлено, прочитано, ошибка)
+- 💾 **Загрузка медиафайлов** (изображения, видео, аудио)
 
 ### 🏗️ **Гибкая архитектура**
 - **Layouts** - определяют структуру интерфейса
@@ -116,7 +121,15 @@ import {
   ChatInput,
   ThemeMode
 } from '@mobilon-dev/chotto'
-import '@mobilon-dev/chotto/themes/index.scss'
+
+// Импорт основных стилей библиотеки
+import '@mobilon-dev/chotto/style.css'
+
+// Если нужна конкретная тема, можно импортировать отдельно:
+import '@mobilon-dev/chotto/themes/default.css'
+import '@mobilon-dev/chotto/themes/dark.css'
+import '@mobilon-dev/chotto/themes/green.css'
+import '@mobilon-dev/chotto/themes/mobilon1.css'
 
 // Ваша логика...
 </script>
@@ -158,27 +171,42 @@ npm run lint-fix
 
 ```
 src/
-├── library/           # Основная библиотека компонентов
-│   ├── layouts/      # Макеты (BaseLayout, ExtendedLayout, etc.)
-│   ├── components/   # UI компоненты (ChatInput, ChatList, etc.)
-│   ├── messages/     # Компоненты сообщений (TextMessage, ImageMessage, etc.)
-│   ├── containers/   # Контейнеры (BaseContainer, FloatContainer)
-│   └── modals/       # Модальные окна
-├── helpers/          # Утилиты и хелперы
-├── types/            # TypeScript типы
-├── data/             # Mock данные для демонстрации
-├── themes/           # Стили и темы (default, dark, green)
-└── locale/           # Локализация (EN, RU)
+├── components/                 # UI компоненты (атомарный дизайн)
+│   ├── 1_atoms/                # Атомарные компоненты (ButtonContextMenu, ContextMenu, etc.)
+│   ├── 1_icons/                # Иконки (AvatarIcon, CheckIcon, etc.)
+│   ├── 2_blocks/               # Блочные компоненты (FeedSearch, FeedFoundObjects, etc.)
+│   ├── 2_chatinput_elements/   # Элементы ввода (FileUploader, ButtonEmojiPicker, etc.)
+│   ├── 2_chatlist_elements/    # Элементы списка чатов (ChatItem, ChatFilter, etc.)
+│   ├── 2_elements/             # Общие элементы (ChatInfo, ThemeMode, AudioRecorder, etc.)
+│   ├── 2_feed_elements/        # Элементы ленты сообщений (TextMessage, ImageMessage, etc.)
+│   ├── 2_modals/               # Модальные окна (Modal, CreateChat, SelectUser, etc.)
+│   ├── 3_compounds/            # Составные компоненты (ChatInput, ChatList, Feed, SideBar)
+│   ├── 4_layouts/              # Макеты (BaseLayout, ExtendedLayout, AdaptiveExtendedLayout, etc.)
+│   └── 5_containers/           # Контейнеры (BaseContainer, FloatContainer)
+├── apps/                       # Демо-приложения и примеры использования
+│   ├── data/                   # Mock данные для демонстрации
+│   ├── stores/                 # Pinia stores
+│   ├── stories/                # Storybook истории
+│   └── transform/              # Утилиты трансформации данных
+├── hooks/                      # Composables (useMessageActions, useTheme, etc.)
+│   ├── messages/               # Хуки для работы с сообщениями
+│   ├── modals/                 # Хуки для работы с модальными окнами
+│   ├── uploadFile/             # Хуки для загрузки файлов
+│   └── validators/             # Валидаторы
+├── functions/                  # Утилитарные функции
+├── types/                      # TypeScript типы и интерфейсы
+├── themes/                     # Система тем (default, dark, green, mobilon1)
+├── locale/                     # Локализация (EN, RU)
+└── utils/                      # Вспомогательные утилиты
 ```
 
 Дополнительно в корне:
 
 ```
-.storybook/           # Storybook конфигурация
-docs/                 # Сборка Storybook (output)
-scripts/              # Скрипты (валидатор тем)
-PUBLISH.md            # Шаги публикации пакета
-THEME_ARCHITECTURE_PROMPT.md  # Черновик архитектуры тем
+.storybook/           # Storybook конфигурация (если используется)
+docs/                 # Документация (ARCHITECTURE.md, ARCHITECTURE_ANALYSIS.md, etc.)
+scripts/              # Скрипты валидации тем и утилиты
+dist/                 # Собранная библиотека (результат сборки)
 ```
 
 ## 🎨 Темы и кастомизация
@@ -187,17 +215,78 @@ THEME_ARCHITECTURE_PROMPT.md  # Черновик архитектуры тем
 - **Default** - светлая тема
 - **Dark** - темная тема  
 - **Green** - зеленая тема
+- **Mobilon1** - брендовая тема Mobilon
+
+### Импорт тем
+
+Если нужна конкретная тема, можно импортировать отдельно:
+
+```javascript
+// Импорт конкретной темы
+import '@mobilon-dev/chotto/themes/default.css'
+import '@mobilon-dev/chotto/themes/dark.css'
+import '@mobilon-dev/chotto/themes/green.css'
+import '@mobilon-dev/chotto/themes/mobilon1.css'
+```
 
 ### Кастомизация CSS переменных
+
+Библиотека использует двухуровневую систему тем:
+
+#### 1. Глобальные переменные темы (`--chotto-theme-*`)
+
+Для кастомизации глобальных переменных используйте атрибут `data-theme`:
+
 ```css
-[data-theme="light"] {
+[data-theme="default"] {
+  /* Основные цвета */
   --chotto-theme-primary-color: #10b981;
   --chotto-theme-secondary-color: #6b7280;
-  --chotto-background-color: #ffffff;
-  /* ... другие переменные */
+  --chotto-theme-tertiary-color: #f3f4f6;
+  
+  /* Цвета текста */
+  --chotto-theme-primary-text-color: #1e1e1e;
+  --chotto-theme-secondary-text-color: #5f5f5f;
+  
+  /* Типографика */
+  --chotto-theme-font-family: 'Inter', sans-serif;
+  --chotto-theme-header-font-size: 1.5rem;
+  --chotto-theme-text-font-size: 0.875rem;
+  
+  /* Сообщения */
+  --chotto-theme-message-right-bg: #dcf8c6;
+  --chotto-theme-message-left-bg: #ffffff;
+  
+  /* ... и другие переменные (всего 82 переменные) */
+}
+```
+
+#### 2. Переменные компонентов (`--chotto-componentname-*`)
+
+Каждый компонент имеет свои CSS переменные, которые можно переопределять в вашем проекте. Например, для компонента `CommunicationPanel`:
+
+```css
+[data-theme="default"] {
+  /* Переменные компонента CommunicationPanel */
+  --chotto-communicationpanel-background: #ffffff;
+  --chotto-communicationpanel-border-color: #e5e5e5;
+  --chotto-communicationpanel-btn-active-color: #007CFF;
+  --chotto-communicationpanel-btn-hover-background: #f5f5f5;
+  --chotto-communicationpanel-menu-background: #ffffff;
+  /* ... и другие переменные компонента */
 }
 ```
 
+**Преимущества:**
+- ✅ Гибкая кастомизация отдельных компонентов
+- ✅ Все переменные имеют fallback значения
+- ✅ Можно использовать глобальные переменные темы: `var(--chotto-theme-primary-color)`
+- ✅ Полная типизация через TypeScript интерфейсы
+
+**Доступные значения `data-theme`:** `"default"`, `"dark"`, `"green"`, `"mobilon1"`
+
+Полный список глобальных переменных доступен в типе `ChottoThemeVariables` из `@mobilon-dev/chotto`. Переменные компонентов типизированы в интерфейсах вида `ComponentNameThemeCSSVariables` в соответствующих компонентах.
+
 ## 📱 Адаптивность
 
 Библиотека поддерживает адаптивные макеты:

package/dist/{CreateChat-DqPybXXn.js → CreateChat-B9CfoSZb.js}

@@ -1,5 +1,5 @@
 import { ref as s, createElementBlock as c, openBlock as m, createElementVNode as n, withDirectives as p, toDisplayString as u, vModelText as d } from "vue";
-import { _ } from "./index-as74SdsT.js";
+import { _ } from "./index-CECDc5wp.js";
 const f = {
   __name: "CreateChat",
   props: {

package/dist/{CreateChat2-Bxs28ww_.js → CreateChat2-ks_IikUi.js}

@@ -1,5 +1,5 @@
 import { ref as m, createElementBlock as p, openBlock as f, createElementVNode as l, toDisplayString as h, withDirectives as D, createCommentVNode as V, normalizeClass as x, vModelText as y } from "vue";
-import { _ as z } from "./index-as74SdsT.js";
+import { _ as z } from "./index-CECDc5wp.js";
 const N = { class: "create-chat-form" }, S = { class: "create-chat-title" }, T = { class: "form-field" }, U = {
   key: 0,
   class: "form-error"

package/dist/{CreateDialog-IJDv_iIh.js → CreateDialog-DqXOFpdc.js}

@@ -1,5 +1,5 @@
 import { ref as v, computed as d, createElementBlock as r, openBlock as i, createElementVNode as t, toDisplayString as u, withDirectives as m, Fragment as f, renderList as p, vModelSelect as _ } from "vue";
-import { _ as D } from "./index-as74SdsT.js";
+import { _ as D } from "./index-CECDc5wp.js";
 const S = { class: "modal__contact-line" }, k = ["value"], q = { class: "modal__channel-line" }, w = ["disabled"], x = ["value"], V = ["disabled"], A = {
   __name: "CreateDialog",
   props: {

package/dist/{ModalVideoRecorder-OOD5jytP.js → ModalVideoRecorder-DnncYgrj.js}

@@ -1,5 +1,5 @@
 import { defineComponent as N, ref as l, computed as z, onMounted as $, createElementBlock as m, openBlock as f, Fragment as q, createElementVNode as o, withDirectives as E, vShow as I, createCommentVNode as g, normalizeClass as y, toDisplayString as A, nextTick as G, unref as k } from "vue";
-import { _ as H } from "./index-as74SdsT.js";
+import { _ as H } from "./index-CECDc5wp.js";
 const J = { class: "video-recorder__header" }, K = { class: "video-recorder__controls" }, P = { class: "video-recorder__recording-container" }, Q = { class: "video-recorder__recording-time" }, W = /* @__PURE__ */ N({
   __name: "ModalVideoRecorder",
   emits: ["change", "submit", "close"],

package/dist/{SelectUser2-D9B0H77q.js → SelectUser2-twrrtDkw.js}

@@ -1,5 +1,5 @@
 import { ref as p, createElementBlock as n, openBlock as s, createElementVNode as t, toDisplayString as c, Fragment as m, renderList as _, withDirectives as h, vModelCheckbox as v } from "vue";
-import { _ as f } from "./index-as74SdsT.js";
+import { _ as f } from "./index-CECDc5wp.js";
 const g = { class: "participant-list" }, k = ["id", "value"], y = ["for"], b = {
   __name: "SelectUser2",
   props: {