@nan0web/ui 1.9.0 → 1.11.0

package/src/domain/Content.js

@@ -0,0 +1,196 @@
+import { Model } from '@nan0web/types'
+
+/** 
+ * @typedef {Object} HTML5Elements
+ * @property {string|ContentData[]} [a]
+ * @property {string|ContentData[]} [abbr]
+ * @property {string|ContentData[]} [address]
+ * @property {string|ContentData[]} [area]
+ * @property {string|ContentData[]} [article]
+ * @property {string|ContentData[]} [aside]
+ * @property {string|ContentData[]} [audio]
+ * @property {string|ContentData[]} [b]
+ * @property {string|ContentData[]} [base]
+ * @property {string|ContentData[]} [bdi]
+ * @property {string|ContentData[]} [bdo]
+ * @property {string|ContentData[]} [blockquote]
+ * @property {string|ContentData[]} [body]
+ * @property {boolean|object} [br]
+ * @property {string|ContentData[]} [canvas]
+ * @property {string|ContentData[]} [caption]
+ * @property {string|ContentData[]} [cite]
+ * @property {string|ContentData[]} [code]
+ * @property {string|ContentData[]} [col]
+ * @property {string|ContentData[]} [colgroup]
+ * @property {string|ContentData[]} [data]
+ * @property {string|ContentData[]} [datalist]
+ * @property {string|ContentData[]} [dd]
+ * @property {string|ContentData[]} [del]
+ * @property {string|ContentData[]} [details]
+ * @property {string|ContentData[]} [dfn]
+ * @property {string|ContentData[]} [dialog]
+ * @property {string|ContentData[]} [div]
+ * @property {string|ContentData[]} [dl]
+ * @property {string|ContentData[]} [dt]
+ * @property {string|ContentData[]} [em]
+ * @property {string|ContentData[]} [embed]
+ * @property {string|ContentData[]} [fieldset]
+ * @property {string|ContentData[]} [figcaption]
+ * @property {string|ContentData[]} [figure]
+ * @property {string|ContentData[]} [footer]
+ * @property {string|ContentData[]} [form]
+ * @property {string|ContentData[]} [h1]
+ * @property {string|ContentData[]} [h2]
+ * @property {string|ContentData[]} [h3]
+ * @property {string|ContentData[]} [h4]
+ * @property {string|ContentData[]} [h5]
+ * @property {string|ContentData[]} [h6]
+ * @property {string|ContentData[]} [head]
+ * @property {string|ContentData[]} [header]
+ * @property {string|ContentData[]} [hgroup]
+ * @property {boolean|object} [hr]
+ * @property {string|ContentData[]} [html]
+ * @property {string|ContentData[]} [i]
+ * @property {string|ContentData[]} [iframe]
+ * @property {string|ContentData[]} [img]
+ * @property {string|ContentData[]} [ins]
+ * @property {string|ContentData[]} [kbd]
+ * @property {string|ContentData[]} [label]
+ * @property {string|ContentData[]} [legend]
+ * @property {string|ContentData[]} [li]
+ * @property {string|ContentData[]} [link]
+ * @property {string|ContentData[]} [main]
+ * @property {string|ContentData[]} [map]
+ * @property {string|ContentData[]} [mark]
+ * @property {string|ContentData[]} [meta]
+ * @property {string|ContentData[]} [meter]
+ * @property {boolean|any} [input]
+ * @property {boolean|any} [button]
+ * @property {boolean|any} [select]
+ * @property {string|ContentData[]} [nav]
+ * @property {string|ContentData[]} [noscript]
+ * @property {string|ContentData[]} [object]
+ * @property {string|ContentData[]} [ol]
+ * @property {string|ContentData[]} [optgroup]
+ * @property {string|ContentData[]} [option]
+ * @property {string|ContentData[]} [output]
+ * @property {string|ContentData[]} [p]
+ * @property {string|ContentData[]} [picture]
+ * @property {string|ContentData[]} [pre]
+ * @property {string|ContentData[]} [progress]
+ * @property {string|ContentData[]} [q]
+ * @property {string|ContentData[]} [rp]
+ * @property {string|ContentData[]} [rt]
+ * @property {string|ContentData[]} [ruby]
+ * @property {string|ContentData[]} [s]
+ * @property {string|ContentData[]} [samp]
+ * @property {string|ContentData[]} [script]
+ * @property {string|ContentData[]} [section]
+ * @property {string|ContentData[]} [slot]
+ * @property {string|ContentData[]} [small]
+ * @property {string|ContentData[]} [source]
+ * @property {string|ContentData[]} [span]
+ * @property {string|ContentData[]} [strong]
+ * @property {string|ContentData[]} [style]
+ * @property {string|ContentData[]} [sub]
+ * @property {string|ContentData[]} [summary]
+ * @property {string|ContentData[]} [sup]
+ * @property {string|ContentData[]} [table]
+ * @property {string|ContentData[]} [tbody]
+ * @property {string|ContentData[]} [td]
+ * @property {string|ContentData[]} [template]
+ * @property {string|ContentData[]} [textarea]
+ * @property {string|ContentData[]} [tfoot]
+ * @property {string|ContentData[]} [th]
+ * @property {string|ContentData[]} [thead]
+ * @property {string|ContentData[]} [time]
+ * @property {string|ContentData[]} [title]
+ * @property {string|ContentData[]} [tr]
+ * @property {string|ContentData[]} [track]
+ * @property {string|ContentData[]} [u]
+ * @property {string|ContentData[]} [ul]
+ * @property {string|ContentData[]} [var]
+ * @property {string|ContentData[]} [video]
+ * @property {string|ContentData[]} [wbr]
+ * @property {string|ContentData[]} [svg]
+ * @property {string|ContentData[]} [path]
+ * @property {string|ContentData[]} [circle]
+ * @property {string|ContentData[]} [rect]
+ * @property {string|ContentData[]} [line]
+ * @property {string|ContentData[]} [polyline]
+ * @property {string|ContentData[]} [polygon]
+ * @property {string|ContentData[]} [g]
+ * @property {string|ContentData[]} [defs]
+ * @property {string|ContentData[]} [symbol]
+ * @property {string|ContentData[]} [use]
+ * @property {string|ContentData[]} [text]
+ */
+
+/** 
+ * @typedef {Object} CoreUIElements
+ * @property {import('./components/AccordionModel.js').AccordionModel} [accordion]
+ * @property {import('./components/AutocompleteModel.js').AutocompleteModel} [autocomplete]
+ * @property {import('./components/BannerModel.js').BannerModel} [banner]
+ * @property {import('./components/BreadcrumbModel.js').BreadcrumbModel} [breadcrumb]
+ * @property {import('./components/ButtonModel.js').ButtonModel} [button]
+ * @property {import('./components/CommentModel.js').CommentModel} [comment]
+ * @property {import('./components/ConfirmModel.js').ConfirmModel} [confirm]
+ * @property {import('./components/EmptyStateModel.js').EmptyStateModel} [emptyState]
+ * @property {import('./components/FAQModel.js').FAQModel} [faq]
+ * @property {import('./components/FeatureGridModel.js').FeatureGridModel} [featureGrid]
+ * @property {import('./components/GalleryModel.js').GalleryModel} [gallery]
+ * @property {import('./components/InputModel.js').InputModel} [input]
+ * @property {import('./components/MarkdownModel.js').MarkdownModel} [markdown]
+ * @property {import('./components/PriceModel.js').PriceModel} [price]
+ * @property {import('./components/PricingModel.js').PricingModel} [pricing]
+ * @property {import('./components/PricingSectionModel.js').PricingSectionModel} [pricingSection]
+ * @property {import('./components/ProfileDropdownModel.js').ProfileDropdownModel} [profileDropdown]
+ * @property {import('./components/SelectModel.js').SelectModel} [select]
+ * @property {import('./components/ShellModel.js').ShellModel} [shell]
+ * @property {import('./components/SpinnerModel.js').SpinnerModel} [spinner]
+ * @property {import('./components/StatsItemModel.js').StatsItemModel} [statsItem]
+ * @property {import('./components/StatsModel.js').StatsModel} [stats]
+ * @property {import('./components/TableModel.js').TableModel} [tableUI]
+ * @property {import('./components/TabsModel.js').TabsModel} [tabs]
+ * @property {import('./components/TestimonialModel.js').TestimonialModel} [testimonial]
+ * @property {import('./components/TimelineItemModel.js').TimelineItemModel} [timelineItem]
+ * @property {import('./components/TimelineModel.js').TimelineModel} [timeline]
+ * @property {import('./components/ToastModel.js').ToastModel} [toast]
+ * @property {import('./components/TreeModel.js').TreeModel} [tree]
+ * @property {ContentData[]} [sortable] - Інтерактивний Drag-n-Drop контейнер
+ */
+
+/** 
+ * @typedef {Partial<Content & HTML5Elements & CoreUIElements> & Record<string, any>} ContentData 
+ */
+
+export class Content extends Model {
+	static content = { type: 'string', help: 'Content' }
+	static children = { type: 'array', model: Content, help: 'Children' }
+
+	/**
+	 * @param {ContentData | string} [data={}]
+	 * @param {import('@nan0web/types').ModelOptions} [options={}]
+	 */
+	constructor(data = {}, options = {}) {
+		if ('string' === typeof data) {
+			data = { content: data }
+		}
+		super(data, options)
+
+		// ── Base Fields ──
+		/** @type {string|undefined} Content */ this.content
+		/** @type {Array<Content>|undefined} Children */ this.children
+
+		// ── Hydration ──
+		if (Array.isArray(this.children)) {
+			this.children = this.children.map((child) => new Content(child, options))
+		}
+
+		const { content, children, ...rest } = /** @type {any} */ (data)
+
+		for (const [key, value] of Object.entries(rest)) {
+			/** @type {any} */ (this)[key] = value
+		}
+	}
+}

package/src/domain/Document.js

@@ -0,0 +1,17 @@
+import { Model } from '@nan0web/types'
+import { Content } from './Content.js'
+
+export class Document extends Model {
+	static title = { type: 'string', help: 'Title' }
+	static content = { type: 'array', model: Content, help: 'Content' }
+	/**
+	 *
+	 * @param {Partial<Document>} [data]
+	 * @param {import('@nan0web/types').ModelOptions} [options]
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Title */ this.title
+		/** @type {Array<Content>} Content */ this.content
+	}
+}

package/src/domain/FooterModel.js

@@ -1,30 +1,31 @@
 import { Model } from '@nan0web/types'
+import { Language } from '@nan0web/i18n'
 import Navigation from './Navigation.js'
 
 /**
- * FooterModel — OLMUI Model-as-Schema
- * Universal footer structure: copyright, version, license, navigation, sharing, languages.
+ * FooterModel — OLMUI Component Model
+ * Universal footer structure.
  */
-export default class FooterModel extends Model {
+export class FooterModel extends Model {
 	static $id = '@nan0web/ui/FooterModel'
 
 	static copyright = {
-		help: 'Copyright text',
-		placeholder: '© 2026 Company',
+		help: 'Copyright notice text',
+		placeholder: '© 2026 My Site',
 		default: '',
 	}
 	static version = {
-		help: 'Application version string',
+		help: 'App version to display',
 		placeholder: '1.0.0',
 		default: '',
 	}
 	static license = {
-		help: 'License type',
+		help: 'License name or link',
 		placeholder: 'ISC',
 		default: '',
 	}
 	static nav = {
-		help: 'Footer navigation links',
+		help: 'Terms of Service, Privacy Policy, etc.',
 		type: 'Navigation[]',
 		hint: Navigation,
 		default: [],
@@ -35,23 +36,40 @@ export default class FooterModel extends Model {
 		hint: Navigation,
 		default: [],
 	}
+	static lang = {
+		help: 'Active language',
+		default: null,
+	}
 	static langs = {
-		help: 'Available languages for switcher',
+		help: 'Languages for switcher',
 		type: 'Language[]',
+		hint: Language,
 		default: [],
 	}
 
 	/**
-	 * @param {Partial<FooterModel> | Record<string, any>} data Model input data.
-	 * @param {object} [options] Extended options (db, etc.)
+	 * @param {Partial<FooterModel>} data
 	 */
-	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
+	constructor(data = {}) {
+		super(data)
+		/** @type {string} */ this.copyright
+		/** @type {string} */ this.version
+		/** @type {string} */ this.license
+		/** @type {Navigation[]} */
+		this.nav = this.#map(this.nav)
+		/** @type {Navigation[]} */
+		this.share = this.#map(this.share)
+		/** @type {Language|null} */
+		this.lang = this.lang && !(this.lang instanceof Language) ? new Language(this.lang) : this.lang
+		/** @type {Language[]} */
+		this.langs = Array.isArray(this.langs)
+			? this.langs.map((l) => (l instanceof Language ? l : new Language(l)))
+			: []
+	}
+
+	#map(arr) {
+		return Array.isArray(arr)
+			? arr.map((i) => (i instanceof Navigation ? i : new Navigation(i)))
+			: []
 	}
 }

package/src/domain/HeaderModel.js

@@ -2,49 +2,75 @@ import { Model } from '@nan0web/types'
 import Navigation from './Navigation.js'
 
 /**
- * HeaderModel — OLMUI Model-as-Schema
- * Universal header structure: logo, navigation, language switcher, actions.
+ * HeaderModel — OLMUI Component Model
+ * Universal header structure with logo, navigation, and language controls.
  */
-export default class HeaderModel extends Model {
+export class HeaderModel extends Model {
 	static $id = '@nan0web/ui/HeaderModel'
 
 	static title = {
-		help: 'Site or app title displayed in the header',
-		placeholder: 'My App',
+		help: 'Header title text',
+		placeholder: 'My Site',
 		default: '',
 	}
 	static logo = {
-		help: 'Logo image URL or icon name',
-		placeholder: 'https://...',
+		help: 'Primary logo path',
+		placeholder: 'logo.svg',
 		default: '',
 	}
+	static logoDark = {
+		help: 'Dark theme logo path',
+		placeholder: 'logo-dark.svg',
+		default: '',
+	}
+	static nav = {
+		help: 'Main navigation links',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
 	static actions = {
-		help: 'Header action links (CTA, Sign In, etc.)',
+		help: 'CTA or specific header actions',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+	static share = {
+		help: 'Social sharing or utility links',
 		type: 'Navigation[]',
 		hint: Navigation,
 		default: [],
 	}
 	static lang = {
-		help: 'Currently active language',
-		type: 'Language',
+		help: 'Active language code or object',
 		default: null,
 	}
 	static langs = {
-		help: 'Available languages for switcher',
-		type: 'Language[]',
+		help: 'Available languages',
 		default: [],
 	}
 
 	/**
-	 * @param {Partial<HeaderModel> | Record<string, any>} data Model input data.
-	 * @param {object} [options] Extended options (db, etc.)
+	 * @param {Partial<HeaderModel>} data
 	 */
-	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
+	constructor(data = {}) {
+		super(data)
+		/** @type {string} */ this.title
+		/** @type {string} */ this.logo
+		/** @type {string} */ this.logoDark
+		/** @type {Navigation[]} */ 
+		this.nav = this.#map(this.nav)
+		/** @type {Navigation[]} */
+		this.actions = this.#map(this.actions)
+		/** @type {Navigation[]} */
+		this.share = this.#map(this.share)
+		/** @type {any} */
+		this.lang = this.lang
+		/** @type {any[]} */
+		this.langs = Array.isArray(this.langs) ? this.langs : []
+	}
+
+	#map(arr) {
+		return Array.isArray(arr) ? arr.map(i => i instanceof Navigation ? i : new Navigation(i)) : []
 	}
 }

package/src/domain/HeroModel.js

@@ -2,47 +2,49 @@ 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.
+ * HeroModel — OLMUI Component Model
+ * Represents the top presentation section of a page.
  */
-export default class HeroModel extends Model {
+export class HeroModel extends Model {
 	static $id = '@nan0web/ui/HeroModel'
 
+	static badge = {
+		help: 'Top small badge text or icon',
+		placeholder: 'v1.4.0 out now',
+		default: '',
+	}
 	static title = {
-		help: 'Hero main headline',
-		placeholder: 'Welcome to Our Platform',
+		help: 'Hero heading',
+		placeholder: 'Build Amazing Apps',
 		default: '',
 		required: true,
 	}
-	static description = {
-		help: 'Hero sub-headline or description text',
-		placeholder: 'Build something amazing...',
+	static subtitle = {
+		help: 'Hero secondary text',
+		placeholder: 'The open architecture for the next web.',
 		default: '',
 	}
-	static image = {
-		help: 'Hero background or feature image URL',
-		placeholder: 'https://...',
-		hint: 'image',
-		upload: true,
+	static code = {
+		help: 'Code snippet or secondary markup',
 		default: '',
 	}
 	static actions = {
-		help: 'Call-to-action buttons (multiple CTA support)',
+		help: 'CTA buttons',
 		type: 'Navigation[]',
-		hint: Navigation,
+		model: Navigation,
 		default: [],
 	}
 
 	/**
-	 * @param {Partial<HeroModel> | Record<string, any>} data Model input data.
-	 * @param {object} [options] Extended options (db, etc.)
+	 * @param {Partial<HeroModel | Record<string, any>>} [data={}]
+	 * @param {import('@nan0web/types').ModelOptions} [options={}]
 	 */
 	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
+		/** @type {string} Top small badge text ior icon */ this.badge
+		/** @type {string} Hero heading */ this.title
+		/** @type {string} Hero secondary text */ this.subtitle
+		/** @type {string} Code snippet or secondary markup */ this.code
+		/** @type {Navigation[]} CTA buttons */ this.actions
 	}
 }

package/src/domain/LayoutModel.js

@@ -0,0 +1,43 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * @typedef {'flow'|'sticky-bottom'|'sticky-top'|'dialog-modal'|'spatial-xyz'} LayoutType
+ */
+
+/**
+ * Universal Layout Interface for OLMUI.
+ * Defines the semantic spatial placement of a component in any renderer.
+ */
+export class LayoutModel extends Model {
+	static type = {
+		help: 'Base layout type',
+		default: 'flow',
+		options: [
+			{ value: 'flow', label: 'Inline Flow' },
+			{ value: 'sticky-bottom', label: 'Sticky Bottom' },
+			{ value: 'sticky-top', label: 'Sticky Top' },
+			{ value: 'dialog-modal', label: 'Modal / Dialog' },
+			{ value: 'spatial-xyz', label: 'Spatial XYZ Coordinates' }
+		]
+	}
+
+	static coordinates = {
+		help: 'Physical, screen, or audio coordinates if type requires it',
+		default: null,
+		type: 'object'
+	}
+
+	/**
+	 * Creates a new LayoutModel instance to define spatial placement.
+	 * @param {Partial<LayoutModel> | Record<string, any>} [data] Input model data.
+	 * @param {object} [options] Model options.
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {LayoutType} Base layout type */
+		this.type
+		
+		/** @type {object | null} Configuration or specific layout parameters */
+		this.coordinates
+	}
+}

package/src/domain/ModelAsApp.js

@@ -0,0 +1,46 @@
+import { Model } from '@nan0web/types'
+import { result } from '../core/Intent.js'
+import { InputAdapter } from '../core/InputAdapter.js'
+
+/** @typedef {import('@nan0web/types').ModelOptions & { adapter: InputAdapter }} ModelAsAppOptions */
+
+/**
+ * The model with a run generator.
+ */
+export class ModelAsApp extends Model {
+	/** @type {ModelAsAppOptions} */
+	#appOptions = {
+		t: (key) => key,
+		plugins: {},
+		adapter: null,
+	}
+	/**
+	 * @param {Partial<ModelAsApp> | Record<string, any>} [data={}]
+	 * @param {ModelAsAppOptions} [options={}]
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		this.#appOptions = {
+			...options,
+			t:
+				options.t ||
+				((key, props = {}) =>
+					String(key)
+						.replace(/{(\w+)}/g, (_, x) => props[x] ?? `{${x}}`)
+						.replace(/_/g, ' ')),
+			plugins: options.plugins || {},
+			adapter: options.adapter || new InputAdapter(),
+		}
+	}
+
+	/** @returns {ModelAsAppOptions} */
+	get _() {
+		return this.#appOptions
+	}
+	/**
+	 * @returns {AsyncGenerator<import('@nan0web/ui').Intent, import('@nan0web/ui').ResultIntent, any>}
+	 */
+	async *run() {
+		return result({})
+	}
+}

package/src/domain/SandboxModel.js

@@ -1,5 +1,6 @@
 import { Model } from '@nan0web/types'
 import { BreadcrumbModel } from './components/BreadcrumbModel.js'
+import { show, result, ask } from '../core/Intent.js'
 
 /**
  * SandboxModel — OLMUI Model-as-Schema
@@ -8,8 +9,19 @@ import { BreadcrumbModel } from './components/BreadcrumbModel.js'
 export class SandboxModel extends Model {
 	static $id = '@nan0web/ui/SandboxModel'
 
+	static UI = {
+		breadcrumb: '\n{path}',
+		componentsHelp: 'List of registered UI components available for inspection',
+		selectedComponentHelp: 'The component currently being inspected in the sandbox',
+		selectedComponentPlaceholder: 'Button',
+		themeFormatHelp: 'The file format chosen to export the custom theme configuration',
+		selectComponentHelp: 'Select a component to inspect',
+		configurePropertiesHelp: 'Configure {component} properties',
+		exportFormatHelp: 'Choose export format',
+	}
+
 	static components = {
-		help: 'List of registered UI components available for inspection',
+		help: SandboxModel.UI.componentsHelp,
 		type: 'string[]',
 		default: [],
 	}
@@ -52,13 +64,10 @@ export class SandboxModel extends Model {
 
 			if (!this.selectedComponent) {
 				// Show breadcrumb
-				yield {
-					type: 'log',
-					level: 'info',
-					message: `\n${nav}`,
+				yield show(this._.t(SandboxModel.UI.breadcrumb, { path: String(nav) }), 'info', {
 					component: 'Breadcrumbs',
 					model: nav,
-				}
+				})
 
 				const response = yield {
 					type: 'ask',
@@ -79,13 +88,10 @@ export class SandboxModel extends Model {
 			// 2. Component Configuration Mode
 			let configResponse
 			try {
-				yield {
-					type: 'log',
-					level: 'info',
-					message: `\n${nav}`,
+				yield show(this._.t(SandboxModel.UI.breadcrumb, { path: String(nav) }), 'info', {
 					component: 'Breadcrumbs',
 					model: nav,
-				}
+				})
 
 				configResponse = yield {
 					type: 'ask',
@@ -107,13 +113,10 @@ export class SandboxModel extends Model {
 			// 3. Theme Export Mode
 			try {
 				nav.push('Export', 'export')
-				yield {
-					type: 'log',
-					level: 'info',
-					message: `\n${nav}`,
+				yield show(this._.t(SandboxModel.UI.breadcrumb, { path: String(nav) }), 'info', {
 					component: 'Breadcrumbs',
 					model: nav,
-				}
+				})
 
 				const themeResponse = yield {
 					type: 'ask',