@nan0web/ui 1.5.2 → 1.7.0

package/src/domain/components/ConfirmModel.js

@@ -0,0 +1,64 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {Object} ConfirmData
+ * @property {string} [message]
+ * @property {string} [confirmText]
+ * @property {string} [cancelText]
+ */
+
+/**
+ * Model-as-Schema for Confirm component.
+ */
+export class ConfirmModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static message = {
+		help: 'Dialog message displayed to the user',
+		default: 'Are you sure?',
+		type: 'string',
+	}
+
+	static confirmText = {
+		help: 'Label for the positive confirmation button',
+		default: 'Yes',
+		type: 'string',
+	}
+
+	static cancelText = {
+		help: 'Label for the negative rejection button',
+		default: 'No',
+		type: 'string',
+	}
+
+	/**
+	 * @param {ConfirmData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {string|undefined} */ this.message
+		/** @type {string|undefined} */ this.confirmText
+		/** @type {string|undefined} */ this.cancelText
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		const response = yield {
+			type: 'ask',
+			field: 'confirmed',
+			schema: {
+				help: this.message,
+				type: 'boolean',
+			},
+			component: 'Confirm',
+			model: /** @type {any} */ (this), // Attached for richer UI metadata
+		}
+
+		return { type: 'result', data: { confirmed: !!response.value } }
+	}
+}

package/src/domain/components/InputModel.js

@@ -0,0 +1,142 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {'text'|'email'|'password'|'number'|'tel'|'url'|'date'} InputType
+ * @typedef {Object} InputData
+ * @property {InputType} [type]
+ * @property {string} [label]
+ * @property {string} [placeholder]
+ * @property {boolean} [required]
+ * @property {string} [pattern]
+ * @property {string} [min]
+ * @property {string} [max]
+ * @property {string} [step]
+ * @property {string} [hint]
+ * @property {boolean} [disabled]
+ * @property {string} [content]
+ */
+
+/**
+ * Model-as-Schema for Input component.
+ * Used exclusively for schema definition, validation, and editor reflection.
+ */
+export class InputModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static type = {
+		help: 'HTML5 Input type attribute',
+		default: 'text',
+		options: ['text', 'email', 'password', 'number', 'tel', 'url', 'date'],
+	}
+
+	static label = {
+		help: 'Label displayed above the input',
+		default: '',
+		type: 'string',
+	}
+
+	static placeholder = {
+		help: 'Placeholder text shown when empty',
+		default: '',
+		type: 'string',
+	}
+
+	static required = {
+		help: 'Whether the field must be filled out',
+		default: false,
+		type: 'boolean',
+	}
+
+	static pattern = {
+		help: 'RegExp pattern for validation (e.g. [A-Z]{3})',
+		default: '',
+		type: 'string',
+	}
+
+	static min = {
+		help: 'Minimum value (for number/date types)',
+		default: '',
+		type: 'string',
+	}
+
+	static max = {
+		help: 'Maximum value (for number/date types)',
+		default: '',
+		type: 'string',
+	}
+
+	static step = {
+		help: 'Step interval (for number/date types)',
+		default: '',
+		type: 'string',
+	}
+
+	static hint = {
+		help: 'Helper text displayed below the input',
+		default: '',
+		type: 'string',
+	}
+
+	static disabled = {
+		help: 'Whether the input is greyed out and uneditable',
+		default: false,
+		type: 'boolean',
+	}
+
+	static content = {
+		help: 'The actual value of the input',
+		default: '',
+		type: 'string',
+	}
+
+	/**
+	 * @param {InputData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {InputType|undefined} */ this.type
+		/** @type {string|undefined} */ this.label
+		/** @type {string|undefined} */ this.placeholder
+		/** @type {boolean|undefined} */ this.required
+		/** @type {string|undefined} */ this.pattern
+		/** @type {string|undefined} */ this.min
+		/** @type {string|undefined} */ this.max
+		/** @type {string|undefined} */ this.step
+		/** @type {string|undefined} */ this.hint
+		/** @type {boolean|undefined} */ this.disabled
+		/** @type {string|undefined} */ this.content
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		const response = yield {
+			type: 'ask',
+			field: 'content',
+			schema: {
+				help: this.label || this.placeholder || 'Enter value',
+				validate: (val) => {
+					if (this.required && !val) return 'This field is required'
+					if (this.pattern && val) {
+						try {
+							const re = new RegExp(`^${this.pattern}$`)
+							if (!re.test(val)) return 'Invalid format'
+						} catch (e) {
+							// fallback if pattern is malformed
+						}
+					}
+					return true
+				},
+			},
+			component: 'Input',
+			model: /** @type {any} */ (this),
+		}
+
+		this.content = response.value
+		return { type: 'result', data: { value: this.content } }
+	}
+}

package/src/domain/components/SelectModel.js

@@ -0,0 +1,59 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {Object} SelectData
+ * @property {string} [content]
+ * @property {string[]} [options]
+ */
+
+/**
+ * Model-as-Schema for Select component.
+ * Represents a dropdown choice selection.
+ */
+export class SelectModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static content = {
+		help: 'Currently selected item or default placeholder',
+		default: 'Choose option',
+		type: 'string',
+	}
+
+	static options = {
+		help: 'List of available options for selection',
+		default: ['Alpha', 'Beta', 'Gamma'],
+		type: 'string[]',
+	}
+
+	/**
+	 * @param {SelectData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {string|undefined} */ this.content
+		/** @type {string[]|undefined} */ this.options
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		const response = yield {
+			type: 'ask',
+			field: 'content',
+			schema: {
+				help: 'Select an option',
+				options: this.options,
+				validate: (val) => this.options?.includes(val) || 'Invalid option selected',
+			},
+			component: 'Select',
+			model: /** @type {any} */ (this),
+		}
+
+		this.content = response.value
+		return { type: 'result', data: { selected: this.content } }
+	}
+}

package/src/domain/components/SpinnerModel.js

@@ -0,0 +1,58 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {'sm'|'md'|'lg'} SpinnerSize
+ * @typedef {Object} SpinnerData
+ * @property {SpinnerSize} [size]
+ * @property {string} [color]
+ */
+
+/**
+ * Model-as-Schema for Spinner component.
+ * Represents a loading or progress state without user interaction.
+ */
+export class SpinnerModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static size = {
+		help: 'Spinner diameter',
+		default: 'md',
+		options: ['sm', 'md', 'lg'],
+	}
+
+	static color = {
+		help: 'Override for base color token',
+		type: 'color',
+		default: '',
+	}
+
+	/**
+	 * @param {SpinnerData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {SpinnerSize|undefined} */ this.size
+		/** @type {string|undefined} */ this.color
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		// A spinner does not ask for anything, it simply indicates progress.
+		// However, as a pure component it doesn't do any work itself,
+		// so running it just means declaring its state.
+		yield {
+			type: 'progress',
+			message: 'Loading...',
+			component: 'Spinner',
+			model: /** @type {any} */ (this),
+		}
+
+		// Instant exit since it performs no async task internally
+		return { type: 'result', data: { completed: true } }
+	}
+}

package/src/domain/components/TableModel.js

@@ -0,0 +1,60 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {Object} TableData
+ * @property {string[]} [columns]
+ * @property {string[][]} [rows]
+ */
+
+/**
+ * Model-as-Schema for Table Data component.
+ * Displays tabular string data in rows and columns.
+ */
+export class TableModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static columns = {
+		help: 'Array of column headers',
+		type: 'string[]',
+		default: ['Header 1', 'Header 2'],
+	}
+
+	static rows = {
+		help: '2D Array of table cells matching column length',
+		type: 'string[][]',
+		default: [
+			['Cell 1.1', 'Cell 1.2'],
+			['Cell 2.1', 'Cell 2.2'],
+		],
+	}
+
+	/**
+	 * @param {TableData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {string[]|undefined} */ this.columns
+		/** @type {string[][]|undefined} */ this.rows
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		// Tables are naturally result or log displays.
+		// For an interactive flow, we could ask the user to 'select' a row,
+		// but by default a table simply presents data.
+		yield {
+			type: 'log',
+			level: 'info',
+			message: `Displaying table with ${this.rows?.length || 0} rows`,
+			component: 'Table',
+			model: /** @type {any} */ (this),
+		}
+
+		return { type: 'result', data: { rowsCount: this.rows?.length || 0 } }
+	}
+}

package/src/domain/components/ToastModel.js

@@ -0,0 +1,77 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {'success'|'error'|'info'|'warning'} ToastVariant
+ * @typedef {Object} ToastData
+ * @property {string} [message]
+ * @property {ToastVariant} [variant]
+ * @property {number} [duration]
+ * @property {boolean} [open]
+ */
+
+/**
+ * Model-as-Schema for Toast notification component.
+ * Represents a transient message displayed to the user.
+ */
+export class ToastModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static message = {
+		help: 'The message content of the toast',
+		default: 'Saved successfully!',
+		type: 'string',
+	}
+
+	static variant = {
+		help: 'Visual styling representing the message severity',
+		default: 'success',
+		options: ['success', 'error', 'info', 'warning'],
+	}
+
+	static duration = {
+		help: 'Time in ms before auto-dismissal. 0 to keep open indefinitely.',
+		default: 3000,
+		type: 'number',
+	}
+
+	static open = {
+		help: 'Controls visibility state',
+		default: true,
+		type: 'boolean',
+	}
+
+	/**
+	 * @param {ToastData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {string|undefined} */ this.message
+		/** @type {ToastVariant|undefined} */ this.variant
+		/** @type {number|undefined} */ this.duration
+		/** @type {boolean|undefined} */ this.open
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		// Maps naturally to the 'log' intent for OLMUI runners.
+		yield {
+			type: 'log',
+			level: this.variant === 'error' ? 'error' : this.variant === 'warning' ? 'warn' : 'info',
+			message: this.message,
+			component: 'Toast', // Hint for specific UI visual rendering
+			model: /** @type {any} */ (this),
+		}
+
+		// Wait exactly 'duration' ms before completing (unless duration is 0)
+		if (this.duration && this.duration > 0) {
+			await new Promise((resolve) => setTimeout(resolve, this.duration))
+		}
+
+		return { type: 'result', data: { closed: true } }
+	}
+}

package/src/domain/components/TreeModel.js

@@ -0,0 +1,53 @@
+import { Model } from '@nan0web/core'
+
+/**
+ * @typedef {Object} TreeNode
+ * @property {string} label
+ * @property {boolean} [expanded]
+ * @property {TreeNode[]} [children]
+ */
+
+/**
+ * @typedef {Object} TreeData
+ * @property {TreeNode[]} [data]
+ */
+
+/**
+ * Model-as-Schema for Tree component.
+ * Represents a hierarchical selection or navigation structure.
+ */
+export class TreeModel extends Model {
+	// ==========================================
+	// 1. MODEL AS SCHEMA (Static Definition)
+	// ==========================================
+
+	static data = {
+		help: 'Tree nodes defining the hierarchy',
+		type: 'TreeNode[]',
+		default: [],
+	}
+
+	/**
+	 * @param {TreeData | any} [data]
+	 */
+	constructor(data = {}) {
+		super(data)
+		/** @type {TreeNode[]|undefined} */ this.data
+	}
+
+	// ==========================================
+	// 2. AGNOSTIC LOGIC (Async Generator)
+	// ==========================================
+
+	async *run() {
+		const response = yield {
+			type: 'ask',
+			field: 'selectedNode',
+			schema: { help: 'Select a node from the tree' },
+			component: 'Tree',
+			model: /** @type {any} */ (this),
+		}
+
+		return { type: 'result', data: { selected: response.value } }
+	}
+}

package/src/domain/components/index.js

@@ -0,0 +1,11 @@
+// Exports for Component Models
+export { BreadcrumbModel } from './BreadcrumbModel.js'
+export { ButtonModel } from './ButtonModel.js'
+export { ConfirmModel } from './ConfirmModel.js'
+export { InputModel } from './InputModel.js'
+export { SpinnerModel } from './SpinnerModel.js'
+export { TableModel } from './TableModel.js'
+export { ToastModel } from './ToastModel.js'
+export { SelectModel } from './SelectModel.js'
+export { AutocompleteModel } from './AutocompleteModel.js'
+export { TreeModel } from './TreeModel.js'

package/src/domain/index.js

@@ -0,0 +1,16 @@
+// Domain Models — OLMUI Model-as-Schema
+export { SandboxModel } from './SandboxModel.js'
+export { ShowcaseAppModel } from './ShowcaseAppModel.js'
+
+// Component Models
+export {
+	ButtonModel,
+	ConfirmModel,
+	InputModel,
+	SpinnerModel,
+	TableModel,
+	ToastModel,
+	SelectModel,
+	AutocompleteModel,
+	TreeModel,
+} from './components/index.js'

package/src/format.js

@@ -0,0 +1,21 @@
+export const format = {
+	currency: (value, currency = 'UAH', locale = 'uk-UA') => {
+		return new Intl.NumberFormat(locale, {
+			style: 'currency',
+			currency,
+			maximumFractionDigits: 0
+		}).format(value).replace(/,/g, ' ')
+	},
+	rate: (value, locale = 'uk-UA') => {
+		const rate = value < 1 ? value * 100 : value
+		return new Intl.NumberFormat(locale, {
+			style: 'percent',
+			maximumFractionDigits: 2
+		}).format(rate / 100)
+	},
+	number: (value, locale = 'uk-UA') => {
+		return new Intl.NumberFormat(locale, {
+			maximumFractionDigits: 2
+		}).format(value).replace(/,/g, ' ')
+	}
+}

package/src/index.js

@@ -10,6 +10,7 @@ import Component from './Component/index.js'
 import App from './App/index.js'
 
 export { Frame, FrameProps, Locale, StdIn, StdOut, View, RenderOptions, Model, Component, App }
+export { format } from './format.js'
 
 // export default App
 export { default as FormMessage } from './core/Form/Message.js'
@@ -22,3 +23,8 @@ export { default as UiMessage } from './core/Message/Message.js'
 export { default as UiStream } from './core/Stream.js'
 export { default as Error, CancelError } from './core/Error/index.js'
 export { default as UiAdapter } from './core/UiAdapter.js'
+
+// OLMUI Generator Engine
+export { validateIntent, ask, progress, log, result, INTENT_TYPES, isModelSchema } from './core/Intent.js'
+export { IntentErrorModel } from './core/IntentErrorModel.js'
+export { runGenerator } from './core/GeneratorRunner.js'

package/types/ArchitectureMap/ArchitectureMap.d.ts

@@ -0,0 +1,70 @@
+/**
+ * ArchitectureMap — a cross-package component readiness registry.
+ *
+ * Tracks which UI components are implemented in which packages
+ * (ui-lit, ui-cli, ui-react-bootstrap, etc.) and provides
+ * a programmatic readiness matrix.
+ *
+ * @example
+ * const map = new ArchitectureMap()
+ * map.register('ui-lit', ['Button', 'Input', 'Select'])
+ * map.register('ui-cli', ['Button', 'Input'])
+ * map.getMatrix()
+ * // → { Button: { 'ui-lit': true, 'ui-cli': true },
+ * //     Input:  { 'ui-lit': true, 'ui-cli': true },
+ * //     Select: { 'ui-lit': true, 'ui-cli': false } }
+ * map.getReadiness('Button') // → true  (in all packages)
+ * map.getReadiness('Select') // → false (missing from ui-cli)
+ */
+export default class ArchitectureMap {
+    /**
+     * Register a package and its exported components.
+     *
+     * @param {string} packageName — e.g. 'ui-lit', 'ui-cli', 'ui-react-bootstrap'
+     * @param {string[]} componentsList — e.g. ['Button', 'Input', 'Select']
+     */
+    register(packageName: string, componentsList?: string[]): void;
+    /**
+     * Get the list of all registered package names.
+     *
+     * @returns {string[]}
+     */
+    getPackages(): string[];
+    /**
+     * Get all known component names (union of all packages).
+     *
+     * @returns {string[]}
+     */
+    getComponents(): string[];
+    /**
+     * Build a readiness matrix: { componentName → { packageName → boolean } }.
+     *
+     * Every known component gets an entry for every registered package.
+     *
+     * @returns {Object<string, Object<string, boolean>>}
+     */
+    getMatrix(): {
+        [x: string]: {
+            [x: string]: boolean;
+        };
+    };
+    /**
+     * Check if a component is implemented in ALL registered packages.
+     *
+     * @param {string} componentName
+     * @returns {boolean}
+     */
+    getReadiness(componentName: string): boolean;
+    /**
+     * Get a summary: { total, ready, notReady, readyPercent }.
+     *
+     * @returns {{ total: number, ready: number, notReady: number, readyPercent: number }}
+     */
+    getSummary(): {
+        total: number;
+        ready: number;
+        notReady: number;
+        readyPercent: number;
+    };
+    #private;
+}

package/types/ArchitectureMap/index.d.ts

@@ -0,0 +1 @@
+export { default, ArchitectureMap } from "./ArchitectureMap.js";