@nan0web/ui 1.8.0 → 1.9.0

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

package/src/domain/components/PricingModel.js

@@ -0,0 +1,39 @@
+import { Model } from '@nan0web/types'
+import { PriceModel } from './PriceModel.js'
+
+/**
+ * PricingModel — OLMUI Model-as-Schema
+ * A pricing tier/plan with title, price, and feature list.
+ */
+export class PricingModel extends Model {
+	static $id = '@nan0web/ui/PricingModel'
+
+	static title = {
+		help: 'Pricing plan name',
+		placeholder: 'Pro Plan',
+		default: '',
+		required: true,
+	}
+	static price = {
+		help: 'Price object (value + currency)',
+		type: 'PriceModel',
+		hint: PriceModel,
+		default: null,
+	}
+	static features = {
+		help: 'List of features included in this plan',
+		type: 'string[]',
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<PricingModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Pricing plan name */ this.title
+		/** @type {PriceModel|null} Price object (value + currency) */ this.price
+		/** @type {string[]} List of features included in this plan */ this.features
+	}
+}

package/src/domain/components/PricingSectionModel.js

@@ -0,0 +1,32 @@
+import { Model } from '@nan0web/types'
+import { PricingModel } from './PricingModel.js'
+
+/**
+ * PricingSectionModel — OLMUI Model-as-Schema
+ * A section containing a title and a collection of pricing tiers.
+ */
+export class PricingSectionModel extends Model {
+	static $id = '@nan0web/ui/PricingSectionModel'
+
+	static title = {
+		help: 'Section title',
+		placeholder: 'Pricing Plans',
+		default: '',
+	}
+	static items = {
+		help: 'Array of pricing tiers',
+		type: 'PricingModel[]',
+		hint: PricingModel,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<PricingSectionModel> | 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 {PricingModel[]} Array of pricing tiers */ this.items
+	}
+}

package/src/domain/components/ProfileDropdownModel.js

@@ -0,0 +1,45 @@
+import { Model } from '@nan0web/types'
+import Navigation from '../Navigation.js'
+
+/**
+ * ProfileDropdownModel — OLMUI Model-as-Schema
+ * Account/profile dropdown in the header (user menu).
+ */
+export class ProfileDropdownModel extends Model {
+	static $id = '@nan0web/ui/ProfileDropdownModel'
+
+	static profileName = {
+		alias: 'name',
+		help: 'Display name of the user',
+		placeholder: 'Jane Doe',
+		default: '',
+	}
+	static email = {
+		help: 'User email address',
+		placeholder: 'jane@example.com',
+		default: '',
+	}
+	static avatar = {
+		help: 'User avatar image URL',
+		placeholder: 'https://...',
+		default: '',
+	}
+	static actions = {
+		help: 'Dropdown menu items (Settings, Logout, etc.)',
+		type: 'Navigation[]',
+		hint: Navigation,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<ProfileDropdownModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Display name of the user */ this.profileName
+		/** @type {string} User email address */ this.email
+		/** @type {string} User avatar image URL */ this.avatar
+		/** @type {Navigation[]} Dropdown menu items */ this.actions
+	}
+}

package/src/domain/components/SelectModel.js

@@ -1,20 +1,10 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {Object} SelectData
- * @property {string} [content]
- * @property {string[]} [options]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Select component.
  * Represents a dropdown choice selection.
  */
 export class SelectModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static content = {
 		help: 'Currently selected item or default placeholder',
 		default: 'Choose option',
@@ -28,18 +18,18 @@ export class SelectModel extends Model {
 	}
 
 	/**
-	 * @param {SelectData | any} [data]
+	 * @param {Partial<SelectModel> | 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} Currently selected item or default placeholder */ this.content
+		/** @type {string[]} List of available options for selection */ this.options
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, { type: 'result', data: { selected: string } }, any>}
+	 */
 	async *run() {
 		const response = yield {
 			type: 'ask',
@@ -50,7 +40,7 @@ export class SelectModel extends Model {
 				validate: (val) => this.options?.includes(val) || 'Invalid option selected',
 			},
 			component: 'Select',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
 		this.content = response.value

package/src/domain/components/SpinnerModel.js

@@ -1,21 +1,10 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {'sm'|'md'|'lg'} SpinnerSize
- * @typedef {Object} SpinnerData
- * @property {SpinnerSize} [size]
- * @property {string} [color]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Spinner component.
  * Represents a loading or progress state without user interaction.
  */
 export class SpinnerModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static size = {
 		help: 'Spinner diameter',
 		default: 'md',
@@ -29,30 +18,26 @@ export class SpinnerModel extends Model {
 	}
 
 	/**
-	 * @param {SpinnerData | any} [data]
+	 * @param {Partial<SpinnerModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {SpinnerSize|undefined} */ this.size
-		/** @type {string|undefined} */ this.color
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {'sm'|'md'|'lg'} Spinner diameter */ this.size
+		/** @type {string} Override for base color token */ this.color
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
-		// A spinner does not ask for anything, it simply indicates progress.
-		// However, as a pure component it doesn't do any work itself,
-		// so running it just means declaring its state.
 		yield {
 			type: 'progress',
 			message: 'Loading...',
 			component: 'Spinner',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
-		// Instant exit since it performs no async task internally
 		return { type: 'result', data: { completed: true } }
 	}
 }

package/src/domain/components/StatsItemModel.js

@@ -0,0 +1,38 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * StatsItemModel — OLMUI Model-as-Schema
+ * A single stat entry (e.g. "Users: 10,000 ↑12%").
+ */
+export class StatsItemModel extends Model {
+	static $id = '@nan0web/ui/StatsItemModel'
+
+	static label = {
+		help: 'Stat label (e.g. "Active Users")',
+		placeholder: 'Users',
+		default: '',
+		required: true,
+	}
+	static value = {
+		help: 'Stat value (number or formatted string)',
+		placeholder: '10,000',
+		default: '',
+		required: true,
+	}
+	static trend = {
+		help: 'Trend indicator (e.g. "+12%", "-3%", or empty)',
+		placeholder: '+12%',
+		default: '',
+	}
+
+	/**
+	 * @param {Partial<StatsItemModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Stat label (e.g. "Active Users") */ this.label
+		/** @type {string} Stat value (number or formatted string) */ this.value
+		/** @type {string} Trend indicator (e.g. "+12%", "-3%", or empty) */ this.trend
+	}
+}