@nan0web/ui 1.8.0 → 1.10.0

package/README.md

@@ -90,9 +90,9 @@ const form = new UiForm({
 		message: 'Hello!',
 	},
 })
-const errors = form.validate()
-console.info(errors.size) // ← 1
-console.info(errors.get('email')) // ← Invalid email format
+const { isValid, errors } = form.validate()
+console.info(Object.keys(errors).length) // ← 1
+console.info(errors.email) // ← Invalid email format
 ```
 ### Components
 
@@ -148,18 +148,37 @@ const frame = new Frame({
 const rendered = frame.render()
 console.info(rendered.includes('Frame content')) // ← true
 ```
-### Models
+### Domain Models (v1.9.0)
 
-UI models are plain data objects managed by `Model` classes.
+v1.9.0 introduces a comprehensive set of domain models for layout and components.
+These models follow the **Model-as-Schema** pattern.
 
-- `User` – user data
+#### Layout Models
+- `HeaderModel` — title, logo, navigation actions
+- `FooterModel` — copyright, version, social links
+- `HeroModel` — prominent call-to-action
 
-How to use a User model?
+#### Component Models
+- `PricingModel` — plans with features and prices
+- `CommentModel` & `TestimonialModel` — social proof
+- `StatsModel` — data visualizations
+- `TimelineModel` — event history
+
+How to use the new Header and Hero models?
 ```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
+const { HeaderModel, HeroModel } = Model
+const header = new HeaderModel({
+	title: 'NaN•Web',
+	logo: '/logo.svg',
+	actions: [{ title: 'Docs', href: '/docs' }],
+})
+const hero = new HeroModel({
+	title: 'One Logic — Many UI',
+	actions: [{ title: 'Get Started', href: '/start' }],
+})
+console.info(header.title) // ← NaN•Web
+console.info(hero.actions[0].title) // ← Get Started
 ```
 ### Testing UI
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nan0web/ui",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "NaN•Web UI. One application logic (algorithm) and many UI.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -8,6 +8,7 @@
   "files": [
     "src/**/*.js",
     "!src/**/*.test.js",
+    "!src/README.md.js",
     "types/**/*.d.ts"
   ],
   "exports": {
@@ -15,17 +16,10 @@
       "import": "./src/index.js",
       "types": "./types/index.d.ts"
     },
-    "./components": {
-      "import": "./src/Component/index.js",
-      "types": "./types/Component/index.d.ts"
-    },
-    "./core": {
-      "import": "./src/core/index.js",
-      "types": "./types/core/index.d.ts"
-    },
-    "./domain": {
-      "import": "./src/domain/index.js"
-    },
+    "./components": "./src/Component/index.js",
+    "./core": "./src/core/index.js",
+    "./domain": "./src/domain/index.js",
+    "./testing": "./src/testing/index.js",
     "./cli-app": "./apps/cli/src/index.js",
     "./mobile-app": "./apps/mobile/src/index.js",
     "./web-app": "./apps/web/src/App.jsx"
@@ -37,11 +31,12 @@
   "author": "YaRaSLove (ЯRаСлав) <support@yaro.page>",
   "license": "ISC",
   "devDependencies": {
-    "@nan0web/event": "*",
+    "@nan0web/event": "^1.0.1",
     "@nan0web/i18n": "^1.1.0",
     "@nan0web/release": "^1.0.2",
     "@nan0web/test": "^1.1.3",
-    "@nan0web/ui-cli": "^2.3.0",
+    "@nan0web/ui-cli": "^2.9.0",
+    "@nan0web/ui-lit": "^1.1.0",
     "@playwright/test": "^1.58.2",
     "@rollup/plugin-yaml": "^4.1.2",
     "@vitest/coverage-v8": "^3.2.4",
@@ -50,16 +45,14 @@
     "knip": "^5.86.0",
     "lit": "^3.3.2",
     "vite": "^6.4.1",
-    "vitest": "^3.2.4",
-    "@nan0web/ui-lit": "1.1.0"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@nan0web/co": "^2.0.0",
-    "@nan0web/event": "^1.0.1",
     "@nan0web/log": "^1.1.1",
     "@nan0web/types": "^1.4.0",
     "string-width": "^7.2.0",
-    "@nan0web/core": "1.1.1"
+    "@nan0web/core": "1.1.2"
   },
   "scripts": {
     "build": "tsc",
@@ -74,10 +67,13 @@
     "test:release": "node --test \"releases/**/*.test.js\"",
     "test:status": "nan0test status --hide-name",
     "test:play": "node --test --test-timeout=3333 \"play/**/*.test.js\"",
-    "test:ssg": "node --test --test-timeout=5000 \"ssg/ssg.test.js\"",
-    "test:e2e": "playwright test --ignore-snapshots e2e/components.spec.js e2e/debug-label.spec.js",
-    "test:e2e:slow": "E2E_SLOW=1 playwright test e2e/visual.spec.js",
-    "test:all": "npm run test && npm run test:docs && npm run test:play && npm run test:e2e && npm run knip",
+    "test:snapshots": "node src/testing/GalleryGenerator.js",
+    "test:gallery": "npm run test:snapshots && npx nan0gallery --dir=snapshots/core",
+    "test:audit": "node --test src/test/gallery_audit.test.js",
+    "test:ssg": "node --test --test-timeout=5000 \"src/test/ssg.test.js\"",
+    "test:e2e": "playwright test --ignore-snapshots test/e2e/components.spec.js test/e2e/debug-label.spec.js",
+    "test:e2e:slow": "E2E_SLOW=1 playwright test test/e2e/visual.spec.js",
+    "test:all": "npm run test && npm run test:docs && npm run test:play && npm run test:gallery && npm run test:audit && npm run test:e2e && npm run knip",
     "knip": "knip --production",
     "precommit": "npm test",
     "prepush": "npm test",

package/src/Model/index.js

@@ -1,7 +1,36 @@
 import User from './User/User.js'
+import * as DomainModels from '../domain/index.js'
 
-export { User }
-
-export default {
+const Model = {
 	User,
+	...DomainModels,
 }
+
+export { User }
+export const {
+	HeaderModel,
+	FooterModel,
+	HeroModel,
+	ButtonModel,
+	ConfirmModel,
+	InputModel,
+	SpinnerModel,
+	TableModel,
+	ToastModel,
+	SelectModel,
+	AutocompleteModel,
+	TreeModel,
+	TabsModel,
+	AccordionModel,
+	GalleryModel,
+	PriceModel,
+	PricingModel,
+	CommentModel,
+	TestimonialModel,
+	StatsItemModel,
+	StatsModel,
+	TimelineItemModel,
+	TimelineModel,
+} = DomainModels
+
+export default Model

package/src/core/Form/Form.js

@@ -106,10 +106,11 @@ export default class UIForm extends FormMessage {
 	/**
 	 * Validates the entire form.
 	 *
-	 * @returns {Map<string, string>} Map of validation errors, empty if valid.
+	 * @returns {any}
 	 */
 	validate() {
-		const errors = new Map()
+		/** @type {any} */
+		const errors = {}
 		let isValid = true
 
 		this.fields.forEach((field) => {
@@ -120,7 +121,7 @@ export default class UIForm extends FormMessage {
 				field.required &&
 				(fieldValue === '' || fieldValue === null || fieldValue === undefined)
 			) {
-				errors.set(field.name, 'This field is required')
+				errors[field.name] = 'This field is required'
 				isValid = false
 				return
 			}
@@ -132,14 +133,12 @@ export default class UIForm extends FormMessage {
 			)
 
 			if (!fieldValid) {
-				for (const [key, err] of Object.entries(fieldErrors)) {
-					errors.set(key, err)
-				}
+				Object.assign(errors, fieldErrors)
 				isValid = false
 			}
 		})
 
-		return errors
+		return { isValid, errors }
 	}
 
 	/**
@@ -239,6 +238,8 @@ export default class UIForm extends FormMessage {
 	 */
 	toJSON() {
 		return {
+			id: this.id,
+			type: this.type,
 			time: new Date(this.time).toISOString(),
 			title: this.title,
 			fields: this.fields.map((f) => (f.toJSON ? f.toJSON() : f)),

package/src/core/Form/Message.js

@@ -14,7 +14,7 @@ export default class FormMessage extends UiMessage {
 	 * @param {Object} [input={}] - Message properties.
 	 */
 	constructor(input = {}) {
-		super(input)
+		super({ type: 'form', ...input })
 		const { data = {}, schema = {} } = input
 
 		// Store data and schema for easy access

package/src/core/GeneratorRunner.js

@@ -23,6 +23,8 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  *   Handler for 'progress' intents. Optional (defaults to no-op).
  * @property {(intent: import('./Intent.js').LogIntent) => void | Promise<void>} [log]
  *   Handler for 'log' intents. Optional (defaults to no-op).
+ * @property {(intent: import('./Intent.js').RenderIntent) => void | Promise<void>} [render]
+ *   Handler for 'render' intents (visual component injection). Optional.
  * @property {(intent: import('./Intent.js').ResultIntent) => void | Promise<void>} [result]
  *   Handler for the final 'result'. Optional (defaults to no-op).
  */
@@ -206,6 +208,14 @@ export async function runGenerator(generator, handlers, options = {}) {
 				break
 			}
 
+			case 'render': {
+				if (handlers.render) {
+					await handlers.render(intent)
+				}
+				nextVal = undefined
+				break
+			}
+
 			default:
 				throw IntentErrorModel.error('unhandled_intent', { type: /** @type {any} */ (intent).type })
 		}

package/src/core/Intent.js

@@ -58,9 +58,18 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @property {*} data - The raw result data (JSON-serializable).
  */
 
+/**
+ * Model requests rendering of a pure UI component (Header, Footer, Static Map).
+ * No response expected from the logic loop.
+ * @typedef {Object} RenderIntent
+ * @property {'render'} type
+ * @property {string} component - Component name (e.g. 'App.Layout.Header').
+ * @property {object} props - Static props for the component.
+ */
+
 /**
  * Union of all possible yielded intents.
- * @typedef {AskIntent | ProgressIntent | LogIntent} Intent
+ * @typedef {AskIntent | ProgressIntent | LogIntent | RenderIntent} Intent
  */
 
 // ─── Response Types (Adapter → Model) ───
@@ -95,7 +104,7 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @typedef {AskResponse | AbortResponse | undefined} IntentResponse
  */
 
-export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'log'])
+export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'log', 'render'])
 
 /**
  * Detects if a value is a Model-as-Schema class (has static fields with `help`).
@@ -131,17 +140,23 @@ export function validateIntent(intent) {
 		if (typeof intent.field !== 'string' || !intent.field) {
 			throw IntentErrorModel.error('ask_missing_field')
 		}
-		// Accept both: plain schema {help: '...'} and Model-as-Schema class
-		const isModel = intent.model === true
+		// Accept both: plain schema {help: '...'} and Model-as-Schema class/instance
+		const isModel = !!intent.model
 		if (!isModel && (!intent.schema || typeof intent.schema !== 'object' || !('help' in intent.schema))) {
 			throw IntentErrorModel.error('ask_missing_schema_help')
 		}
 	}
 	if (intent.type === 'progress' || intent.type === 'log') {
-		if (typeof intent.message !== 'string') {
+		const isComponentLog = intent.type === 'log' && intent.component
+		if (!isComponentLog && typeof intent.message !== 'string') {
 			throw IntentErrorModel.error('intent_missing_message', { type: intent.type })
 		}
 	}
+	if (intent.type === 'render') {
+		if (typeof intent.component !== 'string' || !intent.component) {
+			throw IntentErrorModel.error('render_missing_component')
+		}
+	}
 	return true
 }
 
@@ -165,4 +180,5 @@ export const ask = (field, schema) => {
 
 export const progress = (message) => ({ type: 'progress', message })
 export const log = (level, message, data = {}) => ({ type: 'log', level, message, ...data })
+export const render = (component, props = {}) => ({ type: 'render', component, props })
 export const result = (data) => ({ type: 'result', data })

package/src/core/IntentErrorModel.js

@@ -39,7 +39,12 @@ export class IntentErrorModel {
 
 	static intent_missing_message = {
 		help: 'Progress and Log intents require a message',
-		error: '\'{type}\' intent requires a "message" string',
+		error: "'{type}' intent requires a \"message\" string",
+	}
+
+	static render_missing_component = {
+		help: 'Render intent requires a component name',
+		error: 'Render intent requires a non-empty "component" string',
 	}
 
 	// ─── Runner Contract Errors ───

package/src/core/Stream.js

@@ -44,19 +44,30 @@ export default class UIStream {
 	static async process(signal, generatorFn, onProgress, onError, onComplete) {
 		const iter = generatorFn()
 
+		/** @type {Promise<never>} */
+		const abortPromise = new Promise((_, reject) => {
+			const onAbort = () => reject(new DOMException('The operation was aborted', 'AbortError'))
+			if (signal.aborted) return onAbort()
+			signal.addEventListener('abort', onAbort, { once: true })
+		})
+
 		try {
-			for await (const item of iter) {
-				if (signal.aborted) {
-					throw new DOMException('Aborted', 'AbortError')
+			while (true) {
+				const { value: item, done } = await Promise.race([iter.next(), abortPromise])
+
+				if (done) {
+					if (item) onComplete?.(item)
+					break
 				}
 
 				if (item.done) {
 					onComplete?.(item)
 					break
-				} else if (item.error) {
+				}
+
+				if (item.error) {
 					onError?.(item.error, item)
 				} else {
-					// Intermediate results
 					onProgress?.(null, item)
 				}
 			}

package/src/core/index.js

@@ -41,7 +41,7 @@ export {
 export { default as Flow } from './Flow.js'
 
 // OLMUI Generator Engine — Intent-based Model→Adapter contract
-export { validateIntent, ask, progress, log, result, INTENT_TYPES, isModelSchema } from './Intent.js'
+export { validateIntent, ask, progress, log, render, result, INTENT_TYPES, isModelSchema } from './Intent.js'
 export { IntentErrorModel } from './IntentErrorModel.js'
 export { runGenerator } from './GeneratorRunner.js'
 

package/src/domain/FooterModel.js

@@ -0,0 +1,57 @@
+import { Model } from '@nan0web/types'
+import Navigation from './Navigation.js'
+
+/**
+ * FooterModel — OLMUI Model-as-Schema
+ * Universal footer structure: copyright, version, license, navigation, sharing, languages.
+ */
+export default class FooterModel extends Model {
+	static $id = '@nan0web/ui/FooterModel'
+
+	static copyright = {
+		help: 'Copyright text',
+		placeholder: '© 2026 Company',
+		default: '',
+	}
+	static version = {
+		help: 'Application version string',
+		placeholder: '1.0.0',
+		default: '',
+	}
+	static license = {
+		help: 'License type',
+		placeholder: 'ISC',
+		default: '',
+	}
+	static nav = {
+		help: 'Footer navigation links',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+	static share = {
+		help: 'Social sharing links',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+	static langs = {
+		help: 'Available languages for switcher',
+		type: 'Language[]',
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<FooterModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Copyright text */ this.copyright
+		/** @type {string} Application version string */ this.version
+		/** @type {string} License type */ this.license
+		/** @type {Navigation[]} Footer navigation links */ this.nav
+		/** @type {Navigation[]} Social sharing links */ this.share
+		/** @type {any[]} Available languages for switcher */ this.langs
+	}
+}

package/src/domain/HeaderModel.js

@@ -0,0 +1,50 @@
+import { Model } from '@nan0web/types'
+import Navigation from './Navigation.js'
+
+/**
+ * HeaderModel — OLMUI Model-as-Schema
+ * Universal header structure: logo, navigation, language switcher, actions.
+ */
+export default class HeaderModel extends Model {
+	static $id = '@nan0web/ui/HeaderModel'
+
+	static title = {
+		help: 'Site or app title displayed in the header',
+		placeholder: 'My App',
+		default: '',
+	}
+	static logo = {
+		help: 'Logo image URL or icon name',
+		placeholder: 'https://...',
+		default: '',
+	}
+	static actions = {
+		help: 'Header action links (CTA, Sign In, etc.)',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+	static lang = {
+		help: 'Currently active language',
+		type: 'Language',
+		default: null,
+	}
+	static langs = {
+		help: 'Available languages for switcher',
+		type: 'Language[]',
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<HeaderModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Site or app title displayed in the header */ this.title
+		/** @type {string} Logo image URL or icon name */ this.logo
+		/** @type {Navigation[]} Header action links (CTA, Sign In, etc.) */ this.actions
+		/** @type {any|null} Currently active language */ this.lang
+		/** @type {any[]} Available languages for switcher */ this.langs
+	}
+}

package/src/domain/HeroModel.js

@@ -0,0 +1,48 @@
+import { Model } from '@nan0web/types'
+import Navigation from './Navigation.js'
+
+/**
+ * HeroModel — OLMUI Model-as-Schema
+ * Universal hero/banner section for landing pages.
+ * Uses Navigation[] for actions instead of a single CTA.
+ */
+export default class HeroModel extends Model {
+	static $id = '@nan0web/ui/HeroModel'
+
+	static title = {
+		help: 'Hero main headline',
+		placeholder: 'Welcome to Our Platform',
+		default: '',
+		required: true,
+	}
+	static description = {
+		help: 'Hero sub-headline or description text',
+		placeholder: 'Build something amazing...',
+		default: '',
+	}
+	static image = {
+		help: 'Hero background or feature image URL',
+		placeholder: 'https://...',
+		hint: 'image',
+		upload: true,
+		default: '',
+	}
+	static actions = {
+		help: 'Call-to-action buttons (multiple CTA support)',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<HeroModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Hero main headline */ this.title
+		/** @type {string} Hero sub-headline or description text */ this.description
+		/** @type {string} Hero background or feature image URL */ this.image
+		/** @type {Navigation[]} Call-to-action buttons (multiple CTA support) */ this.actions
+	}
+}

package/src/domain/Navigation.js

@@ -1,4 +1,4 @@
-import { Model } from '@nan0web/core'
+import { Model } from '@nan0web/types'
 
 /**
  * Navigation Model — OLMUI Model-as-Schema
@@ -41,16 +41,17 @@ export default class Navigation extends Model {
 	}
 
 	/**
-	 * @param {Partial<Navigation>} data
+	 * @param {Partial<Navigation> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.title
-		/** @type {string|undefined} */ this.href
-		/** @type {string|undefined} */ this.icon
-		/** @type {string|undefined} */ this.image
-		/** @type {Navigation[]|undefined} */ this.children
-		/** @type {boolean|undefined} */ this.hidden
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Label for the menu item */ this.title
+		/** @type {string} URL or internal app route */ this.href
+		/** @type {string} Icon name/ID */ this.icon
+		/** @type {string} Display image or thumbnail */ this.image
+		/** @type {Navigation[]} Nested sub-menu navigation */ this.children
+		/** @type {boolean} Hide from lists/menus */ this.hidden
 
 		if (this.children) {
 			this.children = this.children.map((item) => new Navigation(item))