@nan0web/ui 1.10.0 → 1.12.0

package/src/core/Intent.js

@@ -38,17 +38,33 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @typedef {Object} ProgressIntent
  * @property {'progress'} type
  * @property {number} [value] - Progress value (0-1).
- * @property {string} [id] - Progress ID for tracking multiple parallel operations.
+ * @property {number} [total] - Absolute total (if value is absolute).
+ * @property {string} [id] - Progress ID for tracking by Adapter to calculate speed/eta.
  * @property {string} message - Status message from Model (i18n static field value).
+ * @property {ProgressOptions} [options] - Additional options for progress intent.
  */
 
 /**
- * Model emits a log message. No response expected.
+ * @typedef {'info' | 'warn' | 'error' | 'success'} ShowLevel
+ */
+
+/** @typedef {ShowLevel} LogLevel */
+
+/**
+ * Model emits a show message. No response expected.
  * Message MUST come from the Model (i18n static field value).
+ * @typedef {Object} ShowIntent
+ * @property {'show'} type
+ * @property {ShowLevel} level
+ * @property {string} message - Show message from Model (i18n static field value).
+ */
+
+/**
+ * Model emits a log message intended for debugging/developer (Not UI).
  * @typedef {Object} LogIntent
  * @property {'log'} type
- * @property {'info' | 'warn' | 'error' | 'success'} level
- * @property {string} message - Log message from Model (i18n static field value).
+ * @property {LogLevel} level
+ * @property {string} message - Internal log message.
  */
 
 /**
@@ -67,9 +83,33 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @property {object} props - Static props for the component.
  */
 
+/**
+ * Contextual data and attachments for the AI subagent.
+ * @typedef {Object} AgentContext
+ * @property {string[]} [instructions] - List of instructions or guidelines (e.g. ['Use 1-char emojis only']).
+ * @property {Record<string, string>} [files] - Hash map of file paths to their string contents.
+ * @property {Record<string, any>} [data] - Any arbitrary JSON data (e.g. parsed errors, ASTs, metadata) useful for the task.
+ */
+
+/**
+ * Model delegates a task to an AI subagent. The Adapter should launch the agent
+ * with the provided task and context, and return the result. If the agent is skipped,
+ * it returns { success: false } but allows user to generate a prompt.
+ * @typedef {Object} AgentIntent
+ * @property {'agent'} type
+ * @property {string} task - The instructional task for the AI agent.
+ * @property {AgentContext} context - Contextual data, files, and instructions for the task.
+ * @property {() => string} toPrompt - Helper to format task and context as an LLM prompt.
+ */
+
 /**
  * Union of all possible yielded intents.
- * @typedef {AskIntent | ProgressIntent | LogIntent | RenderIntent} Intent
+ * @typedef {(AskIntent | ProgressIntent | LogIntent | ShowIntent | RenderIntent | AgentIntent | ResultIntent) & {
+ *   $value?: any;
+ *   $success?: boolean;
+ *   $files?: Record<string, string>;
+ *   $message?: string;
+ * }} Intent
  */
 
 // ─── Response Types (Adapter → Model) ───
@@ -79,7 +119,26 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * The value MUST conform to the type described in the requested FieldSchema.
  * @typedef {Object} AskResponse
  * @property {*} value - The value matching schema.type (collected from user / LLM / test fixture).
- * @property {boolean} [cancelled] - Whether the user cancelled this interaction (e.g. pressed ESC).
+ * @property {boolean} cancelled - Whether the user cancelled this interaction (e.g. pressed ESC).
+ * @property {string} [action] - The action identifier (e.g., 'submit', 'exit', 'back').
+ * @property {any} [body] - Additional payload or form data.
+ * @property {any} [form] - The form model instance (if applicable).
+ * @property {number} [index] - The selected index for lists/tables.
+ */
+
+/**
+ * Response to an AgentIntent.
+ * The underlying Adapter (Orchestrator) is responsible for communicating with the LLM,
+ * enforcing output formats (e.g. Unified Diff or Tool Calls like `updateFile`),
+ * and resolving common LLM hallucinations (like Grok truncating code with `// ...`).
+ *
+ * The Model (e.g. IconsAuditor) receives this clean, resolved response and does not
+ * need to parse Markdown or interpret diffs itself.
+ *
+ * @typedef {Object} AgentResponse
+ * @property {boolean} success - True if the agent successfully processed the task.
+ * @property {Record<string, string>} [files] - Hash map of fully resolved, updated file contents.
+ * @property {string} [message] - Optional summary or explanation returned by the AI.
  */
 
 // ─── Abort Support ───
@@ -101,10 +160,14 @@ import { IntentErrorModel } from './IntentErrorModel.js'
 
 /**
  * Union of all possible responses an Adapter can send back via iterator.next().
- * @typedef {AskResponse | AbortResponse | undefined} IntentResponse
+ * @typedef {AskResponse | AgentResponse | AbortResponse | undefined} IntentResponse
+ */
+
+/**
+ * @typedef {'ask' | 'show' | 'progress' | 'render' | 'agent'} IntentType
  */
 
-export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'log', 'render'])
+export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'show', 'log', 'render', 'agent'])
 
 /**
  * Detects if a value is a Model-as-Schema class (has static fields with `help`).
@@ -113,7 +176,7 @@ export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'log', 're
  */
 export function isModelSchema(schema) {
 	if (typeof schema !== 'function') return false
-	return Object.keys(schema).some((key) => {
+	return Object.getOwnPropertyNames(schema).some((key) => {
 		const meta = schema[key]
 		return meta && typeof meta === 'object' && 'help' in meta
 	})
@@ -142,13 +205,16 @@ export function validateIntent(intent) {
 		}
 		// Accept both: plain schema {help: '...'} and Model-as-Schema class/instance
 		const isModel = !!intent.model
-		if (!isModel && (!intent.schema || typeof intent.schema !== 'object' || !('help' in intent.schema))) {
+		if (
+			!isModel &&
+			(!intent.schema || typeof intent.schema !== 'object' || !('help' in intent.schema))
+		) {
 			throw IntentErrorModel.error('ask_missing_schema_help')
 		}
 	}
-	if (intent.type === 'progress' || intent.type === 'log') {
-		const isComponentLog = intent.type === 'log' && intent.component
-		if (!isComponentLog && typeof intent.message !== 'string') {
+	if (intent.type === 'progress' || intent.type === 'show' || intent.type === 'log') {
+		const isComponentShow = (intent.type === 'show' || intent.type === 'log') && intent.component
+		if (!isComponentShow && typeof intent.message !== 'string') {
 			throw IntentErrorModel.error('intent_missing_message', { type: intent.type })
 		}
 	}
@@ -157,6 +223,11 @@ export function validateIntent(intent) {
 			throw IntentErrorModel.error('render_missing_component')
 		}
 	}
+	if (intent.type === 'agent') {
+		if (typeof intent.task !== 'string' || !intent.task) {
+			throw IntentErrorModel.error('agent_missing_task')
+		}
+	}
 	return true
 }
 
@@ -171,14 +242,155 @@ export function validateIntent(intent) {
  * @param {object | Function} schema - Field descriptor or Model-as-Schema class.
  * @returns {AskIntent}
  */
-export const ask = (field, schema) => {
+export function ask(field, schema) {
 	if (isModelSchema(schema)) {
 		return { type: 'ask', field, schema, model: true }
 	}
 	return { type: 'ask', field, schema }
 }
 
-export const progress = (message) => ({ type: 'progress', message })
-export const log = (level, message, data = {}) => ({ type: 'log', level, message, ...data })
-export const render = (component, props = {}) => ({ type: 'render', component, props })
-export const result = (data) => ({ type: 'result', data })
+/**
+ * @typedef {Object} ProgressOptions
+ * @property {number} [total] - Absolute total steps.
+ * @property {string} [id] - Progress tracking ID.
+ * @property {number} [width] - Width of the progress bar in terminal characters.
+ * @property {number} [fps] - Frames per second update rate limit.
+ * @property {string} [format] - Custom format string (e.g. '{time} {bar} {percent} {title}').
+ * @property {number} [columns] - Number of columns (terminal width).
+ * @property {boolean} [forceOneLine] - Prevent wrapping and truncate instead.
+ * @property {boolean|'success'|'error'} [stop] - Set to true to stop, or 'success'/'error' to stop with a status icon (for spinners).
+ */
+
+/**
+ * Create a progress intent.
+ * @param {string} message - Status message from Model (i18n static field value).
+ * @param {number} [value=0] - Progress value (current step or percentage).
+ * @param {ProgressOptions|number|string} [optionsOrTotalOrId] - Options object, or absolute total steps (number), or progress tracking ID (string).
+ * @param {string} [id='default'] - Progress ID (if total is provided).
+ * @returns {ProgressIntent}
+ */
+export function progress(message, value = 0, optionsOrTotalOrId, id) {
+	/** @type {ProgressOptions} */
+	let options = {}
+
+	if (typeof optionsOrTotalOrId === 'object' && optionsOrTotalOrId !== null) {
+		options = optionsOrTotalOrId
+	} else {
+		// legacy support
+		if (typeof optionsOrTotalOrId === 'number') {
+			options.total = optionsOrTotalOrId
+			if (typeof id === 'string') options.id = id
+		} else if (typeof optionsOrTotalOrId === 'string') {
+			options.id = optionsOrTotalOrId
+		}
+	}
+
+	return { 
+		type: 'progress', 
+		message, 
+		value, 
+		total: options.total,
+		id: options.id || 'default', 
+		options 
+	}
+}
+
+export function log(level, message, data = {}) {
+	return { type: 'log', level, message, ...data }
+}
+
+/**
+ * Create a render intent.
+ * @param {string} component - Component name (e.g. 'App.Layout.Header').
+ * @param {object} [props] - Static props for the component.
+ * @returns {RenderIntent}
+ */
+export function render(component, props = {}) {
+	return { type: 'render', component, props }
+}
+
+/**
+ * Create a result intent.
+ * @param {*} data - The raw result data.
+ * @returns {ResultIntent}
+ */
+export function result(data) {
+	return { type: 'result', data }
+}
+
+/**
+ * @typedef {Object} ShowData
+ * @property {any} [component]
+ * @property {import('@nan0web/types').Model} [model]
+ */
+/**
+ * Create a show intent.
+ * @param {string | any} message Message to display.
+ * @param {ShowLevel|ShowData} [level='info'] Level of message or additional data then `level = 'info'`.
+ * @param {ShowData} [data={}] Additional data to display.
+ * @returns {ShowIntent}
+ */
+export function show(message, level = 'info', data = {}) {
+	if ('string' === typeof level) {
+		return { type: 'show', level, message, ...data }
+	}
+	return { type: 'show', level: 'info', message, ...level, ...data }
+}
+
+/**
+ * Create an agent intent to delegate a task to an AI subagent.
+ * @param {string} task - The instructional task for the AI agent.
+ * @param {AgentContext} [context={}] - Contextual data (files, errors, docs).
+ * @returns {AgentIntent}
+ */
+export function agent(task, context = {}) {
+	return {
+		type: 'agent',
+		task,
+		context,
+		toPrompt() {
+			let ctxStr = ''
+			if (this.context.data) {
+				try {
+					ctxStr = JSON.stringify(this.context.data, null, 2)
+				} catch (e) {
+					ctxStr = String(this.context.data)
+				}
+			}
+
+			// Format input files for the LLM using the boundary concept
+			const filesStr = Object.entries(this.context.files || {})
+				.map(([path, content]) => `---boundary:${path}---\n${content}\n---boundary---`)
+				.join('\n\n')
+
+			const outputRules = `
+[Output Format Rules]
+You must return your code modifications using the following strictly parsable boundary format. Do NOT use markdown code blocks (\`\`\`) or JSON for your code outputs.
+
+To replace an ENTIRE file:
+---boundary:path/to/file.js---
+<full new file content here>
+---boundary---
+
+To replace a SPECIFIC SNIPPET (e.g. replacing 3 lines starting at line 33):
+---boundary:path/to/file.js:33:3---
+<new snippet content here>
+---boundary---
+`
+			const inst = Array.isArray(this.context.instructions)
+				? this.context.instructions.join('\n')
+				: this.context.instructions
+
+			return [
+				`[Subagent Task]`,
+				this.task,
+				inst ? `\n[Instructions]\n${inst}` : '',
+				ctxStr ? `\n[Context]\n${ctxStr}` : '',
+				filesStr ? `\n[Files]\n${filesStr}` : '',
+				outputRules,
+			]
+				.filter(Boolean)
+				.join('\n')
+		},
+	}
+}

package/src/core/Message/Message.js

@@ -43,11 +43,6 @@ export default class UiMessage extends Message {
 		NAVIGATION: 'navigation',
 	}
 
-	/** @type {string} */
-	type = ''
-	/** @type {string} */
-	id = ''
-
 	/**
 	 * Creates a UiMessage.
 	 *
@@ -56,9 +51,11 @@ export default class UiMessage extends Message {
 	constructor(input = {}) {
 		super(input)
 
-		const { type = this.type, id = this.id } = input
+		const { type, id } = input
+		/** @type {string} */
 		this.id = id || `ui-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
-		this.type = String(type)
+		/** @type {string} */
+		this.type = type ? String(type) : ''
 
 		if (!('body' in input) && 'content' in input) {
 			this.body = Array.isArray(input.content) ? input.content : [input.content]

package/src/core/Message/OutputMessage.js

@@ -14,15 +14,6 @@ export default class OutputMessage extends UiMessage {
 		CRITICAL: 3,
 	}
 
-	/** @type {string[]} */
-	body
-	/** @type {Object} */
-	meta = {}
-	/** @type {Error|null} */
-	error = null
-	/** @type {number} */
-	priority = OutputMessage.PRIORITY.NORMAL
-
 	/**
 	 * Creates an OutputMessage.
 	 *
@@ -41,14 +32,18 @@ export default class OutputMessage extends UiMessage {
 
 		const contentSource = 'body' in input ? body : 'content' in input ? content : []
 
+		/** @type {string[]} */
 		this.body = Array.isArray(contentSource)
 			? contentSource
 			: contentSource
 				? [String(contentSource)]
 				: []
 
+		/** @type {Object} */
 		this.meta = meta
+		/** @type {Error|null} */
 		this.error = error instanceof Error ? error : error ? new Error(String(error)) : null
+		/** @type {number} */
 		this.priority = Number(priority)
 
 		if (!this.type && this.error) {

package/src/core/StreamEntry.js

@@ -2,30 +2,6 @@
  * Represents an entry in a stream with value, completion status, cancellation status, and error message.
  */
 export default class StreamEntry {
-	/**
-	 * The value of the stream entry.
-	 * @type {any}
-	 */
-	value = undefined
-
-	/**
-	 * Indicates if the stream entry is done (completed).
-	 * @type {boolean}
-	 */
-	done = false
-
-	/**
-	 * Indicates if the stream entry has been cancelled.
-	 * @type {boolean}
-	 */
-	cancelled = false
-
-	/**
-	 * Error message associated with the stream entry.
-	 * @type {string}
-	 */
-	error = ''
-
 	/**
 	 * Creates a new StreamEntry instance.
 	 * @param {Object} [input={}] - Input object to initialize the stream entry.
@@ -36,14 +12,30 @@ export default class StreamEntry {
 	 */
 	constructor(input = {}) {
 		const {
-			value = this.value,
-			done = this.done,
-			cancelled = this.cancelled,
-			error = this.error,
+			value = undefined,
+			done = false,
+			cancelled = false,
+			error = '',
 		} = input
+		/**
+		 * The value of the stream entry.
+		 * @type {any}
+		 */
 		this.value = value
+		/**
+		 * Indicates if the stream entry is done (completed).
+		 * @type {boolean}
+		 */
 		this.done = Boolean(done)
+		/**
+		 * Indicates if the stream entry has been cancelled.
+		 * @type {boolean}
+		 */
 		this.cancelled = Boolean(cancelled)
+		/**
+		 * Error message associated with the stream entry.
+		 * @type {string}
+		 */
 		this.error = String(error)
 	}
 

package/src/core/index.js

@@ -42,7 +42,11 @@ export { default as Flow } from './Flow.js'
 
 // OLMUI Generator Engine — Intent-based Model→Adapter contract
 export { validateIntent, ask, progress, log, render, result, INTENT_TYPES, isModelSchema } from './Intent.js'
+/** @typedef {import('./Intent.js').Intent} Intent */
+/** @typedef {import('./Intent.js').AskResponse} AskResponse */
+/** @typedef {import('./InputAdapter.js').AskOptions} AskOptions */
 export { IntentErrorModel } from './IntentErrorModel.js'
 export { runGenerator } from './GeneratorRunner.js'
 
 export { MaskHandler } from './MaskHandler.js'
+export { LayoutModel } from '../domain/LayoutModel.js'

package/src/domain/Content.js

@@ -0,0 +1,198 @@
+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 {any} [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 {any} [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('./HeaderModel.js').HeaderModel} [header]
+ * @property {import('./FooterModel.js').FooterModel} [footer]
+ * @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,25 @@
+import { Model } from '@nan0web/types'
+import { Content } from './Content.js'
+import Navigation from './Navigation.js'
+import { Language } from '@nan0web/i18n'
+
+export class Document extends Model {
+	static title = { type: 'string', help: 'Title' }
+	static content = { type: 'array', model: Content, help: 'Content' }
+	static $content = { type: 'array', model: Content, help: 'Layout configuration' }
+	static nav = { type: 'any', model: Navigation, help: 'Navigation config or reference' }
+	static langs = { type: 'array', model: Language, help: 'Supported languages array' }
+	/**
+	 *
+	 * @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
+		/** @type {Array<Content>} Layout configuration */ this.$content
+		/** @type {Navigation|string|Array<Navigation>} Navigation config */ this.nav
+		/** @type {Array<Language>} Supported languages */ this.langs
+	}
+}