@nan0web/ui 1.8.0 → 1.9.0

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

package/src/domain/components/index.js

@@ -1,4 +1,6 @@
 // Exports for Component Models
+
+// Interactive Components
 export { BreadcrumbModel } from './BreadcrumbModel.js'
 export { ButtonModel } from './ButtonModel.js'
 export { ConfirmModel } from './ConfirmModel.js'
@@ -9,3 +11,35 @@ export { ToastModel } from './ToastModel.js'
 export { SelectModel } from './SelectModel.js'
 export { AutocompleteModel } from './AutocompleteModel.js'
 export { TreeModel } from './TreeModel.js'
+export { TabsModel } from './TabsModel.js'
+export { AccordionModel } from './AccordionModel.js'
+export { FAQModel } from './FAQModel.js'
+export { GalleryModel } from './GalleryModel.js'
+
+// Pricing
+export { PriceModel } from './PriceModel.js'
+export { PricingModel } from './PricingModel.js'
+export { PricingSectionModel } from './PricingSectionModel.js'
+
+// Hero
+
+// Social / Feedback
+export { CommentModel } from './CommentModel.js'
+export { TestimonialModel } from './TestimonialModel.js'
+
+// Data Display
+export { StatsItemModel } from './StatsItemModel.js'
+export { StatsModel } from './StatsModel.js'
+export { TimelineItemModel } from './TimelineItemModel.js'
+export { TimelineModel } from './TimelineModel.js'
+
+// Visibility Configs
+export { HeaderVisibilityModel } from './HeaderVisibilityModel.js'
+export { HeaderConfigModel } from './HeaderConfigModel.js'
+export { FooterVisibilityModel } from './FooterVisibilityModel.js'
+export { FooterConfigModel } from './FooterConfigModel.js'
+
+// Business Critical
+export { EmptyStateModel } from './EmptyStateModel.js'
+export { BannerModel } from './BannerModel.js'
+export { ProfileDropdownModel } from './ProfileDropdownModel.js'

package/src/domain/index.js

@@ -2,6 +2,12 @@
 export { SandboxModel } from './SandboxModel.js'
 export { ShowcaseAppModel } from './ShowcaseAppModel.js'
 export { default as Navigation } from './Navigation.js'
+export { Language } from '@nan0web/i18n/src/domain/Language.js'
+
+// Layout Models (Phase 1)
+export { default as HeaderModel } from './HeaderModel.js'
+export { default as FooterModel } from './FooterModel.js'
+export { default as HeroModel } from './HeroModel.js'
 
 // Component Models
 export {
@@ -14,4 +20,22 @@ export {
 	SelectModel,
 	AutocompleteModel,
 	TreeModel,
+	TabsModel,
+	AccordionModel,
+	GalleryModel,
+	PriceModel,
+	PricingModel,
+	CommentModel,
+	TestimonialModel,
+	StatsItemModel,
+	StatsModel,
+	TimelineItemModel,
+	TimelineModel,
+	HeaderVisibilityModel,
+	HeaderConfigModel,
+	FooterVisibilityModel,
+	FooterConfigModel,
+	EmptyStateModel,
+	BannerModel,
+	ProfileDropdownModel,
 } from './components/index.js'

package/src/index.js

@@ -11,6 +11,8 @@ import App from './App/index.js'
 
 export { Frame, FrameProps, Locale, StdIn, StdOut, View, RenderOptions, Model, Component, App }
 export { format } from './format.js'
+export { default as Navigation } from './domain/Navigation.js'
+export { Language } from '@nan0web/i18n/src/domain/Language.js'
 
 // export default App
 export { default as FormMessage } from './core/Form/Message.js'

package/types/domain/FooterModel.d.ts

@@ -0,0 +1,52 @@
+/**
+ * FooterModel — OLMUI Model-as-Schema
+ * Universal footer structure: copyright, version, license, navigation, sharing, languages.
+ */
+export default class FooterModel extends Model {
+    static $id: string;
+    static copyright: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static version: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static license: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static nav: {
+        help: string;
+        type: string;
+        hint: typeof Navigation;
+        default: never[];
+    };
+    static share: {
+        help: string;
+        type: string;
+        hint: typeof Navigation;
+        default: never[];
+    };
+    static langs: {
+        help: string;
+        type: string;
+        default: never[];
+    };
+    /**
+     * @param {Partial<FooterModel> | Record<string, any>} data Model input data.
+     * @param {object} [options] Extended options (db, etc.)
+     */
+    constructor(data?: Partial<FooterModel> | Record<string, any>, options?: object);
+    /** @type {string} Copyright text */ copyright: string;
+    /** @type {string} Application version string */ version: string;
+    /** @type {string} License type */ license: string;
+    /** @type {Navigation[]} Footer navigation links */ nav: Navigation[];
+    /** @type {Navigation[]} Social sharing links */ share: Navigation[];
+    /** @type {any[]} Available languages for switcher */ langs: any[];
+}
+import { Model } from '@nan0web/types';
+import Navigation from './Navigation.js';

package/types/domain/HeaderModel.d.ts

@@ -0,0 +1,45 @@
+/**
+ * HeaderModel — OLMUI Model-as-Schema
+ * Universal header structure: logo, navigation, language switcher, actions.
+ */
+export default class HeaderModel extends Model {
+    static $id: string;
+    static title: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static logo: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static actions: {
+        help: string;
+        type: string;
+        hint: typeof Navigation;
+        default: never[];
+    };
+    static lang: {
+        help: string;
+        type: string;
+        default: null;
+    };
+    static langs: {
+        help: string;
+        type: string;
+        default: never[];
+    };
+    /**
+     * @param {Partial<HeaderModel> | Record<string, any>} data Model input data.
+     * @param {object} [options] Extended options (db, etc.)
+     */
+    constructor(data?: Partial<HeaderModel> | Record<string, any>, options?: object);
+    /** @type {string} Site or app title displayed in the header */ title: string;
+    /** @type {string} Logo image URL or icon name */ logo: string;
+    /** @type {Navigation[]} Header action links (CTA, Sign In, etc.) */ actions: Navigation[];
+    /** @type {any|null} Currently active language */ lang: any | null;
+    /** @type {any[]} Available languages for switcher */ langs: any[];
+}
+import { Model } from '@nan0web/types';
+import Navigation from './Navigation.js';

package/types/domain/HeroModel.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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: string;
+    static title: {
+        help: string;
+        placeholder: string;
+        default: string;
+        required: boolean;
+    };
+    static description: {
+        help: string;
+        placeholder: string;
+        default: string;
+    };
+    static image: {
+        help: string;
+        placeholder: string;
+        hint: string;
+        upload: boolean;
+        default: string;
+    };
+    static actions: {
+        help: string;
+        type: string;
+        hint: typeof Navigation;
+        default: never[];
+    };
+    /**
+     * @param {Partial<HeroModel> | Record<string, any>} data Model input data.
+     * @param {object} [options] Extended options (db, etc.)
+     */
+    constructor(data?: Partial<HeroModel> | Record<string, any>, options?: object);
+    /** @type {string} Hero main headline */ title: string;
+    /** @type {string} Hero sub-headline or description text */ description: string;
+    /** @type {string} Hero background or feature image URL */ image: string;
+    /** @type {Navigation[]} Call-to-action buttons (multiple CTA support) */ actions: Navigation[];
+}
+import { Model } from '@nan0web/types';
+import Navigation from './Navigation.js';

package/types/domain/Navigation.d.ts

@@ -37,14 +37,15 @@ export default class Navigation extends Model {
         default: boolean;
     };
     /**
-     * @param {Partial<Navigation>} data
+     * @param {Partial<Navigation> | Record<string, any>} data Model input data.
+     * @param {object} [options] Extended options (db, etc.)
      */
-    constructor(data?: Partial<Navigation>);
-    /** @type {string|undefined} */ title: string | undefined;
-    /** @type {string|undefined} */ href: string | undefined;
-    /** @type {string|undefined} */ icon: string | undefined;
-    /** @type {string|undefined} */ image: string | undefined;
-    /** @type {Navigation[]|undefined} */ children: Navigation[] | undefined;
-    /** @type {boolean|undefined} */ hidden: boolean | undefined;
+    constructor(data?: Partial<Navigation> | Record<string, any>, options?: object);
+    /** @type {string} Label for the menu item */ title: string;
+    /** @type {string} URL or internal app route */ href: string;
+    /** @type {string} Icon name/ID */ icon: string;
+    /** @type {string} Display image or thumbnail */ image: string;
+    /** @type {Navigation[]} Nested sub-menu navigation */ children: Navigation[];
+    /** @type {boolean} Hide from lists/menus */ hidden: boolean;
 }
-import { Model } from '@nan0web/core';
+import { Model } from '@nan0web/types';