@nan0web/ui 1.12.2 → 3.1.0

package/src/index.js

@@ -1,15 +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 './Model/index.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, 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'
 
@@ -21,9 +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 */
@@ -49,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,2 +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/testing/SnapshotRunner.js

@@ -7,11 +7,12 @@ import DBFS from '@nan0web/db-fs'
  */
 export class SnapshotRunner {
 	static async generateAndAudit(options) {
+		/** @type {import('@nan0web/db').DB} */
 		const db = options.db || new DBFS({ root: options.dataDir })
 		const runner = new Runner(options, { db })
 		if (options.getCategory) runner.getCategory = options.getCategory
 		if (options.createModelStream) runner.createModelStream = options.createModelStream
-		
+
 		const gen = runner.run()
 		let res = await gen.next()
 		while (!res.done) {

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/Model/index.d.ts

@@ -1,4 +1,4 @@
-export default Model;
+export default Models;
 import User from './User/User.js';
 import { HeaderModel } from '../domain/HeaderModel.js';
 import { FooterModel } from '../domain/FooterModel.js';
@@ -26,7 +26,7 @@ import { TimelineModel } from '../domain/components/index.js';
 import { EmptyStateModel } from '../domain/components/index.js';
 import { BannerModel } from '../domain/components/index.js';
 import { ProfileDropdownModel } from '../domain/components/index.js';
-declare namespace Model {
+declare namespace Models {
     export { User };
     export { HeaderModel };
     export { FooterModel };

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

package/types/Theme/CustomTheme.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {{ atoms?: object, molecules?: object, organisms?: object }} UserThemeConfig
+ */
+/**
+ * Returns selected or custom user theme.
+ * @param {string | UserThemeConfig} themeNameOrConfig
+ * @returns {import('./Theme.js').ThemeConfig}
+ */
+export function getUserTheme(themeNameOrConfig: string | UserThemeConfig): import("./Theme.js").ThemeConfig;
+/**
+ * Custom user theme.
+ * Extends the base Theme to allow passing configuration during instantiation.
+ * @param {UserThemeConfig} config
+ * @returns {import('./Theme.js').ThemeConfig}
+ */
+export default function CustomTheme(config: UserThemeConfig): import("./Theme.js").ThemeConfig;
+export type UserThemeConfig = {
+    atoms?: object;
+    molecules?: object;
+    organisms?: object;
+};

package/types/Theme/DarkLightTheme.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Theme that automatically switches between light/dark modes.
+ */
+export default class DarkLightTheme {
+    /** @type {Object} */
+    static light: any;
+    /** @type {Object} */
+    static dark: any;
+    /** @type {string} */
+    static current: string;
+    /**
+     * Gets active theme (light, dark, or system preference).
+     * @returns {Object}
+     */
+    static getActiveTheme(): any;
+}

package/types/Theme/Theme.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    atoms: typeof atoms;
+    molecules: typeof molecules;
+    organisms: typeof organisms;
+};
+export default _default;
+/**
+ * Universal UI theme foundation.
+ * Holds atoms, molecules, and organisms styling configs.
+ */
+export type ThemeConfig = {
+    atoms: Partial<typeof atoms>;
+    molecules: typeof molecules;
+    organisms: typeof organisms;
+};
+import * as atoms from './atoms/index.js';
+import * as molecules from './molecules/index.js';
+import * as organisms from './organisms/index.js';

package/types/Theme/atoms/Avatar.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    size: string;
+    borderRadius: string;
+    border: string;
+};
+export default _default;
+/**
+ * Theme definition for Avatar atom.
+ */
+export type AvatarTheme = {
+    size: string;
+    borderRadius: string;
+    border: string;
+};

package/types/Theme/atoms/Badge.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    borderRadius: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontWeight: string;
+    backgroundColor: string;
+    color: string;
+};
+export default _default;
+/**
+ * Theme definition for Badge atom.
+ */
+export type BadgeTheme = {
+    borderRadius: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontWeight: string;
+    backgroundColor: string;
+    color: string;
+};

package/types/Theme/atoms/Button.d.ts

@@ -0,0 +1,144 @@
+declare const _default: {
+    color: string;
+    background: string;
+    shadow: string;
+    hoverBackground: string;
+    solid: {
+        primary: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        secondary: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        success: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        warning: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        danger: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        info: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        light: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        dark: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        link: {
+            background: string;
+            color: string;
+            border: string;
+        };
+    };
+    outline: {
+        primary: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        secondary: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        success: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        warning: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        danger: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        info: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        light: {
+            background: string;
+            color: string;
+            border: string;
+        };
+        dark: {
+            background: string;
+            color: string;
+            border: string;
+        };
+    };
+    size: {
+        sm: {
+            fontSize: string;
+            paddingX: string;
+            paddingY: string;
+        };
+        md: {
+            fontSize: string;
+            paddingX: string;
+            paddingY: string;
+        };
+    };
+    animation: {
+        transition: string;
+        hoverAdjust: number;
+        activeAdjust: number;
+        focusScale: number;
+        activeScale: number;
+        disabledOpacity: number;
+    };
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamily: string;
+};
+export default _default;
+/**
+ * Theme definition for Button atom.
+ * Inherits common properties from Input and defines colour and shadow.
+ */
+export type ButtonTheme = {
+    color: string;
+    background: string;
+    shadow: string;
+    hoverBackground: string;
+    solid: any;
+    outline: any;
+    size: any;
+    animation: any;
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamily: string;
+};

package/types/Theme/atoms/Checkbox.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    size: string;
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    backgroundColor: string;
+    checkedColor: string;
+};
+export default _default;
+/**
+ * Theme definition for Checkbox atom.
+ */
+export type CheckboxTheme = {
+    size: string;
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    backgroundColor: string;
+    checkedColor: string;
+};

package/types/Theme/atoms/Input.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    borderRadius: string;
+    borderWidth: string;
+    borderColor: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamily: string;
+};
+export default _default;
+/**
+ * Theme definition for Input atom.
+ */
+export type InputTheme = {
+    borderRadius: string;
+    borderWidth: string;
+    borderColor: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamily: string;
+};

package/types/Theme/atoms/Radio.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    size: string;
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    backgroundColor: string;
+    checkedColor: string;
+};
+export default _default;
+/**
+ * Theme definition for Radio atom.
+ */
+export type RadioTheme = {
+    size: string;
+    borderColor: string;
+    borderRadius: string;
+    borderWidth: string;
+    backgroundColor: string;
+    checkedColor: string;
+};

package/types/Theme/atoms/Select.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    borderRadius: string;
+    borderWidth: string;
+    borderColor: string;
+    fontSize: string;
+    paddingX: string;
+    paddingY: string;
+    fontFamily: string;
+};
+export default _default;
+/**
+ * Theme definition for Select atom.
+ * Inherits all properties from InputTheme.
+ */
+export type SelectTheme = import("./Input.js").InputTheme;