### Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/text/text/readme.md

This snippet shows how to use the $mol_text component, including setting up text highlighting with a search term and defining the markdown content. It also includes basic setup instructions for starting a development server.

```tree
<= Description $mol_text
	highlight <= search \mam
	text <= description \
		# Quick start
		
		## Start dev server
		git clone https://github.com/nin-jin/mam.git
		cd mam
		npm install
		npm start
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/select/readme.md

This snippet demonstrates the basic setup of the $mol_select component, defining a color selection with predefined options.

```typescript
<= Color $mol_select
	value? <=> color?
	dictionary <= colors *
		red \Red
		green \Green
		blue \Blue
```

--------------------------------

### Install mol_wire_pub

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Install the tiny lib for making states observable with $mol_wire.

```sh
npm install mol_wire_pub
```

--------------------------------

### Install mol_wire_lib

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Install the production-ready $mol_wire modules bundle using npm.

```sh
npm install mol_wire_lib
```

--------------------------------

### Time Property Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/date/readme.md

Example of using the `time` property to set a start time in hh:mm format.

```javascript
<= Begin $mol_date
	time? <=> begin? \09:00
```

--------------------------------

### Start Release Server

Source: https://github.com/hyoo-ru/mam_mol/blob/master/rest/readme.md

Starts the release server using the compiled Node.js output.

```sh
node my/crud/-/node.js port=9090
```

--------------------------------

### Usage Example of $mol_audio_sample

Source: https://github.com/hyoo-ru/mam_mol/blob/master/audio/sample/readme.md

This snippet shows how to integrate $mol_audio_sample into a view, controlling its playback, looping, and status through other $mol components. It requires no specific setup beyond the standard $mol framework.

```ించింది
$my_sample $mol_view
	Room $mol_audio_room
		status? => room_status?
		input /
			<= Sample $mol_audio_sample
				active? => sample_active?
				start => start
				loop? => loop?
				loop_default true
				buffer <= sample_buffer null
	sub /
		<= Active $mol_check_icon
			checked? <=> sample_active? - pause/resume sample
			title \Active
			Icon <= Active_icon $mol_icon_play
		<= Start $mol_button_minor
			click? <=> start_click? null - restart sample
			title \Start
		<= Loop $mol_check_icon
			checked? <=> loop? - looping
			title \Loop
			Icon <= Loop_icon $mol_icon_loop
		<= Room_status $mol_audio_status
			status? <=> room_status?
```

--------------------------------

### Install mol_wire_dom

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Install the mol_wire_dom package using npm.

```sh
npm install mol_wire_domm
```

--------------------------------

### Publisher Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Example demonstrating the use of $mol_wire_pub to create an observable counter with functions to increase, decrease, and retrieve its state.

```ts
import { $mol_wire_pub as Publisher } from 'mol_wire_pub'

let counter = 0
const pub = new Publisher

export function state() {
	pub.promote()
	return counter
}

export function increase() {
	++ counter
	pub.emit()
}

export function decrease() {
	-- counter
	pub.emit()
}
```

--------------------------------

### Start Development Server

Source: https://github.com/hyoo-ru/mam_mol/blob/master/rest/readme.md

Starts the development server for the CRUD resource on a specified port.

```sh
npm start
+ my/crud port=9090
```

--------------------------------

### WebRTC DataChannel Setup and Communication

Source: https://github.com/hyoo-ru/mam_mol/blob/master/rest/readme.md

Sets up a WebRTC DataChannel for peer-to-peer communication, including SDP exchange and sending messages. This example requires further development for a simple client-side API.

```typescript
const con = new RTCPeerConnection

// Make & setup DataChannel
const chan = con.createDataChannel( '$my_channel', { negotiated : true, id: 0 } )
chan.onmessage = e => console.log( e.data )

// Wait ICE candidate
await con.setLocalDescription()
await new Promise( done => con.onicecandidate = ({ candidate })=> done( candidate ) )

// Exchange SDP
const sdp = await fetch( '/any/query', {
	headers: { 'content-type': 'application/sdp' },
	method: 'options',
	body: con.localDescription.sdp,
} ).then( res => res.text() )

// Wait Connection
await con.setRemoteDescription({ sdp, type: 'answer' })
await new Promise( done => chan.onopen = done )

// Same as POST HTTP Request with same Query
chan.send( 'ping' )
```

--------------------------------

### NPM Installation

Source: https://github.com/hyoo-ru/mam_mol/blob/master/type/README.md

Command to install the mol_type_all package via NPM.

```sh
npm install mol_type_all
```

--------------------------------

### Install mol_key

Source: https://github.com/hyoo-ru/mam_mol/blob/master/key/README.md

Install the mol_key package using npm.

```bash
npm install mol_key
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/lights/readme.md

This snippet shows how to integrate $mol_lights_toggle into your application's plugin configuration.

```javascript
plugins /
	<= Theme $mol_theme_auto
body /
	<= Lighter $mol_lights_toggle
```

--------------------------------

### Install mol_vary

Source: https://github.com/hyoo-ru/mam_mol/blob/master/vary/readme.md

Install the mol_vary package using npm. This is the first step to using the library in your project.

```sh
npm install mol_vary
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/book2/readme.md

This snippet shows how to use the $mol_book2 component as a root element for an application, defining navigation pages.

```config
$my_app $mol_book2
	pages /
		<= Menu $mol_page
		<= Main $mol_page
```

--------------------------------

### NPM Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/type/README.md

Shows how to import and use $mol_type_assert and $mol_type_tail from the 'mol_type_all' package in TypeScript.

```typescript
import {
	$mol_type_assert as Assert,
	$mol_type_tail as Tail,
} from 'mol_type_all'

type cutted_head = Assert<
	Tail<[ 1, 2, 3 ]>,
	[ 2, 3 ]
>
```

--------------------------------

### Create MAM Project

Source: https://github.com/hyoo-ru/mam_mol/blob/master/readme.md

Clone the preconfigured MAM repository and start the development server to quickly set up a new project.

```sh
git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
npm install && npm start
```

--------------------------------

### Install mol_regexp via NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/regexp/README.md

Install the mol_regexp package using npm. This command fetches and installs the library into your project's node_modules directory.

```bash
npm install mol_regexp
```

--------------------------------

### Install mol_crypto_lib

Source: https://github.com/hyoo-ru/mam_mol/blob/master/crypto/README.md

Instructions for installing the mol_crypto_lib package using npm. This is the first step to using the library in your project.

```bash
npm install mol_crypto_lib
```

--------------------------------

### Install mol_db via NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/db/README.md

Installs the mol_db package using npm.

```bash
npm install mol_db
```

--------------------------------

### JavaScript Example with Decorators

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Shows how to apply $mol_wire decorators (solo, plex, task) to a JavaScript class prototype.

```js
const $ = require( 'mol_wire_lib' )

class User {
	age( next = 0 ) { return next }
	finger_exists( id: string, next = true ) { return next }
	finger_cut( id: string ) { this.finger_exists( id, false ) }
}

$.$mol_wire_solo( User.prototype, 'age' )
$.$mol_wire_plex( User.prototype, 'finger_exists' )
$.$mol_wire_task( User.prototype, 'finger_cut' )
```

--------------------------------

### Install via Web Script

Source: https://github.com/hyoo-ru/mam_mol/blob/master/syntax2/readme.md

Include the $mol_syntax2 library directly in your HTML using a script tag for web-based projects.

```html
<script src="http://mol.js.org/syntax2/-/web.js"></script>
```

--------------------------------

### Build Standalone Mam Module

Source: https://github.com/hyoo-ru/mam_mol/blob/master/readme.md

Clone the Mam repository, install dependencies, and start a module build. Copy the built module files to your desired directory.

```bash
git clone https://github.com/hyoo-ru/mam.git ./mam
cd mam
npm install
npm start path/to/module
cp path/to/module/-/* your/build/directory
```

--------------------------------

### Install via NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/syntax2/readme.md

Install the mol_syntax package using npm for use in Node.js or other JavaScript projects.

```sh
npm install mol_syntax --save
```

--------------------------------

### Build Instance - Complex example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/regexp/README.md

Demonstrates the construction of a complex regular expression by combining various building blocks.

```APIDOC
## Build Instance - Complex example

### Description
Demonstrates the construction of a complex regular expression by combining various building blocks.

### Method
Combination of various `$mol_regexp` methods.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
const {
	begin, end,
	char_only, char_range,
	latin_only, slash_back,
	repeat_greedy, from,
} = $mol_regexp

const atom_char = char_only( latin_only, "!#$%&'*+/=?^`{|}~-" )
const atom = repeat_greedy( atom_char, 1 )
const dot_atom = from([ atom, repeat_greedy([ '.', atom ]) ])

const name_letter = char_only(
	char_range( 0x01, 0x08 ),
	0x0b, 0x0c,
	char_range( 0x0e, 0x1f ),
	0x21,
	char_range( 0x23, 0x5b ),
	char_range( 0x5d, 0x7f ),
)

const quoted_pair = from([
	slash_back,
	char_only(
		char_range( 0x01, 0x09 ),
		0x0b, 0x0c,
		char_range( 0x0e, 0x7f ),
	)
])

const name = repeat_greedy({ name_letter, quoted_pair })
const quoted_name = from([ '"', {name}, '"' ])

const local_part = from({ dot_atom, quoted_name })
const domain = dot_atom

const mail = from([ begin, local_part, '@', {domain}, end ])
```

### Response
#### Success Response (200)
A complex RegExp object constructed from multiple components.

#### Response Example
```regex
/^(?:(a(?:\.(?!$))?)+|"(?:(?:[^\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f])|(?:\\[^]))*")@(?:(?:a(?:\.(?!$))?)+)$/su
```
```

--------------------------------

### Install and Import $mol_charset_ucf

Source: https://github.com/hyoo-ru/mam_mol/blob/master/charset/ucf/readme.md

Instructions for installing the library using NPM and importing the necessary encode/decode functions into your project.

```bash
npm install	$mol_charset_ucf
```

```typescript
import {
	$mol_charset_ucf_encode,
	$mol_charset_ucf_decode
} from 'mol_charset_ucf'
```

--------------------------------

### WebDAV Client Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/webdav/readme.md

Demonstrates how to use the $mol_webdav client to access and list files from a WebDAV server. This example defines a domain object that fetches the root item, its sub-items, and their titles.

```typescript
namespace $ {
	
	export class $my_domain extends $mol_object {
		
		@ $mol_mem
		root() {
			return $mol_webdav.item( 'https://example.org' )
		}
		
		@ $mol_mem
		files() {
			return this.root().sub()
		}
		
		@ $mol_mem
		titles() {
			return this.files().map( file => file.title() )
		}
		
	}
	
}
```

--------------------------------

### Usage Example: $mol_audio_room with $mol_audio_melody

Source: https://github.com/hyoo-ru/mam_mol/blob/master/audio/melody/readme.md

This snippet demonstrates how to configure a $mol_audio_room to include a $mol_audio_melody component for playing beep tracks. It shows how to bind start and stop times, set default note length and the portion of silence at the end of a note, and define the note sequence. The instrument used is specified as $mol_audio_vibe.

```javascript
	Room $mol_audio_room
		status? => room_status?
		input /
			<= Beep_track $mol_audio_melody
				start => beep_track_start
				-
				note_length 1 - Default full note length in seconds
				note_off_part .4 - Silense at end of note in parts of note length
				-
				notes? <=> notes? \e e e _ e e e _ e g c d e _ _ _/2 f f f f f e e e e/2 e/2 d d e d _ g _
				instrument* <= Beep* $mol_audio_vibe
```

--------------------------------

### Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/textarea/readme.md

Demonstrates how to use the $mol_textarea component in a tree structure.

```tree
<= Description $mol_textarea
	value? <=> description? \ 
	hint <= description_hint @ \Descr
	enabled <= description_changeable true
```

--------------------------------

### Install mol_plot

Source: https://github.com/hyoo-ru/mam_mol/blob/master/plot/README.md

Install the mol_plot library using npm. This command installs all components of the library.

```sh
npm install mol_plot_all
```

--------------------------------

### Install mol_data_all Package

Source: https://github.com/hyoo-ru/mam_mol/blob/master/data/README.md

Install the mol_data_all package using npm. This command is required before using the package in your project.

```bash
npm install mol_data_all
```

--------------------------------

### Install $mol_time via NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/readme.md

Install the $mol_time library using NPM for use in Node.js or modern JavaScript projects.

```sh
npm install mol_time_all
```

--------------------------------

### Install mol_crypto2_lib

Source: https://github.com/hyoo-ru/mam_mol/blob/master/crypto2/README.md

Installs the mol_crypto2_lib package using npm. This command is used to add the cryptography library to your project.

```bash
npm install mol_crypto2_lib
```

--------------------------------

### Install mol_compare_deep via NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/compare/deep/README.md

Installs the mol_compare_deep package using npm. This is the standard way to add the library to your project for use.

```bash
npm install mol_compare_deep
```

--------------------------------

### Catalog Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/book2/catalog/readme.md

This snippet shows how to instantiate and configure the $mol_book2_catalog component, defining its parameters, menu title, tools, and available spreads.

```config
<= Calatog $mol_book2_catalog
	param \size
	menu_title @ \Sizes
	menu_tools <= catalog_tools /
	spreads *
		small <= Small $mol_page
		medium <= Medium $mol_page
		large <= Large $mol_page
```

--------------------------------

### Simple Channel Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Demonstrates a basic channel pattern for a getter-setter like behavior using a plain function and variable.

```ts
let _title = ''
const title = ( text = _title )=> _title = text

title()                  // getter, returns ''
title( 'Buy some milk' ) // getter-setter, sets and returns 'Buy some milk'
title()                  // getter, returns 'Buy some milk'
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/pick/readme.md

This snippet demonstrates the basic usage of the $mol_pick component, including setting a hint, trigger content, and bubble content.

```yaml
<= Pick $mol_pick
	hint @ \Click to show popup
	trigger_content /
		<= popup_trigger \? 
	bubble_content /
		<= popup_content @ \This is popup content
```

--------------------------------

### Date Property Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/date/readme.md

Example of using the `date` property to set a birth date in YYYY-MM-DD format.

```javascript
<= Birth_day $mol_date
	value? <=> birth_day? \2017-04-01
```

--------------------------------

### Basic $mol_audio_room Usage

Source: https://github.com/hyoo-ru/mam_mol/blob/master/audio/room/readme.md

Demonstrates a basic setup for a $mol_audio_room within a page, including autosuspend time and status binding.

```javascript
$my_beep_page $mol_page
	Beep_room $mol_audio_room
		suspend_time 100 - autosuspend time, if no active nodes in input. 0 - disables autosuspend.
		status? => beep_status?
	sub /
		<= Beep_status $mol_audio_status status? <=> beep_status?
```

--------------------------------

### Usage Example for $mol_bench

Source: https://github.com/hyoo-ru/mam_mol/blob/master/bench/readme.md

This snippet shows the basic usage of the $mol_bench component, defining its properties for sorting and result data.

```mol
<= Result $mol_bench
	col_sort? <=> result_sort?
	result? <=> result_data? *

```

--------------------------------

### Standalone Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/audio/vibe/readme.md

Demonstrates how to integrate the $mol_audio_vibe component within a $mol_audio_demo view for standalone noise generation. It sets up a noise room, an oscillator, and playback controls.

```mol
$mol_audio_demo $mol_view
	Noise_room $mol_audio_room
		status? => noise_status?
		input /
			<= Noise $mol_audio_vibe
				active? => noise_active?
				stop_at? => noise_stop_at?
				freq_default <= noise_freq 0
	sub /
		<= Noise_play $mol_button_minor
			click? <=> noise_play_click? null
			title \Noise
		<= Noise_status $mol_audio_status status? <=> noise_status?
```

--------------------------------

### Value Moment Property Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/date/readme.md

Example of using the `value_moment` property to set a date using a $mol_time_moment instance.

```javascript
<= Today $mol_date
	value_moment? <=> today? $mol_time_moment
```

--------------------------------

### MAM Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/type/README.md

Demonstrates how to use $mol_type_assert and $mol_type_tail within a MAM environment.

```typescript
type cutted_head = $mol_type_assert<
	$mol_type_tail<[ 1, 2, 3 ]>,
	[ 2, 3 ]
>
```

--------------------------------

### HTTP Request Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/rest/readme.md

Demonstrates making a JSON HTTP request to a specified endpoint.

```typescript
const response = $my_fetch.json( '/foo/bar=777/?xxx=lol' )
```

--------------------------------

### Basic Link Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/link/readme.md

This snippet shows a basic hyperlink pointing to a specific URI.

```javascript
<= Example $mol_link
	uri \http://example.org
	sub /
		\example.org
```

--------------------------------

### TypeScript Example with Decorators

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Demonstrates using $mol_wire decorators (solo, plex, task) in a TypeScript class for reactive properties and methods.

```ts
import {
	$mol_wire_solo as solo,
	$mol_wire_plex as plex,
	$mol_wire_method as task,
} from 'mol_wire_lib'

class User {
	@solo age( next = 0 ) { return next }
	@plex finger_exists( id: string, next = true ) { return next }
	@task finger_cut( id: string ) { this.finger_exists( id, false ) }
}
```

--------------------------------

### Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/chat/readme.md

This snippet shows how to use the $mol_chat component in your application. It defines a chat instance with a seed and pages.

```javascript
<= Chat $mol_chat
	seed <= seed \0_0
	pages => chat_pages
```

--------------------------------

### Static List Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/list/readme.md

Defines a static list of user components. Ensure that each row component inherits from $mol_view.

```typescript
<= Users $mol_list
	rows /
		<= User_1 $mol_view
		<= User_2 $mol_view
		<= User_3 $mol_view
	Empty <= Users_empty $mol_paragraph
		title \No users
```

--------------------------------

### Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/plot/fill/readme.md

Demonstrates how to use $mol_plot_fill to define a filled graph. It requires the series_x and series_y properties to be defined.

```tree
<= Plan $mol_plot_fill
	series_x <= plan_x /
	series_y <= plan_y /

```

--------------------------------

### Basic $mol_deck Usage

Source: https://github.com/hyoo-ru/mam_mol/blob/master/deck/readme.md

This example demonstrates how to set up a $mol_deck component with two content items, 'Main' and 'Addon'. The 'title' property of each item is used for the tab label.

```javascript
<= Info $mol_deck
	items /
		<= Main $mol_view
			title <= Main_title @ \Main info
			sub /
				\Main
		<= Addon $mol_view
			title <= Addon_title @ \Addition data
			sub /
				\Addon
```

--------------------------------

### Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/message/readme.md

This snippet shows how to instantiate and configure a $mol_message component. It defines properties like name, moment, avatar, and text.

```javascript
<= Message $mol_message
	name <= user_name \
	moment <= post_moment $mol_time_moment
	avatar <= avatar_uri \
	avatar_link <= profile_uri \
	text <= post_body \

```

--------------------------------

### Basic Usage of $mol_speck

Source: https://github.com/hyoo-ru/mam_mol/blob/master/speck/readme.md

This snippet shows how to use the $mol_speck component to display a value. It's a basic example of integrating the component into your application.

```javascript
<= Beta $mol_speck
	value \𝞫
```

--------------------------------

### Import $mol_strict from NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/strict/readme.md

Demonstrates the standard JavaScript import statement for using $mol_strict when installed via NPM.

```javascript
import "mol_strict"
```

--------------------------------

### Get Interval Components

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/interval/readme.md

Retrieves the start moment, end moment, or duration of a time interval. If two components are defined, the third is calculated.

```javascript
// Component value (third are calculated by defined two)
new $mol_time_interval( '2015/P1Y' ).end // new $mol_time_moment( '2016' )
new $mol_time_interval( 'P1Y/2016' ).start // new $mol_time_moment( '2015' )
new $mol_time_interval( '2015/2016' ).duration // new $mol_time_duration( 'PT31536000S' )
```

--------------------------------

### Tree syntax for defining sub-components

Source: https://github.com/hyoo-ru/mam_mol/blob/master/readme.md

Example of how to define sub-components using the view.tree syntax. This is useful for configuring component hierarchies.

```tree
$mol_row sub /
	<= Yes $mol_button_minor title \Yes
	<= No $mol_button_major title \No
```

--------------------------------

### List Component with Keyboard Navigation Plugin

Source: https://github.com/hyoo-ru/mam_mol/blob/master/view/readme.md

Example of a list component utilizing the $mol_nav plugin for keyboard navigation. It demonstrates how to integrate plugins to enhance component functionality.

```typescript
<= Options $mol_list
    plugins /
        <= Nav $mol_nav
            keys_y <= options /
    rows <= options /

```

--------------------------------

### Basic $mol_row Usage

Source: https://github.com/hyoo-ru/mam_mol/blob/master/hor/readme.md

This example shows how to use $mol_row to create a horizontal layout with two child views, 'Left' and 'Right'.

```tree
<= Stat $mol_hor
	sub /
		<= Left $mol_view sub /
		<= Right $mol_view sub /

```

--------------------------------

### Basic Usage Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/touch/readme.md

This snippet shows how to integrate the $mol_touch plugin into your project configuration. It demonstrates how to enable zoom, pan, and swipe gestures, and how to bind swipe events to specific actions like opening or closing a menu.

```config
plugins /
	<= Touch $mol_touch
		zoom? <=> zoom? 1
		pan? <=> pan? /
			0
			0
		swipe_right?event <=> open_menu?event null
		swipe_left?event <=> close_menu?event null
```

--------------------------------

### Importing $mol_crypto from mol_crypto_lib

Source: https://github.com/hyoo-ru/mam_mol/blob/master/crypto/README.md

Example of how to import the necessary functions from the mol_crypto_lib package for use in your project. It exports the salt function and the default export aliased as '$'.

```javascript
export { $mol_crypto_salt, default as $ } from "mol_crypto_lib"
```

--------------------------------

### Computed Property Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/wire/README.md

Shows how to define stored properties and a computed property that depends on them, demonstrating memoization and recomputation triggers.

```ts
import { $mol_wire_solo as solo } from 'mol_wire_lib'

class User {
	// stores a value
	@solo name_first( next = 'Thomas' ) {
		return next
	}

	// stores a value
	@solo name_last( next = 'Anderson' ) {
		return next
	}

	// computes a value based on other channels
	@solo name() {
		console.log('compute name')
		return `${this.name_first()} ${this.name_last()}`
	}
}

const user = new User()

console.log(user.name()) // logs: 'compute name', 'Thomas Anderson'
console.log(user.name()) // logs: 'Thomas Anderson'

// setter, marks 'name' as a subject to recomputation,
// but doesn't recompute immediately
user.name_last('William')

console.log(user.name()) // logs: 'compute name', 'Thomas William'
console.log(user.name()) // logs: 'Thomas William'
```

--------------------------------

### TypeScript syntax for defining sub-components

Source: https://github.com/hyoo-ru/mam_mol/blob/master/readme.md

Example of how to define sub-components using TypeScript. This demonstrates the equivalent functionality to the view.tree syntax.

```typescript
@ $mol_mem
Confirm_delete() {
	return $mol_row.make({
		sub : ()=> [ this.Yes() , this.No() ] ,
	})
}
```

--------------------------------

### Usage Example for mol_plot_line

Source: https://github.com/hyoo-ru/mam_mol/blob/master/plot/line/readme.md

Demonstrates how to use the mol_plot_line component to create a linear graph with dashed lines. It shows the basic structure for defining the component and its series.

```tree
<= Plan $mol_plot_line
	series_x <= plan_x /
	series_y <= plan_y /
	type \dashed
```

--------------------------------

### View Tree Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/link/lazy/readme.md

Defines the structure of the $mol_link_lazy component within a view tree, including its URI generation and file naming.

```tree
<= Search $mol_link_lazy
	uri_generated <= uri_generated \
	file_name <= download_file \generated.csv
	sub /
		<= Download_icon $mol_icon_download
		<= download_label \Download
```

--------------------------------

### Teaser: Define DB Schema, Open, Write, and Read

Source: https://github.com/hyoo-ru/mam_mol/blob/master/db/README.md

Demonstrates defining a static typed database schema, opening the database with automatic migrations, writing a document, and reading documents by index.

```typescript
type User = {
	name: string
	admin: boolean
}

// Static typed schema
type DB = {
	User: {
		Key: [ string ]
		Doc: User
		Indexes: {
			Name: [ string ]
		}
	}
}

// Automatic migrations
const db = await $mol_db< DB >( '$my_app',
	mig => mig.store_make( 'User' ),
	mig => {
		const { User } = mig.stores
		User.index_make( 'Name', [ 'name' ] )
	}
)

// Writing transaction
const { User } = db.change( 'User' ).stores
await User.put({ name: 'Jin', admin: true })

// Reading transaction
const { Name } = db.read( 'User' ).User.indexes
const jins = await Name.select([ 'Jin' ])
```

--------------------------------

### Install $mol_time via Script Tag

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/readme.md

Include the $mol_time library directly in your HTML using a script tag. This is useful for quick integration or simple web pages.

```html
<script src="https://unpkg.com/mol_time_all/web.js"></script>
<script>
	alert( new $mol_time_moment() ) // alerts current time
</script>
```

--------------------------------

### Basic Usage of $mol_book

Source: https://github.com/hyoo-ru/mam_mol/blob/master/book/readme.md

This snippet demonstrates the basic structure for using the $mol_book component in a configuration. It shows how to define navigation and main content pages with minimum width constraints.

```config
$my_app $mol_book
	pages /
		<= Nav_bar $side_menu
			minimal_width 100
		<= Main $main_page
			minimal_width 400
```

--------------------------------

### Install mol_text_distance

Source: https://github.com/hyoo-ru/mam_mol/blob/master/text/distance/readme.md

Installs the mol_text_distance package using npm. This is a small, 1KB minified and gzipped library.

```sh
npm install mol_text_distance
```

--------------------------------

### Value Number Property Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/date/readme.md

Example of using the `value_number` property to set a date as milliseconds from Unix Epoch.

```javascript
<= New_year $mol_date
	value_number? <=> new_year? 1514764800
```

--------------------------------

### Basic $mol_card Usage

Source: https://github.com/hyoo-ru/mam_mol/blob/master/card/readme.md

Illustrates how to instantiate and configure a basic $mol_card component, setting its content and status.

```javascript
<= User $mol_card
	content / <= user_name \
	status <= user_online_status \

```

--------------------------------

### $mol_array_lottery

Source: https://github.com/hyoo-ru/mam_mol/blob/master/array/readme.md

Gets a random item from an array.

```APIDOC
## $mol_array_lottery

### Description
Gets a random item from an array.

### Method
Not applicable (SDK function)

### Endpoint
Not applicable (SDK function)

### Parameters
Not specified in source.

### Request Example
Not specified in source.

### Response
Not specified in source.
```

--------------------------------

### $mol_audio_room with Separate AudioContext

Source: https://github.com/hyoo-ru/mam_mol/blob/master/audio/room/readme.md

Shows how to configure two $mol_audio_room instances to use separate $mol_audio_context instances for isolated audio management.

```javascript
$my_beep_page $mol_page
	Beep_room $mol_audio_room
		status? => beep_status?
		context <= beep_context $mol_audio_context
	-
	Noise_room $mol_audio_room
		status? => noise_status?
		context <= noise_context $mol_audio_context
```

--------------------------------

### Create Interval from ISO8601 String

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/interval/readme.md

Constructs a time interval using various ISO8601 string formats. Supports specifying start and end moments, or a start moment and duration, or an end moment and duration. Can also infer one component if the other is provided along with 'now'.

```javascript
new $mol_time_interval( '2015-07-19/2015-08-02' ) // by two moments
new $mol_time_interval( '2015-07-19/P14D' ) // by start moment and duration
new $mol_time_interval( 'P14D/2015-08-02' ) // by end moment and duration
new $mol_time_interval( '2015-07-19/' ) // by start moment and now
new $mol_time_interval( '/2015-08-02' ) // by now and end moment
```

--------------------------------

### Import and Use Schemas from NPM

Source: https://github.com/hyoo-ru/mam_mol/blob/master/schema/README.md

Demonstrates how to import schema constructors like `$mol_schema_record` and `$mol_schema_string` from the 'mol_schema' package and use them to define a new schema class.

```typescript
import {
	$mol_schema_record: Rec,
	$mol_schema_string: Str,
	/// ...
} from 'mol_schema'

export class Article extends Rec({
	title: Str,
	body: Str,
}) {}
```

--------------------------------

### Create and Use a Lexer

Source: https://github.com/hyoo-ru/mam_mol/blob/master/syntax2/readme.md

Demonstrates how to create a $mol_syntax2 lexer with custom lexemes and parse a string using defined handlers for each lexeme.

```typescript
const syntax = new $mol_syntax2({
	'brace-open' : /\{{2}}/ ,
	'brace-close' : /\}}{{2}}/ ,
	'placeholder' : /\{(\w+)\}/ ,
})

let res = ''
syntax.parse( 'I have {count} {{brackets}}.' , {
	'' : text => res += text ,
	'brace-open' : ()=> res += '{' ,
	'brace-close' : ()=> res += '}' ,
	'placeholder' : ( full , [ key ] )=> res += '$' + key ,
} )
// res === 'I have $count {brackets}.'
```

--------------------------------

### Major Button Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/button/readme.md

Use this snippet for a prominent call-to-action button, such as a form submission button.

```typescript
<= Submit $mol_button_major
	click? <=> submit? null
	title <= submit_label @ \Submit form
```

--------------------------------

### Build Release

Source: https://github.com/hyoo-ru/mam_mol/blob/master/rest/readme.md

Builds the release version of the application.

```sh
npm start my/crud
```

--------------------------------

### Get One By Primary Key

Source: https://github.com/hyoo-ru/mam_mol/blob/master/db/README.md

Retrieves a single document from a store using its primary key.

```typescript
const user = await Users.get( 1 )
```

--------------------------------

### Close Link Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/link/readme.md

This snippet demonstrates how to create a closing link that removes the 'demo' argument from the URL.

```javascript
<= Close $mol_link
	arg *
		demo null
	sub /
		<= close_title @ \Close demo
```

--------------------------------

### $mol_meter Properties

Source: https://github.com/hyoo-ru/mam_mol/blob/master/meter/readme.md

The $mol_meter plugin exposes several properties to get and set the dimensions and offsets of a component.

```APIDOC
## $mol_meter Properties

### Description

This section details the properties available for the $mol_meter plugin, which allow you to retrieve or set the dimensions and offsets of a component.

### Properties

- **`width( value? : number ) : number`**
  Property `width` is the actual width (in pixels) of the component.

- **`height( value? : number ) : number`**
  Property `height` is the actual height (in pixels) of the component.

- **`top( value? : number ) : number`**
  Property `top` is the actual offset from the top (in pixels) of the component.

- **`bottom( value? : number ) : number`**
  Property `bottom` is the actual offset from the bottom (in pixels) of the component.

- **`right( value? : number ) : number`**
  Property `right` is the actual offset from the right (in pixels) of the component.

- **`left( value? : number ) : number`**
  Property `left` is the actual offset from the left (in pixels) of the component.

### Usage Example

```
plugins /
	<= Meter $mol_meter
		width => cur_width
		height => cur_height
```
```

--------------------------------

### Basic JSX Usage with $mol_jsx

Source: https://github.com/hyoo-ru/mam_mol/blob/master/jsx/readme.md

Demonstrates how to define a component using JSX syntax with the $mol_jsx pragma and render it into a full HTML document. This example shows mixing text nodes and elements within a component.

```tsx
/** @jsx $mol_jsx */

const $my_message = ( props : { content : string } )=> (
	<div classList={[ 'foo bar' ]} >
		{ props.content } is
		<strong id="/text_nodes" >
			text nodes
		</strong>
		mixed with
		<strong id="/elements" >
			elements
		</strong>
		!
	</div>
)

const dom = (
	<html>
		<body>
			<$my_message id="$my_app" content="Content" />
		</body>
	</html>
)
```

--------------------------------

### UI Benchmark Initialization and Execution

Source: https://github.com/hyoo-ru/mam_mol/blob/master/perf/uibench/index.html

Initializes the $mol UI benchmark and runs it when the DOM is ready. It collects performance samples and displays them.

```javascript
uibench.init("$mol", "1.0.0");
document.addEventListener("DOMContentLoaded", function(event) {
    uibench.run(
        state => {
            $mol_perf_uibench.Root(0).state(state)
            $mol_wire_fiber.sync()
        },
        function (samples) {
            document.body.innerHTML = "<pre>" + JSON.stringify(samples, null, " ") + "</pre>"
        }
    )
})
```

--------------------------------

### Symmetric Encryption, Signing, and Hashing

Source: https://github.com/hyoo-ru/mam_mol/blob/master/crypto/README.md

Demonstrates generating private keys, establishing a shared secret for encryption/decryption, encrypting data with a salt, hashing the encrypted data, signing the hash, verifying the signature, and decrypting the data.

```typescript
const Alice = await $mol_crypto_key_private.generate() // 96 B
const Bella = await $mol_crypto_key_private.generate() // 96 B

const secret = await $mol_crypto_sacred_shared( // 16 B
	Alice, // 96 B
	Bella.public(), // 64 B
)

const data = new Uint8Array([ 1, 2, 3 ]) // 3 B
const salt = $mol_crypto_salt() // 16 B

const closed = await secret.encrypt( data, salt ) // 16x B
const digest = $mol_crypto_hash( closed ) // 20 B
const sign = await Alice.sign( digest ) // 64 B

const verified = await Alice.public().verify( digest, sign ) // true
const opened = await secret.decrypt( closed, salt ) // 3 B
```

--------------------------------

### Get Interval as ISO8601 String

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/interval/readme.md

Converts the time interval to its ISO8601 string representation using `toString()` or `toJSON()`.

```javascript
// iso8601
new $mol_time_interval( '2015-01/P1M' ).toString() // '2015-01/P1MT'
new $mol_time_interval( '2015-01/P1M' ).toJSON() // '2015-01/P1MT'
```

--------------------------------

### Web Entry Point HTML

Source: https://github.com/hyoo-ru/mam_mol/blob/master/readme.md

The main HTML file for the web application. It sets up basic meta tags and binds the root component to a div element.

```html
<!doctype html> <!-- Disable quirks mode -->
<html mol_view_root> <!-- Reset root styles -->
	<head>
		<meta charset="utf-8" /> <!-- Force utf-8 encoding -->
		<meta
			name="viewport"
			content="width=device-width, height=device-height, initial-scale=1" 
		/> <!-- Disable mobile browser auto zoom, $mol is adaptive -->
		<meta name="mobile-web-app-capable" content="yes"> <!-- Fullscreen support -->
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>
	<body mol_view_root> <!-- Reset root styles -->
		<div mol_view_root="$my_hello"></div> <!-- Autobind component to element on load -->
		<script src="web.js"></script> <!-- Load autogenerated js bundle -->
	</body>
</html>
```

--------------------------------

### $mol_func_sandbox constructor

Source: https://github.com/hyoo-ru/mam_mol/blob/master/func/sandbox/readme.md

Initializes a new instance of $mol_func_sandbox. You can provide an array of objects to serve as global contexts for the sandboxed code.

```APIDOC
## $mol_func_sandbox constructor

### Description

Initializes a new instance of $mol_func_sandbox. You can provide an array of objects to serve as global contexts for the sandboxed code.

### Parameters

#### Path Parameters

None

#### Query Parameters

None

#### Request Body

None

### Parameters

* **contexts** (Object[]) - Optional - An array of objects to be used as global variables within the sandboxed environment.
```

--------------------------------

### $mol_http.resource()

Source: https://github.com/hyoo-ru/mam_mol/blob/master/http/readme.md

Creates an instance for a given URI, allowing for subsequent HTTP operations.

```APIDOC
## $mol_http.resource( uri : string ) : $mol_http

### Description
Creates an instance for a given URI, allowing for subsequent HTTP operations.

### Method
Not applicable (constructor-like function)

### Endpoint
Not applicable

### Parameters
#### Path Parameters
- **uri** (string) - Required - The URI of the resource to interact with.

### Request Example
```typescript
$mol_http.resource( 'users.json' )
```

### Response
Returns an instance of $mol_http that can be used to perform HTTP requests.
```

--------------------------------

### Create Infinite Number Range

Source: https://github.com/hyoo-ru/mam_mol/blob/master/range2/readme.md

Creates an infinite range of numbers starting from 0. This is the default behavior when no arguments are provided.

```typescript
$mol_range2()
```

--------------------------------

### Expanded Node Structure for Readability

Source: https://github.com/hyoo-ru/mam_mol/blob/master/view/readme.md

An alternative, more verbose representation of the $my_example component, showing nested node structure for clarity.

```tree
$my_example
	$mol_link
		uri
			\https://example.org
		sub
			/
				\Click me!
		target
			\_top
```

--------------------------------

### Create $mol_time_moment Instances

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/moment/readme.md

Demonstrates various ways to instantiate $mol_time_moment objects, including current time, timestamps, native Date objects, ISO8601 strings, and component-based objects or arrays.

```javascript
new $mol_time_moment()
```

```javascript
new $mol_time_moment( 1437316165000 )
```

```javascript
new $mol_time_moment( new Date )
```

```javascript
new $mol_time_moment( '2015-07-19T17:27:58.065+03:00' )
```

```javascript
new $mol_time_moment( '2015-07-19T17:27:58.065' )
```

```javascript
new $mol_time_moment( '2015-07-19' )
```

```javascript
new $mol_time_moment( 'T17:27' )
```

```javascript
new $mol_time_moment({
	year : 2015 ,
	month : 6 , // 0 - January
	day : 18 , // 0 - first day of month
	hour : 17 ,
	minute : 27 ,
	second : 58.65 , // fractional, no property "millisecond"
	offset : { // this is $mol_time_duration_config
		hour : 3 ,
		minute : 0 ,
	} ,
})
```

```javascript
new $mol_time_moment([ 2015, 6, 18, 17, 27, 58.65, 180 ])
```

--------------------------------

### Rendered HTML Output

Source: https://github.com/hyoo-ru/mam_mol/blob/master/jsx/readme.md

The resulting HTML structure generated from the JSX example. Note how the IDs are transformed and elements are rendered.

```html
<html>
	<body>
		<div id="$my_app" class="foo bar" >
			Content is
			<strong id="$my_app/text_nodes" >
				text nodes
			</strong>
		mixed with
			<strong id="$my_app/elements" >
				elements
			</strong>
			!
		</div>
	</body>
</html>
```

--------------------------------

### DB Schema Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/db/README.md

Defines a complex database schema with multiple stores and indexes, including composite keys for indexes.

```typescript
type ACME = {
	Users: {
		Key: number
		Doc: {
			name: {
				first: string
				last: string
			}
			age: number
		}
		Indexes: {
			names: [ string, string ]
			ags: [ number ]
		}
	}
	Articles: {
		Key: string
		Doc: {
			title: string
			content: string
		}
		Indexes: {
			full: [ string, string ]
		}
	}
}
```

--------------------------------

### Basic Usage of $mol_link_source

Source: https://github.com/hyoo-ru/mam_mol/blob/master/link/source/readme.md

This snippet shows how to use the $mol_link_source component to create a link to a GitHub repository. Ensure the `uri` property is set to the correct repository URL.

```yaml
<= GitHub $mol_link_source
	uri \https://github.com/hyoo-ru/mam_mol/

```

--------------------------------

### Get One By Index

Source: https://github.com/hyoo-ru/mam_mol/blob/master/db/README.md

Retrieves a single document using its index. Requires the index to be unique or will return the first match.

```typescript
const user = await names.get([ 'Jin', 'Nin' ])
```

--------------------------------

### Integer Validation and Type Conversion

Source: https://github.com/hyoo-ru/mam_mol/blob/master/data/integer/readme.md

Use $mol_data_integer to ensure a value is an integer and get it as a number. Non-integer values will be rejected.

```javascript
const Age = $mol_data_integer
const age = Age( 18 ) // ✅

Age( 18.5 ) // ❌ 18.5 is not an integer
```

--------------------------------

### Basic Gallery Usage

Source: https://github.com/hyoo-ru/mam_mol/blob/master/tiler/readme.md

This snippet shows how to use $mol_tiler to display a collection of images. Ensure the 'images' collection is defined elsewhere.

```tree
<= Gallery $mol_tiler
	items <= images /

```

--------------------------------

### Basic Page Layout Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/page/readme.md

This snippet shows how to define a basic page layout using the $mol_page component, including setting a title and defining the main body content.

```javascript
<= Sign_up $mol_page
	title <= Sign_up_title @ \Sign Up
	body / <= Sign_up_form $mol_view
	foot null
```

--------------------------------

### Type Assertion Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/type/README.md

Illustrates the use of $mol_type_assert to check if an actual type matches an expected type, specifically for Partial records.

```typescript
// Actual result
type partial_record = $mol_type_assert<
	Partial<{ foo: 123 }>,
	{ foo?: 123 }
>
```

--------------------------------

### Creating $mol_time_moment Instances

Source: https://github.com/hyoo-ru/mam_mol/blob/master/time/moment/readme.md

Demonstrates various ways to instantiate a $mol_time_moment object, including using the current time, timestamps, native Date objects, ISO8601 strings, and component objects.

```APIDOC
## Creating $mol_time_moment Instances

### Description
Various methods to create a new $mol_time_moment instance.

### Usage

```javascript
// Current time in the current time zone
new $mol_time_moment()

// By timestamp (milliseconds since epoch)
new $mol_time_moment( 1437316165000 )

// By native Date object
new $mol_time_moment( new Date() )

// By ISO8601 string
new $mol_time_moment( '2015-07-19T17:27:58.065+03:00' ) // Full time with offset
new $mol_time_moment( '2015-07-19T17:27:58.065' ) // Time without offset (non-local)
new $mol_time_moment( '2015-07-19' ) // Date without time (non-midnight)
new $mol_time_moment( 'T17:27' ) // Time without date and seconds

// By components object
new $mol_time_moment({
	year : 2015,
	month : 6, // 0 - January
	day : 18, // 0 - first day of month
	hour : 17,
	minute : 27,
	second : 58.65, // fractional, no 'millisecond' property
	offset : { // $mol_time_duration_config
		hour : 3,
		minute : 0,
	}
})

// By array components (year, month, day, hour, minute, second, offset_in_minutes)
new $mol_time_moment([ 2015, 6, 18, 17, 27, 58.65, 180 ])
```
```

--------------------------------

### URI Generation Example

Source: https://github.com/hyoo-ru/mam_mol/blob/master/link/lazy/readme.md

Generates a CSV blob and returns its object URL for the link's URI. This function is called on mousedown.

```typescript
override uri_generated() {
	const blob = new Blob( ['hello;world\nhello1;world2'] , { type: 'text/csv' } )
	return $mol_dom_context.URL.createObjectURL( blob )
}
```