@nan0web/ui 1.1.0 → 1.5.2

package/src/Locale.js

@@ -1,4 +1,4 @@
-import { typeOf, notEmpty } from "@nan0web/types"
+import { typeOf, notEmpty } from '@nan0web/types'
 
 /**
  * Handles locale-specific formatting for different data types.
@@ -42,14 +42,14 @@ export default class Locale {
 	 */
 	constructor(props = {}) {
 		const {
-			lang = "",
-			collate = "",
-			ctype = "",
-			messages = "",
-			monetary = "",
-			numeric = "",
-			time = "",
-			all = "uk_UA.UTF-8",
+			lang = '',
+			collate = '',
+			ctype = '',
+			messages = '',
+			monetary = '',
+			numeric = '',
+			time = '',
+			all = 'uk_UA.UTF-8',
 		} = props
 		this.lang = lang
 		this.collate = collate
@@ -70,9 +70,9 @@ export default class Locale {
 	format(type, options) {
 		if (Number === type || typeOf(Number)(type)) {
 			/**
-				* new (locales?: LocalesArgument, options?: NumberFormatOptions): NumberFormat;
-				* (locales?: LocalesArgument, options?: NumberFormatOptions): NumberFormat;
-				* supportedLocalesOf(locales: LocalesArgument, options?: NumberFormatOptions): string[];
+			 * new (locales?: LocalesArgument, options?: NumberFormatOptions): NumberFormat;
+			 * (locales?: LocalesArgument, options?: NumberFormatOptions): NumberFormat;
+			 * supportedLocalesOf(locales: LocalesArgument, options?: NumberFormatOptions): string[];
 			 */
 			/**
 			 * localeMatcher?: "lookup" | "best fit" | undefined;
@@ -85,18 +85,18 @@ export default class Locale {
 			 * maximumFractionDigits?: number | undefined;
 			 * minimumSignificantDigits?: number | undefined;
 			 * maximumSignificantDigits?: number | undefined;
-			*/
+			 */
 			const locales = [this.numeric, this.all, this.lang].filter(notEmpty)
 			return (value) => {
 				return new Intl.NumberFormat(locales, options).format(value)
 			}
 		}
-		if ("string" === typeof type) {
+		if ('string' === typeof type) {
 			const locales = [this.monetary, this.numeric, this.all, this.lang].filter(notEmpty)
 			return (value) => {
 				return new Intl.NumberFormat(locales, {
-					style: "currency",
-					currency: type === "currency" ? options.currency : type,
+					style: 'currency',
+					currency: type === 'currency' ? options.currency : type,
 					...options,
 				}).format(value)
 			}
@@ -110,10 +110,9 @@ export default class Locale {
 	 */
 	static from(input) {
 		if (input instanceof Locale) return input
-		if ("string" === typeof input) {
+		if ('string' === typeof input) {
 			return new Locale({ all: input })
 		}
 		return new Locale(input)
 	}
 }
-

package/src/Model/User/User.js

@@ -15,10 +15,7 @@ class User {
 	 * @param {string} [props.email=""] - User email
 	 */
 	constructor(props = {}) {
-		const {
-			name = "",
-			email = "",
-		} = props
+		const { name = '', email = '' } = props
 		this.name = String(name)
 		this.email = String(email)
 	}
@@ -36,7 +33,7 @@ class User {
 	 * @returns {string} User name and email (if exists)
 	 */
 	toString() {
-		return [this.name, this.email ? `<${this.email}>` : ""].filter(Boolean).join(" ")
+		return [this.name, this.email ? `<${this.email}>` : ''].filter(Boolean).join(' ')
 	}
 
 	/**
@@ -46,7 +43,7 @@ class User {
 	 */
 	static from(props) {
 		if (props instanceof User) return props
-		if ("string" === typeof props) {
+		if ('string' === typeof props) {
 			return new User({ name: props })
 		}
 		return new User(props)

package/src/Model/index.js

@@ -1,4 +1,4 @@
-import User from "./User/User.js"
+import User from './User/User.js'
 
 export { User }
 

package/src/README.md.js

@@ -1,29 +1,17 @@
-import { describe, it, before, beforeEach } from "node:test"
-import assert from "node:assert/strict"
-import FS from "@nan0web/db-fs"
-import { NoConsole } from "@nan0web/log"
-import {
-	DatasetParser,
-	DocsParser,
-	runSpawn,
-} from "@nan0web/test"
-import {
-	Frame,
-	Model,
-	OutputMessage,
-	View,
-	FormInput,
-	UiMessage,
-	UiForm,
-} from "./index.js"
-import { Welcome } from "./Component/index.js"
+import { describe, it, before, beforeEach } from 'node:test'
+import assert from 'node:assert/strict'
+import FS from '@nan0web/db-fs'
+import { NoConsole } from '@nan0web/log'
+import { DatasetParser, DocsParser, runSpawn } from '@nan0web/test'
+import { Frame, Model, OutputMessage, View, FormInput, UiMessage, UiForm } from './index.js'
+import { Welcome } from './Component/index.js'
 
 const fs = new FS()
 let pkg
 
 // Load package.json once before tests
 before(async () => {
-	const doc = await fs.loadDocument("package.json", {})
+	const doc = await fs.loadDocument('package.json', {})
 	pkg = doc || {}
 })
 
@@ -33,18 +21,17 @@ beforeEach((info) => {
 	console = new NoConsole()
 })
 
-/**
- * Core test suite that also serves as the source for README generation.
- *
- * The block comments inside each `it` block are extracted to build
- * the final `README.md`. Keeping the comments here ensures the
- * documentation stays close to the code.
- */
+// Core test suite that also serves as the source for README generation.
+// The block comments inside each `it` block are extracted to build
+// the final `README.md`. Keeping the comments here ensures the
+// documentation stays close to the code.
 function testRender() {
 	/**
 	 * @docs
 	 * # @nan0web/ui
 	 *
+	 * 🏴󠁧󠁢󠁥󠁮󠁧󠁿 [English](./README.md) | 🇺🇦 [Українською](./docs/uk/README.md)
+	 *
 	 * <!-- %PACKAGE_STATUS% -->
 	 *
 	 * A lightweight, agnostic UI framework designed with the **nan0web philosophy**
@@ -65,35 +52,35 @@ function testRender() {
 	 *
 	 * ## Installation
 	 */
-	it("How to install with npm?", () => {
+	it('How to install with npm?', () => {
 		/**
 		 * ```bash
 		 * npm install @nan0web/ui
 		 * ```
 		 */
-		assert.equal(pkg.name, "@nan0web/ui")
+		assert.equal(pkg.name, '@nan0web/ui')
 	})
 	/**
 	 * @docs
 	 */
-	it("How to install with pnpm?", () => {
+	it('How to install with pnpm?', () => {
 		/**
 		 * ```bash
 		 * pnpm add @nan0web/ui
 		 * ```
 		 */
-		assert.equal(pkg.name, "@nan0web/ui")
+		assert.equal(pkg.name, '@nan0web/ui')
 	})
 	/**
 	 * @docs
 	 */
-	it("How to install with yarn?", () => {
+	it('How to install with yarn?', () => {
 		/**
 		 * ```bash
 		 * yarn add @nan0web/ui
 		 * ```
 		 */
-		assert.equal(pkg.name, "@nan0web/ui")
+		assert.equal(pkg.name, '@nan0web/ui')
 	})
 
 	/**
@@ -110,16 +97,16 @@ function testRender() {
 	 * Messages are simple, serializable data containers. They help build
 	 * decoupled communication systems between UI components.
 	 */
-	it("How to create input and output messages?", () => {
+	it('How to create input and output messages?', () => {
 		//import { InputMessage, OutputMessage } from '@nan0web/ui'
 
 		const input = UiMessage.from({ body: 'Hello User' })
 		const output = OutputMessage.from({ content: ['Welcome to @nan0web/ui'] })
 		console.info(input) // ← Message { body: "Hello User", head: {}, id: "....", type: "" }
 		console.info(String(output)) // ← Welcome to @nan0web/ui
-		assert.deepStrictEqual(console.output()[0][1].body, "Hello User")
+		assert.deepStrictEqual(console.output()[0][1].body, 'Hello User')
 		assert.deepStrictEqual(console.output()[0][1].head, {})
-		assert.deepStrictEqual(console.output()[0][1].type, "")
+		assert.deepStrictEqual(console.output()[0][1].type, '')
 		assert.ok(console.output()[0][1].id)
 		assert.ok(console.output()[1][1].endsWith('Welcome to @nan0web/ui'))
 	})
@@ -140,27 +127,32 @@ function testRender() {
 	 * - `checkbox`
 	 * - `textarea`
 	 */
-	it("How to define and validate a UiForm?", () => {
+	it('How to define and validate a UiForm?', () => {
 		//import { UiForm } from '@nan0web/ui'
 
 		const form = new UiForm({
-			title: "Contact Form",
+			title: 'Contact Form',
 			fields: [
-				FormInput.from({ name: "email", label: "Email Address", type: "email", required: true }),
-				FormInput.from({ name: "message", label: "Your Message", type: "textarea", required: true })
+				FormInput.from({ name: 'email', label: 'Email Address', type: 'email', required: true }),
+				FormInput.from({
+					name: 'message',
+					label: 'Your Message',
+					type: 'textarea',
+					required: true,
+				}),
 			],
 			state: {
-				email: "invalid-email",
-				message: "Hello!"
-			}
+				email: 'invalid-email',
+				message: 'Hello!',
+			},
 		})
 
 		const errors = form.validate()
 		console.info(errors.size) // ← 1
-		console.info(errors.get("email")) // ← Invalid email format
+		console.info(errors.get('email')) // ← Invalid email format
 
 		assert.equal(console.output()[0][1], 1)
-		assert.equal(console.output()[1][1], "Invalid email format")
+		assert.equal(console.output()[1][1], 'Invalid email format')
 	})
 
 	/**
@@ -172,13 +164,13 @@ function testRender() {
 	 * - `Welcome` – greets user by name
 	 * - `Process` – shows progress bar and time
 	 */
-	it("How to render the Welcome component?", () => {
+	it('How to render the Welcome component?', () => {
 		//import { Welcome } from '@nan0web/ui'
 
-		const frame = Welcome({ user: { name: "Alice" } })
-		const firstLine = frame[0].join("")
+		const frame = Welcome({ user: { name: 'Alice' } })
+		const firstLine = frame[0].join('')
 		console.info(firstLine) // ← Welcome Alice!
-		assert.equal(console.output()[0][1], "Welcome Alice!")
+		assert.equal(console.output()[0][1], 'Welcome Alice!')
 	})
 
 	/**
@@ -193,13 +185,13 @@ function testRender() {
 	 * - StdIn / StdOut – input/output streams
 	 * - Frame – output buffer with visual properties
 	 */
-	it("How to render frame with View?", () => {
+	it('How to render frame with View?', () => {
 		//import { View } from '@nan0web/ui'
 
 		const view = new View()
-		view.render(1)(["Hello, world"])
+		view.render(1)(['Hello, world'])
 		console.info(String(view.frame)) // ← "\rHello, world"
-		assert.ok(String(view.frame).includes("Hello, world"))
+		assert.ok(String(view.frame).includes('Hello, world'))
 	})
 
 	/**
@@ -215,36 +207,36 @@ function testRender() {
 	 * - `REPLACE` – erases and replaces full frame area
 	 * - `VISIBLE` – renders only visible part of frame
 	 */
-	it("How to create a Frame with fixed size?", () => {
+	it('How to create a Frame with fixed size?', () => {
 		//import { Frame } from '@nan0web/ui'
 
 		const frame = new Frame({
-			value: [["Frame content"]],
+			value: [['Frame content']],
 			width: 20,
 			height: 5,
 			renderMethod: Frame.RenderMethod.APPEND,
 		})
 
 		const rendered = frame.render()
-		console.info(rendered.includes("Frame content")) // ← true
-		assert.ok(rendered.includes("Frame content"))
+		console.info(rendered.includes('Frame content')) // ← true
+		assert.ok(rendered.includes('Frame content'))
 	})
-	it("How to create a Frame with different render methods?", () => {
+	it('How to create a Frame with different render methods?', () => {
 		//import { Frame } from '@nan0web/ui'
 
 		const frame = new Frame({
-			value: [["Frame content"]],
+			value: [['Frame content']],
 			width: 20,
 			height: 5,
 		})
 
 		frame.renderMethod = Frame.RenderMethod.REPLACE
 		const renderedReplace = frame.render()
-		assert.ok(renderedReplace.includes("Frame content"))
+		assert.ok(renderedReplace.includes('Frame content'))
 
 		frame.renderMethod = Frame.RenderMethod.VISIBLE
 		const renderedVisible = frame.render()
-		assert.ok(renderedVisible.includes("Frame content"))
+		assert.ok(renderedVisible.includes('Frame content'))
 	})
 
 	/**
@@ -255,14 +247,14 @@ function testRender() {
 	 *
 	 * - `User` – user data
 	 */
-	it("How to use a User model?", () => {
+	it('How to use a User model?', () => {
 		//import { Model } from '@nan0web/ui'
 
-		const user = new Model.User({ name: "Charlie", email: "charlie@example.com" })
+		const user = new Model.User({ name: 'Charlie', email: 'charlie@example.com' })
 		console.info(user.name) // ← Charlie
 		console.info(user.email) // ← charlie@example.com
-		assert.equal(user.name, "Charlie")
-		assert.equal(user.email, "charlie@example.com")
+		assert.equal(user.name, 'Charlie')
+		assert.equal(user.email, 'charlie@example.com')
 	})
 
 	/**
@@ -274,18 +266,47 @@ function testRender() {
 	 * All components, adapters, and models are designed to be testable
 	 * with minimal setup.
 	 */
-	it("How to test UI components with assertions?", () => {
+	it('How to test UI components with assertions?', () => {
 		//import { Welcome } from '@nan0web/ui'
 
-		const output = Welcome({ user: { name: "Test" } })
+		const output = Welcome({ user: { name: 'Test' } })
 		console.info(output) // ← Welcome Test!
 		assert.deepStrictEqual(console.output()[0][1], [
-			["Welcome", " ", "Test", "!"],
-			["What can we do today great?"],
-			[""],
+			['Welcome', ' ', 'Test', '!'],
+			['What can we do today great?'],
+			[''],
 		])
 	})
 
+	/**
+	 * @docs
+	 * ### Master IDE (Component Sandbox)
+	 *
+	 * The Master IDE (OlmuiInspector) provides a unified environment for testing and documenting
+	 * web components across platforms. It supports:
+	 *
+	 * - **NaN0 Spec** — a concise YAML-based shorthand for declaring component variations.
+	 * - **OlmuiInspector** — unified UI for exploring component models and props.
+	 * - **Live Preview** — real-time rendering of component states.
+	 * - **i18n UI** — fully localized interface for global developers.
+	 *
+	 * It follows the **Olmui** core pattern: *One Logic — Many UI* (same manifest powers both CLI and Web).
+	 *
+	 * #### NaN0 Spec (YAML)
+	 *
+	 * Concise format for defining variations:
+	 */
+	it('How to define a component variation using NaN0 Spec?', () => {
+		/**
+		 * ```yaml
+		 * - Button: Primary
+		 *   $variant: brand
+		 *   $outline: true
+		 * ```
+		 */
+		assert.ok(pkg.name === '@nan0web/ui')
+	})
+
 	/**
 	 * @docs
 	 * ## Playground Demos
@@ -299,7 +320,7 @@ function testRender() {
 	 *
 	 * Run to explore live functionality:
 	 */
-	it("How to run the playground?", async () => {
+	it('How to run the playground?', async () => {
 		/**
 		 * ```bash
 		 * # Clone repository and run playground
@@ -309,10 +330,10 @@ function testRender() {
 		 * npm run play
 		 * ```
 		 */
-		assert.ok(String(pkg.scripts?.play).includes("node play"))
-		const response = await runSpawn("git", ["remote", "get-url", "origin"])
-		assert.ok(response.code === 0, "git command fails (e.g., not in a git repo)")
-		assert.ok(response.text.trim().endsWith(":nan0web/ui.git"))
+		assert.ok(String(pkg.scripts?.play).includes('node play'))
+		const response = await runSpawn('git', ['remote', 'get-url', 'origin'])
+		assert.ok(response.code === 0, 'git command fails (e.g., not in a git repo)')
+		assert.ok(response.text.trim().endsWith(':nan0web/ui.git'))
 	})
 
 	/**
@@ -330,41 +351,45 @@ function testRender() {
 	 * - [App](./src/App/)
 	 * - [Models](./src/Model/)
 	 *
+	 * ## Project Architecture & Specs
+	 *
+	 * How the universal block spec is designed? - [check Universal Blocks Spec (`project.md`)](./project.md)
+	 *
 	 * ## Contributing
 	 */
-	it("How to contribute? - [check here](./CONTRIBUTING.md)", async () => {
-		assert.equal(pkg.scripts?.precommit, "npm test")
-		assert.equal(pkg.scripts?.prepush, "npm test")
-		assert.equal(pkg.scripts?.prepare, "husky")
-		const text = await fs.loadDocument("CONTRIBUTING.md")
-		const str = String(text)
-		assert.ok(str.includes("# Contributing"))
+	it('How to contribute? - [check here](./CONTRIBUTING.md)', async () => {
+		assert.equal(pkg.scripts?.precommit, 'npm test')
+		assert.equal(pkg.scripts?.prepush, 'npm test')
+		assert.equal(pkg.scripts?.prepare, 'husky')
+		const str = await fs.loadDocumentAs('.txt', 'CONTRIBUTING.md')
+		assert.ok(str.includes('# Contributing'))
 	})
 
 	/**
 	 * @docs
 	 * ## License
 	 */
-	it("How to license ISC? - [check here](./LICENSE)", async () => {
+	it('How to license ISC? - [check here](./LICENSE)', async () => {
 		/** @docs */
-		const text = await fs.loadDocument("LICENSE")
-		assert.ok(String(text).includes("ISC"))
+		const text = await fs.loadDocumentAs('.txt', 'LICENSE')
+		assert.ok(text.includes('ISC'))
 	})
 }
 
-describe("README.md testing", testRender)
+describe('README.md testing', testRender)
 
-describe("Rendering README.md", async () => {
-	let text = ""
-	const format = new Intl.NumberFormat("en-US").format
+describe('Rendering README.md', async () => {
+	let text = ''
+	const format = new Intl.NumberFormat('en-US').format
 	const parser = new DocsParser()
-	text = String(parser.decode(testRender))
-	await fs.saveDocument("README.md", text)
-	const dataset = DatasetParser.parse(text, pkg.name)
-	await fs.saveDocument(".datasets/README.dataset.jsonl", dataset)
+	const source = await fs.loadDocument('src/README.md.js')
+	text = String(parser.decode(source))
+	await fs.saveDocument('README.md', { content: text })
+	const dataset = DatasetParser.parse(text, pkg?.name ?? '@nan0web/ui')
+	await fs.saveDocument('.datasets/README.dataset.jsonl', dataset)
 
 	it(`document is rendered in README.md [${format(Buffer.byteLength(text))}b]`, async () => {
-		const text = await fs.loadDocument("README.md")
-		assert.ok(text.includes("## License"))
+		const text = await fs.loadDocumentAs('.txt', 'README.md')
+		assert.ok(text.includes('## License'))
 	})
 })

package/src/StdIn.js

@@ -1,8 +1,8 @@
-import EventProcessor from "@nan0web/event/oop"
-import { typeOf } from "@nan0web/types"
-import { UiMessage } from "./core/index.js"
+import EventProcessor from '@nan0web/event/oop'
+import { typeOf } from '@nan0web/types'
+import { UiMessage } from './core/index.js'
 
-class Processor extends EventProcessor { }
+class Processor extends EventProcessor {}
 
 /**
  * Handles standard input stream with message buffering.
@@ -12,7 +12,7 @@ export default class StdIn extends EventProcessor {
 	static READ_INTERVAL = 99
 
 	/** @type {string[]} Messages to ignore */
-	static IGNORE_MESSAGES = ["", "undefined"]
+	static IGNORE_MESSAGES = ['', 'undefined']
 
 	/** @type {UiMessage[]} Input message buffer */
 	stream = []
@@ -28,13 +28,10 @@ export default class StdIn extends EventProcessor {
 	 */
 	constructor(props = {}) {
 		super()
-		const {
-			processor = new Processor(),
-			stream = [],
-		} = props
+		const { processor = new Processor(), stream = [] } = props
 		this.processor = processor
 		this.stream = stream
-		this.processor?.on("data", (data) => {
+		this.processor?.on('data', (data) => {
 			this.write(data)
 		})
 	}
@@ -62,7 +59,7 @@ export default class StdIn extends EventProcessor {
 	 */
 	async read() {
 		while (this.ended) {
-			await new Promise(resolve => setTimeout(resolve, StdIn.READ_INTERVAL))
+			await new Promise((resolve) => setTimeout(resolve, StdIn.READ_INTERVAL))
 		}
 		return this.stream.shift() ?? new UiMessage()
 	}
@@ -105,4 +102,3 @@ export default class StdIn extends EventProcessor {
 		return new this(input)
 	}
 }
-

package/src/StdOut.js

@@ -1,40 +1,40 @@
-import { typeOf } from "@nan0web/types"
-import EventProcessor from "@nan0web/event/oop"
+import { typeOf } from '@nan0web/types'
+import EventProcessor from '@nan0web/event/oop'
 
 /**
  * Handles standard output stream with formatting capabilities.
  */
 class StdOut extends EventProcessor {
 	/** @type {string} End of line character */
-	static EOL = "\n"
+	static EOL = '\n'
 
 	/** @type {string} Beginning of line character */
-	static BOL = "\r"
+	static BOL = '\r'
 
 	/** @type {string} Reset formatting escape code */
-	static RESET = "\x1b[0m"
+	static RESET = '\x1b[0m'
 
 	/** @type {string} Clear screen escape code */
-	static CLEAR = "\x1b[2J\x1b[H"
+	static CLEAR = '\x1b[2J\x1b[H'
 
 	/** @type {object} Color escape codes */
 	static COLORS = {
-		red: "\x1b[31m",
-		green: "\x1b[32m",
-		yellow: "\x1b[33m",
-		blue: "\x1b[34m",
-		magenta: "\x1b[35m",
-		cyan: "\x1b[36m",
-		white: "\x1b[37m",
-		gray: "\x1b[90m",
-		black: "\x1b[30m",
+		red: '\x1b[31m',
+		green: '\x1b[32m',
+		yellow: '\x1b[33m',
+		blue: '\x1b[34m',
+		magenta: '\x1b[35m',
+		cyan: '\x1b[36m',
+		white: '\x1b[37m',
+		gray: '\x1b[90m',
+		black: '\x1b[30m',
 	}
 
 	/** @type {Record<string, string>} Style escape codes */
 	static STYLES = {
-		dim: "\x1b[2m",
-		bold: "\x1b[1m",
-		underline: "\x1b[4m",
+		dim: '\x1b[2m',
+		bold: '\x1b[1m',
+		underline: '\x1b[4m',
 	}
 
 	/**
@@ -59,11 +59,7 @@ class StdOut extends EventProcessor {
 	 */
 	constructor(props = {}) {
 		super()
-		const {
-			processor,
-			stream = [],
-			windowSize = [144, 33],
-		} = props
+		const { processor, stream = [], windowSize = [144, 33] } = props
 		this.processor = processor
 		this.stream = stream
 		this.windowSize = windowSize
@@ -75,16 +71,16 @@ class StdOut extends EventProcessor {
 	 * @param {any} output - Output to write
 	 * @param {Function} onError - Error handler callback
 	 */
-	write(output, onError = v => 1) {
-			/**
+	write(output, onError = (v) => 1) {
+		/**
 		 * @todo manage the
 		 */
 		if (typeOf(Array)(output)) {
-			output = output.join("\n")
+			output = output.join('\n')
 		}
 		this.stream.push(output)
 		this.processor?.write(output, onError)
-		this.emit("data", output)
+		this.emit('data', output)
 	}
 
 	/**

package/src/View/RenderOptions.js

@@ -1,4 +1,4 @@
-import Frame from "../Frame/Frame.js"
+import Frame from '../Frame/Frame.js'
 
 class RenderOptions {
 	static DEFAULTS = {