@nan0web/ui 1.12.3 → 3.1.0

package/src/Theme/createTheme.js

@@ -0,0 +1,22 @@
+import { merge } from '@nan0web/types'
+import Theme from './Theme.js'
+
+/**
+ * Creates a theme instance with merged configuration.
+ *
+ * @param {Partial<import('./Theme.js').ThemeConfig>} overrides
+ * @returns {import('./Theme.js').ThemeConfig}
+ */
+export function createTheme(overrides = {}) {
+	/**
+	 * This function uses merge from @nan0web/types to create a new theme.
+	 * It ensures nested theme properties like atoms, molecules, organisms are deeply merged.
+	 */
+	const base = {
+		atoms: { ...Theme.atoms },
+		molecules: { ...Theme.molecules },
+		organisms: { ...Theme.organisms },
+	}
+
+	return merge(base, overrides)
+}

package/src/Theme/index.js

@@ -0,0 +1,20 @@
+import Theme from './Theme.js'
+import CustomTheme, { getUserTheme } from './CustomTheme.js'
+import AppTheme from './AppTheme.js'
+import DarkLightTheme from './DarkLightTheme.js'
+import HighContrastTheme from './presets/HighContrastTheme.js'
+import NightTheme from './presets/NightTheme.js'
+import { createTheme } from './createTheme.js'
+
+export {
+	Theme,
+	CustomTheme,
+	getUserTheme,
+	AppTheme,
+	DarkLightTheme,
+	HighContrastTheme,
+	NightTheme,
+	createTheme,
+}
+
+export default Theme

package/src/Theme/molecules/Card.js

@@ -0,0 +1,24 @@
+import { tokens } from '../tokens.js'
+
+/**
+ * Theme definition for Card molecule.
+ *
+ * @typedef {Object} CardTheme
+ * @property {string} borderRadius
+ * @property {string} boxShadow
+ * @property {string} padding
+ * @property {string} backgroundColor
+ * @property {string} borderColor
+ */
+
+/**
+ * Card molecule theme.
+ * @type {CardTheme}
+ */
+export default {
+	borderRadius: tokens.radius.lg,
+	boxShadow: tokens.shadow.md,
+	padding: tokens.space.lg,
+	backgroundColor: tokens.color.background,
+	borderColor: tokens.border.color.muted,
+}

package/src/Theme/molecules/index.js

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

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/domain/app/IntentAuditor.js

@@ -0,0 +1,53 @@
+import { AuditorModel } from '@nan0web/inspect/domain/AuditorModel'
+import { result } from '../../core/Intent.js'
+import { JsIntentAuditor } from './JsIntentAuditor.js'
+import { PyIntentAuditor } from './PyIntentAuditor.js'
+
+/**
+ * IntentAuditor — Base model for OLMUI Intent hygiene audits.
+ * Polymorphically delegates execution to JS or Python subclasses.
+ */
+export class IntentAuditor extends AuditorModel {
+	static alias = 'intents'
+
+	static dir = {
+		type: 'string',
+		help: 'Target directory to scan for output hygiene',
+		positional: true,
+		default: 'src',
+	}
+
+	static UI = {
+		title: 'OLMUI Intent Hygiene Audit',
+		description: 'Validates code files to ensure raw console statements are purged and proper yield intents are used.',
+		icon: '📡',
+		starting: 'Scanning {dir} for intent and output hygiene...',
+		auditPassed: 'Hygiene OK: {file}',
+		auditFailed: 'Hygiene Leak in {file}: {errors}',
+		doneSuccess: 'Pristine output hygiene! Zero leaks found.',
+		doneErrors: 'Intent hygiene audit failed with errors. Check above.',
+
+		errorDb: 'Database not provided to auditor',
+		errorConsoleLeak: 'Line {line}: Found direct system write "{match}" (violates OLMUI/TLI isolation, use yield show | log | ask).',
+		errorProcessLeak: 'Line {line}: Found direct process write "{match}" (violates total logic isolation, use yield intents).',
+		errorPrintLeak: 'Line {line}: Found direct print statement "{match}" (violates Python TLI isolation, use yield intents).',
+		errorSysWriteLeak: 'Line {line}: Found direct system stream write "{match}" (violates Python TLI isolation).',
+	}
+
+	/**
+	 * Run the intent audit, delegating to the appropriate platform subclass.
+	 * @returns {AsyncGenerator<import('@nan0web/ui').Intent, import('@nan0web/ui').ResultIntent, any>}
+	 */
+	async *run() {
+		const AuditorClass = /** @type {any} */ (this).platform === 'python' ? PyIntentAuditor : JsIntentAuditor
+		const delegate = new (/** @type {any} */ (AuditorClass))({
+			dir: /** @type {any} */ (this).dir,
+			fix: /** @type {any} */ (this).fix,
+			platform: /** @type {any} */ (this).platform,
+		}, /** @type {any} */ (this)._)
+		
+		return yield* delegate.run()
+	}
+}
+
+export default IntentAuditor