@nan0web/ui 1.8.0 → 1.10.0

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

package/src/domain/components/EmptyStateModel.js

@@ -0,0 +1,45 @@
+import { Model } from '@nan0web/types'
+import Navigation from '../Navigation.js'
+
+/**
+ * EmptyStateModel — OLMUI Model-as-Schema
+ * Onboarding placeholder for empty tables, lists, or dashboards.
+ */
+export class EmptyStateModel extends Model {
+	static $id = '@nan0web/ui/EmptyStateModel'
+
+	static icon = {
+		help: 'Illustration or icon name for the empty state',
+		placeholder: 'inbox',
+		default: '',
+	}
+	static title = {
+		help: 'Empty state headline',
+		placeholder: 'No items yet',
+		default: '',
+		required: true,
+	}
+	static description = {
+		help: 'Helpful description guiding the user',
+		placeholder: 'Create your first item to get started',
+		default: '',
+	}
+	static action = {
+		help: 'Primary CTA action (Navigation link or button)',
+		type: 'Navigation',
+		hint: Navigation,
+		default: null,
+	}
+
+	/**
+	 * @param {Partial<EmptyStateModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Illustration or icon name for the empty state */ this.icon
+		/** @type {string} Empty state headline */ this.title
+		/** @type {string} Helpful description guiding the user */ this.description
+		/** @type {Navigation|null} Primary CTA action (Navigation link or button) */ this.action
+	}
+}

package/src/domain/components/FAQModel.js

@@ -0,0 +1,32 @@
+import { Model } from '@nan0web/types'
+import { AccordionModel } from './AccordionModel.js'
+
+/**
+ * FAQModel — OLMUI Model-as-Schema
+ * A section containing a title and a collection of FAQ (accordion) items.
+ */
+export class FAQModel extends Model {
+	static $id = '@nan0web/ui/FAQModel'
+
+	static title = {
+		help: 'Section title',
+		placeholder: 'Frequently Asked Questions',
+		default: '',
+	}
+	static items = {
+		help: 'Array of FAQ items',
+		type: 'AccordionModel[]',
+		hint: AccordionModel,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<FAQModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Section title */ this.title
+		/** @type {AccordionModel[]} Array of FAQ items */ this.items
+	}
+}

package/src/domain/components/FooterConfigModel.js

@@ -0,0 +1,26 @@
+import { Model } from '@nan0web/types'
+import { FooterVisibilityModel } from './FooterVisibilityModel.js'
+
+/**
+ * FooterConfigModel — OLMUI Model-as-Schema
+ * Configuration container mapping UI variant keys to FooterVisibilityModel instances.
+ */
+export class FooterConfigModel extends Model {
+	static $id = '@nan0web/ui/FooterConfigModel'
+
+	static ui = {
+		help: 'Map of UI variant name → FooterVisibilityModel',
+		type: 'Record<string, FooterVisibilityModel>',
+		hint: FooterVisibilityModel,
+		default: {},
+	}
+
+	/**
+	 * @param {Partial<FooterConfigModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {Record<string, FooterVisibilityModel>} Map of UI variant name → FooterVisibilityModel */ this.ui
+	}
+}

package/src/domain/components/FooterVisibilityModel.js

@@ -0,0 +1,48 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * FooterVisibilityModel — OLMUI Model-as-Schema
+ * Boolean flags controlling which footer elements are visible.
+ */
+export class FooterVisibilityModel extends Model {
+	static $id = '@nan0web/ui/FooterVisibilityModel'
+
+	static copyright = {
+		help: 'Show copyright text',
+		default: true,
+		type: 'boolean',
+	}
+	static version = {
+		help: 'Show version string',
+		default: true,
+		type: 'boolean',
+	}
+	static license = {
+		help: 'Show license info',
+		default: false,
+		type: 'boolean',
+	}
+	static nav = {
+		help: 'Show footer navigation',
+		default: true,
+		type: 'boolean',
+	}
+	static clock = {
+		help: 'Show clock widget',
+		default: false,
+		type: 'boolean',
+	}
+
+	/**
+	 * @param {Partial<FooterVisibilityModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {boolean} Show copyright text */ this.copyright
+		/** @type {boolean} Show version string */ this.version
+		/** @type {boolean} Show license info */ this.license
+		/** @type {boolean} Show footer navigation */ this.nav
+		/** @type {boolean} Show clock widget */ this.clock
+	}
+}

package/src/domain/components/GalleryModel.js

@@ -0,0 +1,36 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * GalleryModel — OLMUI Model-as-Schema
+ * Image gallery / media grid with optional captions.
+ */
+export class GalleryModel extends Model {
+	static $id = '@nan0web/ui/GalleryModel'
+
+	static title = {
+		help: 'Gallery section title',
+		placeholder: 'Photo Gallery',
+		default: '',
+	}
+	static items = {
+		help: 'Gallery items (image URL + caption + alt)',
+		type: 'object[]',
+		default: [],
+	}
+	static columns = {
+		help: 'Number of columns in grid layout',
+		default: 3,
+		type: 'number',
+	}
+
+	/**
+	 * @param {Partial<GalleryModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Gallery section title */ this.title
+		/** @type {Array<{src: string, caption?: string, alt?: string}>} Gallery items */ this.items
+		/** @type {number} Number of columns in grid layout */ this.columns
+	}
+}

package/src/domain/components/HeaderConfigModel.js

@@ -0,0 +1,26 @@
+import { Model } from '@nan0web/types'
+import { HeaderVisibilityModel } from './HeaderVisibilityModel.js'
+
+/**
+ * HeaderConfigModel — OLMUI Model-as-Schema
+ * Configuration container mapping UI variant keys to HeaderVisibilityModel instances.
+ */
+export class HeaderConfigModel extends Model {
+	static $id = '@nan0web/ui/HeaderConfigModel'
+
+	static ui = {
+		help: 'Map of UI variant name → HeaderVisibilityModel',
+		type: 'Record<string, HeaderVisibilityModel>',
+		hint: HeaderVisibilityModel,
+		default: {},
+	}
+
+	/**
+	 * @param {Partial<HeaderConfigModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {Record<string, HeaderVisibilityModel>} Map of UI variant name → HeaderVisibilityModel */ this.ui
+	}
+}

package/src/domain/components/HeaderVisibilityModel.js

@@ -0,0 +1,54 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * HeaderVisibilityModel — OLMUI Model-as-Schema
+ * Boolean flags controlling which header elements are visible.
+ */
+export class HeaderVisibilityModel extends Model {
+	static $id = '@nan0web/ui/HeaderVisibilityModel'
+
+	static logo = {
+		help: 'Show logo',
+		default: true,
+		type: 'boolean',
+	}
+	static theme = {
+		help: 'Show theme toggle (dark/light)',
+		default: true,
+		type: 'boolean',
+	}
+	static search = {
+		help: 'Show search input',
+		default: false,
+		type: 'boolean',
+	}
+	static share = {
+		help: 'Show share button',
+		default: false,
+		type: 'boolean',
+	}
+	static nav = {
+		help: 'Show navigation links',
+		default: true,
+		type: 'boolean',
+	}
+	static langs = {
+		help: 'Show language switcher',
+		default: true,
+		type: 'boolean',
+	}
+
+	/**
+	 * @param {Partial<HeaderVisibilityModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {boolean} Show logo */ this.logo
+		/** @type {boolean} Show theme toggle (dark/light) */ this.theme
+		/** @type {boolean} Show search input */ this.search
+		/** @type {boolean} Show share button */ this.share
+		/** @type {boolean} Show navigation links */ this.nav
+		/** @type {boolean} Show language switcher */ this.langs
+	}
+}

package/src/domain/components/InputModel.js

@@ -1,30 +1,9 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {'text'|'email'|'password'|'number'|'tel'|'url'|'date'} InputType
- * @typedef {Object} InputData
- * @property {InputType} [type]
- * @property {string} [label]
- * @property {string} [placeholder]
- * @property {boolean} [required]
- * @property {string} [pattern]
- * @property {string} [min]
- * @property {string} [max]
- * @property {string} [step]
- * @property {string} [hint]
- * @property {boolean} [disabled]
- * @property {string} [content]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Input component.
- * Used exclusively for schema definition, validation, and editor reflection.
  */
 export class InputModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static type = {
 		help: 'HTML5 Input type attribute',
 		default: 'text',
@@ -92,27 +71,27 @@ export class InputModel extends Model {
 	}
 
 	/**
-	 * @param {InputData | any} [data]
+	 * @param {Partial<InputModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {InputType|undefined} */ this.type
-		/** @type {string|undefined} */ this.label
-		/** @type {string|undefined} */ this.placeholder
-		/** @type {boolean|undefined} */ this.required
-		/** @type {string|undefined} */ this.pattern
-		/** @type {string|undefined} */ this.min
-		/** @type {string|undefined} */ this.max
-		/** @type {string|undefined} */ this.step
-		/** @type {string|undefined} */ this.hint
-		/** @type {boolean|undefined} */ this.disabled
-		/** @type {string|undefined} */ this.content
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} HTML5 Input type attribute */ this.type
+		/** @type {string} Label displayed above the input */ this.label
+		/** @type {string} Placeholder text shown when empty */ this.placeholder
+		/** @type {boolean} Whether the field must be filled out */ this.required
+		/** @type {string} RegExp pattern for validation */ this.pattern
+		/** @type {string} Minimum value */ this.min
+		/** @type {string} Maximum value */ this.max
+		/** @type {string} Step interval */ this.step
+		/** @type {string} Helper text displayed below the input */ this.hint
+		/** @type {boolean} Whether the input is disabled */ this.disabled
+		/** @type {string} The actual value of the input */ this.content
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
 		const response = yield {
 			type: 'ask',
@@ -127,13 +106,14 @@ export class InputModel extends Model {
 							if (!re.test(val)) return 'Invalid format'
 						} catch (e) {
 							// fallback if pattern is malformed
+							return 'Invalid format'
 						}
 					}
 					return true
 				},
 			},
 			component: 'Input',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
 		this.content = response.value

package/src/domain/components/PriceModel.js

@@ -0,0 +1,30 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * PriceModel — OLMUI Model-as-Schema
+ * Represents a monetary value with currency.
+ */
+export class PriceModel extends Model {
+	static $id = '@nan0web/ui/PriceModel'
+
+	static value = {
+		help: 'Numeric price value',
+		default: 0,
+		type: 'number',
+	}
+	static currency = {
+		help: 'Currency code (ISO 4217)',
+		placeholder: 'USD',
+		default: 'USD',
+	}
+
+	/**
+	 * @param {Partial<PriceModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {number} Numeric price value */ this.value
+		/** @type {string} Currency code (ISO 4217) */ this.currency
+	}
+}