@nan0web/ui 1.12.3 → 3.1.0

package/src/domain/app/JsIntentAuditor.js

@@ -0,0 +1,145 @@
+import { AuditorModel } from '@nan0web/inspect/domain/AuditorModel'
+import { result, show, progress } from '../../core/Intent.js'
+import { IntentAuditor } from './IntentAuditor.js'
+
+/**
+ * JsIntentAuditor — Specialized auditor for JS/TS output hygiene.
+ */
+export class JsIntentAuditor extends AuditorModel {
+	/** @type {string[]} Directories to ignore during scanning */
+	static IGNORE_DIRS = ['node_modules', '.git', '.venv', '.datasets', 'dist', 'build', 'types', 'play', 'test']
+
+	/**
+	 * Checks if a directory or file should be ignored.
+	 * @param {string} name
+	 * @returns {boolean}
+	 */
+	static isIgnored(name) {
+		return name.startsWith('.') || JsIntentAuditor.IGNORE_DIRS.includes(name)
+	}
+
+	/**
+	 * Run the JS-specific intent audit.
+	 * @returns {AsyncGenerator<import('@nan0web/ui').Intent, import('@nan0web/ui').ResultIntent, any>}
+	 */
+	async *run() {
+		const { t } = /** @type {any} */ (this)._
+		yield show(t(IntentAuditor.UI.starting, { dir: /** @type {any} */ (this).dir }))
+
+		const fsDb = /** @type {any} */ (this)._.db
+		if (!fsDb) {
+			yield show(t(IntentAuditor.UI.errorDb), 'error')
+			return result({ success: false })
+		}
+
+		const files = []
+		const targetDir = fsDb.resolveSync(/** @type {any} */ (this).dir)
+
+		try {
+			for await (const entry of fsDb.browse(targetDir, { depth: Infinity })) {
+				if (JsIntentAuditor.isIgnored(entry.name)) continue
+				
+				if (
+					entry.isFile && 
+					/\.(js|ts|jsx|tsx)$/.test(entry.name) && 
+					!entry.name.endsWith('.test.js') &&
+					!entry.name.endsWith('.story.js') &&
+					!entry.path.includes('/test/') &&
+					!entry.path.includes('/play/')
+				) {
+					files.push(entry.path)
+				}
+			}
+		} catch (e) {
+			// Directory might be missing
+		}
+
+		if (files.length === 0) {
+			yield show(t(IntentAuditor.UI.doneSuccess, {}), 'success')
+			return result({ success: true })
+		}
+
+		let hasErrors = false
+		const allErrors = []
+
+		for (const file of files) {
+			const displayFile = file.startsWith('@app/') ? file.slice(5) : file
+			const content = await fsDb.fetch(file)
+			const contentString = typeof content === 'string' ? content : JSON.stringify(content)
+
+			const fileErrors = JsIntentAuditor.inspectFileContent(contentString, t)
+			if (fileErrors.length > 0) {
+				const errorMessages = fileErrors.join('; ')
+				yield show(
+					t(IntentAuditor.UI.auditFailed, { file: displayFile, errors: errorMessages }),
+					'error',
+				)
+				allErrors.push(...fileErrors.map((e) => ({ file: displayFile, error: e })))
+				hasErrors = true
+			} else {
+				yield progress(t(IntentAuditor.UI.auditPassed, { file: displayFile }))
+			}
+		}
+
+		if (hasErrors) {
+			yield show(t(IntentAuditor.UI.doneErrors, {}), 'error')
+			return result({ success: false, errors: allErrors })
+		}
+
+		yield show(t(IntentAuditor.UI.doneSuccess, {}), 'success')
+		return result({ success: true })
+	}
+
+	/**
+	 * Inspects file content for console.* or process.* writes.
+	 * @param {string} content Content of the file.
+	 * @param {import('@nan0web/i18n').TFunction} t Translate function.
+	 * @returns {string[]} List of error messages.
+	 */
+	static inspectFileContent(content, t) {
+		const errors = []
+		const lines = content.split('\n')
+
+		lines.forEach((lineText, index) => {
+			const lineNum = index + 1
+			const trimmed = lineText.trim()
+
+			// Skip comments
+			if (trimmed.startsWith('//') || trimmed.startsWith('*') || trimmed.startsWith('/*')) {
+				return
+			}
+
+			// 1. Thorough console.* statement scan (including table, trace, etc.)
+			const consoleMatch = trimmed.match(/console\.(log|error|warn|info|debug|dir|table|trace|assert)\(/)
+			if (consoleMatch) {
+				const codeBeforeComment = trimmed.split('//')[0]
+				if (codeBeforeComment.includes(consoleMatch[0])) {
+					errors.push(
+						t(IntentAuditor.UI.errorConsoleLeak, {
+							line: lineNum,
+							match: consoleMatch[0] + '...',
+						}),
+					)
+				}
+			}
+
+			// 2. process.stdout/stderr write scan
+			const processMatch = trimmed.match(/process\.(stdout|stderr)\.write\(/)
+			if (processMatch) {
+				const codeBeforeComment = trimmed.split('//')[0]
+				if (codeBeforeComment.includes(processMatch[0])) {
+					errors.push(
+						t(IntentAuditor.UI.errorProcessLeak, {
+							line: lineNum,
+							match: processMatch[0] + '...',
+						}),
+					)
+				}
+			}
+		})
+
+		return errors
+	}
+}
+
+export default JsIntentAuditor

package/src/domain/app/PyIntentAuditor.js

@@ -0,0 +1,144 @@
+import { AuditorModel } from '@nan0web/inspect/domain/AuditorModel'
+import { result, show, progress } from '../../core/Intent.js'
+import { IntentAuditor } from './IntentAuditor.js'
+
+/**
+ * PyIntentAuditor — Specialized auditor for Python output hygiene.
+ */
+export class PyIntentAuditor extends AuditorModel {
+	/** @type {string[]} Directories to ignore during scanning */
+	static IGNORE_DIRS = ['node_modules', '.git', '.venv', '.datasets', 'dist', 'build', 'types', 'play', 'test', 'tests']
+
+	/**
+	 * Checks if a directory or file should be ignored.
+	 * @param {string} name
+	 * @returns {boolean}
+	 */
+	static isIgnored(name) {
+		return name.startsWith('.') || PyIntentAuditor.IGNORE_DIRS.includes(name)
+	}
+
+	/**
+	 * Run the Python-specific intent audit.
+	 * @returns {AsyncGenerator<import('@nan0web/ui').Intent, import('@nan0web/ui').ResultIntent, any>}
+	 */
+	async *run() {
+		const { t } = /** @type {any} */ (this)._
+		yield show(t(IntentAuditor.UI.starting, { dir: /** @type {any} */ (this).dir }))
+
+		const fsDb = /** @type {any} */ (this)._.db
+		if (!fsDb) {
+			yield show(t(IntentAuditor.UI.errorDb), 'error')
+			return result({ success: false })
+		}
+
+		const files = []
+		const targetDir = fsDb.resolveSync(/** @type {any} */ (this).dir)
+
+		try {
+			for await (const entry of fsDb.browse(targetDir, { depth: Infinity })) {
+				if (PyIntentAuditor.isIgnored(entry.name)) continue
+				
+				if (
+					entry.isFile && 
+					/\.py$/.test(entry.name) && 
+					!entry.name.startsWith('test_') &&
+					!entry.name.endsWith('_test.py') &&
+					!entry.path.includes('/tests/')
+				) {
+					files.push(entry.path)
+				}
+			}
+		} catch (e) {
+			// Directory might be missing
+		}
+
+		if (files.length === 0) {
+			yield show(t(IntentAuditor.UI.doneSuccess, {}), 'success')
+			return result({ success: true })
+		}
+
+		let hasErrors = false
+		const allErrors = []
+
+		for (const file of files) {
+			const displayFile = file.startsWith('@app/') ? file.slice(5) : file
+			const content = await fsDb.fetch(file)
+			const contentString = typeof content === 'string' ? content : JSON.stringify(content)
+
+			const fileErrors = PyIntentAuditor.inspectFileContent(contentString, t)
+			if (fileErrors.length > 0) {
+				const errorMessages = fileErrors.join('; ')
+				yield show(
+					t(IntentAuditor.UI.auditFailed, { file: displayFile, errors: errorMessages }),
+					'error',
+				)
+				allErrors.push(...fileErrors.map((e) => ({ file: displayFile, error: e })))
+				hasErrors = true
+			} else {
+				yield progress(t(IntentAuditor.UI.auditPassed, { file: displayFile }))
+			}
+		}
+
+		if (hasErrors) {
+			yield show(t(IntentAuditor.UI.doneErrors, {}), 'error')
+			return result({ success: false, errors: allErrors })
+		}
+
+		yield show(t(IntentAuditor.UI.doneSuccess, {}), 'success')
+		return result({ success: true })
+	}
+
+	/**
+	 * Inspects Python file content for print or sys.stdout/stderr writes.
+	 * @param {string} content Content of the file.
+	 * @param {import('@nan0web/i18n').TFunction} t Translate function.
+	 * @returns {string[]} List of error messages.
+	 */
+	static inspectFileContent(content, t) {
+		const errors = []
+		const lines = content.split('\n')
+
+		lines.forEach((lineText, index) => {
+			const lineNum = index + 1
+			const trimmed = lineText.trim()
+
+			// Python Comment skip
+			if (trimmed.startsWith('#')) {
+				return
+			}
+
+			// 1. Python print statement check
+			const printMatch = trimmed.match(/\bprint\(/)
+			if (printMatch) {
+				const codeBeforeComment = trimmed.split('#')[0]
+				if (codeBeforeComment.includes(printMatch[0])) {
+					errors.push(
+						t(IntentAuditor.UI.errorPrintLeak, {
+							line: lineNum,
+							match: 'print(...)',
+						}),
+					)
+				}
+			}
+
+			// 2. sys.stdout/stderr write check
+			const sysMatch = trimmed.match(/\bsys\.(stdout|stderr)\.write\(/)
+			if (sysMatch) {
+				const codeBeforeComment = trimmed.split('#')[0]
+				if (codeBeforeComment.includes(sysMatch[0])) {
+					errors.push(
+						t(IntentAuditor.UI.errorSysWriteLeak, {
+							line: lineNum,
+							match: sysMatch[0] + '...',
+						}),
+					)
+				}
+			}
+		})
+
+		return errors
+	}
+}
+
+export default PyIntentAuditor

package/src/domain/app/SnapshotAuditor.js

@@ -1,14 +1,14 @@
 import { NaN0 } from '@nan0web/types'
 import { AuditorModel } from '@nan0web/inspect/domain/AuditorModel'
 
-import { result, show } from '../../core/Intent.js'
+import { result, show, progress } from '../../core/Intent.js'
 
 /**
  * SnapshotAuditor — Zero-Hallucination Snapshot Validation (Model-as-Schema v2).
  * Parses snapshots without evaluating the app logic and detects artifacts.
  */
 export class SnapshotAuditor extends AuditorModel {
-	static alias = 'audit'
+	static alias = 'snapshots'
 
 	static dir = {
 		type: 'string',
@@ -122,7 +122,7 @@ export class SnapshotAuditor extends AuditorModel {
 
 	/**
 	 * Scans data directories to build a word set for each language.
-	 * @param {import('@nan0web/db').DB} fsDb FileSystem DB.
+	 * @param {any} fsDb FileSystem DB.
 	 * @param {string} data
 	 * @returns {Promise<Record<string, Set<string>>>}
 	 */
@@ -170,11 +170,11 @@ export class SnapshotAuditor extends AuditorModel {
 	 * @returns {AsyncGenerator<import('@nan0web/ui').Intent, import('@nan0web/ui').ResultIntent, any>}
 	 */
 	async *run() {
-		const { t } = this._
+		const { t } = /** @type {any} */ (this)._
 
-		yield show(t(SnapshotAuditor.UI.starting, { dir: this.dir }))
+		yield show(t(SnapshotAuditor.UI.starting, { dir: /** @type {any} */ (this).dir }))
 
-		const fsDb = this._.db
+		const fsDb = /** @type {any} */ (this)._.db
 
 		if (!fsDb) {
 			yield show(t(SnapshotAuditor.UI.errorDb), 'error')
@@ -182,7 +182,7 @@ export class SnapshotAuditor extends AuditorModel {
 		}
 
 		const files = []
-		const snapshotsDir = '@app/' + (this.dir || 'snapshots/core')
+		const snapshotsDir = fsDb.resolveSync(/** @type {any} */ (this).dir)
 
 		// Use robust DB.browse for recursive snapshot detection
 		try {
@@ -234,7 +234,7 @@ export class SnapshotAuditor extends AuditorModel {
 				allErrors.push(...audit.errors.map((e) => ({ file: displayFile, error: e })))
 				hasErrors = true
 			} else {
-				yield show(t(SnapshotAuditor.UI.auditPassed, { file: displayFile }), 'success')
+				yield progress(t(SnapshotAuditor.UI.auditPassed, { file: displayFile }))
 			}
 		}
 

package/src/domain/components/ShellModel.js

@@ -37,7 +37,7 @@ export class ShellModel extends Model {
 		],
 		required: true,
 	}
-	
+
 	static data = {
 		help: 'Data source (DSN)',
 		type: 'string',
@@ -207,7 +207,7 @@ export class ShellModel extends Model {
 		if (!spawn) return yield log('error', 'Spawn missing')
 
 		const { existsSync } = await import('node:fs')
-		const viteConfig = existsSync('vite.docs.js') ? 'vite.docs.js' : 
+		const viteConfig = existsSync('vite.docs.js') ? 'vite.docs.js' :
 						  existsSync('vite.config.js') ? 'vite.config.js' : null
 
 		if (viteConfig) {

package/src/index.js

@@ -1,16 +1,20 @@
-import Frame from './Frame/Frame.js'
 import Locale from './Locale.js'
-import StdIn from './StdIn.js'
-import StdOut from './StdOut.js'
-import View from './View/View.js'
-import RenderOptions from './View/RenderOptions.js'
-import FrameProps from './Frame/Props.js'
 import { Model } from '@nan0web/types'
 import Models from './Model/index.js'
 import Component from './Component/index.js'
-import App from './App/index.js'
 
-export { Frame, FrameProps, Locale, StdIn, StdOut, View, RenderOptions, Model, Models, Component, App }
+export { Locale, Model, Models, Component }
+export { default as Element } from './Model/Element.js'
+export {
+	default as Theme,
+	getUserTheme,
+	CustomTheme,
+	DarkLightTheme,
+	NightTheme,
+	createTheme,
+} from './Theme/index.js'
+export { resolveContext } from './utils/resolveContext.js'
+export { processI18n } from './utils/processI18n.js'
 export { format } from './format.js'
 export { default as Navigation } from './domain/Navigation.js'
 
@@ -22,10 +26,10 @@ export { default as OutputAdapter } from './core/OutputAdapter.js'
 export { default as OutputMessage } from './core/Message/OutputMessage.js'
 export { default as UiForm } from './core/Form/Form.js'
 export { default as UiMessage } from './core/Message/Message.js'
-export { default as UiStream } from './core/Stream.js'
 export { default as Error, CancelError } from './core/Error/index.js'
 export { default as UiAdapter } from './core/UiAdapter.js'
 export { resolvePositionalArgs } from './core/resolvePositionalArgs.js'
+export { tokens } from './Theme/tokens.js'
 
 // OLMUI Generator Engine
 /** @typedef {import('./core/Intent.js').LogLevel} LogLevel */
@@ -51,5 +55,27 @@ export { IntentErrorModel } from './core/IntentErrorModel.js'
 export { runGenerator } from './core/GeneratorRunner.js'
 export { buildNan0SpecFromTrace } from './testing/CrashReporter.js'
 
+// Flow components
+export {
+	runFlow,
+	flow,
+	Prompt,
+	Stream,
+	Alert,
+	Toast,
+	Badge,
+	Text,
+	Table,
+	Input,
+	Select,
+	Confirm,
+	Multiselect,
+	Mask,
+	Password,
+	Spinner,
+	Progress,
+} from './core/Flow.js'
+export { default as Flow } from './core/Flow.js'
+
 /** @typedef {import('./domain/index.js').ModelAsAppOptions} ModelAsAppOptions */
 export * from './domain/index.js'

package/src/inspect.js

@@ -1,3 +1,6 @@
 export * from './testing/SnapshotRunner.js'
 export * from './testing/verifySnapshot.js'
 export { SnapshotAuditor } from './domain/app/SnapshotAuditor.js'
+export { IntentAuditor } from './domain/app/IntentAuditor.js'
+export { JsIntentAuditor } from './domain/app/JsIntentAuditor.js'
+export { PyIntentAuditor } from './domain/app/PyIntentAuditor.js'

package/src/utils/format.js

@@ -0,0 +1,21 @@
+export const format = {
+	currency: (value, currency = 'UAH', locale = 'uk-UA') => {
+		return new Intl.NumberFormat(locale, {
+			style: 'currency',
+			currency,
+			maximumFractionDigits: 0
+		}).format(value).replace(/,/g, ' ')
+	},
+	rate: (value, locale = 'uk-UA') => {
+		const rate = value < 1 ? value * 100 : value
+		return new Intl.NumberFormat(locale, {
+			style: 'percent',
+			maximumFractionDigits: 2
+		}).format(rate / 100)
+	},
+	number: (value, locale = 'uk-UA') => {
+		return new Intl.NumberFormat(locale, {
+			maximumFractionDigits: 2
+		}).format(value).replace(/,/g, ' ')
+	}
+}

package/src/utils/processI18n.js

@@ -0,0 +1,27 @@
+/**
+ * Обробляє i18n та замінює змінні в тексті.
+ * @param {any} input - Вміст для обробки.
+ * @param {Function} [t] - Функція перекладу.
+ * @param {Object} [data] - Дані для підстановки.
+ * @returns {any}
+ */
+export function processI18n(input, t, data = {}) {
+	// If input is an object with $t property
+	if (input && typeof input === 'object' && input.$t) {
+		if (t) input = t(input.$t)
+		else input = input.$t
+	}
+
+	// Process string content
+	if (typeof input === 'string') {
+		return input.replace(/\{\{(\w+)\}\}/g, (_, key) => data[key] || '—')
+	}
+
+	// Process arrays recursively
+	if (Array.isArray(input)) {
+		return input.map((item) => processI18n(item, t, data))
+	}
+
+	// Return input as is for other types
+	return input
+}

package/src/utils/resolveContext.js

@@ -0,0 +1,79 @@
+import { Data as BaseData } from '@nan0web/db'
+
+class Data extends BaseData {
+	static OBJECT_DIVIDER = '.'
+}
+/**
+ * Resolves context-aware values in strings and objects.
+ * Supports:
+ * - References: `data:currencies`, `action:save`, `fn:calculate,100,USD,UAH`
+ * - Templates: `{{user.name}}`, `{{currencies[0]}}`
+ * - Scalars: numbers, booleans, etc. (passthrough)
+ *
+ * @param {Object} context - Application context (data, actions, functions)
+ * @param {*} value - Raw value to resolve
+ * @returns {*} Resolved value
+ */
+export function resolveContext(context, value) {
+	if (typeof value !== 'string') return value
+
+	// Handle data:* reference
+	if (value.startsWith('data:')) {
+		const path = value.slice(5)
+		return Data.find(path, context.data) ?? []
+	}
+
+	// Handle action:* reference
+	if (value.startsWith('action:')) {
+		const name = value.slice(7)
+		return context.actions?.[name]
+	}
+
+	// Handle fn:* reference with arguments
+	if (value.startsWith('fn:')) {
+		const [fnName, ...rawArgs] = value.slice(3).split(',')
+		const fn = context.functions?.[fnName]
+		if (typeof fn !== 'function') return undefined
+
+		// Parse arguments (numbers, booleans, strings)
+		const args = rawArgs.map((arg) => {
+			try {
+				return JSON.parse(arg)
+			} catch {
+				return arg // Return as-is if parsing fails
+			}
+		})
+
+		return () => fn(...args)
+	}
+
+	// Handle template interpolation {{key}} using Data.find
+	return value.replace(/{{(.*?)}}/g, (_, path) => {
+		const result = Data.find(path, context.data)
+		return result !== undefined ? result : `{{${path}}}`
+	})
+}
+
+/**
+ * Resolves a context value or returns undefined if resolution fails.
+ * Used internally by renderers to safely resolve props.
+ *
+ * @param {Object} ctx - Context with data, actions and functions
+ * @param {string} value - String value to resolve
+ * @returns {*} Resolved value or undefined
+ */
+export function resolveContextValue(ctx, value) {
+	if (typeof value !== 'string') return undefined
+	if (value.startsWith('data:')) {
+		return Data.find(value.slice(5), ctx.data) ?? []
+	}
+	if (value.startsWith('action:')) {
+		return ctx.actions?.[value.slice(7)]
+	}
+	if (value.startsWith('fn:')) {
+		const [fnName, ...args] = value.slice(3).split(',')
+		const fn = ctx.functions?.[fnName]
+		return typeof fn === 'function' ? fn : undefined
+	}
+	return undefined
+}

package/types/Component/index.d.ts

@@ -1,10 +1,6 @@
+export { SortableList };
 declare namespace _default {
-    export { Welcome };
-    export { Process };
     export { SortableList };
 }
 export default _default;
-import Welcome from './Welcome/index.js';
-import Process from './Process/index.js';
 import SortableList from './SortableList/index.js';
-export { Welcome, Process, SortableList };

package/types/Model/Element.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @file Element — the model of a declarative UI block.
+ * Format: { Button: [...], $variant: 'info', $onClick: fn }
+ * Framework-agnostic.
+ */
+export default class Element {
+    /** @type {Record<string, string | ((val: any, key: string) => Record<string, any>)>} */
+    static PROP_ALIASES: Record<string, string | ((val: any, key: string) => Record<string, any>)>;
+    /**
+     * Factory method to create or return an existing `Element`.
+     * @param {Object} input
+     * @returns {Element}
+     */
+    static from(input: any): Element;
+    /**
+     * Parses $-props.
+     * Converts for example:
+     *   - $style="color:red;font-size:14px" → { style: { color: 'red', 'font-size': '14px' } }
+     *   - $onClick=fn → { onClick: fn }
+     *   - $ariaHidden=true → { 'aria-hidden': true }
+     *
+     * @param {string} key - The name of the prop
+     * @param {any} value - The value of the prop
+     * @returns {Object} - An object { propName: newVal }
+     */
+    static parseProp(key: string, value: any): any;
+    /**
+     * Parses an inline CSS style string.
+     * @param {string} styleStr
+     * @returns {Object}
+     */
+    static parseInlineStyle(styleStr: string): any;
+    /**
+     * Extracts $-props from the block.
+     * @param {Object} block
+     * @param {boolean} keep$ - Whether to keep the prefix `$`.
+     * @param {Function} [flatMap] - Function that transforms a key-value pair into a new key-value pair.
+     * @returns {Object}
+     */
+    static extractProps(block: any, keep$?: boolean, flatMap?: Function): any;
+    /**
+     * Extracts tags (non-prefixed keys) from the block.
+     * @param {Object} block
+     * @returns {Array<[string, any]>}
+     */
+    static extractTags(block: any): Array<[string, any]>;
+    /**
+     * Creates an `Element` from a declarative block.
+     * @param {Object} input - For example, { Button: ["Click"], $variant: "primary" }
+     */
+    constructor(input?: any);
+    /**
+     * The component type or HTML tag (e.g., "Button", "div")
+     * @type {string}
+     */
+    type: string;
+    /**
+     * The content of the element.
+     * Can be:
+     *   - string → text
+     *   - true → empty
+     *   - array → nested blocks { Icon } or text nodes
+     * @type {string | true | any[]}
+     */
+    content: string | true | any[];
+    /**
+     * Props extracted from $-keys.
+     * For example, { $onClick: fn, $variant: 'info' } → { onClick: fn, variant: 'info' }
+     * @type {Object}
+     */
+    props: any;
+    /**
+     * Checks if the element contains nested elements (not only text).
+     * @returns {boolean}
+     */
+    hasChildren(): boolean;
+    /**
+     * Checks if the content contains text fragments.
+     * @returns {boolean}
+     */
+    hasText(): boolean;
+    /**
+     * Returns an array of child elements (Element instances).
+     * @returns {Element[]}
+     */
+    getChildElements(): Element[];
+}

package/types/Theme/AppTheme.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    fontFamily: string;
+    atoms: Partial<typeof import("./atoms/index.js")>;
+    molecules: typeof import("./molecules/index.js");
+    organisms: typeof import("./organisms/index.js");
+};
+export default _default;
+/**
+ * Base application theme.
+ * Should be extended by app-specific themes.
+ */
+export type AppThemeConfig = import("./Theme.js").ThemeConfig & {
+    fontFamily?: string;
+};