@nan0web/ui 1.0.2 → 1.0.4

package/README.md

@@ -1,8 +1,6 @@
 # @nan0web/ui
 
-|[Status](https://github.com/nan0web/monorepo/blob/main/system.md#написання-сценаріїв)|Documentation|Test coverage|Features|Npm version|
-|---|---|---|---|---|
- |🟢 `96.8%` |🧪 [English 🏴󠁧󠁢󠁥󠁮󠁧󠁿](https://github.com/nan0web/ui/blob/main/README.md)<br />[Українською 🇺🇦](https://github.com/nan0web/ui/blob/main/docs/uk/README.md) |🟡 `81.1%` |✅ d.ts 📜 system.md 🕹️ playground |1.0.1 |
+<!-- %PACKAGE_STATUS% -->
 
 A lightweight, agnostic UI framework designed with the **nan0web philosophy**
 — one application logic, many UI implementations.
@@ -43,8 +41,7 @@ yarn add @nan0web/ui
 
 UI communication is built around messages:
 
-- **`UIMessage`** – abstract message base class
-- **`InputMessage`** – user input message (value, options)
+- **`UiMessage`** – abstract message base class
 - **`OutputMessage`** – system output (content, error, priority)
 
 Messages are simple, serializable data containers. They help build
@@ -53,15 +50,14 @@ 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 input = UiMessage.from({ body: '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
+console.info(input) // ← Message { body: "Hello User", head: {}, id: "....", type: "" }
+console.info(String(output)) // ← Welcome to @nan0web/ui
 ```
 ### Forms
 
-`UIForm` supports field definitions, data management, and schema validation.
+`UiForm` supports field definitions, data management, and schema validation.
 Every form includes a title, fields, and current state.
 
 Field types include:
@@ -73,11 +69,10 @@ Field types include:
 - `checkbox`
 - `textarea`
 
-How to define and validate a UIForm?
+How to define and validate a UiForm?
 ```js
-import { UIForm } from '@nan0web/ui'
-
-const form = new UIForm({
+import { UiForm } from '@nan0web/ui'
+const form = new UiForm({
 	title: "Contact Form",
 	fields: [
 		FormInput.from({ name: "email", label: "Email Address", type: "email", required: true }),
@@ -88,11 +83,9 @@ const form = new UIForm({
 		message: "Hello!"
 	}
 })
-
-const result = form.validate()
-console.info(result.isValid) // ← false
-console.info(result.errors.email) // ← Invalid email format
-
+const errors = form.validate()
+console.info(errors.size) // ← 1
+console.info(errors.get("email")) // ← Invalid email format
 ```
 ### Components
 
@@ -104,7 +97,6 @@ Components render data as frame-ready output.
 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!
@@ -122,7 +114,6 @@ Every view has:
 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"
@@ -141,38 +132,15 @@ Render methods:
 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.
@@ -182,7 +150,6 @@ UI models are plain data objects managed by `Model` classes.
 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
@@ -196,20 +163,18 @@ with minimal setup.
 
 How to test UI components with assertions?
 ```js
-import { Welcome, InputMessage } from '@nan0web/ui'
-
+import { Welcome } from '@nan0web/ui'
 const output = Welcome({ user: { name: "Test" } })
-const input = InputMessage.from({ value: "test" })
-console.log(output[0].join("")) // ← Welcome Test!
+console.info(output) // ← 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)
+- [Registration Form](./play/registration.form.js)
+- [Currency Exchange](./play/currency.exchange.js)
+- [Mobile Top-up](./play/topup.telephone.js)
+- [Language Selector](./play/language.form.js)
 
 Run to explore live functionality:
 
@@ -219,7 +184,7 @@ How to run the playground?
 git clone https://github.com/nan0web/ui.git
 cd ui
 npm install
-npm run playground
+npm run play
 ```
 
 ## API Documentation

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nan0web/ui",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "NaN•Web UI. One application logic (algorithm) and many UI.",
 	"main": "src/index.js",
 	"types": "types/index.d.ts",
@@ -12,13 +12,16 @@
 	],
 	"scripts": {
 		"build": "tsc",
-		"playground": "node playground/main.js",
-		"test": "node --test --test-timeout=3333 \"src/**/*.test.js\" | nan0test parse --fail",
+		"play": "node play/main.js",
+		"test": "node --test --test-timeout=3333 \"src/**/*.test.js\"",
+		"test:nan0test": "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",
+		"test:play": "node --test --test-timeout=3333 \"play/**/*.test.js\"",
+		"test:all": "npm run test && npm run test:docs && npm run test:play && npm run build",
 		"precommit": "npm test",
 		"prepush": "npm test",
 		"prepare": "husky",
@@ -35,6 +38,10 @@
 			"import": "./src/Component/index.js",
 			"types": "./types/Component/index.d.ts"
 		},
+		"./core": {
+			"import": "./src/core/index.js",
+			"types": "./types/core/index.d.ts"
+		},
 		"./cli-app": "./apps/cli/src/index.js",
 		"./mobile-app": "./apps/mobile/src/index.js",
 		"./web-app": "./apps/web/src/App.jsx"
@@ -47,23 +54,20 @@
 	"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:*",
+		"@nan0web/event": "^1.0.0",
+		"@nan0web/i18n": "^1.0.1",
+		"@nan0web/release": "1.0.1",
+		"@nan0web/test": "1.1.0",
+		"@nan0web/ui-cli": "1.0.2",
 		"@vitest/coverage-v8": "^3.2.4",
-		"vitest": "^3.2.4",
-		"husky": "^9.1.7"
+		"husky": "^9.1.7",
+		"vitest": "^3.2.4"
 	},
 	"dependencies": {
+		"@nan0web/co": "^2.0.0",
+		"@nan0web/event": "^1.0.0",
+		"@nan0web/types": "^1.2.0",
 		"string-width": "^7.2.0"
 	},
-	"peerDependencies": {
-		"@nan0web/co": "^1.0.0",
-		"@nan0web/event": "^1.0.0",
-		"@nan0web/types": "^1.0.0"
-	}
+	"peerDependencies": {}
 }

package/src/App/Core/CoreApp.js

@@ -1,5 +1,5 @@
+import { Message } from "@nan0web/co"
 import { typeOf } from "@nan0web/types"
-import { CommandMessage } from "../Command/index.js"
 import UI from "./UI.js"
 
 /** @typedef {Function} CommandFn */
@@ -18,7 +18,7 @@ export default class CoreApp {
 	/** @type {object} App state */
 	state
 
-	/** @type {CommandMessage} Starting command parsed from argv */
+	/** @type {Message} Starting command parsed from argv */
 	startCommand
 
 	/**
@@ -26,18 +26,19 @@ export default class CoreApp {
 	 * @param {object} props - CoreApp properties
 	 * @param {string} [props.name="CoreApp"] - App name
 	 * @param {object} [props.state={}] - Initial state object
-	 * @param {string[]} [props.argv=[]] - Command line arguments to parse
+	 * @param {Message} [props.startCommand=new Message()] - Command line arguments to parse
 	 */
 	constructor(props = {}) {
 		const {
 			name = "CoreApp",
 			state = {},
-			argv = [],
+			startCommand = new Message(),
 		} = props
 		this.name = String(name)
 		this.state = state
 		this.commands = new Map()
-		this.startCommand = CommandMessage.parse(argv)
+		// @deprecated @todo fix the argv by moving to ui-cli.
+		this.startCommand = Message.from(startCommand ?? {})
 	}
 
 	/**
@@ -78,39 +79,33 @@ export default class CoreApp {
 
 	/**
 	 * Process a command message.
-	 * @param {CommandMessage} commandMessage - Command to process
+	 * @param {Message} msg - Command to process
 	 * @param {UI} ui - UI instance to use for rendering
 	 * @returns {Promise<any>} Output of the command
 	 * @throws {Error} If the command is not registered
 	 */
-	async processCommand(commandMessage, ui) {
-		const cmd = commandMessage.args[0]
-		const handler = this.commands.get(cmd)
+	async processCommand(msg, ui) {
+		const handler = this.commands.get(msg.constructor.name)
 		if (!handler) {
 			throw new Error([
 				"Unknown command", ": ",
-				cmd, "\n",
+				msg.constructor.name, "\n",
 				"Available commands", ": ",
 				[...this.commands.keys()].join(", "),
 			].join(""))
 		}
-		const Class = /** @type {typeof CommandMessage} */ (commandMessage.constructor)
-		const command = Class.from({
-			args: commandMessage.args.slice(1),
-			opts: commandMessage.opts,
-		})
-		return await handler.apply(this, [command, ui])
+		return await handler.apply(this, [msg, ui])
 	}
 
 	/**
 	 * Process an array of command messages sequentially.
-	 * @param {CommandMessage[]} commandMessages - Array of commands to process
+	 * @param {Message[]} Messages - Array of commands to process
 	 * @param {UI} ui - UI instance to use for rendering
 	 * @returns {Promise<any[]>} Array of command outputs
 	 */
-	async processCommands(commandMessages, ui) {
+	async processCommands(Messages, ui) {
 		const results = []
-		for (const cmdMsg of commandMessages) {
+		for (const cmdMsg of Messages) {
 			const result = await this.processCommand(cmdMsg, ui)
 			results.push(result)
 		}

package/src/App/Core/UI.js

@@ -1,8 +1,8 @@
+import { Message } from "@nan0web/co"
+import { notEmpty } from "@nan0web/types"
 import View from "../../View/View.js"
 import CoreApp from "./CoreApp.js"
 import Widget from "./Widget.js"
-import { notEmpty } from "@nan0web/types"
-import { CommandMessage } from "../Command/index.js"
 
 /** @typedef {import("../../View/View.js").ComponentFn} ComponentFn */
 
@@ -25,62 +25,16 @@ class UI extends Widget {
 	}
 
 	/**
-	 * Convert raw input to CommandMessage array.
+	 * Convert raw input to Message array.
 	 * Must be implemented by subclasses.
 	 * @param {any} rawInput - Raw input to convert
-	 * @returns {CommandMessage[]} Array of command messages
+	 * @returns {Message[]} Array of command messages
 	 * @throws {Error} Always thrown as this method must be implemented by subclasses
 	 */
 	convertInput(rawInput) {
 		throw new Error("convertInput must be implemented by subclass")
 	}
 
-	/**
-	 * Process input, run commands on app, and output results.
-	 * Supports progress callback.
-	 * @emits {start} Emitted when processing begins
-	 * @emits {data} Emitted for each command being processed
-	 * @emits {end} Emitted when all commands have been processed
-	 * @param {any} rawInput - Raw input to process
-	 * @returns {Promise<any[]>} Results of command processing
-	 */
-	async process(rawInput) {
-		const commands = this.convertInput(rawInput).filter(notEmpty)
-		const results = []
-		let count = commands.length
-
-		const proc = this.view.get("UIProcess")
-		if (proc) {
-			this.show(proc)
-		}
-
-		if (0 === count && this.app.selectCommand) {
-			const answer = await this.app.selectCommand(this)
-			if (answer) {
-				const [input] = this.convertInput(rawInput)
-				const cmd = new CommandMessage({
-					argv: [answer],
-					opts: input?.opts ?? {},
-				})
-				commands.push(cmd)
-				++count
-			} else {
-				this.emit("end", { commands, results })
-				return results
-			}
-		}
-		this.emit("start", { commands })
-		for (let i = 0; i < count; i++) {
-			const command = commands[i]
-			this.emit("data", { i, count, command })
-			const result = await this.app.processCommand(command, this)
-			results.push(result)
-		}
-		this.emit("end", { commands, results })
-		// this.output(results)
-		return results
-	}
-
 	/**
 	 * Sets up event handlers for UI process events.
 	 * @param {ComponentFn} UIProcess - Process view component

package/src/App/Core/Widget.js

@@ -1,7 +1,7 @@
 import EventProcessor from "@nan0web/event/oop"
 import View from "../../View/View.js"
-import InputMessage from "../../core/Message/InputMessage.js"
 import { StreamEntry } from "@nan0web/db"
+import { UiMessage } from "../../core/index.js"
 
 /** @typedef {import("./UI.js").ComponentFn} ComponentFn */
 
@@ -10,7 +10,7 @@ import { StreamEntry } from "@nan0web/db"
  * Widget is a view with ability to input data in a specific format.
  * Input and output data are typed classes.
  */
-class Widget extends EventProcessor {
+export default class Widget extends EventProcessor {
 	/** @type {View} The view associated with this widget */
 	view
 
@@ -25,8 +25,8 @@ class Widget extends EventProcessor {
 
 	/**
 	 * Ask user for input data of specific class.
-	 * @param {InputMessage} input - instance of InputMessage or similar
-	 * @returns {Promise<InputMessage | null>} instance of InputMessage or null
+	 * @param {UiMessage} input - instance of UiMessage or similar
+	 * @returns {Promise<UiMessage | null>} instance of UiMessage or null
 	 */
 	async ask(input) {
 		return await this.view.ask(input)
@@ -63,5 +63,3 @@ class Widget extends EventProcessor {
 		return this.view.render(viewFn)(outputData)
 	}
 }
-
-export default Widget

package/src/App/User/Command/Message.js

@@ -1,44 +1,30 @@
-import { CommandMessage } from "../../Command/index.js"
-import UserAppCommandOptions from "./Options.js"
+import Message from "@nan0web/co"
+import UIMessage from "../../../core/Message/Message.js"
 
-/**
- * Extends Command.Message to include user-specific command options.
- */
-class UserAppCommandMessage extends CommandMessage {
-	/**
-	 * Creates a new UserAppCommandMessage instance.
-	 * @param {object} props - Command message properties
-	 * @param {string[]} [props.args=[]] - Command arguments
-	 * @param {Partial<UserAppCommandOptions>} [props.opts={}] - User-specific options
-	 */
-	constructor(props = {}) {
-		super(props)
+class DepsCommandParams {
+	fix = false
+	static fix = {
+		help: "Fix dependencies",
+		defaultValue: false
 	}
-
-	/** @returns {UserAppCommandOptions} */
-	get opts() {
-		return UserAppCommandOptions.from(super.opts)
-	}
-
-	/**
-	 * @param {Partial<UserAppCommandOptions>} value
-	 */
-	set opts(value) {
-		super.opts = UserAppCommandOptions.from(value)
+	constructor(input = {}) {
+		const {
+			fix = this.fix
+		} = input
 	}
+}
 
-	/**
-	 * Parses an array of strings into a UserAppCommandMessage.
-	 * @param {string[] | string} value - Arguments to parse
-	 * @returns {UserAppCommandMessage} Parsed command message
-	 */
-	static parse(value = []) {
-		if ("string" === typeof value) {
-			value = value.split(" ")
-		}
-		const result = super.parse(value)
-		return new this(result)
+export class DepsCommand extends UIMessage {
+	static Body = DepsCommandParams
+	/** @type {DepsCommandParams} */
+	body
+	constructor(input = {}) {
+		const {
+			body = new DepsCommandParams()
+		} = UIMessage.parseBody(input, DepsCommandParams)
+		super(input)
+		this.body = body
 	}
 }
 
-export default UserAppCommandMessage
+export default DepsCommand

package/src/App/User/Command/index.js

@@ -1,11 +1,6 @@
-import Command from "../../Command/index.js"
 import CommandMessage from "./Message.js"
-import CommandOptions from "./Options.js"
+import DepsCommand from "./Message.js"
 
-export { CommandMessage, CommandOptions }
+export { CommandMessage, DepsCommand }
 
-export default {
-	...Command,
-	Message: CommandMessage,
-	Options: CommandOptions,
-}
+export default CommandMessage

package/src/App/User/UserApp.js

@@ -1,49 +1,56 @@
+import { Message } from "@nan0web/co"
 import { notEmpty } from "@nan0web/types"
 import CoreApp from "../Core/CoreApp.js"
-import Command, { CommandMessage } from "./Command/index.js"
 import User from "../../Model/User/User.js"
 import UserUI from "./UserUI.js"
-import InputMessage from "../../core/Message/InputMessage.js"
+import UserAppCommandMessage from "./Command/Message.js"
+import DepsCommand from "./Command/Message.js"
+import UIStream from "../../core/Stream.js"
+import { UiMessage } from "../../core/index.js"
 
 /**
  * UserApp requires user name and shows Welcome view.
  * If user.name is provided in command input, ignores user input.
  * User can change user data to see another Welcome view.
  */
-class UserApp extends CoreApp {
-	/** @type {CommandMessage} Starting command parsed from argv */
-	startCommand
-
-	/** @type {object} App state */
-	state
-
+export default class UserApp extends CoreApp {
 	/**
 	 * Creates a new UserApp instance.
-	 * @param {object} props - UserApp properties
-	 * @param {string} [props.name="UserApp"] - App name
-	 * @param {object} [props.state={}] - Initial state object
-	 * @param {string[]} [props.argv=[]] - Command line arguments to parse
+	 * @param {Partial<CoreApp>} [props={}] - UserApp properties
 	 */
 	constructor(props = {}) {
 		super(props)
-		const {
-			argv = [],
-			state = {},
-		} = props
-		this.state = state
-		this.startCommand = CommandMessage.parse(argv)
 		this.registerCommand("setUser", this.setUser.bind(this))
 		this.registerCommand("welcome", this.welcome.bind(this))
+		this.registerCommand("deps", this.handleDeps.bind(this)) // Register new command
+	}
+
+	/**
+	 * Handle deps command with async generator for stream processing.
+	 * @param {DepsCommand} cmd - Command message with deps parameters
+	 * @param {UserUI} ui - UI instance
+	 * @returns {Promise<Object>} Command output
+	 */
+	async handleDeps(cmd, ui) {
+		// Example: Use async generator to stream deps processing
+		const processorFn = async () => new UIStream.StreamEntry({ value: { message: `Deps command executed with fix: ${cmd.body.fix}` }, done: true })
+		const generatorFn = UIStream.createProcessor(new AbortController().signal, processorFn)
+		await UIStream.process(new AbortController().signal, generatorFn,
+			(progress, item) => ui.output && ui.output(item.value), // Fix to output the value
+			(error) => ui.output && ui.output({ error }), // Assume ui has output method
+			(item) => ui.output && ui.output(item.value) // Fix complete callback
+		)
+		return { completed: true }
 	}
 
 	/**
 	 * Set user data from params.
-	 * @param {CommandMessage} cmd - Command message with user data
+	 * @param {UserAppCommandMessage} cmd - Command message with user data
 	 * @param {UserUI} ui - UI instance
 	 * @returns {Promise<{ message: string }>} Welcome message
 	 */
 	async setUser(cmd, ui) {
-		this.state.user = User.from(cmd.opts.user)
+		this.state.user = User.from(cmd.body.user) // cmd is UserAppCommandMessage, has user
 		const frame = await this.welcome(cmd, ui)
 		return {
 			message: String(frame)
@@ -52,22 +59,20 @@ class UserApp extends CoreApp {
 
 	/**
 	 * Show welcome message for current user.
-	 * @param {CommandMessage} cmd - Command message
+	 * @param {UserAppCommandMessage} cmd - Command message
 	 * @param {UserUI} ui - UI instance
 	 * @returns {Promise<string[][]>} Welcome view output
 	 */
 	async welcome(cmd, ui) {
-		if (cmd.opts.user) {
-			const user = User.from(cmd.opts.user)
+		if (cmd.body.user) { // cmd is UserAppCommandMessage, has user
+			const user = User.from(cmd.body.user)
 			return ui.render("Welcome", { user })
 		}
 		if (notEmpty(this.user)) {
 			return ui.render("Welcome", { user: this.user })
 		}
-		const answer = await ui.ask(InputMessage.from("What is your name?"))
+		const answer = await ui.ask(UiMessage.from("What is your name?"))
 		this.user = User.from(answer?.value)
 		return ui.render("Welcome", { user: this.user })
 	}
 }
-
-export default UserApp

package/src/App/User/UserUI.js

@@ -1,5 +1,5 @@
+import { Message } from "@nan0web/co"
 import App from "../Core/index.js"
-import { CommandMessage } from "./Command/index.js"
 
 /**
  * UserUI connects UserApp and View.
@@ -8,13 +8,13 @@ import { CommandMessage } from "./Command/index.js"
  */
 export default class UserUI extends App.UI {
 	/**
-	 * Convert raw input to CommandMessage array.
+	 * Convert raw input to Message array.
 	 * If user.name provided in rawInput, use it directly.
 	 * Otherwise ask user for name.
 	 * @param {any} rawInput - Raw input to convert
-	 * @returns {CommandMessage[]} Array of command messages
+	 * @returns {Message[]} Array of command messages
 	 */
 	convertInput(rawInput) {
-		return [CommandMessage.parse(rawInput)]
+		return [new Message({ body: rawInput })]
 	}
 }

package/src/App/User/index.js

@@ -1,15 +1,9 @@
 import UserApp from "./UserApp.js"
 import UserUI from "./UserUI.js"
-import UserCommand from "./Command/index.js"
-import Command from "../Command/index.js"
 
 export { UserApp, UserUI }
 
 export default {
 	App: UserApp,
 	UI: UserUI,
-	Command: {
-		...Command,
-		...UserCommand,
-	},
 }