diff --git a/prop/prop.view.css.ts b/prop/prop.view.css.ts
index d1576ec..38ce763 100644
--- a/prop/prop.view.css.ts
+++ b/prop/prop.view.css.ts
@@ -3,6 +3,7 @@ namespace $.$$ {
 	const { px, rem, per } = $mol_style_unit
 
 	$mol_style_define( $hyoo_studio_prop, {
+
 		flex: {
 			grow: 1,
 		},
@@ -17,26 +18,17 @@ namespace $.$$ {
 			flex: {
 				grow: 1,
 			},
-		},
-
-		Type: {
-			Trigger: {
-				color: $mol_theme.special,
-			},
-		},
-
-		Over_props: {
-			gap: $mol_gap.space,
-			flex: {
-				grow: 1,
-			},
 			padding: {
-				left: $mol_gap.block,
+				bottom: $mol_gap.space,
+				left: $mol_gap.space,
+			},
+			Bound: {
+				Self: {
+					padding: {
+						left: $mol_gap.block,
+					},
+				},
 			},
-		},
-
-		Over_add: {
-			marginLeft: 'auto',
 		},
 
 		Object: {
@@ -49,15 +41,6 @@ namespace $.$$ {
 			},
 		},
 
-		Label: {
-			background: {
-				color: $mol_theme.card,
-			},
-			border: {
-				radius: $mol_gap.round,
-			},
-		},
-
 		Label_content: {
 			flex: {
 				wrap: 'wrap',
@@ -71,12 +54,17 @@ namespace $.$$ {
 			},
 		},
 
-		Prop_tools: {
-			marginLeft: 'auto',
+		Expander_title: {
+			color: $mol_theme.control,
 		},
 
-		Key: {
-			marginLeft: 'auto',
+		Prop_tools: {
+			flex: {
+				shrink: 1,
+			},
+			margin: {
+				left: 'auto',
+			},
 		},
 
 	} )
diff --git a/prop/prop.view.tree b/prop/prop.view.tree
index 5ea8131..3d89e5d 100644
--- a/prop/prop.view.tree
+++ b/prop/prop.view.tree
@@ -8,17 +8,19 @@ $hyoo_studio_prop $mol_view
 					<= Label_content $mol_view
 						sub <= label_sub /
 							<= Trigger $mol_check_expand
-								checked?val <=> expanded?val false
+								Icon => Trigger_icon
+								sub <= trigger_sub /
+									<= Expander_title $mol_paragraph
+										title <= name \
+									<= Trigger_icon
+								checked? <=> expanded? false
 								expandable <= expandable true
-								label /
-									<= expander_title <= name \
 							<= Prop_tools
-			expanded? <=> expanded? false
-			Tools <= Prop_tools $mol_view 
+			expanded? <=> expanded?
+			Tools <= Prop_tools $mol_view
 				sub <= prop_tools /
-					<= Type $hyoo_studio_prop_type
-						tree? <=> value?
-						type? => type?
+					<= Value_tools $mol_view
+						sub <= value_tools
 					<= Key $mol_check_icon
 						hint @ \Multiple values by key
 						Icon <= Key_icon $mol_icon_key_change
@@ -28,37 +30,12 @@ $hyoo_studio_prop $mol_view
 						Icon <= Next_icon $mol_icon_atom_variant
 						checked? <=> changeable? false
 			content <= prop_content /
-				<= Object $mol_view 
-					sub /
-						<= Object_head $mol_view
-							sub <= object_head /
-								<= Obj $mol_select
-									hint @ \Class
-									align_hor \right
-									value?next <=> obj?next \$mol_view
-									options <= class_list /string
-									Trigger_icon null
-								<= Over_add $mol_select
-									hint @ \Add Override
-									align_hor \left
-									Trigger_icon <= Over_add_icon $mol_icon_wrench_outline
-									value?next <=> over_add?next \
-									options <= over_prop_options /string
-						<= Inner $mol_view sub <= inner /
-							<= Over_props $mol_list
-								sub <= overs /
 				<= Value $hyoo_studio_value
-					Type null
+					hide_tools true
+					value_tools => value_tools
+					belong_to \prop
 					tree? <=> value? $mol_tree2_empty
-					type? <= type?
-					props_of!klass <= props_of!klass $mol_tree2_empty
+					props_of* <= props_of* $mol_tree2_empty
 					props_bindable <= props_bindable $mol_tree2_empty
-					Bound_prop* <= Bound_prop*
-	Over_prop* $hyoo_studio_value
-		parent_type \object
-		tree? <=> over_value*? $mol_tree2_empty
-		name? <= over_prop_name*? \
-		props_of!klass <= props_of!klass $mol_tree2_empty
-		props_bindable <= props_bindable $mol_tree2_empty
-		class_list <= class_list /string
-		Bound_prop* <= Bound_prop* $hyoo_studio_prop
+					class_list <= class_list /string
+					Bound_prop* <= Bound_prop* $hyoo_studio_prop
diff --git a/prop/prop.view.ts b/prop/prop.view.ts
index e7525b0..2218114 100644
--- a/prop/prop.view.ts
+++ b/prop/prop.view.ts
@@ -13,7 +13,6 @@ namespace $.$$ {
 			
 			if( next !== undefined ) {
 				const new_sign = $mol_view_tree2_prop_signature.generate( { ...sign_obj, key: next ? '*' : '' } )!
-				console.log( new_sign )
 				this.sign( new_sign )
 				return next
 			}
@@ -23,97 +22,99 @@ namespace $.$$ {
 		
 		@ $mol_mem
 		changeable( next?: any ): boolean {
+
 			const sign_obj = [ ...this.sign().matchAll( $mol_view_tree2_prop_signature ) ][ 0 ]?.groups ?? {
 				name: '',
 				key: '',
 				next: '',
 			}
+
 			if( next !== undefined ) {
 				const new_sign = $mol_view_tree2_prop_signature.generate( { ...sign_obj, next: next ? '?' : '' } )!
 				this.sign( new_sign )
 				return next
 			}
+
 			return Boolean( sign_obj.next )
 		}
 		
 		prop_content() {
-			return this.type() == 'object' ? [ this.Object() ] : [ this.Value() ]
-		}
-		
-		@ $mol_mem
-		value( next?: $mol_tree2 ) {
-			let val = this.tree()
-			if( next !== undefined ) {
-				val = this.tree( next && val.clone( [ next ] ) )
-				return next
+			switch (this.Value().type()) {
+				case 'object':
+				case 'text':
+				case 'number':
+				case 'list':
+				case 'dict':
+				case 'bind':
+				case 'get':
+				case 'put': 
+					return [ this.Value() ]
+				default: 
+					return []
 			}
-			
-			return val?.kids[ 0 ]
-		}
-		
-		@ $mol_mem
-		prop_name_list() {
-			return this.props_bindable().kids.map( prop => prop.type )
 		}
 		
 		@ $mol_mem
-		obj( next?: string ) {
-			return this.value(
-				next === undefined
-					? undefined
-					: this.value().struct( next )
-			).type
+		expandable() {
+			switch (this.Value().type()) {
+				case 'object':
+				case 'text':
+				case 'number':
+				case 'list':
+				case 'dict': 
+				case 'bind':
+				case 'get':
+				case 'put': 
+					return true
+				default: 
+					return false
+			}
 		}
 
 		@ $mol_mem
-		overs() {
-			return this.value().kids.map( ( _, i ) => this.Over_prop( i ) )
-		}
-		
-		@ $mol_mem
-		over_prop_options() {
-			return this.props_of( this.obj() ).kids.map( prop => prop.type )
-		}
-		
-		@ $mol_mem_key
-		over_prop_name( index: number, next?: string ) {
-			let val = this.value()
-			if( next !== undefined ) {
-				val = this.value(
-					val.insert( val.struct( next, val.kids[ index ].kids ), index )
-				)
+		expanded(next?: boolean): boolean {
+
+			if ( next !== undefined ) return next as never
+
+			let expanded: boolean | undefined = $mol_wire_probe( () => this.expanded() )
+
+			const type = this.Value().type()
+
+			if ( !expanded ) {
+				switch (type) {
+					case 'object': 
+					case 'list': 
+					case 'dict': 
+						return this.value().kids.length > 0 ? false : true
+					case 'text': 
+						return this.value().text().length > 40 ? false : true
+					case 'null' :
+					case 'boolean_true' :
+					case 'boolean_false' :
+					case 'number' :
+					case 'number_nan' :
+					case 'number_infinity_negative' :
+					case 'number_infinity_positive' :
+						return true
+				}
+				return false
 			}
-			return val.kids[ index ].type
-		}
-		
-		over_add( next: string ) {
-			
-			if( !next ) return ''
-			
-			const tree = this.value()
-			
-			this.value(
-				tree.clone( [
-					...tree.kids,
-					tree.struct( next, [
-						tree.struct( 'null' ),
-					] ),
-				] )
-			)
-			
-			return next
+
+			return expanded
 		}
 
-		@ $mol_mem_key
-		over_value( index: number, next?: $mol_tree2 ) {
-			let val = this.value()
+		@ $mol_mem
+		value( next?: $mol_tree2 ) {
+
+			let val = this.tree()
+
 			if( next !== undefined ) {
-				val = this.value(
-					val.insert( next && val.kids[ index ].clone( [ next ] ), index )
-				)
+				val = this.tree( next && val.clone( [ next ] ) )
+				this.expanded( true )
+				return next
 			}
-			return val.kids[ index ]?.kids[ 0 ]
+			
+			return val?.kids[ 0 ]
 		}
-
 	}
 }
diff --git a/prop/type/type.view.css.ts b/prop/type/type.view.css.ts
deleted file mode 100644
index 9015bd8..0000000
--- a/prop/type/type.view.css.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-namespace $.$$ {
-
-	const { px } = $mol_style_unit
-
-	$mol_style_define( $.$hyoo_studio_prop_type, {
-
-		Options_content: {
-			padding: $mol_gap.space,
-		},
-
-		Menu_item_control: {
-			border: {
-				top: {
-					color: $mol_theme.line,
-					style: 'solid',
-					width: px(1),
-				}
-			}
-		}
-
-	} )
-
-}
diff --git a/prop/type/type.view.tree b/prop/type/type.view.tree
deleted file mode 100644
index 11cb20b..0000000
--- a/prop/type/type.view.tree
+++ /dev/null
@@ -1,32 +0,0 @@
-$hyoo_studio_prop_type $mol_pick
-	tree?val $mol_tree2_empty
-	trigger_content /
-		<= Value $mol_paragraph title <= type_display \
-	bubble_content /
-		<= Options_content $mol_list rows /
-			<= Menu_item_unit $mol_switch
-				value? <=> unit? \
-				options <= unit_options *
-					null \null
-					boolean_false \false
-					boolean_true \true
-			<= Menu_item_number $mol_switch
-				value? <=> number? \
-				options <= number_options *
-					number \number
-					number_nan \NaN
-					number_infinity_negative \-Infinity
-					number_infinity_positive \+Infinity
-			<= Menu_item_object $mol_switch
-				value? <=> object? \
-				options <= object_options *
-			<= Menu_item_bind $mol_switch
-				value? <=> bind? \
-				options <= bind_options *
-			<= Menu_item_control $mol_view sub /
-				<= Menu_item_delete $mol_button_minor
-					style * color \red
-					click? <=> drop? null
-					sub /
-						<= menu_item_delete_icon $mol_icon_trash_can_outline
-						<= menu_item_delete_label \Drop
diff --git a/prop/type/type.view.ts b/prop/type/type.view.ts
deleted file mode 100644
index 4b420e4..0000000
--- a/prop/type/type.view.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-namespace $.$$ {
-
-	export class $hyoo_studio_prop_type extends $.$hyoo_studio_prop_type {
-
-		object_options(): Partial<{ text: 'text', list: 'list', dict: 'dict', object: 'object' }> {
-			return { text: 'text', list: 'list', dict: 'dict', object: 'object' }
-		}
-
-		bind_options(): Partial<{ bind: '<=>', get: '<=', put: '=>' }> {
-			return { bind: '<=>', get: '<=', put: '=>' }
-		}
-
-		unit(next?: string) {
-			return this.type(next)
-		}
-
-		number(next?: string) {
-			return this.type(next)
-		}
-
-		object(next?: string) {
-			return this.type(next)
-		}
-
-		bind(next?: string) {
-			return this.type(next)
-		}
-
-		drop() {
-			this.type('')
-		}
-
-		@ $mol_mem
-		type_display() {
-			const value = this.type()
-
-			if (this.unit_options()[value]) return this.unit_options()[value]
-			if (this.number_options()[value]) return this.number_options()[value]
-			if (this.object_options()[value]) return this.object_options()[value]
-			if (this.bind_options()[value]) return this.bind_options()[value]
-
-			return ''
-		}
-
-		@ $mol_mem
-		type( next? : string ): string {
-			
-			if( next !== undefined ) {
-				
-				switch( next ) {
-					case '' : this.tree(null); break
-					case 'null' : this.tree( this.tree().struct('null') ); break
-					case 'boolean_true' : this.tree( this.tree().struct('true') ); break
-					case 'boolean_false' : this.tree( this.tree().struct('false') ); break
-					case 'number': this.tree( this.tree().struct('0') ); break
-					case 'number_nan': this.tree( this.tree().struct('+NaN') ); break
-					case 'number_infinity_negative': this.tree( this.tree().struct('-Infinity') ); break
-					case 'number_infinity_positive': this.tree( this.tree().struct('+Infinity') ); break
-					case 'text': this.tree( this.tree().data('') ); break
-					case 'list': this.tree( this.tree().struct( '/' ) ); break
-					case 'dict': this.tree( this.tree().struct( '*' ) ); break
-					case 'object': this.tree( this.tree().struct( '$mol_view' ) ); break
-					case 'bind': this.tree( this.tree().struct( '<=>', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
-					case 'get': this.tree( this.tree().struct( '<=', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
-					case 'put': this.tree( this.tree().struct( '=>', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
-					default : $mol_fail( new TypeError( `Unsupported type: ${ next }` ) )
-				}
-			}
-
-			const val = this.tree()
-
-			if( !val ) return ''
-
-			if (val.type === '+NaN') return 'number_nan'
-			if (val.type === '+Infinity') return 'number_infinity_positive'
-			if (val.type === '-Infinity') return 'number_infinity_negative'
-
-			const type = this.$.$mol_view_tree2_value_type( val )
-			
-			if (type === 'null') return 'null'
-			if (type === 'bool') return val.type === 'true' ? 'boolean_true' : 'boolean_false'
-			if (type === 'number') return 'number'
-			if( type === 'locale' ) return 'text'
-			if (type === 'string') return 'text'
-			if( type === 'get' ) return 'get'
-			if( type === 'put' ) return 'put'
-			if (type === 'bind') return 'bind'
-			
-			return type
-		}
-
-	}
-
-}
diff --git a/studio.locale=ru.json b/studio.locale=ru.json
index 5a28637..41b5670 100644
--- a/studio.locale=ru.json
+++ b/studio.locale=ru.json
@@ -14,4 +14,4 @@
 	"$hyoo_studio_Inspect_stat_vert_title": "кол-во",
 	"$hyoo_studio_Inspect_stat_hor_title": "глубина",
 	"$hyoo_studio_Inspect_title": "Инспектор"
-}
\ No newline at end of file
+}
diff --git a/studio.view.css.ts b/studio.view.css.ts
index c735022..5d1d999 100644
--- a/studio.view.css.ts
+++ b/studio.view.css.ts
@@ -18,41 +18,47 @@ namespace $.$$ {
 		},
 
 		Edit_form: {
+			padding: $mol_gap.block,
+			gap: $mol_gap.block,
 			display: 'flex',
 		},
 
-		Classes: {
-
-			flex: {
-				wrap: 'wrap',
-			},
-
-
-		},
-
 		$mol_form_field: {
 			flex: {
 				grow: 1,
 			},
 		},
 
-		Base: {
-			alignSelf: 'stretch',
+		Pack: {
+			width: per (100),
 		},
 
-		Props_controls: {
-			padding: $mol_gap.block,
+		Readme_open: {
+			marginLeft: 'auto',
+		},
+
+		Config: {
+			gap: $mol_gap.block,
 		},
 
 		Props: {
-			padding: $mol_gap.block,
 			gap: $mol_gap.block,
 		},
 
+		Props_controls: {
+			padding: {
+				top: $mol_gap.block,
+				bottom: $mol_gap.block,
+			},
+		},
+
 		Source_page: {
 			flex: {
 				basis: rem( 40 ),
 			},
+			Body: {
+				flexDirection: 'row',
+			},
 		},
 
 		Preview: {
diff --git a/studio.view.tree b/studio.view.tree
index 6845e80..155f3dd 100644
--- a/studio.view.tree
+++ b/studio.view.tree
@@ -2,6 +2,9 @@ $hyoo_studio $mol_book2
 	comp $hyoo_studio_component
 	plugins /
 		<= Theme $mol_theme_auto
+	Demo $mol_app_demo
+		Readme_page => Readme_page
+		meta_bundle_base <= pack
 	pages /
 		<= Edit $mol_page
 			title @ \$mol Studio
@@ -29,23 +32,31 @@ $hyoo_studio $mol_book2
 					rows <= form_sections /
 						<= Pack_field $mol_form_field
 							name @ \Components Donor App
-							control <= Pack $mol_string
-								hint <= pack
-								value?val <=> pack?val \https://mol.hyoo.ru
+							Content <= Pack $mol_search
+								query? <=> pack? \https://mol.hyoo.ru
+								suggests <= suggests /
+									\https://mol.hyoo.ru
 						<= Config $mol_list
 							rows /
 								<= Classes $mol_view
 									sub /
 										<= Self_field $mol_form_field
 											name @ \Component Name
-											control <= Self $mol_string
+											Content <= Self $mol_string
 												hint \$hyoo_studio_example
-												value?val <=> self?val \
+												value? <=> self? \
 										<= Base_field $mol_form_field
 											name @ \Base Class
-											control <= Base $mol_select
-												value?val <=> base?val \
-												options <= base_options /string
+											Content <= Base_content $mol_view
+												sub /
+													<= Base $mol_select
+														value? <=> base? \
+														options <= base_options /string
+													<= Readme_open $mol_check_icon
+														hint @ \Readme
+														checked? <=> readme_show? false
+														sub /
+															<= Readme_toggle_icon $mol_icon_information_outline
 								- <= Props_inherited_field $mol_form_field
 									name @ \Display inherited properties
 									control <= Props_inherited_control $mol_check_list
@@ -58,14 +69,15 @@ $hyoo_studio $mol_book2
 									sub <= props_controls /
 										<= Prop_filter $mol_search
 											hint @ \Search property or Add one..
-											query?next <=> prop_filter?next \
+											query? <=> prop_filter? \
 										<= Prop_add $mol_button_minor
 											hint @ \Add this property
-											click?next <=> prop_add?next null
+											click? <=> prop_add? null
 											sub /
 												<= Prop_add_icon $mol_icon_plus
 								<= Props $mol_list
 									rows <= props /$hyoo_studio_prop
+		<= Readme_page
 		<= Source_page $mol_page
 			title @ \Raw Code
 			body /
@@ -99,8 +111,8 @@ $hyoo_studio $mol_book2
 	Prop* $hyoo_studio_prop
 		name <= prop_name* \default
 		sign? <=> prop_sign*? \
-		tree? <=> prop_tree!tree_node_str? $mol_tree2_empty
-		props_of!klass <= props_of!klass $mol_tree2_empty
+		tree? <=> prop_tree*? $mol_tree2_empty
+		props_of* <= props_of* $mol_tree2_empty
 		props_bindable <= props_all $mol_tree2_empty
 		class_list <= class_list /string
 		Bound_prop* <= Bound_prop* $hyoo_studio_prop
diff --git a/studio.view.ts b/studio.view.ts
index 23541d4..2bdbcdd 100644
--- a/studio.view.ts
+++ b/studio.view.ts
@@ -13,11 +13,17 @@ namespace $.$$ {
 		code_show( next?: boolean ) {
 			return this.$.$mol_state_arg.value( 'raw', next?.valueOf && ( next ? '' : null ) ) !== null
 		}
+
+		readme_show( next?: boolean ) {
+			if ( next ) this.readme_selected( this.base() )
+			return this.Demo().readme_page( next )
+		}
 		
 		@ $mol_mem
 		pages() {
 			return [
 				this.Edit(),
+				... this.readme_show() ? [ this.Readme_page() ] : [],
 				... this.code_show() ? [ this.Source_page() ] : [],
 				... this.inspector_show() ? [ this.Inspect() ] : [],
 				... this.preview_show() ? [ this.Preview() ] : [],
@@ -33,7 +39,62 @@ namespace $.$$ {
 		source( next?: string ): string {
 			return this.$.$mol_state_arg.value( 'source', next ) ?? super.source()
 		}
+
+		@ $mol_mem
+		preview_html() {
+			
+			const self = this.self()
+			const script = new URL( 'web.js', this.pack() ).toString()
+			const theme = this.Theme().theme()
+			
+			return `
+				<html mol_view_root>
+					<body mol_view_root>
+						<script src="${ script }"></script>
+						<script>${ this.self_code() }</script>
+						<div mol_view_root="${ self }" mol_theme="${ theme }" style="background:none"></div>
+					</body>
+				</html>
+			`
+			
+		}
 		
+		@ $mol_mem
+		preview_window() {
+			this.$.$mol_wait_rest()
+			this.preview_html()
+			this.preview_show()
+			return super.preview_window()
+		}
+		
+		@ $mol_mem
+		inspect_graph() {
+			
+			const win = this.preview_window()
+			
+			try {
+				win['$mol_view'].autobind()
+				return $mol_wire_graph( win['$mol_view']['autobind()'] )
+			} catch( error: any ) {
+				if( 'then' in error ) return $mol_fail_hidden( new Promise( ( done, fail )=> error.then( done, fail ) ) )
+				$mol_fail_hidden( new Error( error.message ) )
+			}
+			
+		}
+		
+		@ $mol_mem
+		inspect_stat() {
+			return this.inspect_graph().group_depth_min.map( nodes => nodes.length )
+		}
+		
+		inspect_stat_depth() {
+			return Object.keys( this.inspect_stat() ).map( Number )
+		}
+		
+		readme_selected( next?: string ) {
+			return $mol_state_arg.value( 'demo', next ) ?? ''
+		}
+
 		@ $mol_mem
 		library() {
 			const uri = new URL( 'web.view.tree', this.pack() ).toString()
@@ -83,6 +144,7 @@ namespace $.$$ {
 			
 			const self = this.tree()
 			const base = this.$.$mol_view_tree2_class_super( self )
+			
 			if( !next ) return base.type
 			
 			this.tree(
@@ -91,58 +153,7 @@ namespace $.$$ {
 				])
 			)
 			
-			return next
-		}
-		
-		@ $mol_mem
-		preview_html() {
-			
-			const self = this.self()
-			const script = new URL( 'web.js', this.pack() ).toString()
-			const theme = this.Theme().theme()
-			
-			return `
-				<html mol_view_root>
-					<body mol_view_root>
-						<script src="${ script }"></script>
-						<script>${ this.self_code() }</script>
-						<div mol_view_root="${ self }" mol_theme="${ theme }" style="background:none"></div>
-					</body>
-				</html>
-			`
-			
-		}
-		
-		@ $mol_mem
-		preview_window() {
-			this.$.$mol_wait_rest()
-			this.preview_html()
-			this.preview_show()
-			return super.preview_window()
-		}
-		
-		@ $mol_mem
-		inspect_graph() {
-			
-			const win = this.preview_window()
-			
-			try {
-				win['$mol_view'].autobind()
-				return $mol_wire_graph( win['$mol_view']['autobind()'] )
-			} catch( error: any ) {
-				if( 'then' in error ) return $mol_fail_hidden( new Promise( ( done, fail )=> error.then( done, fail ) ) )
-				$mol_fail_hidden( new Error( error.message ) )
-			}
-			
-		}
-		
-		@ $mol_mem
-		inspect_stat() {
-			return this.inspect_graph().group_depth_min.map( nodes => nodes.length )
-		}
-		
-		inspect_stat_depth() {
-			return Object.keys( this.inspect_stat() ).map( Number )
+			return this.readme_selected( next )
 		}
 		
 		@ $mol_mem
@@ -309,7 +320,5 @@ namespace $.$$ {
 			
 			return this.props_all().select( sign ).kids[0] ?? null
 		}
-		
 	}
-	
 }
diff --git a/type/type.view.css.ts b/type/type.view.css.ts
new file mode 100644
index 0000000..b121165
--- /dev/null
+++ b/type/type.view.css.ts
@@ -0,0 +1,56 @@
+namespace $.$$ {
+
+	const { px } = $mol_style_unit
+
+	$mol_style_define( $.$hyoo_studio_type, {
+
+		flex: {
+			grow: 0,
+		},
+
+		Options_content: {
+			padding: $mol_gap.space,
+		},
+
+		Other_options: {
+			flex: 'none',
+		},
+
+		Value: {
+			color: $mol_theme.special,
+		},
+		Take_put_hack_icon: {
+			color: $mol_theme.special,
+		},
+		Take_hack_icon: {
+			color: $mol_theme.special,
+		},
+		Alias_icon: {
+			color: $mol_theme.special,
+		},
+
+		List_items_type: {
+			flex: {
+				grow: 0,
+			},
+			View: {
+				Rows: {
+					flexDirection: 'row',
+					'::after': {
+						content: '"[]"',
+					},
+				},
+			},
+			Edit: {
+				boxShadow: 'none',
+			},
+			color: $mol_theme.current,
+		},
+
+		Control: {
+			borderTop: 'solid 1px var(--mol_theme_line)',
+		}
+
+	} )
+
+}
diff --git a/type/type.view.tree b/type/type.view.tree
new file mode 100644
index 0000000..6c811ee
--- /dev/null
+++ b/type/type.view.tree
@@ -0,0 +1,57 @@
+$hyoo_studio_type $mol_pick
+	tree?val $mol_tree2_empty
+	belong_to \
+	trigger_content /
+		<= Value $mol_paragraph title <= type_display \
+		<= Take_put_hack_icon $mol_icon_arrow_left_right_bold_outline
+		<= Take_hack_icon $mol_icon_arrow_left_bold_outline
+		<= Alias_icon $mol_icon_arrow_right_bold_outline
+	bubble_content /
+		<= Options_content $mol_list rows /
+			<= Unit_options $mol_switch
+				value? <=> switch_type? \
+				options <= unit_options *
+					null \null
+					boolean_false \false
+					boolean_true \true
+					number_nan \NaN
+			<= Number_options $mol_switch
+				value? <=> switch_type? \
+				options <= number_options *
+					number \number
+					number_infinity_negative \-Infinity
+					number_infinity_positive \+Infinity
+			<= Other_options_group $mol_view
+				sub <= other_options_group /
+					<= Other_options $mol_switch
+						value? <=> switch_type? \
+						options <= other_options *
+					<= List_items_type $mol_textarea
+						value? <=> list_items_type? \
+					<= Object_option $mol_check
+						title \object
+						click <= show_obj_select null
+						checked? <= obj_checked? false
+			<= Bind_options $mol_switch
+				value? <=> switch_type? \
+				option_label* <= bind_option_label* /
+					<= Take_put_hack_option $mol_icon_arrow_left_right_bold_outline
+					<= Take_hack_option $mol_icon_arrow_left_bold_outline
+					<= Alias_option $mol_icon_arrow_right_bold_outline
+				options <= bind_options *
+			<= Control $mol_view sub /
+				<= Menu_item_delete $mol_button_minor
+					style * color \red
+					click? <=> drop? null
+					sub /
+						<= menu_item_delete_icon $mol_icon_trash_can_outline
+						<= menu_item_delete_label \Drop
+	Object_select $mol_select
+		hint @ \Class
+		align_hor \right
+		value? <=> selected_class? \$mol_view
+		options <= class_list /string
+		Trigger_icon null
+		bubble_content => Obj_bubble_content
+	obj_select_showed? false
+	list_type_showed? false
diff --git a/type/type.view.ts b/type/type.view.ts
new file mode 100644
index 0000000..45e30b9
--- /dev/null
+++ b/type/type.view.ts
@@ -0,0 +1,190 @@
+namespace $.$$ {
+
+	export class $hyoo_studio_type extends $.$hyoo_studio_type {
+
+		belong_to(): 'prop' | 'subprop' | 'list' | 'dict' | string  {
+			return 'prop'
+		}
+
+		bind_options(): Partial<{ bind: '<=>', get: '<=', put: '=>' }> {
+			switch (this.belong_to()) {
+				case 'prop': return { bind: '<=>', get: '<=', put: '=>' }
+				case 'subprop': return { bind: '<=>', get: '<=', put: '=>' }
+				case 'list': return { get: '<='}
+				case 'dict': return { get: '<='}
+				default: return { bind: '<=>', get: '<=', put: '=>' }
+			}
+		}
+
+		other_options(): Partial<{ text: 'text', dict: 'dict', list: 'list' }> {
+			return { 
+				text: 'text', dict: 'dict', 
+				...(this.list_type_showed() ? {} : {list: 'list'}) 
+			}
+		}
+
+		@ $mol_mem
+		other_options_group(){
+			return [ 
+				this.Other_options(),
+				...(this.list_type_showed() ? [this.List_items_type()] : []),
+				...(this.belong_to() === 'prop'? [this.Object_option()] : []),
+			]
+		}
+
+		@ $mol_mem
+		list_type_showed() {
+			return this.type() === 'list' ? true : false
+		}
+
+		switch_type(next?: string) {
+			return this.type(next)
+		}
+
+		drop() {
+			this.type('')
+		}
+
+		bubble_content() {
+			return this.obj_select_showed()? this.Obj_bubble_content() : super.bubble_content()
+		}
+
+		obj_checked( next?: any ): boolean {
+			return this.type() === 'object'? true : false
+		}
+
+		bind_option_label(bind_option: keyof ReturnType<$hyoo_studio_type["bind_options"]>){
+			switch (bind_option) {
+				case 'bind': return [ this.Take_put_hack_option() ]
+				case 'get': return [ this.Take_hack_option() ]
+				case 'put': return [ this.Alias_option() ]
+			}
+			return []
+		}
+
+		bind_option_label_display(bind_option: keyof ReturnType<$hyoo_studio_type["bind_options"]>){
+			switch (bind_option) {
+				case 'bind': return [ this.Take_put_hack_icon() ]
+				case 'get': return [ this.Take_hack_icon() ]
+				case 'put': return [ this.Alias_icon() ]
+			}
+			return []
+		}
+
+		trigger_content(){
+			const type = this.type()
+
+			const bind_option = this.bind_options()[type as keyof ReturnType<$hyoo_studio_type["bind_options"]>]
+
+			return bind_option ? 
+				this.bind_option_label_display(type as keyof ReturnType<$hyoo_studio_type["bind_options"]>) : 
+				[ this.Value() ]
+		}
+
+		@ $mol_mem
+		type_display(): string {
+			const type = this.type()
+
+			if (type === 'list') { 
+				return `${this.list_items_type() === 'any'? '': this.list_items_type()} list` 
+			}
+			if (type === 'object') { return this.selected_class() }
+			if (this.unit_options()[type as keyof ReturnType<$hyoo_studio_type["unit_options"]>]) 
+				return this.unit_options()[type as keyof ReturnType<$hyoo_studio_type["unit_options"]>]
+			if (this.number_options()[type as keyof ReturnType<$hyoo_studio_type["number_options"]>]) 
+				return this.number_options()[type as keyof ReturnType<$hyoo_studio_type["number_options"]>]
+			if (this.other_options()[type as keyof ReturnType<$hyoo_studio_type["other_options"]>]) 
+				return this.other_options()[type as keyof ReturnType<$hyoo_studio_type["other_options"]>] || ''
+
+			return ''
+		}
+
+
+
+		@ $mol_mem
+		type( next? : string ) {
+			
+			if( next !== undefined ) {
+
+				switch( next ) {
+					case '' : this.tree(null); break
+					case 'null' : this.tree( this.tree().struct('null') ); break
+					case 'boolean_true' : this.tree( this.tree().struct('true') ); break
+					case 'boolean_false' : this.tree( this.tree().struct('false') ); break
+					case 'number': this.tree( this.tree().struct('0') ); break
+					case 'number_nan': this.tree( this.tree().struct('+NaN') ); break
+					case 'number_infinity_negative': this.tree( this.tree().struct('-Infinity') ); break
+					case 'number_infinity_positive': this.tree( this.tree().struct('+Infinity') ); break
+					case 'text': this.tree( this.tree().data('') ); break
+					case 'list': this.tree( this.tree().struct( '/' ) ); break
+					case 'dict': this.tree( this.tree().struct( '*' ) ); break
+					case 'object': this.tree( this.tree().struct( '$mol_view', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
+					case 'bind': this.tree( this.tree().struct( '<=>', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
+					case 'get': this.tree( this.tree().struct( '<=', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
+					case 'put': this.tree( this.tree().struct( '=>', [ this.tree().kids[0] ?? this.tree().data( '' ) ] ) ); break
+					default : $mol_fail( new TypeError( `Unsupported type: ${ next }` ) )
+				}
+
+				this.showed(false)
+			}
+
+			return $hyoo_studio_type_value(this.tree())
+		}
+
+		show_obj_select() {
+			this.obj_select_showed(true)
+		}
+		
+		@ $mol_mem
+		selected_class(next?: string) {
+
+			if ( next !== undefined ) {
+				this.showed(false)
+				return this.tree(this.tree().struct( next )).type
+			}
+			
+			return this.tree()?.type
+		}
+		
+		@ $mol_mem
+		list_items_type(next?: string) {
+
+			if( next && /\s/.test( next ) ) {
+				$mol_fail( new SyntaxError( `Item type mustn't have any space chars` ) )
+			}
+			
+			const from_tree = this.tree(
+				next === undefined
+					? undefined
+					: this.tree().struct( '/' + next, this.tree().kids )
+			).type.slice( 1 )
+
+			const focused = this.List_items_type().focused()
+
+			return (from_tree) || (focused? '' : 'any')
+		}
+
+	}
+
+	export function $hyoo_studio_type_value(val: $mol_tree2_empty) {
+		if( !val ) return ''
+
+		if (val.type === '+NaN') return 'number_nan'
+		if (val.type === '+Infinity') return 'number_infinity_positive'
+		if (val.type === '-Infinity') return 'number_infinity_negative'
+
+		const type = $$.$mol_view_tree2_value_type( val )
+
+		if (type === 'null') return 'null'
+		if (type === 'bool') return val.type === 'true' ? 'boolean_true' : 'boolean_false'
+		if (type === 'number') return 'number'
+		if (type === 'locale' ) return 'text'
+		if (type === 'string') return 'text'
+		if (type === 'get' ) return 'get'
+		if (type === 'put' ) return 'put'
+		if (type === 'bind') return 'bind'
+		
+		return type
+	}
+
+}
diff --git a/value/bound/bound.view.css.ts b/value/bound/bound.view.css.ts
new file mode 100644
index 0000000..e91bc76
--- /dev/null
+++ b/value/bound/bound.view.css.ts
@@ -0,0 +1,30 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_bound, {
+
+		Bound_prop_name: {
+			Option_label: {
+				padding: 0,
+			},
+			Menu: {
+				padding: {
+					left: $mol_gap.block,
+					right: $mol_gap.block,
+				},
+			},
+			Trigger: {
+				justifyContent: 'center',
+			}
+		},
+
+		Self: {
+			flex: {
+				grow: 1,
+			},
+		},
+
+	} )
+
+}
diff --git a/value/bound/bound.view.tree b/value/bound/bound.view.tree
new file mode 100644
index 0000000..da1199b
--- /dev/null
+++ b/value/bound/bound.view.tree
@@ -0,0 +1,11 @@
+$hyoo_studio_value_bound $hyoo_studio_value_unit
+	self /
+		^ head
+		<= Value_tools
+		<= Bound_prop_name $mol_select
+			hint @ \Bound Property
+			value? <=> bound_prop_name? null
+			options <= prop_name_list /string
+			Trigger_icon null
+		<= Bound_prop_expand $mol_check_expand
+			checked? <=> bound_expanded? false
diff --git a/value/bound/bound.view.ts b/value/bound/bound.view.ts
new file mode 100644
index 0000000..a34b354
--- /dev/null
+++ b/value/bound/bound.view.ts
@@ -0,0 +1,56 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_bound extends $.$hyoo_studio_value_bound {
+		
+		@ $mol_mem
+		guid() {
+			return this.toString()
+		}
+		
+		@ $mol_mem
+		self() {
+			return this.bound_expanded() ? [ this.Opened_bound_prop() ] : super.self()
+		}
+
+		@ $mol_mem
+		bound_expanded(next?: any) {
+			return this.Opened_bound_prop().expanded(
+				next !== undefined ? 
+					next : 
+					undefined
+			)
+		}
+
+		@ $mol_mem
+		Opened_bound_prop() {
+			const prop = this.Bound_prop( this.bound_prop_name() + ':' + this.guid() )
+			prop.trigger_sub = () => []
+			prop.label_sub = () => [
+				...this.head(), this.Value_tools(), this.Bound_prop_name(), this.Bound_prop_expand(), prop.Prop_tools()
+			]
+			return prop
+		}
+		
+		@ $mol_mem
+		prop_name_list() {
+			return this.props_bindable().kids.map( prop => prop.type )
+		}
+		
+		@ $mol_mem
+		bound_prop_name( next?: string ) {
+			
+			const val = this.tree()
+			
+			if( next === undefined ) {
+				return this.$.$mol_view_tree2_prop_split( val.kids[ 0 ] ).name.text() || '...'
+			}
+			
+			this.tree(
+				val.insert( val.struct( next ), null )
+			)
+			
+			return next || '...'
+		}
+	}
+	
+}
diff --git a/value/dict/dict.view.css.ts b/value/dict/dict.view.css.ts
new file mode 100644
index 0000000..59be579
--- /dev/null
+++ b/value/dict/dict.view.css.ts
@@ -0,0 +1,35 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_dict, {
+
+		Key_values: {
+			flex: {
+				grow: 1,
+			},
+			gap: $mol_gap.space,
+			padding: {
+				left: $mol_gap.block,
+			},
+		},
+
+		Item_name: {
+			flex: {
+				grow: 0,
+			},
+			Edit: {
+				boxShadow: 'none',
+			},
+		},
+
+		Self: {
+			flex: {
+				grow: 1,
+				direction: 'column',
+			},
+		},
+
+	} )
+
+}
diff --git a/value/dict/dict.view.tree b/value/dict/dict.view.tree
new file mode 100644
index 0000000..248637a
--- /dev/null
+++ b/value/dict/dict.view.tree
@@ -0,0 +1,28 @@
+$hyoo_studio_value_dict $hyoo_studio_value_unit
+	self /
+		<= Head $mol_view
+			sub /
+				^ head
+				<= Value_tools
+		<= Key_values $mol_list
+			rows <= list /
+				<= Item*0 $mol_view
+					sub /
+						<= Item_name* $mol_textarea
+							value? <=> item_key*? \
+						<= Value* $hyoo_studio_value
+							tree? <=> item_value*? $mol_tree2_empty
+							belong_to \dict
+							props_of* <= props_of* $mol_tree2_empty
+							props_bindable <= props_bindable $mol_tree2_empty
+							class_list <= class_list /string
+							Bound_prop* <= Bound_prop* null
+							head /
+								<= Item_name*
+	tools /
+		<= Type
+		<= Key_item_add $mol_button_minor
+			hint @ \Add Key
+			sub /
+				<= Key_add_icon $mol_icon_plus
+			click? <=> dict_item_add? null
diff --git a/value/dict/dict.view.ts b/value/dict/dict.view.ts
new file mode 100644
index 0000000..e24bb7a
--- /dev/null
+++ b/value/dict/dict.view.ts
@@ -0,0 +1,53 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_dict extends $.$hyoo_studio_value_dict {
+
+		@ $mol_mem
+		list() {
+			return this.tree().kids.map( (_,i)=> this.Item( i ) )
+		}
+
+		@ $mol_mem_key
+		item_key( index: number, next?: string ) {
+
+			if( next && /\s/.test( next ) ) {
+				$mol_fail( new SyntaxError( `Item key mustn't have any space chars` ) )
+			}
+
+			let tree = this.tree()
+
+			if( next !== undefined ) {
+				tree = this.tree(
+					tree.insert( tree.struct( next, tree.kids[ index ].kids ), index )
+				)
+			}
+
+			return tree.kids[ index ].type
+		}
+		
+		@ $mol_mem_key
+		item_value( index: number, next?: $mol_tree2 ) {
+
+			let tree = this.tree()
+			
+			if( next !== undefined ) {
+				tree = this.tree(
+					tree.insert( next && tree.kids[ index ].clone( [ next ] ), index )
+				)
+			}
+
+			return tree.kids[ index ]?.kids[ 0 ]
+		}
+
+		dict_item_add() {
+			const tree = this.tree()
+			this.tree(
+				tree.clone([
+					... tree.kids,
+					tree.struct('key', [tree.struct('null')]),
+				])
+			)
+		}
+	}
+	
+}
diff --git a/value/list/list.view.css.ts b/value/list/list.view.css.ts
new file mode 100644
index 0000000..38d94f3
--- /dev/null
+++ b/value/list/list.view.css.ts
@@ -0,0 +1,29 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_list, {
+
+		List_values: {
+			flex: {
+				grow: 1,
+			},
+			gap: $mol_gap.space,
+			margin: {
+				left: $mol_gap.block,
+			},
+			padding: {
+				left: $mol_gap.block,
+			},
+		},
+		
+		Self: {
+			flex: {
+				grow: 1,
+				direction: 'column',
+			},
+		},
+
+	} )
+
+}
diff --git a/value/list/list.view.tree b/value/list/list.view.tree
new file mode 100644
index 0000000..7d68197
--- /dev/null
+++ b/value/list/list.view.tree
@@ -0,0 +1,22 @@
+$hyoo_studio_value_list $hyoo_studio_value_unit
+	self /
+		<= Head $mol_view
+			sub /
+				^ head
+				<= Value_tools
+		<= List_values $mol_list
+			rows <= list / 
+				<= List_value*0 $hyoo_studio_value
+					tree? <=> list_value*? $mol_tree2_empty
+					belong_to \list
+					props_of* <= props_of* $mol_tree2_empty
+					props_bindable <= props_bindable $mol_tree2_empty
+					class_list <= class_list /string
+					Bound_prop* <= Bound_prop* null
+	tools /
+		<= Type
+		<= List_item_add $mol_button_minor
+			hint @ \Add Item
+			sub /
+				<= List_add_icon $mol_icon_plus
+			click? <=> list_item_add? null
diff --git a/value/list/list.view.ts b/value/list/list.view.ts
new file mode 100644
index 0000000..b6ecfa9
--- /dev/null
+++ b/value/list/list.view.ts
@@ -0,0 +1,33 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_list extends $.$hyoo_studio_value_list {
+		
+		@ $mol_mem
+		list() {
+			return this.tree().kids.map( (_,i)=> this.List_value( i ) )
+		}
+		
+		@ $mol_mem_key
+		list_value( index: number, next?: $mol_tree2 ) {
+
+			let tree = this.tree()
+			if( next !== undefined ) {
+				tree = this.tree( tree.insert( next, index ) )
+			}
+			
+			return tree.kids[ index ]
+		}
+		
+		list_item_add() {
+			const tree = this.tree()
+			this.tree(
+				tree.clone([
+					... tree.kids,
+					tree.struct( 'null' ),
+				])
+			)
+		}
+
+	}
+	
+}
diff --git a/value/number/number.view.css.ts b/value/number/number.view.css.ts
new file mode 100644
index 0000000..7d2f1bc
--- /dev/null
+++ b/value/number/number.view.css.ts
@@ -0,0 +1,24 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_number, {
+		
+		Self: {
+			flex: {
+				grow: 1,
+			},
+		},
+		
+		Numb: {
+			flex: {
+				grow: 1,
+			},
+			String: {
+				boxShadow: 'none',
+			},
+		},
+
+	} )
+
+}
diff --git a/value/number/number.view.tree b/value/number/number.view.tree
new file mode 100644
index 0000000..18fda7a
--- /dev/null
+++ b/value/number/number.view.tree
@@ -0,0 +1,4 @@
+$hyoo_studio_value_number $hyoo_studio_value_unit
+	self /
+		<= Numb $mol_number
+			value? <=> numb? +NaN
diff --git a/value/number/number.view.ts b/value/number/number.view.ts
new file mode 100644
index 0000000..9bee262
--- /dev/null
+++ b/value/number/number.view.ts
@@ -0,0 +1,18 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_number extends $.$hyoo_studio_value_number {
+
+		@ $mol_mem
+		numb( next?: number ) {
+			
+			return Number( this.tree(
+				next === undefined
+					? undefined
+					: this.tree().struct( String( next ) )
+			).type )
+			
+		}
+
+	}
+	
+}
diff --git a/value/object/object.view.css.ts b/value/object/object.view.css.ts
new file mode 100644
index 0000000..48a2a63
--- /dev/null
+++ b/value/object/object.view.css.ts
@@ -0,0 +1,17 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_object, {
+
+		Over_prop_name: {
+			alignSelf: 'center',
+			color: $mol_theme.shade,
+			padding: {
+				left: $mol_gap.block,
+			},
+		},
+
+	} )
+
+}
diff --git a/value/object/object.view.tree b/value/object/object.view.tree
new file mode 100644
index 0000000..919ab30
--- /dev/null
+++ b/value/object/object.view.tree
@@ -0,0 +1,22 @@
+$hyoo_studio_value_object $hyoo_studio_value_dict
+	tools /
+		<= Type
+		<= Over_prop_add $mol_select
+			hint @ \Add Override
+			align_hor \left
+			Trigger_icon <= Over_add_icon $mol_icon_wrench_outline
+			value? <=> over_prop_add? \
+			options <= over_prop_options /string
+	Item* $mol_view
+		sub /
+			<= Over_prop_name* $mol_paragraph
+				title <= item_key*?
+			<= Value* $hyoo_studio_value
+				tree? <=> item_value*?
+				belong_to \subprop
+				props_of* <= props_of*
+				props_bindable <= props_bindable
+				class_list <= class_list
+				Bound_prop* <= Bound_prop*
+				head /
+					<= Over_prop_name*
diff --git a/value/object/object.view.ts b/value/object/object.view.ts
new file mode 100644
index 0000000..d1cbe1e
--- /dev/null
+++ b/value/object/object.view.ts
@@ -0,0 +1,34 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_object extends $.$hyoo_studio_value_object {
+
+		over_prop_add( next: string ) {
+			
+			if( !next ) return ''
+			
+			const tree = this.tree()
+			
+			this.tree(
+				tree.clone( [
+					...tree.kids,
+					tree.struct( next, [
+						tree.struct( 'null' ),
+					] ),
+				] )
+			)
+			
+			return next
+		}
+		
+		@ $mol_mem
+		over_prop_options() {
+			return this.props_of( this.tree().type ).kids.map( prop => prop.type )
+		}
+
+		@ $mol_mem
+		prop_name_list() {
+			return this.props_bindable().kids.map( prop => prop.type )
+		}
+	}
+	
+}
diff --git a/value/string/string.view.css.ts b/value/string/string.view.css.ts
new file mode 100644
index 0000000..528b820
--- /dev/null
+++ b/value/string/string.view.css.ts
@@ -0,0 +1,32 @@
+namespace $.$$ {
+
+	const { px, rem } = $mol_style_unit
+
+	$mol_style_define( $hyoo_studio_value_string, {
+		
+		padding: {
+			right: $mol_gap.space,
+		},
+
+		Value_tools: {
+			flex: {
+				grow: 0,
+			},
+		},
+
+		Self: {
+			flex: {
+				grow: 1,
+			},
+		},
+
+		Str: {
+			maxWidth: rem(40),
+			Edit: {
+				boxShadow: 'none',
+			},
+		},
+
+	} )
+
+}
diff --git a/value/string/string.view.tree b/value/string/string.view.tree
new file mode 100644
index 0000000..1ee1939
--- /dev/null
+++ b/value/string/string.view.tree
@@ -0,0 +1,10 @@
+$hyoo_studio_value_string $hyoo_studio_value_unit
+	self /
+		<= Str $mol_textarea
+			value? <=> str? \
+	tools /
+		<= Type
+		<= Locale $mol_check_icon
+			hint @ \Multilingual
+			Icon <= Locale_icon $mol_icon_translate
+			checked? <=> locale? false
diff --git a/value/string/string.view.ts b/value/string/string.view.ts
new file mode 100644
index 0000000..69fecc8
--- /dev/null
+++ b/value/string/string.view.ts
@@ -0,0 +1,43 @@
+namespace $.$$ {
+	
+	export class $hyoo_studio_value_string extends $.$hyoo_studio_value_string {
+
+		@ $mol_mem
+		str( next?: string ) {
+			
+			const val = this.tree()
+
+			if (next !== undefined){
+				this.tree( val.type == '@' ? val.struct( '@', [ val.data(next) ] ) : val.data(next) )
+				return next
+			}
+
+			return val.text()
+		}
+
+		@ $mol_mem
+		locale( next?: boolean ) {
+			
+			const val = this.tree()
+			
+			if( next === undefined ) return '@' === val.type
+			
+			this.tree(
+				next
+					? val.struct( '@', [
+						val.data( val.text() || val.type )
+					] )
+					: val.data( val.text() || val.type )
+			)
+
+			return next
+		}
+		
+		@ $mol_mem
+		visible_tools(){
+			return this.belong_to() === 'prop'? [] : [ this.Type() ]
+		}
+
+	}
+	
+}
diff --git a/value/value.view.css.ts b/value/value.view.css.ts
index 94a5b54..74268c1 100644
--- a/value/value.view.css.ts
+++ b/value/value.view.css.ts
@@ -3,57 +3,9 @@ namespace $.$$ {
 	const { px, rem } = $mol_style_unit
 
 	$mol_style_define( $hyoo_studio_value, {
-
-		Self: {
-			flex: {
-				grow: 1,
-			},
-			alignItems: 'flex-start',
-		},
-
-		Type: {
-			Trigger: {
-				color: $mol_theme.special,
-			},
-		},
-
-
-		Numb: {
-			flex: {
-				grow: 1,
-				shrink: 1,
-			},
-		},
-
-		Str: {
-			flex: {
-				grow: 1,
-				shrink: 1,
-			},
-			maxWidth: rem(30),
-		},
-
-		Item_type: {
-			width: 0,
-		},
-
-		List_values: {
-			flex: {
-				grow: 1,
-			},
-			gap: $mol_gap.space,
-			margin: {
-				left: $mol_gap.block,
-			},
-			padding: {
-				left: $mol_gap.block,
-			},
-		},
-
-		List_value: {
-			border: {
-				radius: $mol_gap.round,
-			},
+		
+		flex: {
+			grow: 1,
 		},
 
 	} )
diff --git a/value/value.view.tree b/value/value.view.tree
index 23515c1..d738599 100644
--- a/value/value.view.tree
+++ b/value/value.view.tree
@@ -1,51 +1,38 @@
-$hyoo_studio_value $mol_list
+$hyoo_studio_value $mol_ghost
 	tree? $mol_tree2_empty
-	guid \
-	parent_type \
-	rows /
+	Bound $hyoo_studio_value_bound
+	List $hyoo_studio_value_list
+	Dict $hyoo_studio_value_dict
+	Object $hyoo_studio_value_object
+	String $hyoo_studio_value_string
+	Number $hyoo_studio_value_number
+	Unit $hyoo_studio_value_unit
+	value_tools /
+	type \
+	head /
+	belong_to \prop
+	hide_tools false
+	props_of* $mol_tree2_empty
+	props_bindable $mol_tree2_empty
+	class_list /string
+	Bound_prop* $hyoo_studio_prop
+
+$hyoo_studio_value_unit $mol_view
+	head /
+	belong_to \prop
+	hide_tools false
+	props_of* $mol_tree2_empty
+	props_bindable $mol_tree2_empty
+	class_list /string
+	Bound_prop* $hyoo_studio_prop
+	sub /
+		^ head
+		<= Value_tools $mol_view
+			sub <= visible_tools <= tools /
+				<= Type $hyoo_studio_type
+					tree? <=> tree? $mol_tree2_empty
+					type? => type?
+					belong_to <= belong_to
+					class_list <= class_list /string
 		<= Self $mol_view
 			sub <= self /
-				<= Type $hyoo_studio_prop_type
-					tree? <=> tree?
-					type => type
-					object_options <= object_options *
-					bind_options <= bind_options *
-				<= Str $mol_textarea
-					value?next <=> str?next \
-				<= Locale $mol_check_icon
-					hint @ \Multilingual
-					Icon <= Locale_icon $mol_icon_translate
-					checked?next <=> locale?next false
-				<= Numb $mol_number
-					value?next <=> numb?next +NaN
-				<= Over_prop_name $mol_select
-					hint @ \Overrided Property
-					value?next <=> name?next \
-					options <= prop_name_list
-					Trigger_icon null
-				<= Bound_prop_expand $mol_check_expand
-					checked? <=> bound_expanded? false
-				<= Bound_prop_name $mol_select
-					hint @ \Bound Property
-					value?next <=> bound_prop_name?next null
-					options <= prop_name_list /string
-					Trigger_icon null
-				<= Item_type $mol_string_button
-					hint @ \Item Type
-					value?next <=> item_type?next \any
-				<= List_add $mol_button_minor
-					hint @ \Add Item
-					sub /
-						<= List_add_icon $mol_icon_plus
-					click?next <=> list_add?next null
-		<= List_values $mol_list
-			rows <= list /
-	List_value* $hyoo_studio_value
-		parent_type \list
-		tree? <=> list_value*? $mol_tree2_empty
-		props_of!klass <= props_of!klass $mol_tree2_empty
-		props_bindable <= props_bindable $mol_tree2_empty
-		class_list <= class_list /string
-		Bound_prop* <= Bound_prop* null
-		bind_options *
-			get \<=
diff --git a/value/value.view.ts b/value/value.view.ts
index 6eb169b..2ac2def 100644
--- a/value/value.view.ts
+++ b/value/value.view.ts
@@ -3,187 +3,51 @@ namespace $.$$ {
 	export class $hyoo_studio_value extends $.$hyoo_studio_value {
 		
 		@ $mol_mem
-		self() {
-			const Head = this.parent_type() == 'object'? [this.Over_prop_name(), this.Type()] : [this.Type()]
-			switch( this.type() ) {
-				case 'null': return [ ...Head, ]
-				case 'boolean_true': return [ ...Head, ]
-				case 'boolean_false': return [ ...Head, ]
-				case 'number_nan': return [ ...Head, ]
-				case 'number_infinity_negative': return [ ...Head, ]
-				case 'number_infinity_positive': return [ ...Head, ]
-				case 'text': return [ ...Head, this.Str() ]
-				case 'number': return [ ...Head, this.Numb(), ]
-				case 'bind': return this.bound_expanded() ? [ this.Opened_bound_prop() ] : [ ...Head, this.Bound_prop_name(), this.Bound_prop_expand(), ]
-				case 'get': return this.bound_expanded() ? [ this.Opened_bound_prop() ] : [ ...Head, this.Bound_prop_name(), this.Bound_prop_expand() ]
-				case 'put': return this.bound_expanded() ? [ this.Opened_bound_prop() ] : [ ...Head, this.Bound_prop_name(), this.Bound_prop_expand(), ]
-				case 'list': return [ ...Head, this.Item_type(), this.List_add() ]
-				case 'dict': return [ ...Head, ]
-				default: return []
-			}
-		}
+		Sub() {
 
-		@ $mol_mem
-		guid() {
-			return $mol_guid()
-		}
-		
-		@ $mol_mem
-		Opened_bound_prop() {
-			const prop = this.Bound_prop( this.bound_prop_name() + ':' + this.guid() )
-			prop.expanded = ( next?: boolean ) => this.bound_expanded( next )
-			prop.expander_title = () => ''
-			prop.label_sub = () => [
-				...(this.parent_type() == 'object'? [this.Over_prop_name()]: []), 
-				this.Type(), this.Bound_prop_name(), prop.Trigger(), prop.Prop_tools()
-			]
-			return prop
-		}
-		
-		@ $mol_mem
-		str( next?: string ) {
-			if (next !== undefined){
-				this.tree(this.tree().data( next ))
-				return next
-			}
-			return this.tree().text()
-		}
-		
-		@ $mol_mem
-		locale( next?: boolean ) {
-			
-			const val = this.tree()
-			
-			if( next === undefined ) return '@' === val.type
-			
-			this.tree(
-				next
-					? val.struct( '@', [
-						val.data( val.text() || val.type )
-					] )
-					: val.data( val.text() || val.type )
-			)
+			let obj = this.Unit()
 
-			return next
-		}
-		
-		@ $mol_mem
-		prop_bind( next?: '<=' | '<=>' | '=>' ) {
-			
-			const val = this.tree()
-			
-			if( next === undefined ) return val.type 
-			
-			this.tree(
-				val.struct( next, val.kids )
-			)
-			
-			return next
-		}
-		
-		@ $mol_mem
-		prop_name_list() {
-			return this.props_bindable().kids.map( prop => prop.type )
-		}
-		
-		@ $mol_mem
-		bound_prop_name( next?: string ) {
-			
-			const val = this.tree()
-			
-			if( next === undefined ) {
-				return this.$.$mol_view_tree2_prop_split( val.kids[ 0 ] ).name.text() || '...'
+			switch( this.$.$hyoo_studio_type_value(this.tree()) ) {
+				case 'text': obj = this.String(); break;
+				case 'number': obj = this.Number(); break;
+				case 'bind': obj = this.Bound(); break;
+				case 'object': obj = this.Object(); break;
+				case 'get': obj = this.Bound(); break;
+				case 'put': obj = this.Bound(); break;
+				case 'list': obj = this.List(); break;
+				case 'dict': obj = this.Dict(); break;
 			}
-			
-			this.tree(
-				val.insert( val.struct( next ), null )
-			)
-			
-			return next || '...'
-		}
-		
-		@ $mol_mem
-		numb( next?: number ) {
-			
-			return Number( this.tree(
-				next === undefined
-					? undefined
-					: this.tree().struct( String( next ) )
-			).type )
-			
-		}
-		
-		@ $mol_mem
-		unit( next?: string ) {
-			
-			return this.tree(
-				next === undefined
-					? undefined
-					: this.tree().struct( next )
-			).type
-			
+
+			obj.hide_tools = () => this.hide_tools()
+			obj.belong_to = () => this.belong_to()
+			obj.tree = (next?: any) => this.tree(next)
+			obj.props_of = (id: any) => this.props_of(id)
+			obj.props_bindable = () => this.props_bindable()
+			obj.class_list = () => this.class_list()
+			obj.Bound_prop = (id: any) => this.Bound_prop(id)
+			obj.head = () => this.head()
+
+			return obj
 		}
-		
+
 		@ $mol_mem
-		obj( next?: string ) {
-			
-			return this.tree(
-				next === undefined
-					? undefined
-					: this.tree().struct( next )
-			).type
-			
+		value_tools(): readonly any[] {
+			return this.Sub().tools()
 		}
-		
+
 		@ $mol_mem
-		list() {
-			return this.type() == 'list' ? this.tree().kids.map( (_,i)=> this.List_value( i ) ) : []
+		type(): string {
+			return this.Sub().Type().type()
 		}
 		
-		@ $mol_mem
-		item_type( next?: string ) {
-			
-			if( next && /\s/.test( next ) ) {
-				$mol_fail( new SyntaxError( `Item type mustn't have any space chars` ) )
-			}
-			
-			const from_tree = this.tree(
-				next === undefined
-					? undefined
-					: this.tree().struct( '/' + next, this.tree().kids )
-			).type.slice( 1 )
+	}
 
-			const focused = this.Item_type().focused()
 
-			return (from_tree) || (focused? '' : 'any')
-			
-		}
+	export class $hyoo_studio_value_unit extends $.$hyoo_studio_value_unit {
 		
-		list_add() {
-			const tree = this.tree()
-			this.tree(
-				tree.clone([
-					... tree.kids,
-					tree.struct( 'null' ),
-				])
-			)
-		}
-		
-		@ $mol_mem_key
-		list_value( index: number, next?: $mol_tree2 ) {
-			let val = this.tree()
-			if( next !== undefined ) {
-				val = this.tree( val.insert( next, index ) )
-			}
-			return val.kids[ index ]
-		}
-		
-		bind_options(): ReturnType<$hyoo_studio_prop_type[ 'bind_options' ]> {
-			return { bind: '<=>', get: '<=', put: '=>' }
-		}
-		
-		object_options(): ReturnType<$hyoo_studio_prop_type[ 'object_options' ]> {
-			return { text: 'text', list: 'list', dict: 'dict' }
+		@ $mol_mem
+		visible_tools() {
+			return this.hide_tools() ? [] : this.tools()
 		}
 		
 	}