@nan0web/ui 1.8.0 → 1.10.0

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

package/src/domain/components/StatsModel.js

@@ -0,0 +1,32 @@
+import { Model } from '@nan0web/types'
+import { StatsItemModel } from './StatsItemModel.js'
+
+/**
+ * StatsModel — OLMUI Model-as-Schema
+ * A collection of stat items for dashboards and overview sections.
+ */
+export class StatsModel extends Model {
+	static $id = '@nan0web/ui/StatsModel'
+
+	static title = {
+		help: 'Stats section title',
+		placeholder: 'Key Metrics',
+		default: '',
+	}
+	static items = {
+		help: 'Array of stat entries',
+		type: 'StatsItemModel[]',
+		hint: StatsItemModel,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<StatsModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Stats section title */ this.title
+		/** @type {StatsItemModel[]} Array of stat entries */ this.items
+	}
+}

package/src/domain/components/TableModel.js

@@ -1,20 +1,10 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {Object} TableData
- * @property {string[]} [columns]
- * @property {string[][]} [rows]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Table Data component.
  * Displays tabular string data in rows and columns.
  */
 export class TableModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static columns = {
 		help: 'Array of column headers',
 		type: 'string[]',
@@ -31,28 +21,25 @@ export class TableModel extends Model {
 	}
 
 	/**
-	 * @param {TableData | any} [data]
+	 * @param {Partial<TableModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string[]|undefined} */ this.columns
-		/** @type {string[][]|undefined} */ this.rows
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string[]} Array of column headers */ this.columns
+		/** @type {string[][]} 2D Array of table cells matching column length */ this.rows
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
-		// Tables are naturally result or log displays.
-		// For an interactive flow, we could ask the user to 'select' a row,
-		// but by default a table simply presents data.
 		yield {
 			type: 'log',
 			level: 'info',
 			message: `Displaying table with ${this.rows?.length || 0} rows`,
 			component: 'Table',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
 		return { type: 'result', data: { rowsCount: this.rows?.length || 0 } }

package/src/domain/components/TabsModel.js

@@ -0,0 +1,30 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * TabsModel — OLMUI Model-as-Schema
+ * Tab container with selectable panels.
+ */
+export class TabsModel extends Model {
+	static $id = '@nan0web/ui/TabsModel'
+
+	static active = {
+		help: 'Index of the currently active tab',
+		default: 0,
+		type: 'number',
+	}
+	static tabs = {
+		help: 'Tab definitions (label + content pairs)',
+		type: 'object[]',
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<TabsModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {number} Index of the currently active tab */ this.active
+		/** @type {Array<{label: string, content: string}>} Tab definitions */ this.tabs
+	}
+}

package/src/domain/components/TestimonialModel.js

@@ -0,0 +1,24 @@
+import { CommentModel } from './CommentModel.js'
+
+/**
+ * TestimonialModel — OLMUI Model-as-Schema
+ * Extends CommentModel with a rating field for testimonials/reviews.
+ */
+export class TestimonialModel extends CommentModel {
+	static $id = '@nan0web/ui/TestimonialModel'
+
+	static rating = {
+		help: 'Rating from 1 to 5 stars',
+		default: 5,
+		type: 'number',
+	}
+
+	/**
+	 * @param {Partial<TestimonialModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {number} Rating from 1 to 5 stars */ this.rating
+	}
+}

package/src/domain/components/TimelineItemModel.js

@@ -0,0 +1,38 @@
+import { Model } from '@nan0web/types'
+
+/**
+ * TimelineItemModel — OLMUI Model-as-Schema
+ * A single entry on a timeline (event, milestone, changelog).
+ */
+export class TimelineItemModel extends Model {
+	static $id = '@nan0web/ui/TimelineItemModel'
+
+	static date = {
+		help: 'Date of the event (ISO 8601 or display string)',
+		placeholder: '2026-01-15',
+		default: '',
+		required: true,
+	}
+	static title = {
+		help: 'Event or milestone title',
+		placeholder: 'Product Launch',
+		default: '',
+		required: true,
+	}
+	static description = {
+		help: 'Detailed description of the event',
+		placeholder: 'We launched our new product...',
+		default: '',
+	}
+
+	/**
+	 * @param {Partial<TimelineItemModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Date of the event */ this.date
+		/** @type {string} Event or milestone title */ this.title
+		/** @type {string} Detailed description of the event */ this.description
+	}
+}

package/src/domain/components/TimelineModel.js

@@ -0,0 +1,32 @@
+import { Model } from '@nan0web/types'
+import { TimelineItemModel } from './TimelineItemModel.js'
+
+/**
+ * TimelineModel — OLMUI Model-as-Schema
+ * A collection of timeline events (changelog, roadmap, history).
+ */
+export class TimelineModel extends Model {
+	static $id = '@nan0web/ui/TimelineModel'
+
+	static title = {
+		help: 'Timeline section title',
+		placeholder: 'Our Journey',
+		default: '',
+	}
+	static items = {
+		help: 'Array of timeline events',
+		type: 'TimelineItemModel[]',
+		hint: TimelineItemModel,
+		default: [],
+	}
+
+	/**
+	 * @param {Partial<TimelineModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
+	 */
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {string} Timeline section title */ this.title
+		/** @type {TimelineItemModel[]} Array of timeline events */ this.items
+	}
+}

package/src/domain/components/ToastModel.js

@@ -1,77 +1,50 @@
-import { Model } from '@nan0web/core'
+import { Model } from '@nan0web/types'
 
 /**
- * @typedef {'success'|'error'|'info'|'warning'} ToastVariant
- * @typedef {Object} ToastData
- * @property {string} [message]
- * @property {ToastVariant} [variant]
- * @property {number} [duration]
- * @property {boolean} [open]
- */
-
-/**
- * Model-as-Schema for Toast notification component.
- * Represents a transient message displayed to the user.
+ * Model-as-Schema for Toast notification.
  */
 export class ToastModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
+	static variant = {
+		help: 'Notification color scheme',
+		default: 'info',
+		options: ['info', 'success', 'warn', 'error'],
+	}
 
 	static message = {
-		help: 'The message content of the toast',
-		default: 'Saved successfully!',
+		help: 'Text content of the notification',
+		default: 'Notification message',
 		type: 'string',
 	}
 
-	static variant = {
-		help: 'Visual styling representing the message severity',
-		default: 'success',
-		options: ['success', 'error', 'info', 'warning'],
-	}
-
 	static duration = {
-		help: 'Time in ms before auto-dismissal. 0 to keep open indefinitely.',
+		help: 'Auto-dismiss timeout (0 for manual only)',
 		default: 3000,
 		type: 'number',
 	}
 
-	static open = {
-		help: 'Controls visibility state',
-		default: true,
-		type: 'boolean',
-	}
-
 	/**
-	 * @param {ToastData | any} [data]
+	 * @param {Partial<ToastModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {string|undefined} */ this.message
-		/** @type {ToastVariant|undefined} */ this.variant
-		/** @type {number|undefined} */ this.duration
-		/** @type {boolean|undefined} */ this.open
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {'info'|'success'|'warn'|'error'} Notification color scheme */ this.variant
+		/** @type {string} Text displayed in the toast */ this.message
+		/** @type {number} Auto-dismiss timeout in ms */ this.duration
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
-		// Maps naturally to the 'log' intent for OLMUI runners.
 		yield {
 			type: 'log',
-			level: this.variant === 'error' ? 'error' : this.variant === 'warning' ? 'warn' : 'info',
+			level: this.variant === 'error' ? 'error' : 'info',
 			message: this.message,
-			component: 'Toast', // Hint for specific UI visual rendering
-			model: /** @type {any} */ (this),
-		}
-
-		// Wait exactly 'duration' ms before completing (unless duration is 0)
-		if (this.duration && this.duration > 0) {
-			await new Promise((resolve) => setTimeout(resolve, this.duration))
+			component: 'Toast',
+			model: this,
 		}
 
-		return { type: 'result', data: { closed: true } }
+		return { type: 'result', data: { shown: true } }
 	}
 }

package/src/domain/components/TreeModel.js

@@ -1,26 +1,10 @@
-import { Model } from '@nan0web/core'
-
-/**
- * @typedef {Object} TreeNode
- * @property {string} label
- * @property {boolean} [expanded]
- * @property {TreeNode[]} [children]
- */
-
-/**
- * @typedef {Object} TreeData
- * @property {TreeNode[]} [data]
- */
+import { Model } from '@nan0web/types'
 
 /**
  * Model-as-Schema for Tree component.
  * Represents a hierarchical selection or navigation structure.
  */
 export class TreeModel extends Model {
-	// ==========================================
-	// 1. MODEL AS SCHEMA (Static Definition)
-	// ==========================================
-
 	static data = {
 		help: 'Tree nodes defining the hierarchy',
 		type: 'TreeNode[]',
@@ -28,24 +12,24 @@ export class TreeModel extends Model {
 	}
 
 	/**
-	 * @param {TreeData | any} [data]
+	 * @param {Partial<TreeModel> | Record<string, any>} data Model input data.
+	 * @param {object} [options] Extended options (db, etc.)
 	 */
-	constructor(data = {}) {
-		super(data)
-		/** @type {TreeNode[]|undefined} */ this.data
+	constructor(data = {}, options = {}) {
+		super(data, options)
+		/** @type {Array<{label: string, expanded?: boolean, children?: any[]}>} Tree nodes */ this.data
 	}
 
-	// ==========================================
-	// 2. AGNOSTIC LOGIC (Async Generator)
-	// ==========================================
-
+	/**
+	 * @returns {AsyncGenerator<any, any, any>}
+	 */
 	async *run() {
 		const response = yield {
 			type: 'ask',
 			field: 'selectedNode',
 			schema: { help: 'Select a node from the tree' },
 			component: 'Tree',
-			model: /** @type {any} */ (this),
+			model: this,
 		}
 
 		return { type: 'result', data: { selected: response.value } }