@nan0web/ui 1.12.2 → 3.1.0

package/src/Theme/organisms/Modal.js

@@ -0,0 +1,24 @@
+import { tokens } from '../tokens.js'
+
+/**
+ * Theme definition for Modal organism.
+ *
+ * @typedef {Object} ModalTheme
+ * @property {string} overlayBackground
+ * @property {string} borderRadius
+ * @property {string} boxShadow
+ * @property {string} padding
+ * @property {string} backgroundColor
+ */
+
+/**
+ * Modal organism theme.
+ * @type {ModalTheme}
+ */
+export default {
+	overlayBackground: 'rgba(0, 0, 0, 0.5)',
+	borderRadius: tokens.radius.lg,
+	boxShadow: tokens.shadow.lg,
+	padding: tokens.space.xl,
+	backgroundColor: tokens.color.background,
+}

package/src/Theme/organisms/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal.js'
+
+export { Modal }

package/src/Theme/presets/HighContrastTheme.js

@@ -0,0 +1,65 @@
+import { createTheme } from '../createTheme.js'
+import { tokens } from '../tokens.js'
+
+/**
+ * High contrast theme preset.
+ * Designed for maximum readability by increasing contrast between text and background.
+ */
+export default createTheme({
+	atoms: {
+		Button: {
+			fontFamily: tokens.font.family,
+			color: tokens.color.text,
+			background: tokens.color.primary,
+			shadow: tokens.shadow.sm,
+			hoverBackground: 'color-mix(in srgb, var(--color-primary) 80%, black)',
+			borderColor: tokens.border.color.default,
+			borderRadius: tokens.radius.sm,
+			borderWidth: tokens.border.width.sm,
+			fontSize: tokens.font.size.base,
+			paddingX: tokens.space.lg,
+			paddingY: tokens.space.md,
+			solid: {
+				primary: { background: '#000000', color: '#ffffff', border: '#000000' },
+				secondary: { background: '#333333', color: '#ffffff', border: '#333333' },
+				success: { background: '#006600', color: '#ffffff', border: '#006600' },
+				warning: { background: '#996600', color: '#000000', border: '#996600' },
+				danger: { background: '#990000', color: '#ffffff', border: '#990000' },
+				info: { background: '#006699', color: '#ffffff', border: '#006699' },
+				light: { background: '#dddddd', color: '#000000', border: '#dddddd' },
+				dark: { background: '#222222', color: '#ffffff', border: '#222222' },
+				link: { background: 'transparent', color: '#000099', border: 'transparent' },
+			},
+			outline: {
+				primary: { background: '#ffffff', color: '#000000', border: '#000000' },
+				secondary: { background: '#ffffff', color: '#333333', border: '#333333' },
+				success: { background: '#ffffff', color: '#006600', border: '#006600' },
+				warning: { background: '#ffffff', color: '#996600', border: '#996600' },
+				danger: { background: '#ffffff', color: '#990000', border: '#990000' },
+				info: { background: '#ffffff', color: '#006699', border: '#006699' },
+				light: { background: '#ffffff', color: '#000000', border: '#000000' },
+				dark: { background: '#ffffff', color: '#222222', border: '#222222' },
+			},
+			size: {
+				sm: {
+					fontSize: '0.875rem',
+					paddingX: '0.5rem',
+					paddingY: '0.25rem',
+				},
+				md: {
+					fontSize: '1rem',
+					paddingX: '1rem',
+					paddingY: '0.5rem',
+				},
+			},
+			animation: {
+				transition: 'background 0.15s ease, transform 0.1s ease',
+				hoverAdjust: 20,
+				activeAdjust: -30,
+				focusScale: 1.02,
+				activeScale: 0.98,
+				disabledOpacity: 0.65,
+			},
+		},
+	},
+})

package/src/Theme/presets/NightTheme.js

@@ -0,0 +1,66 @@
+import { createTheme } from '../createTheme.js'
+import { tokens } from '../tokens.js'
+
+/**
+ * Night (dark) theme preset.
+ * Optimized for low-light environments with deep background colors and vibrant text.
+ * Overrides solid button styles while keeping contrast high.
+ */
+export default createTheme({
+	atoms: {
+		Button: {
+			fontFamily: tokens.font.family,
+			color: tokens.color.text,
+			background: tokens.color.primary,
+			shadow: tokens.shadow.sm,
+			hoverBackground: 'color-mix(in srgb, var(--color-primary) 80%, black)',
+			borderColor: tokens.border.color.default,
+			borderRadius: tokens.radius.sm,
+			borderWidth: tokens.border.width.sm,
+			fontSize: tokens.font.size.base,
+			paddingX: tokens.space.lg,
+			paddingY: tokens.space.md,
+			solid: {
+				primary: { background: '#0d6efd', color: '#ffffff', border: '#0d6efd' },
+				secondary: { background: '#6c757d', color: '#ffffff', border: '#6c757d' },
+				success: { background: '#198754', color: '#ffffff', border: '#198754' },
+				warning: { background: '#ffc107', color: '#000000', border: '#ffc107' },
+				danger: { background: '#dc3545', color: '#ffffff', border: '#dc3545' },
+				info: { background: '#0dcaf0', color: '#000000', border: '#0dcaf0' },
+				light: { background: '#aaaaaa', color: '#000000', border: '#aaaaaa' },
+				dark: { background: '#212529', color: '#ffffff', border: '#212529' },
+				link: { background: 'transparent', color: '#6ea8fe', border: 'transparent' },
+			},
+			outline: {
+				primary: { background: 'transparent', color: '#0d6efd', border: '#0d6efd' },
+				secondary: { background: 'transparent', color: '#6c757d', border: '#6c757d' },
+				success: { background: 'transparent', color: '#198754', border: '#198754' },
+				warning: { background: 'transparent', color: '#ffc107', border: '#ffc107' },
+				danger: { background: 'transparent', color: '#dc3545', border: '#dc3545' },
+				info: { background: 'transparent', color: '#0dcaf0', border: '#0dcaf0' },
+				light: { background: 'transparent', color: '#aaaaaa', border: '#aaaaaa' },
+				dark: { background: 'transparent', color: '#212529', border: '#212529' },
+			},
+			size: {
+				sm: {
+					fontSize: '0.875rem',
+					paddingX: '0.5rem',
+					paddingY: '0.25rem',
+				},
+				md: {
+					fontSize: '1rem',
+					paddingX: '1rem',
+					paddingY: '0.5rem',
+				},
+			},
+			animation: {
+				transition: 'background 0.15s ease, transform 0.1s ease',
+				hoverAdjust: 20,
+				activeAdjust: -30,
+				focusScale: 1.02,
+				activeScale: 0.98,
+				disabledOpacity: 0.65,
+			},
+		},
+	},
+})

package/src/Theme/presets/index.js

@@ -0,0 +1,4 @@
+import HighContrastTheme from './HighContrastTheme.js'
+import NightTheme from './NightTheme.js'
+
+export { HighContrastTheme, NightTheme }

package/src/Theme/tokens.js

@@ -0,0 +1,115 @@
+// src/tokens.js
+export const tokens = {
+	// Spacing
+	space: {
+		xs: '0.25rem',
+		sm: '0.5rem',
+		md: '0.75rem',
+		lg: '1rem',
+		xl: '1.5rem',
+	},
+
+	// Radius
+	radius: {
+		none: '0',
+		sm: '0.125rem',
+		md: '0.25rem',
+		lg: '0.5rem',
+		full: '9999px',
+	},
+
+	// Border
+	border: {
+		width: {
+			sm: '1px',
+			md: '2px',
+		},
+		color: {
+			default: 'var(--color-border)',
+			muted: 'var(--color-border-muted)',
+			error: 'var(--color-error)',
+		},
+	},
+
+	// Color
+	color: {
+		text: 'var(--color-text)',
+		background: 'var(--color-background)',
+		primary: 'var(--color-primary)',
+		success: 'var(--color-success)',
+		warning: 'var(--color-warning)',
+		error: 'var(--color-error)',
+	},
+
+	// Typography
+	font: {
+		family: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+		size: {
+			xs: '0.75rem',
+			sm: '0.875rem',
+			base: '1rem',
+			lg: '1.125rem',
+			xl: '1.25rem',
+		},
+		weight: {
+			normal: '400',
+			medium: '500',
+			bold: '700',
+		},
+	},
+
+	// Shadows
+	shadow: {
+		sm: '0 1px 2px rgba(0,0,0,0.05)',
+		md: '0 4px 6px rgba(0,0,0,0.1)',
+		lg: '0 10px 25px rgba(0,0,0,0.15)',
+	},
+
+	// Breakpoints (Bootstrap 5)
+	breakpoint: {
+		xs: '0', // extra‑small
+		sm: '576px',
+		md: '768px',
+		lg: '992px',
+		xl: '1200px',
+		xxl: '1400px',
+	},
+
+	// Container max‑widths (Bootstrap 5)
+	container: {
+		sm: '540px',
+		md: '720px',
+		lg: '960px',
+		xl: '1140px',
+		xxl: '1320px',
+	},
+
+	// Z‑index scale (Bootstrap)
+	zIndex: {
+		dropdown: 1000,
+		sticky: 1020,
+		fixed: 1030,
+		modalBackdrop: 1040,
+		modal: 1050,
+		popover: 1060,
+		tooltip: 1070,
+	},
+
+	// Opacity scale
+	opacity: {
+		0: '0',
+		10: '0.1',
+		25: '0.25',
+		50: '0.5',
+		75: '0.75',
+		90: '0.9',
+		100: '1',
+	},
+
+	// Transition durations
+	transition: {
+		fast: '150ms',
+		medium: '300ms',
+		slow: '500ms',
+	},
+}

package/src/core/InputAdapter.js

@@ -1,6 +1,5 @@
 import Event from '@nan0web/event/oop'
 import CancelError from './Error/CancelError.js'
-import UiMessage from './Message/Message.js'
 
 /**
  * @typedef {Object} AskOptions
@@ -32,7 +31,7 @@ export class InputAdapter extends Event {
 	 * @returns {void}
 	 */
 	start() {
-		this.emit('input', UiMessage.from({ body: 'Adapter started' }))
+		this.emit('input', { body: 'Adapter started' })
 	}
 
 	/**

package/src/core/Intent.js

@@ -48,7 +48,7 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @typedef {'info' | 'warn' | 'error' | 'success'} ShowLevel
  */
 
-/** @typedef {ShowLevel} LogLevel */
+/** @typedef {ShowLevel | 'debug'} LogLevel */
 
 /**
  * Model emits a show message. No response expected.
@@ -168,7 +168,14 @@ import { IntentErrorModel } from './IntentErrorModel.js'
  * @typedef {'ask' | 'show' | 'progress' | 'render' | 'agent'} IntentType
  */
 
-export const INTENT_TYPES = /** @type {const} */ (['ask', 'progress', 'show', 'log', 'render', 'agent'])
+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`).
@@ -286,16 +293,23 @@ export function progress(message, value = 0, optionsOrTotalOrId, id) {
 		}
 	}
 
-	return { 
-		type: 'progress', 
-		message, 
-		value, 
+	return {
+		type: 'progress',
+		message,
+		value,
 		total: options.total,
-		id: options.id || 'default', 
-		options 
+		id: options.id || 'default',
+		options,
 	}
 }
 
+/**
+ * Lgs a message if level is greater or equal the current view level.
+ * @param {LogLevel} level
+ * @param {string} message
+ * @param {object} [data={}]
+ * @returns {LogIntent}
+ */
 export function log(level, message, data = {}) {
 	return { type: 'log', level, message, ...data }
 }

package/src/core/Message/Message.js

@@ -17,6 +17,9 @@ import { Message } from '@nan0web/co'
  *
  * @class UiMessage
  * @extends Message
+ * @property {Record<string, any>} head - Message head.
+ * @property {boolean} isValid - True if message is valid.
+ * @property {Date} time - Creation timestamp.
  *
  * @example
  * class UserLoginMessage extends UiMessage {

package/src/core/OutputAdapter.js

@@ -1,6 +1,4 @@
 import Event from '@nan0web/event/oop'
-import OutputMessage from './Message/OutputMessage.js'
-import FormMessage from './Form/Message.js'
 
 /**
  * Abstract output adapter for UI implementations.
@@ -12,7 +10,7 @@ class OutputAdapter extends Event {
 	/**
 	 * Renders a message to the user.
 	 *
-	 * @param {OutputMessage|FormMessage} message - Message to render.
+	 * @param {object} message - Message to render.
 	 * @throws {Error} If not overridden by a subclass.
 	 */
 	render(message) {
@@ -27,16 +25,14 @@ class OutputAdapter extends Event {
 	 * @returns {void}
 	 */
 	progress(progress, metadata = {}) {
-		this.render(
-			OutputMessage.from({
-				content: [],
-				metadata: {
-					...metadata,
-					progress,
-					elementType: 'progress',
-				},
-			}),
-		)
+		this.render({
+			content: [],
+			metadata: {
+				...metadata,
+				progress,
+				elementType: 'progress',
+			},
+		})
 	}
 
 	/**

package/src/core/index.js

@@ -6,16 +6,16 @@ export { UIStream, UIStream as UiStream }
 import StreamEntry from './StreamEntry.js'
 export { StreamEntry, StreamEntry as UiStreamEntry }
 
-export { default as UiMessage } from './Message/Message.js'
-export { default as FormMessage } from './Form/Message.js'
 export { default as FormInput } from './Form/Input.js'
 
 import UIForm from './Form/Form.js'
 export { UIForm, UIForm as UiForm }
 
-export { default as Error, CancelError } from './Error/index.js'
+export { default as UiMessage } from './Message/Message.js'
+export { default as FormMessage } from './Form/Message.js'
+export { default as OutputMessage } from './Message/OutputMessage.js'
 
-export { default as UiAdapter } from './UiAdapter.js'
+export { default as Error, CancelError } from './Error/index.js'
 
 // Flow — Yield-Based Universal UI Architecture
 export {
@@ -43,6 +43,9 @@ 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').ShowLevel} ShowLevel */
+/** @typedef {import('./Intent.js').ShowIntent} ShowIntent */
+/** @typedef {import('./Intent.js').ShowData} ShowData */
 /** @typedef {import('./Intent.js').AskResponse} AskResponse */
 /** @typedef {import('./InputAdapter.js').AskOptions} AskOptions */
 export { IntentErrorModel } from './IntentErrorModel.js'

package/src/core/resolvePositionalArgs.js

@@ -0,0 +1,51 @@
+import { Model, getMetadata } from '@nan0web/types'
+
+/**
+ * Resolves positional CLI arguments into named model fields.
+ *
+ * Scans a Model class for `static` field descriptors with `positional: true`.
+ * The order of positional fields follows the declaration order of static properties
+ * (guaranteed by JavaScript spec for non-integer keys).
+ *
+ * @example
+ * class MyModel {
+ *   static source = { help: 'Source path', default: '.', positional: true }
+ *   static target = { help: 'Target path', default: 'out', positional: true }
+ *   static quiet  = { help: 'Quiet mode', default: false, type: 'boolean' }
+ * }
+ *
+ * const data = resolvePositionalArgs(MyModel, ['src/', 'dist/'])
+ * // → { source: 'src/', target: 'dist/' }
+ *
+ * @param {typeof Model} ModelClass - The Model class with static field descriptors.
+ * @param {string[]} args - Positional arguments from the CLI (e.g., process.argv positionals).
+ * @param {Object} [existing={}] - Existing named options (take priority over positionals).
+ * @returns {Object} Merged data object with positional args resolved to named fields.
+ */
+export function resolvePositionalArgs(ModelClass, args = [], existing = {}) {
+	if (!args || !args.length) return { ...existing }
+
+	const metadata = getMetadata(ModelClass)
+	const positionalFields = []
+	for (const [key, descriptor] of Object.entries(metadata)) {
+		if (descriptor && typeof descriptor === 'object' && descriptor.positional === true) {
+			positionalFields.push(key)
+		}
+	}
+
+	const result = { ...existing }
+	for (let i = 0; i < positionalFields.length && i < args.length; i++) {
+		const field = positionalFields[i]
+		// Named options take priority over positionals
+		if (result[field] === undefined || result[field] === null) {
+			result[field] = args[i]
+		}
+	}
+
+	// Preserve remaining positional arguments for subcommands
+	if (args.length > positionalFields.length) {
+		result._positionals = args.slice(positionalFields.length)
+	}
+
+	return result
+}

package/src/domain/Content.js

@@ -1,6 +1,6 @@
 import { Model } from '@nan0web/types'
 
-/** 
+/**
  * @typedef {Object} HTML5Elements
  * @property {string|ContentData[]} [a]
  * @property {string|ContentData[]} [abbr]
@@ -126,7 +126,7 @@ import { Model } from '@nan0web/types'
  * @property {string|ContentData[]} [text]
  */
 
-/** 
+/**
  * @typedef {Object} CoreUIElements
  * @property {import('./components/AccordionModel.js').AccordionModel} [accordion]
  * @property {import('./components/AutocompleteModel.js').AutocompleteModel} [autocomplete]
@@ -162,8 +162,8 @@ import { Model } from '@nan0web/types'
  * @property {ContentData[]} [sortable] - Інтерактивний Drag-n-Drop контейнер
  */
 
-/** 
- * @typedef {Partial<Content & HTML5Elements & CoreUIElements> & Record<string, any>} ContentData 
+/**
+ * @typedef {Partial<Content & HTML5Elements & CoreUIElements> & Record<string, any>} ContentData
  */
 
 export class Content extends Model {
@@ -172,7 +172,7 @@ export class Content extends Model {
 
 	/**
 	 * @param {ContentData | string} [data={}]
-	 * @param {import('@nan0web/types').ModelOptions} [options={}]
+	 * @param {Partial<import('@nan0web/types').ModelOptions>} [options={}]
 	 */
 	constructor(data = {}, options = {}) {
 		if ('string' === typeof data) {

package/src/domain/Document.js

@@ -12,7 +12,7 @@ export class Document extends Model {
 	/**
 	 *
 	 * @param {Partial<Document>} [data]
-	 * @param {import('@nan0web/types').ModelOptions} [options]
+	 * @param {Partial<import('@nan0web/types').ModelOptions>} [options]
 	 */
 	constructor(data = {}, options = {}) {
 		super(data, options)

package/src/domain/HeroModel.js

@@ -37,7 +37,7 @@ export class HeroModel extends Model {
 
 	/**
 	 * @param {Partial<HeroModel | Record<string, any>>} [data={}]
-	 * @param {import('@nan0web/types').ModelOptions} [options={}]
+	 * @param {Partial<import('@nan0web/types').ModelOptions>} [options={}]
 	 */
 	constructor(data = {}, options = {}) {
 		super(data, options)