@nan0web/ui 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nan0web/ui",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "NaN•Web UI. One application logic (algorithm) and many UI.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -37,11 +37,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,15 +51,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"
+    "string-width": "^7.2.0",
+    "@nan0web/core": "1.1.2"
   },
   "scripts": {
     "build": "tsc",
@@ -73,9 +73,9 @@
     "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: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:e2e && npm run knip",
     "knip": "knip --production",
     "precommit": "npm test",

package/src/core/Intent.js

@@ -131,14 +131,15 @@ 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 })
 		}
 	}

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

@@ -0,0 +1,60 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * Navigation Model — OLMUI Model-as-Schema
+ * Generic recursive navigation structure for all UI platforms (CLI, Web, Mobile).
+ */
+export default class Navigation extends Model {
+	static $id = '@nan0web/ui/Navigation'
+
+	static title = {
+		help: 'Label for the menu item',
+		placeholder: 'Home',
+		default: '',
+		required: true,
+	}
+	static href = {
+		help: 'URL or internal app route',
+		placeholder: '/',
+		default: '#',
+	}
+	static icon = {
+		help: 'Icon name/ID',
+		placeholder: 'home',
+		default: '',
+	}
+	static image = {
+		help: 'Display image or thumbnail',
+		placeholder: 'https://...',
+		default: '',
+	}
+	static children = {
+		help: 'Nested sub-menu navigation',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+	static hidden = {
+		help: 'Hide from lists/menus',
+		type: 'boolean',
+		default: false,
+	}
+
+	/**
+	 * @param {Partial<Navigation> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	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))
+		}
+	}
+}

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,
-				}
+				},
 			}
 		}
 	}