@nan0web/ui 1.0.0

package/.datasets/README.dataset.jsonl

@@ -0,0 +1,12 @@
+{"instruction":"How to install with npm?","output":"```bash\nnpm install @nan0web/ui\n```\n","context":["h1:@nan0web/ui","h2:Installation"],"input":"## Installation\n\n","tags":["@nan0web/ui","Installation"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to install with pnpm?","output":"```bash\npnpm add @nan0web/ui\n```\n","context":["h1:@nan0web/ui","h2:Installation"],"input":"## Installation\n\n","tags":["@nan0web/ui","Installation"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to install with yarn?","output":"```bash\nyarn add @nan0web/ui\n```\n","context":["h1:@nan0web/ui","h2:Installation"],"input":"## Installation\n\n","tags":["@nan0web/ui","Installation"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to create input and output messages?","output":"```js\nimport { InputMessage, OutputMessage } from '@nan0web/ui'\n\nconst input = InputMessage.from({ value: 'Hello User' })\nconst output = OutputMessage.from({ content: ['Welcome to @nan0web/ui'] })\nconsole.info(input.value) // ← Hello User\nconsole.info(output.content[0]) // ← Welcome to @nan0web/ui\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Message Flow"],"input":"### Message Flow\n\nUI communication is built around messages:\n\n- **`UIMessage`** – abstract message base class\n- **`InputMessage`** – user input message (value, options)\n- **`OutputMessage`** – system output (content, error, priority)\n\nMessages are simple, serializable data containers. They help build\ndecoupled communication systems between UI components.\n\n","tags":["@nan0web/ui","Concepts & Architecture","Message Flow"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to define and validate a UIForm?","output":"```js\nimport { UIForm } from '@nan0web/ui'\n\nconst form = new UIForm({\n\ttitle: \"Contact Form\",\n\tfields: [\n\t\tFormInput.from({ name: \"email\", label: \"Email Address\", type: \"email\", required: true }),\n\t\tFormInput.from({ name: \"message\", label: \"Your Message\", type: \"textarea\", required: true })\n\t],\n\tstate: {\n\t\temail: \"invalid-email\",\n\t\tmessage: \"Hello!\"\n\t}\n})\n\nconst result = form.validate()\nconsole.info(result.isValid) // ← false\nconsole.info(result.errors.email) // ← Invalid email format\n\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Forms"],"input":"### Forms\n\n`UIForm` supports field definitions, data management, and schema validation.\nEvery form includes a title, fields, and current state.\n\nField types include:\n\n- `text`\n- `email`\n- `number`\n- `select`\n- `checkbox`\n- `textarea`\n\n","tags":["@nan0web/ui","Concepts & Architecture","Forms"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to render the Welcome component?","output":"```js\nimport { Welcome } from '@nan0web/ui'\n\nconst frame = Welcome({ user: { name: \"Alice\" } })\nconst firstLine = frame[0].join(\"\")\nconsole.info(firstLine) // ← Welcome Alice!\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Components"],"input":"### Components\n\nComponents render data as frame-ready output.\n\n- `Welcome` – greets user by name\n- `Process` – shows progress bar and time\n\n","tags":["@nan0web/ui","Concepts & Architecture","Components"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to render frame with View?","output":"```js\nimport { View } from '@nan0web/ui'\n\nconst view = new View()\nview.render(1)([\"Hello, world\"])\nconsole.info(String(view.frame)) // ← \"\\rHello, world\"\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:View Manager"],"input":"### View Manager\n\n`View` combines components and renders frames.\n\nEvery view has:\n\n- Locale – formatted text, numbers, currency\n- StdIn / StdOut – input/output streams\n- Frame – output buffer with visual properties\n\n","tags":["@nan0web/ui","Concepts & Architecture","View Manager"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to create a Frame with fixed size?","output":"```js\nimport { Frame } from '@nan0web/ui'\n\nconst frame = new Frame({\n\tvalue: [[\"Frame content\"]],\n\twidth: 20,\n\theight: 5,\n\trenderMethod: Frame.RenderMethod.APPEND,\n})\n\nconst rendered = frame.render()\nconsole.info(rendered.includes(\"Frame content\")) // ← true\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Frame Rendering"],"input":"### Frame Rendering\n\n`Frame` manages visual rendering with width and height limits.\nUseful for fixed-size terminals or UI blocks.\n\n","tags":["@nan0web/ui","Concepts & Architecture","Frame Rendering"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to create a basic user app that greets?","output":"```js\nimport { App, View } from '@nan0web/ui'\n\nconst app = new App.User.App({ name: \"GreetApp\" })\nconst view = new View()\nview.register(\"Welcome\", Welcome)\n\nconst cmd = App.Command.Message.parse(\"welcome --user Bob\")\nconst result = await app.processCommand(cmd, new App.User.UI(app, view))\nconsole.info(String(result)) // ← Welcome Bob!\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:App Architecture"],"input":"### App Architecture\n\n`App` provides the main application logic.\n\n- Core – minimal UI layer\n- User – user-specific UI commands\n\nEach app registers commands and binds them to UI actions.\n\n","tags":["@nan0web/ui","Concepts & Architecture","App Architecture"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to use a User model?","output":"```js\nimport { Model } from '@nan0web/ui'\n\nconst user = new Model.User({ name: \"Charlie\", email: \"charlie@example.com\" })\nconsole.info(user.name) // ← Charlie\nconsole.info(user.email) // ← charlie@example.com\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Models"],"input":"### Models\n\nUI models are plain data objects managed by `Model` classes.\n\n- `User` – user data\n\n","tags":["@nan0web/ui","Concepts & Architecture","Models"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to test UI components with assertions?","output":"```js\nimport { Welcome, InputMessage } from '@nan0web/ui'\n\nconst output = Welcome({ user: { name: \"Test\" } })\nconst input = InputMessage.from({ value: \"test\" })\nconsole.log(output[0].join(\"\")) // ← Welcome Test!\n```\n","context":["h1:@nan0web/ui","h2:Concepts & Architecture","h3:Testing UI"],"input":"### Testing UI\n\nCore unit-tested to ensure stability in different environments.\n\nAll components, adapters, and models are designed to be testable\nwith minimal setup.\n\n","tags":["@nan0web/ui","Concepts & Architecture","Testing UI"],"proven":"assert-in-@nan0web/ui"}
+{"instruction":"How to run the playground?","output":"```bash\n# Clone repository and run playground\ngit clone https://github.com/nan0web/ui.git\ncd ui\nnpm install\nnpm run playground\n```\n","context":["h1:@nan0web/ui","h2:Playground Demos"],"input":"## Playground Demos\n\nThe library includes rich playground demos:\n\n- [Registration Form](./playground/registration.form.js)\n- [Currency Exchange](./playground/currency.exchange.js)\n- [Mobile Top-up](./playground/topup.telephone.js)\n- [Language Selector](./playground/language.form.js)\n\nRun to explore live functionality:\n\n","tags":["@nan0web/ui","Playground Demos"],"proven":"assert-in-@nan0web/ui"}

package/.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.jsx]
+indent_style = tab
+indent_size = 2
+
+[*.{md,nano,yaml}]
+indent_style = space
+indent_size = 2

package/CONTRIBUTING.md

@@ -0,0 +1,42 @@
+# Contributing
+
+## Developer Certificate of Origin and License
+By contributing, You accept and agree to the following terms and conditions for your present and future contributions submitted.  
+Except for the license granted herein, You reserve all right, title, and interest in and to your Contributions.  
+All contributions are subject to the Developer Certificate of Origin and license as set out in the LICENSE file.
+
+## Code of Conduct
+As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.  
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of:
+- Level of experience,
+- Gender,
+- Gender identity and expression,
+- Sexual orientation,
+- Disability,
+- Personal appearance,
+- Body size,
+- Race,
+- Ethnicity,
+- Age,
+- Religion.
+
+> We recognize all people as the foundation of humanity, and our actions contribute to the continued existence and growth of our shared humanity.
+
+### Release versioning
+- Keep releases close to the minor versions and publish patches only if required.
+
+### Examples of unacceptable behavior by participants:
+- Use of sexual language or imagery.
+- Derogatory comments or personal attacks.
+- Trolling, public or private harassment.
+- Insults or other unprofessional conduct.
+
+### Enforcement
+Project maintainers have the right and responsibility to:
+- Remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions not aligned with this Code of Conduct.
+- Remove maintainers who violate this Code of Conduct.
+
+Instances of unacceptable behavior can be reported by contacting the project team.
+
+This Code of Conduct is adapted from the [Contributor Covenant, version 1.1.0](https://contributor-covenant.org/version/1/1/0/).

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2025, ЯRаСлав (YaRaSLove) <support@yaro.page>
+
+Permission to use, copy, modify, and distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,238 @@
+# @nan0web/ui
+
+|[Status](https://github.com/nan0web/monorepo/blob/main/system.md#написання-сценаріїв)|Documentation|Test coverage|Features|Npm version|
+|---|---|---|---|---|
+ |🟢 `96.6%` |🧪 [English 🏴󠁧󠁢󠁥󠁮󠁧󠁿](https://github.com/nan0web/ui/blob/main/README.md)<br />[Українською 🇺🇦](https://github.com/nan0web/ui/blob/main/docs/uk/README.md) |🟡 `80.9%` |✅ d.ts 📜 system.md 🕹️ playground |— |
+
+A lightweight, agnostic UI framework designed with the **nan0web philosophy**
+— one application logic, many UI implementations.
+
+This library provides core classes and utilities for building structured user interfaces.
+It supports:
+
+- Messaging (Input/Output)
+- Forms with validation
+- Progress tracking
+- Component rendering
+- View management with Frame rendering
+- App structure with core and user apps
+
+Built to work in sync or async, terminal-based or web-based apps,
+focusing on type safety, minimalism, and pure JavaScript design.
+
+## Installation
+
+How to install with npm?
+```bash
+npm install @nan0web/ui
+```
+
+How to install with pnpm?
+```bash
+pnpm add @nan0web/ui
+```
+
+How to install with yarn?
+```bash
+yarn add @nan0web/ui
+```
+
+## Concepts & Architecture
+
+### Message Flow
+
+UI communication is built around messages:
+
+- **`UIMessage`** – abstract message base class
+- **`InputMessage`** – user input message (value, options)
+- **`OutputMessage`** – system output (content, error, priority)
+
+Messages are simple, serializable data containers. They help build
+decoupled communication systems between UI components.
+
+How to create input and output messages?
+```js
+import { InputMessage, OutputMessage } from '@nan0web/ui'
+
+const input = InputMessage.from({ value: 'Hello User' })
+const output = OutputMessage.from({ content: ['Welcome to @nan0web/ui'] })
+console.info(input.value) // ← Hello User
+console.info(output.content[0]) // ← Welcome to @nan0web/ui
+```
+### Forms
+
+`UIForm` supports field definitions, data management, and schema validation.
+Every form includes a title, fields, and current state.
+
+Field types include:
+
+- `text`
+- `email`
+- `number`
+- `select`
+- `checkbox`
+- `textarea`
+
+How to define and validate a UIForm?
+```js
+import { UIForm } from '@nan0web/ui'
+
+const form = new UIForm({
+	title: "Contact Form",
+	fields: [
+		FormInput.from({ name: "email", label: "Email Address", type: "email", required: true }),
+		FormInput.from({ name: "message", label: "Your Message", type: "textarea", required: true })
+	],
+	state: {
+		email: "invalid-email",
+		message: "Hello!"
+	}
+})
+
+const result = form.validate()
+console.info(result.isValid) // ← false
+console.info(result.errors.email) // ← Invalid email format
+
+```
+### Components
+
+Components render data as frame-ready output.
+
+- `Welcome` – greets user by name
+- `Process` – shows progress bar and time
+
+How to render the Welcome component?
+```js
+import { Welcome } from '@nan0web/ui'
+
+const frame = Welcome({ user: { name: "Alice" } })
+const firstLine = frame[0].join("")
+console.info(firstLine) // ← Welcome Alice!
+```
+### View Manager
+
+`View` combines components and renders frames.
+
+Every view has:
+
+- Locale – formatted text, numbers, currency
+- StdIn / StdOut – input/output streams
+- Frame – output buffer with visual properties
+
+How to render frame with View?
+```js
+import { View } from '@nan0web/ui'
+
+const view = new View()
+view.render(1)(["Hello, world"])
+console.info(String(view.frame)) // ← "\rHello, world"
+```
+### Frame Rendering
+
+`Frame` manages visual rendering with width and height limits.
+Useful for fixed-size terminals or UI blocks.
+
+How to create a Frame with fixed size?
+```js
+import { Frame } from '@nan0web/ui'
+
+const frame = new Frame({
+	value: [["Frame content"]],
+	width: 20,
+	height: 5,
+	renderMethod: Frame.RenderMethod.APPEND,
+})
+
+const rendered = frame.render()
+console.info(rendered.includes("Frame content")) // ← true
+```
+### App Architecture
+
+`App` provides the main application logic.
+
+- Core – minimal UI layer
+- User – user-specific UI commands
+
+Each app registers commands and binds them to UI actions.
+
+How to create a basic user app that greets?
+```js
+import { App, View } from '@nan0web/ui'
+
+const app = new App.User.App({ name: "GreetApp" })
+const view = new View()
+view.register("Welcome", Welcome)
+
+const cmd = App.Command.Message.parse("welcome --user Bob")
+const result = await app.processCommand(cmd, new App.User.UI(app, view))
+console.info(String(result)) // ← Welcome Bob!
+```
+### Models
+
+UI models are plain data objects managed by `Model` classes.
+
+- `User` – user data
+
+How to use a User model?
+```js
+import { Model } from '@nan0web/ui'
+
+const user = new Model.User({ name: "Charlie", email: "charlie@example.com" })
+console.info(user.name) // ← Charlie
+console.info(user.email) // ← charlie@example.com
+```
+### Testing UI
+
+Core unit-tested to ensure stability in different environments.
+
+All components, adapters, and models are designed to be testable
+with minimal setup.
+
+How to test UI components with assertions?
+```js
+import { Welcome, InputMessage } from '@nan0web/ui'
+
+const output = Welcome({ user: { name: "Test" } })
+const input = InputMessage.from({ value: "test" })
+console.log(output[0].join("")) // ← Welcome Test!
+```
+## Playground Demos
+
+The library includes rich playground demos:
+
+- [Registration Form](./playground/registration.form.js)
+- [Currency Exchange](./playground/currency.exchange.js)
+- [Mobile Top-up](./playground/topup.telephone.js)
+- [Language Selector](./playground/language.form.js)
+
+Run to explore live functionality:
+
+How to run the playground?
+```bash
+# Clone repository and run playground
+git clone https://github.com/nan0web/ui.git
+cd ui
+npm install
+npm run playground
+```
+
+## API Documentation
+
+Detailed API docs are available in each class JSDoc.
+Explore:
+
+- [Messages](./src/core/Message/)
+- [Forms](./src/core/Form/)
+- [Stream](./src/core/Stream.js)
+- [Components](./src/Component/)
+- [View](./src/View/)
+- [App](./src/App/)
+- [Models](./src/Model/)
+
+## Contributing
+
+How to contribute? - [check here](./CONTRIBUTING.md)
+
+## License
+
+How to license ISC? - [check here](./LICENSE)

package/docs/uk/README.md

@@ -0,0 +1,240 @@
+# @nan0web/ui
+
+|[Статус](https://github.com/nan0web/monorepo/blob/main/system.md#написання-сценаріїв)|Документація|Тестове покриття|Фічі|Версія npm|
+|---|---|---|---|---|
+ |🟢 `96.6%` |🧪 [English 🏴󠁧󠁢󠁥󠁮󠁧󠁿](https://github.com/nan0web/ui/blob/main/README.md)<br />[Українською 🇺🇦](https://github.com/nan0web/ui/blob/main/docs/uk/README.md) |🟡 `80.9%` |✅ d.ts 📜 system.md 🕹️ playground |— |
+
+Легкий, незалежний UI-фреймворк, створений за філософією **nan0web** —
+одна логіка програми, багато UI-реалізацій.
+
+Бібліотека надає базові класи та утиліти для побудови структурованих інтерфейсів.
+Вона підтримує:
+
+- Обмін повідомленнями (Input/Output)
+- Форми з валідацією
+- Відстеження прогресу
+- Рендеринг компонентів
+- Управління представленням за допомогою Frame-рендерингу
+- Архітектуру додатку з core- та user-частинами
+
+Працює синхронно та асинхронно, у терміналі та у веб-програмах,
+зосереджуючись на типобезпеці, мінімалізмі та чистому JavaScript.
+
+## Встановлення
+
+Як встановити через npm?
+```bash
+npm install @nan0web/ui
+```
+
+Як встановити через pnpm?
+```bash
+pnpm add @nan0web/ui
+```
+
+Як встановити через yarn?
+```bash
+yarn add @nan0web/ui
+```
+
+## Концепції та архітектура
+
+### Потік повідомлень
+
+UI-комунікація будована навколо повідомлень:
+
+- **`UIMessage`** – базовий абстрактний клас повідомлення
+- **`InputMessage`** – повідомлення користувача (значення, опції)
+- **`OutputMessage`** – системне повідомлення (вміст, помилка, пріоритет)
+
+Повідомлення — прості, серіалізовані контейнери даних. Вони допомагають будувати
+розслаблену комунікацію між UI-компонентами.
+
+Як створити вхідне та вихідне повідомлення?
+```js
+import { InputMessage, OutputMessage } from '@nan0web/ui'
+
+const input = InputMessage.from({ value: 'Hello User' })
+const output = OutputMessage.from({ content: ['Welcome to @nan0web/ui'] })
+console.info(input.value) // ← Hello User
+console.info(output.content[0]) // ← Welcome to @nan0web/ui
+```
+
+### Форми
+
+`UIForm` підтримує визначення полів, управління даними та схему валідації.
+Кожна форма має заголовок, список полів та поточний стан.
+
+Типи полів:
+
+- `text`
+- `email`
+- `number`
+- `select`
+- `checkbox`
+- `textarea`
+
+Як визначити та валідати форму?
+```js
+import { UIForm } from '@nan0web/ui'
+
+const form = new UIForm({
+  title: "Контактна форма",
+  fields: [
+    FormInput.from({ name: "email", label: "Email-адреса", type: "email", required: true }),
+    FormInput.from({ name: "message", label: "Ваше повідомлення", type: "textarea", required: true })
+  ],
+  state: {
+    email: "invalid-email",
+    message: "Привіт!"
+  }
+})
+
+const result = form.validate()
+console.info(result.isValid) // ← false
+console.info(result.errors.email) // ← Неправильний формат email
+```
+
+### Компоненти
+
+Компоненти рендерять дані у вигляді готових до виведення кадрів.
+
+- `Welcome` – привітання користувача за ім’ям
+- `Process` – індикатор прогресу
+
+Як відрендерити компонент Welcome?
+```js
+import { Welcome } from '@nan0web/ui'
+
+const frame = Welcome({ user: { name: "Аліса" } })
+const firstLine = frame[0].join("")
+console.info(firstLine) // ← Вітаємо, Аліса!
+```
+
+### Менеджер представлення (View)
+
+`View` поєднує компоненти та рендерить кадри.
+
+Кожне представлення має:
+
+- Локаль – форматування тексту, чисел, валют
+- StdIn / StdOut – потоки вводу/виводу
+- Frame – буфер виводу з візуальними властивостями
+
+Як вивести кадр за допомогою View?
+```js
+import { View } from '@nan0web/ui'
+
+const view = new View()
+view.render(1)(["Привіт, світе!"])
+console.info(String(view.frame)) // ← "\rПривіт, світе!"
+```
+
+### Рендеринг кадрів (Frame)
+
+`Frame` керує візуальним рендерингом з обмеженнями ширини та висоти.
+Корисно для терміналів фіксованого розміру або блокових UI.
+
+Як створити кадр фіксованого розміру?
+```js
+import { Frame } from '@nan0web/ui'
+
+const frame = new Frame({
+  value: [["Вміст кадру"]],
+  width: 20,
+  height: 5,
+  renderMethod: Frame.RenderMethod.APPEND,
+})
+
+const rendered = frame.render()
+console.info(rendered.includes("Вміст кадру")) // ← true
+```
+
+### Архітектура додатку (App)
+
+`App` забезпечує основну логіку програми.
+
+- Core – мінімальний UI-шар
+- User – користувацькі UI-команди
+
+Кожен додаток реєструє команди та прив’язує їх до UI-дій.
+
+Як створити простий користувацький додаток, який вітає?
+```js
+import { App, View } from '@nan0web/ui'
+
+const app = new App.User.App({ name: "GreetApp" })
+const view = new View()
+view.register("Welcome", Welcome)
+
+const cmd = App.Command.Message.parse("welcome --user Боб")
+const result = await app.processCommand(cmd, new App.User.UI(app, view))
+console.info(String(result)) // ← Вітаємо, Боб!
+```
+
+### Моделі
+
+UI-моделі – це прості об’єкти даних, що керуються класами `Model`.
+
+- `User` – дані користувача
+
+Як використовувати модель User?
+```js
+import { Model } from '@nan0web/ui'
+
+const user = new Model.User({ name: "Чарлі", email: "charlie@example.com" })
+console.info(user.name) // ← Чарлі
+console.info(user.email) // ← charlie@example.com
+```
+
+### Тестування UI
+
+Основні модулі покриті юніт-тестами для забезпечення стабільності у різних середовищах.
+
+Як тестувати UI-компоненти за допомогою асерцій?
+```js
+import { Welcome, InputMessage } from '@nan0web/ui'
+
+const output = Welcome({ user: { name: "Тест" } })
+const input = InputMessage.from({ value: "тест" })
+console.log(output[0].join("")) // ← Вітаємо, Тест!
+```
+
+## Демо-плейграунди
+
+Бібліотека містить багаті демо-плейграунди:
+
+- [Форма реєстрації](./playground/registration.form.js)
+- [Обмін валют](./playground/currency.exchange.js)
+- [Поповнення мобільного телефону](./playground/topup.telephone.js)
+- [Вибір мови](./playground/language.form.js)
+
+Як запустити плейграунд?
+```bash
+# Клонувати репозиторій та запустити плейграунд
+git clone https://github.com/nan0web/ui.git
+cd ui
+npm install
+npm run playground
+```
+
+## API Документація
+
+Детальна API-документація доступна у JSDoc кожного класу.
+Перегляньте:
+
+- [Повідомлення](./src/core/Message/)
+- [Форми](./src/core/Form/)
+- [Поток (Stream)](./src/core/Stream.js)
+- [Компоненти](./src/Component/)
+- [View](./src/View/)
+- [App](./src/App/)
+- [Моделі](./src/Model/)
+
+## Внесок у проєкт
+
+Як зробити внесок? – [докладніше тут](./CONTRIBUTING.md)
+
+## Ліцензія
+
+Як ознайомитися з ліцензією ISC? – [докладніше тут](./LICENSE)

package/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "@nan0web/ui",
+	"version": "1.0.0",
+	"description": "NaN•Web UI. One application logic (algorithm) and many UI.",
+	"main": "src/index.js",
+	"types": "types/index.d.ts",
+	"type": "module",
+	"scripts": {
+		"build": "tsc",
+		"playground": "node playground/main.js",
+		"test": "node --test --test-timeout=3333 \"src/**/*.test.js\" | nan0test parse --fail",
+		"test:coverage": "node --experimental-test-coverage --test-coverage-include=\"src/**/*.js\" --test-coverage-exclude=\"src/**/*.test.js\" --test \"src/**/*.test.js\"",
+		"test:coverage:collect": "nan0test coverage",
+		"test:docs": "node --test src/README.md.js",
+		"test:release": "node --test \"releases/**/*.test.js\"",
+		"test:status": "nan0test status --hide-name",
+		"precommit": "npm test",
+		"prepush": "npm test",
+		"prepare": "husky",
+		"release": "nan0release publish",
+		"clean": "rm -rf .cache/ && rm -rf dist/",
+		"clean:modules": "rm -rf node_modules"
+	},
+	"exports": {
+		".": {
+			"import": "./src/index.js",
+			"types": "./types/index.d.ts"
+		},
+		"./components": {
+			"import": "./src/Component/index.js",
+			"types": "./types/Component/index.d.ts"
+		},
+		"./cli-app": "./apps/cli/src/index.js",
+		"./mobile-app": "./apps/mobile/src/index.js",
+		"./web-app": "./apps/web/src/App.jsx"
+	},
+	"keywords": [
+		"ui",
+		"nanoweb"
+	],
+	"author": "YaRaSLove (ЯRаСлав) <support@yaro.page>",
+	"license": "ISC",
+	"packageManager": "pnpm@10.11.0",
+	"devDependencies": {
+		"@nan0web/co": "workspace:*",
+		"@nan0web/event": "workspace:*",
+		"@nan0web/i18n": "workspace:*",
+		"@nan0web/release": "workspace:*",
+		"@nan0web/test": "workspace:*",
+		"@nan0web/types": "workspace:*",
+		"@nan0web/ui-cli": "workspace:*",
+		"@vitest/coverage-v8": "^3.2.4",
+		"vitest": "^3.2.4",
+		"husky": "^9.1.7"
+	},
+	"dependencies": {
+		"string-width": "^7.2.0"
+	},
+	"peerDependencies": {
+		"@nan0web/co": "^1.0.0",
+		"@nan0web/event": "^1.0.0",
+		"@nan0web/types": "^1.0.0"
+	}
+}