@nan0web/ui 1.8.0 → 1.10.0

package/src/domain/SandboxModel.js

@@ -1,192 +1,143 @@
-import { Model } from '@nan0web/core'
-import * as ComponentModels from './components/index.js'
+import { Model } from '@nan0web/types'
 import { BreadcrumbModel } from './components/BreadcrumbModel.js'
 
 /**
- * @typedef {Object} SandboxData
- * @property {string[]} [components]
- * @property {string} [selectedComponent]
- * @property {string} [themeFormat]
- */
-
-/**
- * Model-as-Schema for the UI Sandbox environment.
- * Represents a tool wrapping standard OLMUI components, allowing
- * users to inspect their models, tweak variables interactively,
- * and export the configuration as themes for the Marketplace.
- *
- * Navigation uses BreadcrumbModel:
- *   ESC = pop one level (if stack has no parent → exit app)
- *   Ctrl+C = always exit (handled by prompts.js wrapper)
- *
- * URL mapping:
- *   /sandbox             → Select Component
- *   /sandbox/button      → Edit Button properties
- *   /sandbox/button/export → Choose export format
+ * SandboxModel — OLMUI Model-as-Schema
+ * Environment for testing and previewing UI components with dynamic property editing.
  */
 export class SandboxModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
+	static $id = '@nan0web/ui/SandboxModel'
 
 	static components = {
 		help: 'List of registered UI components available for inspection',
 		type: 'string[]',
-		default: []
+		default: [],
 	}
 
 	static selectedComponent = {
-		help: 'The specific component chosen by the user for theming',
-		type: 'string',
+		help: 'The component currently being inspected in the sandbox',
+		placeholder: 'Button',
+		default: '',
 	}
 
 	static themeFormat = {
 		help: 'The file format chosen to export the custom theme configuration',
 		options: ['yaml', 'css', 'json'],
-		default: 'yaml'
+		default: 'yaml',
 	}
 
 	/**
-	 * @param {SandboxData | any} [data]
+	 * @param {Partial<SandboxModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string[]|undefined} */ this.components
-		/** @type {string|undefined} */ this.selectedComponent
-		/** @type {string|undefined} */ this.themeFormat
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string[]} List of registered UI components available for inspection */ this
+			.components
+		/** @type {string} The component currently being inspected in the sandbox */ this
+			.selectedComponent
+		/** @type {'yaml'|'css'|'json'} The file format chosen to export the custom theme configuration */ this
+			.themeFormat
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
 		/** @type {any} */
-		let targetInstance = null
-
-		// ── BreadcrumbModel as navigation stack ──
-		const nav = new BreadcrumbModel()
-		nav.push('🏖 Sandbox', 'sandbox')
+		let lastResponse = null
 
 		while (true) {
-			// ── Level 1: Select Component ──
+			const nav = new BreadcrumbModel({ items: ['Sandbox'] })
+
 			if (!this.selectedComponent) {
 				// Show breadcrumb
-				yield /** @type {any} */ ({
-					type: 'log', level: 'info',
+				yield {
+					type: 'log',
+					level: 'info',
 					message: `\n${nav}`,
 					component: 'Breadcrumbs',
-					model: /** @type {any} */ (nav),
-				})
+					model: nav,
+				}
 
-				// ESC here = CancelError not caught → bubbles out → app exits
-				const listResponse = yield {
+				const response = yield {
 					type: 'ask',
 					field: 'selectedComponent',
 					schema: {
-						help: 'Select a component to inspect and theme',
+						help: 'Select a component to inspect',
 						options: this.components || [],
-						validate: (/** @type {string} */ val) =>
-							(this.components || []).includes(val) || 'Component not found in sandbox registry',
 					},
 					component: 'Select',
-					model: /** @type {any} */ (this),
+					model: this,
 				}
-				this.selectedComponent = listResponse.value
-				nav.push(/** @type {string} */ (this.selectedComponent))
-
-				// Instantiate the selected model class
-				const Ctor = ComponentModels[`${this.selectedComponent}Model`]
-				targetInstance = Ctor ? new Ctor() : this
+				this.selectedComponent = response.value
+				if (!this.selectedComponent) break
 			}
 
-			// ── Level 2: Edit Component Properties ──
-			// URL: /sandbox/button  Data: data/sandbox/button/index.yaml
-			/** @type {any} */
+			nav.push(this.selectedComponent, this.selectedComponent)
+
+			// 2. Component Configuration Mode
 			let configResponse
 			try {
-				yield /** @type {any} */ ({
-					type: 'log', level: 'info',
+				yield {
+					type: 'log',
+					level: 'info',
 					message: `\n${nav}`,
 					component: 'Breadcrumbs',
-					model: /** @type {any} */ (nav),
-				})
+					model: nav,
+				}
 
 				configResponse = yield {
 					type: 'ask',
-					field: 'componentThemeConfig',
-					schema: ComponentModels[`${this.selectedComponent}Model`] || {
-						help: `Configure properties for ${this.selectedComponent} to create a theme variation`,
-					},
-					component: 'SandboxWrapper',
-					model: true,
-					instance: /** @type {any} */ (targetInstance),
+					field: 'config',
+					schema: { help: `Configure ${this.selectedComponent} properties` },
+					component: 'PropertyEditor',
+					model: this, // Passes the whole Sandbox context
 				}
 			} catch (e) {
-				const err = /** @type {Error} */ (e)
-				if (err.name === 'CancelError') {
-					// Pop: Level 2 → Level 1
-					nav.pop()
-					this.selectedComponent = undefined
-					continue
-				}
-				throw e
+				this.selectedComponent = ''
+				continue
 			}
 
-			// Persist edits for potential back-navigation
-			targetInstance = configResponse.value
+			if (configResponse.cancelled) {
+				this.selectedComponent = ''
+				continue
+			}
 
-			// ── Level 3: Choose Export Format ──
-			// URL: /sandbox/button/export  Data: data/sandbox/button/export/index.yaml
-			/** @type {any} */
-			let formatResponse
+			// 3. Theme Export Mode
 			try {
 				nav.push('Export', 'export')
-				yield /** @type {any} */ ({
-					type: 'log', level: 'info',
+				yield {
+					type: 'log',
+					level: 'info',
 					message: `\n${nav}`,
 					component: 'Breadcrumbs',
-					model: /** @type {any} */ (nav),
-				})
+					model: nav,
+				}
 
-				formatResponse = yield {
+				const themeResponse = yield {
 					type: 'ask',
 					field: 'themeFormat',
 					schema: {
-						help: 'Choose how to export the theme configuration',
+						help: 'Choose export format',
 						options: SandboxModel.themeFormat.options,
 					},
 					component: 'Select',
-					model: /** @type {any} */ (this),
+					model: this,
 				}
+				this.themeFormat = themeResponse.value
 			} catch (e) {
-				const err = /** @type {Error} */ (e)
-				if (err.name === 'CancelError') {
-					// Pop: Level 3 → Level 2 (same targetInstance preserved)
-					nav.pop()
-					continue
-				}
-				throw e
+				// stay on results
 			}
 
-			this.themeFormat = formatResponse.value
-
-			// 4. Success notification
-			yield /** @type {any} */ ({
-				type: 'log',
-				level: 'success',
-				message: `Theme exported as ${(this.themeFormat || 'json').toUpperCase()}! Path: ${nav.path}`,
-			})
-
-			// 5. Return result with navigation context
 			return {
 				type: 'result',
 				data: {
-					targetComponent: this.selectedComponent,
+					component: this.selectedComponent,
 					themeConfig: configResponse.value,
 					exportFormat: this.themeFormat,
 					breadcrumb: nav.path,
-				}
+				},
 			}
 		}
 	}

package/src/domain/ShowcaseAppModel.js

@@ -1,90 +1,173 @@
-import { InputModel, ConfirmModel, SpinnerModel, ToastModel, TableModel, ButtonModel, AutocompleteModel, SelectModel } from './components/index.js'
-import { Model } from '@nan0web/core'
+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 extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
+	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(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.appName
+	/**
+	 * @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',