@nan0web/ui 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nan0web/ui",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"description": "NaN•Web UI. One application logic (algorithm) and many UI.",
 	"main": "src/index.js",
 	"types": "types/index.d.ts",

package/src/App/Command/DepsCommand.js

@@ -0,0 +1,29 @@
+import UiMessage from "../../core/Message/Message.js"
+
+class DepsCommandBody {
+	fix = false
+	static fix = {
+		help: "Fix dependencies",
+		defaultValue: false
+	}
+	constructor(input = {}) {
+		const {
+			fix = this.fix
+		} = input
+	}
+}
+
+export class DepsCommand extends UiMessage {
+	static Body = DepsCommandBody
+	/** @type {DepsCommandBody} */
+	body
+	constructor(input = {}) {
+		const {
+			body = new DepsCommandBody()
+		} = UiMessage.parseBody(input, DepsCommandBody)
+		super(input)
+		this.body = body
+	}
+}
+
+export default DepsCommand

package/src/App/Core/UI.js

@@ -1,5 +1,4 @@
 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"
@@ -10,7 +9,7 @@ import Widget from "./Widget.js"
  * Abstract UI class to connect apps and widgets.
  * Supports input/output data typed classes and views.
  */
-class UI extends Widget {
+export default class UI extends Widget {
 	/** @type {CoreApp} The app instance connected to this UI */
 	app
 
@@ -66,5 +65,3 @@ class UI extends Widget {
 		})
 	}
 }
-
-export default UI

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

@@ -1,30 +1,3 @@
-import Message from "@nan0web/co"
-import UIMessage from "../../../core/Message/Message.js"
+import UiMessage from "../../../core/Message/Message.js"
 
-class DepsCommandParams {
-	fix = false
-	static fix = {
-		help: "Fix dependencies",
-		defaultValue: false
-	}
-	constructor(input = {}) {
-		const {
-			fix = this.fix
-		} = input
-	}
-}
-
-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 DepsCommand
+export default UiMessage

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

@@ -1,6 +1,5 @@
 import CommandMessage from "./Message.js"
-import DepsCommand from "./Message.js"
 
-export { CommandMessage, DepsCommand }
+export { CommandMessage }
 
-export default CommandMessage
+export default CommandMessage

package/src/App/User/UserApp.js

@@ -6,7 +6,7 @@ import UserUI from "./UserUI.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"
+import { StreamEntry, UiMessage } from "../../core/index.js"
 
 /**
  * UserApp requires user name and shows Welcome view.
@@ -33,11 +33,11 @@ export default class UserApp extends CoreApp {
 	 */
 	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 processorFn = async () => new 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
+			(error) => ui.output && ui.output([error]), // Assume ui has output method
 			(item) => ui.output && ui.output(item.value) // Fix complete callback
 		)
 		return { completed: true }
@@ -72,7 +72,7 @@ export default class UserApp extends CoreApp {
 			return ui.render("Welcome", { user: this.user })
 		}
 		const answer = await ui.ask(UiMessage.from("What is your name?"))
-		this.user = User.from(answer?.value)
+		this.user = User.from(answer?.body)
 		return ui.render("Welcome", { user: this.user })
 	}
 }

package/src/View/View.js

@@ -269,8 +269,8 @@ export default class View {
 		do {
 			const answer = await this.stdin.read()
 			result = /** @type {typeof UiMessage} */ (input.constructor).from(answer)
-		} while (!result.isValid && !result.escaped)
-		return result.escaped ? null : result
+		} while (!result.isValid && !result.head.cancelled)
+		return result.head.cancelled ? null : result
 	}
 
 	/**

package/src/core/Form/Input.js

@@ -16,8 +16,8 @@
  * @property {string} type - Input type (text, email, number, select, etc.).
  * @property {boolean} required - Whether the field is required.
  * @property {string} placeholder - Placeholder text.
- * @property {Array<string>} options - Select options (if type is 'select').
- * @property {Function|null} validation - Custom validation function.
+ * @property {InputOptions} options - Select options (if type is 'select').
+ * @property {Function} validation - Custom validation function.
  * @property {*} defaultValue - Default value.
  */
 export default class FormInput {
@@ -27,7 +27,7 @@ export default class FormInput {
 	/** @type {boolean} */ required = false
 	/** @type {string} */ placeholder = ''
 	/** @type {InputOptions} */ options = []
-	/** @type {import("@nan0web/co").ValidateFn|null} */ validation = null
+	/** @type {Function} */ validation = () => true
 	/** @type {*} */ defaultValue = null
 
 	/**
@@ -39,7 +39,7 @@ export default class FormInput {
 		NUMBER: 'number',
 		SELECT: 'select',
 		CHECKBOX: 'checkbox',
-		TEXTAREA: 'textarea'
+		TEXTAREA: 'textarea',
 	}
 
 	/**
@@ -52,7 +52,7 @@ export default class FormInput {
 	 * @param {boolean} [props.required=false] - Is required.
 	 * @param {string} [props.placeholder=''] - Placeholder.
 	 * @param {InputOptions} [props.options=[]] - Select options or async function to retrieve data with the search and page.
-	 * @param {Function} [props.validation=null] - Custom validation.
+	 * @param {Function} [props.validation] - Custom validation.
 	 * @param {*} [props.defaultValue=null] - Default value.
 	 */
 	constructor(props) {
@@ -64,7 +64,7 @@ export default class FormInput {
 			placeholder = this.placeholder,
 			options = [],
 			validation = this.validation,
-			defaultValue = this.defaultValue
+			defaultValue = this.defaultValue,
 		} = props
 
 		if (!name) {
@@ -86,11 +86,11 @@ export default class FormInput {
 	requireValidType() {
 		if (!Object.values(FormInput.TYPES).includes(this.type)) {
 			throw new TypeError([
-				"FormInput.type is invalid!",
-				["Provided", this.type].join(": "),
-				"Available types:",
-				...Object.values(FormInput.TYPES).map(t => `  - ${t}`)
-			].join("\n"))
+				'FormInput.type is invalid!',
+				['Provided', this.type].join(': '),
+				'Available types:',
+				...Object.values(FormInput.TYPES).map((t) => `  - ${t}`),
+			].join('\n'))
 		}
 	}
 
@@ -107,7 +107,7 @@ export default class FormInput {
 			required: this.required,
 			placeholder: this.placeholder,
 			options: this.options,
-			defaultValue: this.defaultValue
+			defaultValue: this.defaultValue,
 		}
 	}
 
@@ -117,7 +117,7 @@ export default class FormInput {
 	 */
 	static from(input) {
 		if (input instanceof FormInput) return input
-		if ("string" === typeof input) {
+		if (typeof input === 'string') {
 			return new FormInput({ name: input, label: input })
 		}
 		return new FormInput(input)

package/src/core/Stream.js

@@ -1,7 +1,5 @@
 import StreamEntry from "./StreamEntry.js"
 
-export { StreamEntry } // Export if needed
-
 /**
  * Agnostic UI stream for processing progress using async generators.
  *
@@ -18,6 +16,9 @@ export default class UIStream {
 	static createProcessor(signal, processorFn) {
 		return async function* () {
 			try {
+				if (signal.aborted) {
+					throw new DOMException('Aborted', 'AbortError')
+				}
 				const result = await processorFn()
 				yield result
 			} catch (/** @type {any} */ error) {

package/src/core/UiAdapter.js

@@ -3,6 +3,8 @@ import CancelError from "./Error/CancelError.js"
 import UIMessage from "./Message/Message.js"
 import UIForm from "./Form/Form.js"
 import FormInput from "./Form/Input.js"
+import OutputAdapter from "./OutputAdapter.js"
+import OutputMessage from "./Message/OutputMessage.js"
 
 /**
  * Unified UI Adapter that handles both input and output operations.
@@ -81,6 +83,30 @@ export default class UiAdapter extends EventProcessor {
 		throw new Error('select() method must be implemented in subclass')
 	}
 
+	/**
+	 * Process a UIForm and return its result.
+	 *
+	 * This default implementation follows an **agnostic UI** approach:
+	 * it simply returns the form instance (with optional initial state merged)
+	 * without UI interaction. Concrete adapters (CLI, Web, etc.) can override
+	 * this method to render the form, collect user input and return a richer
+	 * result object (`{ form, cancelled }`).
+	 *
+	 * @param {UIForm} form - The UIForm instance to process.
+	 * @param {object} [initialState={}] - Pre‑filled values for the form.
+	 * @returns {Promise<{ form: UIForm, cancelled?: boolean }>} Form processing result.
+	 */
+	async processForm(form, initialState = {}) {
+		// Merge any provided initial state into the form's internal state.
+		if (initialState && typeof initialState === 'object') {
+			form.state = { ...form.state, ...initialState }
+		}
+		// In the agnostic baseline we do not perform any interactive I/O.
+		// Sub‑classes may provide a UI (render, ask, etc.) and return
+		// `{ form, cancelled: true/false, ... }`.
+		return { form }
+	}
+
 	/**
 	 * Ensures a message's body is fully and validly filled.
 	 * Generates a form from the message's static Body schema,
@@ -105,12 +131,12 @@ export default class UiAdapter extends EventProcessor {
 		let errors = msg.validate()
 		while (errors.size > 0) {
 			const form = generateForm(
-				/** @type {any} */ (msg.constructor).Body,
+				/** @type {any} */(msg.constructor).Body,
 				{ initialState: msg.body }
 			)
 
 			const formResult = await this.processForm ? this.processForm(form, msg.body) : {} // Assume method exists or handle differently, but error indicates missing method; perhaps remove if not used
-			if (formResult.escaped) {
+			if (formResult.cancelled) {
 				throw new CancelError("User cancelled form")
 			}
 
@@ -119,10 +145,11 @@ export default class UiAdapter extends EventProcessor {
 
 			if (updatedErrors.size > 0) {
 				if (this.output) {
-					await this.output.render("Alert", {
+					this.output.render(new OutputMessage({
+						type: "Alert",
 						variant: "error",
-						content: Array.from(updatedErrors.values()).join("\n")
-					})
+						body: Array.from(updatedErrors.values()).join("\n")
+					}))
 				}
 				errors = updatedErrors
 				continue

package/src/core/index.js

@@ -1,11 +1,17 @@
 export { default as InputAdapter } from "./InputAdapter.js"
 export { default as OutputAdapter } from "./OutputAdapter.js"
-export { default as UIStream } from "./Stream.js"
+
+import UIStream from "./Stream.js"
+export { UIStream, UIStream as UiStream }
+import StreamEntry from "./StreamEntry.js"
+export { StreamEntry, StreamEntry as UiStreamEntry }
 
 export { default as UiMessage } from "./Message/Message.js"
 export { default as FormMessage } from "./Form/Message.js"
 export { default as FormInput } from "./Form/Input.js"
-export { default as UIForm } from "./Form/Form.js"
+
+import UIForm from "./Form/Form.js"
+export { UIForm, UIForm as UiForm }
 
 export { default as Error, CancelError } from "./Error/index.js"
 

package/types/App/Command/DepsCommand.d.ts

@@ -0,0 +1,16 @@
+export class DepsCommand extends UiMessage {
+    static Body: typeof DepsCommandBody;
+    constructor(input?: {});
+    /** @type {DepsCommandBody} */
+    body: DepsCommandBody;
+}
+export default DepsCommand;
+import UiMessage from "../../core/Message/Message.js";
+declare class DepsCommandBody {
+    static fix: {
+        help: string;
+        defaultValue: boolean;
+    };
+    constructor(input?: {});
+    fix: boolean;
+}

package/types/App/Core/UI.d.ts

@@ -1,11 +1,9 @@
-export default UI;
-export type ComponentFn = import("../../View/View.js").ComponentFn;
 /** @typedef {import("../../View/View.js").ComponentFn} ComponentFn */
 /**
  * Abstract UI class to connect apps and widgets.
  * Supports input/output data typed classes and views.
  */
-declare class UI extends Widget {
+export default class UI extends Widget {
     /**
      * Creates a new UI instance.
      * @param {CoreApp} app - The app to connect to this UI
@@ -33,6 +31,7 @@ declare class UI extends Widget {
      */
     output(results: any[]): void;
 }
+export type ComponentFn = import("../../View/View.js").ComponentFn;
 import Widget from "./Widget.js";
 import CoreApp from "./CoreApp.js";
 import { Message } from "@nan0web/co";

package/types/App/User/Command/Message.d.ts

@@ -1,16 +1,2 @@
-export class DepsCommand extends UIMessage {
-    static Body: typeof DepsCommandParams;
-    constructor(input?: {});
-    /** @type {DepsCommandParams} */
-    body: DepsCommandParams;
-}
-export default DepsCommand;
-import UIMessage from "../../../core/Message/Message.js";
-declare class DepsCommandParams {
-    static fix: {
-        help: string;
-        defaultValue: boolean;
-    };
-    constructor(input?: {});
-    fix: boolean;
-}
+export default UiMessage;
+import UiMessage from "../../../core/Message/Message.js";

package/types/App/User/Command/index.d.ts

@@ -1,4 +1,3 @@
+export { CommandMessage };
 export default CommandMessage;
 import CommandMessage from "./Message.js";
-import DepsCommand from "./Message.js";
-export { CommandMessage, DepsCommand };

package/types/core/Form/Input.d.ts

@@ -14,8 +14,8 @@
  * @property {string} type - Input type (text, email, number, select, etc.).
  * @property {boolean} required - Whether the field is required.
  * @property {string} placeholder - Placeholder text.
- * @property {Array<string>} options - Select options (if type is 'select').
- * @property {Function|null} validation - Custom validation function.
+ * @property {InputOptions} options - Select options (if type is 'select').
+ * @property {Function} validation - Custom validation function.
  * @property {*} defaultValue - Default value.
  */
 export default class FormInput {
@@ -45,7 +45,7 @@ export default class FormInput {
      * @param {boolean} [props.required=false] - Is required.
      * @param {string} [props.placeholder=''] - Placeholder.
      * @param {InputOptions} [props.options=[]] - Select options or async function to retrieve data with the search and page.
-     * @param {Function} [props.validation=null] - Custom validation.
+     * @param {Function} [props.validation] - Custom validation.
      * @param {*} [props.defaultValue=null] - Default value.
      */
     constructor(props: {
@@ -64,7 +64,7 @@ export default class FormInput {
     /** @type {boolean} */ required: boolean;
     /** @type {string} */ placeholder: string;
     /** @type {InputOptions} */ options: InputOptions;
-    /** @type {import("@nan0web/co").ValidateFn|null} */ validation: import("@nan0web/co").ValidateFn | null;
+    /** @type {Function} */ validation: Function;
     /** @type {*} */ defaultValue: any;
     requireValidType(): void;
     /**

package/types/core/Stream.d.ts

@@ -1,4 +1,3 @@
-export { StreamEntry };
 /**
  * Agnostic UI stream for processing progress using async generators.
  *

package/types/core/UiAdapter.d.ts

@@ -74,6 +74,23 @@ export default class UiAdapter extends EventProcessor {
         index: number;
         value: string | null;
     }>;
+    /**
+     * Process a UIForm and return its result.
+     *
+     * This default implementation follows an **agnostic UI** approach:
+     * it simply returns the form instance (with optional initial state merged)
+     * without UI interaction. Concrete adapters (CLI, Web, etc.) can override
+     * this method to render the form, collect user input and return a richer
+     * result object (`{ form, cancelled }`).
+     *
+     * @param {UIForm} form - The UIForm instance to process.
+     * @param {object} [initialState={}] - Pre‑filled values for the form.
+     * @returns {Promise<{ form: UIForm, cancelled?: boolean }>} Form processing result.
+     */
+    processForm(form: UIForm, initialState?: object): Promise<{
+        form: UIForm;
+        cancelled?: boolean;
+    }>;
     /**
      * Ensures a message's body is fully and validly filled.
      * Generates a form from the message's static Body schema,
@@ -101,4 +118,5 @@ export default class UiAdapter extends EventProcessor {
 import UIForm from "./Form/Form.js";
 import EventProcessor from "@nan0web/event/oop";
 import CancelError from "./Error/CancelError.js";
+import OutputAdapter from "./OutputAdapter.js";
 import UIMessage from "./Message/Message.js";

package/types/core/index.d.ts

@@ -1,9 +1,11 @@
 export { default as InputAdapter } from "./InputAdapter.js";
 export { default as OutputAdapter } from "./OutputAdapter.js";
-export { default as UIStream } from "./Stream.js";
 export { default as UiMessage } from "./Message/Message.js";
 export { default as FormMessage } from "./Form/Message.js";
 export { default as FormInput } from "./Form/Input.js";
-export { default as UIForm } from "./Form/Form.js";
 export { default as UiAdapter } from "./UiAdapter.js";
+import UIStream from "./Stream.js";
+import StreamEntry from "./StreamEntry.js";
+import UIForm from "./Form/Form.js";
+export { UIStream, UIStream as UiStream, StreamEntry, StreamEntry as UiStreamEntry, UIForm, UIForm as UiForm };
 export { default as Error, CancelError } from "./Error/index.js";