@nan0web/ui 1.7.0 → 1.9.0

package/src/domain/ShowcaseAppModel.js

@@ -1,88 +1,173 @@
-import { InputModel, ConfirmModel, SpinnerModel, ToastModel, TableModel, ButtonModel, AutocompleteModel, SelectModel } from './components/index.js'
+import { Model } from '@nan0web/types'
+import {
+	ConfirmModel,
+	SpinnerModel,
+	ToastModel,
+	TableModel,
+	ButtonModel,
+} from './components/index.js'
+import { resolveDefaults } from '@nan0web/types'
+
+/**
+ * Sub-model representing the user's profile for the showcase journey.
+ * Following strictly Model-as-Schema (0HCnAI) pattern.
+ */
+class ProfileModel extends Model {
+	static $id = '@nan0web/ui/ProfileModel'
+
+	static UI = {
+		title: 'Profile',
+	}
+
+	// Use alias 'name' to avoid conflict with JS static name property
+	static profileName = {
+		alias: 'name',
+		help: 'Your name',
+		placeholder: 'John Doe',
+		required: true,
+		pattern: '.{3,}',
+	}
+
+	static role = {
+		help: 'Your role',
+		options: ['Developer', 'Designer', 'Manager'],
+		default: 'Developer',
+	}
+
+	static tool = {
+		help: 'Your tool',
+		options: ['React', 'Lit', 'Node.js', 'Playwright', 'Vitest', 'Vite'],
+		hint: 'autocomplete',
+	}
+
+	/**
+	 * @param {Partial<ProfileModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Your name */ this.profileName
+		/** @type {'Developer'|'Designer'|'Manager'} Your role */ this.role
+		/** @type {'React'|'Lit'|'Node.js'|'Playwright'|'Vitest'|'Vite'} Your tool */ this.tool
+	}
+}
 
 /**
  * Model-as-Schema for the entire UI Sandbox Showcase.
  * Represents a complete User Journey demonstrating all components.
- * Showcases OLMUI Scenario Testing capabilities.
  */
-export class ShowcaseAppModel {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
+export class ShowcaseAppModel extends Model {
+	static $id = '@nan0web/ui/ShowcaseAppModel'
+
+	// Canonical UI Texts and Messages
+	static UI = {
+		appName: 'showcase.app_name',
+		startBtn: 'showcase.start_btn',
+		generateConfirm: 'showcase.msg_generate_confirm',
+		aborted: 'showcase.msg_aborted',
+		success: 'showcase.msg_success',
+		cancelled: 'showcase.msg_cancelled',
+		tableProperty: 'table.property',
+		tableValue: 'table.value',
+		tableStatus: 'table.status',
+		tableStatusActive: 'table.status_active',
+	}
 
-	static appName = {
-		help: 'Name of the showcase application',
-		default: 'Component Showcase (Zero Hallucination)',
+	static appTitle = {
+		alias: 'appName',
+		help: 'showcase.app_name_help',
+		default: ShowcaseAppModel.UI.appName,
 		type: 'string',
 	}
 
-	constructor() {
-		this.appName = ShowcaseAppModel.appName.default
+	/**
+	 * @param {Partial<ShowcaseAppModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} App name help */ this.appTitle
 	}
 
 	// ==========================================
 	// 2. AGNOSTIC LOGIC (Async Generator)
 	// ==========================================
 
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
-		// 1. Initial interaction: User clicks "Start Showcase" Button
-		const btnIntent = yield* new ButtonModel({ content: 'Start Showcase', variant: 'primary', size: 'lg' }).run()
+		const { UI } = ShowcaseAppModel
+
+		// 1. Initial interaction: Start Button
+		const startBtn = new ButtonModel({
+			content: UI.startBtn,
+			variant: 'primary',
+			size: 'lg',
+		})
+		const btnIntent = yield* startBtn.run()
 
 		if (!btnIntent.data.clicked) {
 			return { type: 'result', data: { success: false, reason: 'start_cancelled' } }
 		}
 
-		// 2. Ask user for their name via Input
-		const { data: nameData } = yield* new InputModel({ 
-			label: 'Enter your name to begin', 
-			placeholder: 'e.g. Yaroslav',
-			required: true,
-			pattern: '.{3,}' 
-		}).run()
+		// 2. Journey Form: Pure Model-as-Schema
+		const profile = new ProfileModel()
+		const profileResult = yield {
+			type: 'ask',
+			model: profile,
+			schema: ProfileModel,
+			field: 'profile_form',
+		}
 
-		const userName = /** @type {string} */ (nameData.value)
+		if (profileResult.cancelled) {
+			yield* new ToastModel({
+				message: UI.aborted,
+				variant: 'warn',
+				duration: 0,
+			}).run()
+			return { type: 'result', data: { success: false, reason: 'user_aborted' } }
+		}
 
-		// 3. Ask user to select their role via Select
-		const { data: roleData } = yield* new SelectModel({
-			options: ['Developer', 'Designer', 'Manager']
-		}).run()
-		
-		const role = /** @type {string} */ (roleData.selected)
+		// Update model data with alias resolution
+		profile.setData(profileResult.value)
 
-		// 4. Ask for their favorite tool via Autocomplete
-		const { data: toolData } = yield* new AutocompleteModel({
-			options: ['React', 'Lit', 'Node.js', 'Playwright', 'Vitest', 'Vite']
+		// 3. Confirmation - key is used, adapter should handle translation/interpolation
+		const confirmIntent = yield* new ConfirmModel({
+			message: UI.generateConfirm,
+			// Pass interpolation data
+			data: { name: profile.profileName, role: profile.role },
 		}).run()
 
-		const tool = /** @type {string} */ (toolData.selected)
-
-		// 5. Ask for confirmation before proceeding to heavy calculation
-		const confirmIntent = yield* new ConfirmModel({ message: `Ready to generate profile for ${userName} (${role})?` }).run()
-		
 		if (!confirmIntent.data.confirmed) {
-			yield* new ToastModel({ message: 'Operation aborted.', variant: 'warning', duration: 0 }).run()
+			yield* new ToastModel({
+				message: UI.cancelled,
+				variant: 'info',
+				duration: 0,
+			}).run()
 			return { type: 'result', data: { success: false, reason: 'user_aborted' } }
 		}
 
-		// 6. Demonstrate a long running progress via Spinner
+		// 4. Progress Feedback
 		yield* new SpinnerModel({ size: 'md' }).run()
 
-		// Simulate business logic processing delay if we were not mocked
-		// But in generators this just happens immediately between yields
-		
-		yield* new ToastModel({ message: 'Profile generated successfully!', variant: 'success', duration: 0 }).run()
+		yield* new ToastModel({
+			message: UI.success,
+			variant: 'success',
+			duration: 0,
+		}).run()
 
-		// 7. Display the result of the showcase in a Table
+		// 5. Result Visualization
 		const { data: tableData } = yield* new TableModel({
-			columns: ['Property', 'Value'],
+			columns: [UI.tableProperty, UI.tableValue],
 			rows: [
-				['Name', userName],
-				['Role', role],
-				['Favorite Tool', tool],
-				['Status', 'Active']
-			]
+				['profile.name', profile.profileName],
+				['profile.role', profile.role],
+				['profile.tool', profile.tool],
+				[UI.tableStatus, UI.tableStatusActive],
+			],
 		}).run()
 
-		return { type: 'result', data: { success: true, profile: { userName, role, tool }, rowsDisplayed: tableData.rowsCount } }
+		return { type: 'result', data: { success: true, profile, rowsDisplayed: tableData.rowsCount } }
 	}
 }

package/src/domain/components/AccordionModel.js

@@ -0,0 +1,38 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * AccordionModel — OLMUI Model-as-Schema
+ * Collapsible FAQ / accordion item with title + content.
+ */
+export class AccordionModel extends Model {
+	static $id = '@nan0web/ui/AccordionModel'
+
+	static title = {
+		help: 'Accordion item header / question',
+		placeholder: 'How does it work?',
+		default: '',
+		required: true,
+	}
+	static content = {
+		help: 'Accordion item body / answer (supports markdown)',
+		placeholder: 'It works by...',
+		default: '',
+		required: true,
+	}
+	static open = {
+		help: 'Whether the item is expanded by default',
+		default: false,
+		type: 'boolean',
+	}
+
+	/**
+	 * @param {Partial<AccordionModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Accordion item header / question */ this.title
+		/** @type {string} Accordion item body / answer (supports markdown) */ this.content
+		/** @type {boolean} Whether the item is expanded by default */ this.open
+	}
+}

package/src/domain/components/AutocompleteModel.js

@@ -1,20 +1,10 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {Object} AutocompleteData
- * @property {string} [content]
- * @property {string[]} [options]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Autocomplete component.
  * Represents a text input with search suggestions.
  */
 export class AutocompleteModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static content = {
 		help: 'Current search text',
 		default: '',
@@ -28,18 +18,18 @@ export class AutocompleteModel extends Model {
 	}
 
 	/**
-	 * @param {AutocompleteData | any} [data]
+	 * @param {Partial<AutocompleteModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.content
-		/** @type {string[]|undefined} */ this.options
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Current search text */ this.content
+		/** @type {string[]} List of suggestions based on input */ this.options
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
 		const response = yield {
 			type: 'ask',
@@ -49,7 +39,7 @@ export class AutocompleteModel extends Model {
 				options: this.options,
 			},
 			component: 'Autocomplete',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
 		this.content = response.value

package/src/domain/components/BannerModel.js

@@ -0,0 +1,37 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * BannerModel — OLMUI Model-as-Schema
+ * Global notification bar (cookies, maintenance, announcements).
+ */
+export class BannerModel extends Model {
+	static $id = '@nan0web/ui/BannerModel'
+
+	static text = {
+		help: 'Banner message text',
+		placeholder: 'We use cookies to improve your experience',
+		default: '',
+		required: true,
+	}
+	static href = {
+		help: 'Optional link for "Learn more" or action URL',
+		placeholder: 'https://...',
+		default: '',
+	}
+	static closable = {
+		help: 'Whether the user can dismiss the banner',
+		default: true,
+		type: 'boolean',
+	}
+
+	/**
+	 * @param {Partial<BannerModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Banner message text */ this.text
+		/** @type {string} Optional link for "Learn more" or action URL */ this.href
+		/** @type {boolean} Whether the user can dismiss the banner */ this.closable
+	}
+}

package/src/domain/components/BreadcrumbModel.js

@@ -1,4 +1,4 @@
-import { Model } from '@nan0web/core'
+import { Model } from '@nan0web/types'
 
 /**
  * @typedef {Object} BreadcrumbItem
@@ -45,12 +45,14 @@ export class BreadcrumbModel extends Model {
 	}
 
 	/**
-	 * @param {BreadcrumbData | any} [data]
+	 * @param {BreadcrumbData | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {BreadcrumbItem[]} */ this.items
-		/** @type {string} */ this.separator
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {BreadcrumbItem[]} Navigation stack */ this.items
+		/** @type {string} Visual separator between breadcrumb segments */ this.separator
+
 		// Normalize: if items were passed as plain strings, convert to {label, path}
 		if (Array.isArray(this.items)) {
 			this.items = this.items.map((item) =>
@@ -245,13 +247,13 @@ export class BreadcrumbModel extends Model {
 	 * This is a "display-only" run — it shows the navigation state.
 	 */
 	async *run() {
-		yield /** @type {any} */ ({
+		yield {
 			type: 'log',
 			level: 'info',
 			message: this.toString(),
 			component: 'Breadcrumbs',
-			model: /** @type {any} */ (this),
-		})
+			model: /** @type {BreadcrumbModel} */ (this),
+		}
 
 		return {
 			type: 'result',

package/src/domain/components/ButtonModel.js

@@ -1,92 +1,65 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {'primary'|'secondary'|'info'|'ok'|'warn'|'err'|'ghost'} ButtonVariant
- * @typedef {'sm'|'md'|'lg'} ButtonSize
- * @typedef {Object} ButtonData
- * @property {string} [content]
- * @property {ButtonVariant} [variant]
- * @property {ButtonSize} [size]
- * @property {boolean} [outline]
- * @property {boolean} [disabled]
- * @property {boolean} [loading]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Button component.
- * Represents the intention and state of a Button interaction.
- * Used exclusively for schema definition and editor validation.
  */
 export class ButtonModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
-	static content = {
-		help: 'Text or content inside the button',
-		default: 'Click Me',
-		type: 'string',
-	}
-
 	static variant = {
-		help: 'Visual importance and semantic meaning',
+		help: 'Button visual style',
 		default: 'primary',
-		options: ['primary', 'secondary', 'info', 'ok', 'warn', 'err', 'ghost'],
+		options: ['primary', 'secondary', 'danger', 'ghost'],
 	}
 
-	static size = {
-		help: 'Size of the button',
-		default: 'md',
-		options: ['sm', 'md', 'lg'],
+	static content = {
+		help: 'Text displayed inside the button',
+		default: 'Click me',
+		type: 'string',
 	}
 
-	static outline = {
-		help: 'Whether the button has a transparent background with border',
-		default: false,
-		type: 'boolean',
+	static href = {
+		help: 'Optional link URL',
+		default: '',
+		type: 'string',
 	}
 
 	static disabled = {
-		help: 'Whether the button is disabled and unclickable',
+		help: 'Whether the button can be clicked',
 		default: false,
 		type: 'boolean',
 	}
 
-	static loading = {
-		help: 'Whether the button shows a loading spinner instead of content',
+	static clicked = {
+		help: 'Interal flag: true if clicked',
 		default: false,
 		type: 'boolean',
 	}
 
 	/**
-	 * @param {ButtonData | any} [data]
+	 * @param {Partial<ButtonModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.content
-		/** @type {ButtonVariant|undefined} */ this.variant
-		/** @type {ButtonSize|undefined} */ this.size
-		/** @type {boolean|undefined} */ this.outline
-		/** @type {boolean|undefined} */ this.disabled
-		/** @type {boolean|undefined} */ this.loading
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {'primary'|'secondary'|'danger'|'ghost'} Button visual style */ this.variant
+		/** @type {string} Text displayed inside the button */ this.content
+		/** @type {string} Optional link URL */ this.href
+		/** @type {boolean} Whether the button can be clicked */ this.disabled
+		/** @type {boolean} Reactive flag set to true when user activates the button */ this.clicked
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
-		// A basic button interaction intention:
-		// We simply yield ourselves as a 'button_click' intent.
-		// Adaptors will render the button and wait for the click event.
 		const response = yield {
 			type: 'ask',
-			field: 'action',
-			schema: { help: 'Click the button to proceed' },
+			field: 'clicked',
+			schema: { help: 'Click the button' },
 			component: 'Button',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
-		return { type: 'result', data: { clicked: true, ...response } }
+		this.clicked = response.value?.clicked || false
+		return { type: 'result', data: { clicked: this.clicked } }
 	}
 }

package/src/domain/components/CommentModel.js

@@ -0,0 +1,44 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * CommentModel — OLMUI Model-as-Schema
+ * Base model for user-generated comments / reviews.
+ */
+export class CommentModel extends Model {
+	static $id = '@nan0web/ui/CommentModel'
+
+	static author = {
+		help: 'Author name',
+		placeholder: 'Jane Doe',
+		default: '',
+		required: true,
+	}
+	static avatar = {
+		help: 'Author avatar image URL',
+		placeholder: 'https://...',
+		default: '',
+	}
+	static text = {
+		help: 'Comment body text',
+		placeholder: 'Great product!',
+		default: '',
+		required: true,
+	}
+	static date = {
+		help: 'Comment date (ISO 8601)',
+		placeholder: '2026-01-01',
+		default: '',
+	}
+
+	/**
+	 * @param {Partial<CommentModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Author name */ this.author
+		/** @type {string} Author avatar image URL */ this.avatar
+		/** @type {string} Comment body text */ this.text
+		/** @type {string} Comment date (ISO 8601) */ this.date
+	}
+}

package/src/domain/components/ConfirmModel.js

@@ -1,64 +1,57 @@
-import { Model } from '@nan0web/core'
+import { Model } from '@nan0web/types'
 
 /**
- * @typedef {Object} ConfirmData
- * @property {string} [message]
- * @property {string} [confirmText]
- * @property {string} [cancelText]
- */
-
-/**
- * Model-as-Schema for Confirm component.
+ * Model-as-Schema for Confirmation dialog.
  */
 export class ConfirmModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
+	static title = {
+		help: 'Short title for the action',
+		default: 'Confirm Action',
+		type: 'string',
+	}
 
 	static message = {
-		help: 'Dialog message displayed to the user',
+		help: 'The question asked to the user',
 		default: 'Are you sure?',
 		type: 'string',
 	}
 
-	static confirmText = {
-		help: 'Label for the positive confirmation button',
+	static okLabel = {
+		help: 'Text for the confirm button',
 		default: 'Yes',
 		type: 'string',
 	}
 
-	static cancelText = {
-		help: 'Label for the negative rejection button',
+	static cancelLabel = {
+		help: 'Text for the cancel button',
 		default: 'No',
 		type: 'string',
 	}
 
 	/**
-	 * @param {ConfirmData | any} [data]
+	 * @param {Partial<ConfirmModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.message
-		/** @type {string|undefined} */ this.confirmText
-		/** @type {string|undefined} */ this.cancelText
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Short title for the action */ this.title
+		/** @type {string} The question asked to the user */ this.message
+		/** @type {string} Text for the confirm button */ this.okLabel
+		/** @type {string} Text for the cancel button */ this.cancelLabel
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
 		const response = yield {
 			type: 'ask',
 			field: 'confirmed',
-			schema: {
-				help: this.message,
-				type: 'boolean',
-			},
+			schema: { type: 'boolean', help: this.message },
 			component: 'Confirm',
-			model: /** @type {any} */ (this), // Attached for richer UI metadata
+			model: this,
 		}
 
-		return { type: 'result', data: { confirmed: !!response.value } }
+		return { type: 'result', data: { confirmed: response.value === true } }
 	}
 }