$mol_scroll $mol_view
	scroll_top? 0
	scroll_left? 0
	attr *
		^
		tabindex <= tabindex -1
	event *
		^
		scroll?event <=> event_scroll?event null

$mol_page $mol_view
	dom_name \article
	attr *
		^
		tabIndex <= tabindex -1
	sub /
		<= Head $mol_view
			minimal_height 64
			dom_name \header
			sub <= head /
				<= Title $mol_view
					dom_name \h1
					sub <= title_content /
						<= Logo null
						<= title
				<= Tools $mol_view
					sub <= tools /$mol_view_content
		<= Body $mol_scroll
			scroll_top? => body_scroll_top?
			sub <= body_content /
				<= Body_content $mol_view
					sub <= body /$mol_view
		<= Foot $mol_view
			dom_name \footer
			sub <= foot /$mol_view

$mol_theme_auto $mol_plugin
	light \$mol_theme_light
	attr * mol_theme <= theme <= dark \$mol_theme_dark

$mol_chip $mol_view
	minimal_height 40
	attr *
		^
		title <= hint \
	sub /
		<= title

$mol_hotkey $mol_plugin
	event *
		^
		keydown?event <=> keydown?event null
	key *
	mod_ctrl false
	mod_alt false
	mod_shift false

$mol_string $mol_view
	dom_name \input
	enabled true
	minimal_height 40
	autocomplete false
	selection? /number
		0
		0
	auto /
		<= selection_watcher null
		<= error_report null
	field *
		^
		disabled <= disabled false
		value <= value_changed? <=> value? \
		placeholder <= hint_visible <= hint \
		spellcheck <= spellcheck true
		autocomplete <= autocomplete_native \
		selectionEnd <= selection_end 0
		selectionStart <= selection_start 0
		inputMode <= keyboard \text
		enterkeyhint <= enter \go
	attr *
		^
		maxlength <= length_max +Infinity
		type <= type? \text
	event *
		^
		input?event <=> event_change?event null
	plugins /
		<= Submit $mol_hotkey
			mod_ctrl <= submit_with_ctrl false
			key * enter?event <=> submit?event null

$mol_svg $mol_view
	dom_name \svg
	dom_name_space \http://www.w3.org/2000/svg
	font_size 16
	font_family \
	style_size *

$mol_svg_root $mol_svg
	dom_name \svg
	attr *
		^
		viewBox <= view_box \0 0 100 100
		preserveAspectRatio <= aspect \xMidYMid

$mol_svg_path $mol_svg
	dom_name \path
	attr *
		^
		d <= geometry \


$mol_icon $mol_svg_root
	view_box \0 0 24 24
	minimal_width 16
	minimal_height 16
	sub /
		<= Path $mol_svg_path
			geometry <= path \

$mol_icon_plus $mol_icon path \M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z

$mol_speck $mol_view
	minimal_width 12
	attr *
		^
		mol_theme <= theme \$mol_theme_accent
	style *
		^
		minHeight \1em
	sub /
		<= value null

$mol_button $mol_view
	enabled true
	click?event null
	event_click?event null
	event *
		^
		click?event <=> event_activate?event null
		dblclick?event <=> clicks?event null
		keydown?event <=> event_key_press?event null 
	attr *
		^
		disabled <= disabled false
		role \button
		tabindex <= tab_index 0
		title <= hint_safe <= hint \
	sub /$mol_view_content
		<= title
	Speck $mol_speck
		value <= error \

$mol_button_typed $mol_button
	minimal_height 40
	minimal_width 40

$mol_button_minor $mol_button_typed

$mol_check $mol_button_minor
	attr *
		^
		mol_check_checked <= checked? false
		aria-checked <= aria_checked \false
		role <= aria_role \checkbox
	sub /$mol_view_content
		<= Icon null
		<= label /
			<= Title $mol_view
				sub /
					<= title \

$mol_check_icon $mol_check

$mol_icon_brightness_4 $mol_icon path \M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z

$mol_lights_toggle $mol_check_icon
	Icon <= Lights_icon $mol_icon_brightness_4
	hint @ \Toggle lights
	checked? <=> lights? false

$mol_link $mol_view
	uri \
	dom_name \a
	uri_off \
	uri_native null
	external false
	attr *
		^
		href <= uri_toggle \
		title <= hint_safe <= hint \
		target <= target \_self
		download <= file_name \
		mol_link_current <= current false
		rel <= relation \
	sub /$mol_view_content
		<= title
	arg *
	event *
		^
		click?event <=> click?event <=> event_click?event null

$mol_icon_close $mol_icon path \M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z

$mol_list $mol_view
	render_visible_only true
	render_over 0
	sub <= rows /$mol_view
	Empty $mol_view
	Gap_before $mol_view style * paddingTop <= gap_before 0
	Gap_after $mol_view style * paddingTop <= gap_after 0
	item_height_min* 1
	item_width_min* 1
	view_window /
		0
		0

$mol_gallery $mol_view
	sub <= items /$mol_view
	Side* $mol_gallery
		style *
			flexGrow <= side_size* \1
		items <= side_items* /$mol_view

$hd_canary_app $mol_page
	title @ \Hyper Canary
	targets? *
	target_result*? 1
	plugins /
		<= Theme $mol_theme_auto
	head /
		<= Status_total $mol_chip title <= status_total \
		<= Title
		<= Add $mol_view sub /
			<= Add_url $mol_string
				hint @ \URL
				value? <=> add_url? \
				submit? <=> add_submit? null
			<= Add_title $mol_string
				hint @ \Title
				value? <=> add_title? \
				submit? <=> add_submit? null
			<= Add_submit $mol_button_minor
				hint @ \Add
				click? <=> add_submit? null
				sub /
					<= Add_submit_icon $mol_icon_plus
		<= Tools
	tools /
		<= Lights $mol_lights_toggle
	body /
		<= Target_list $mol_gallery items <= target_list /
			<= Target*0 $mol_list rows <= target_rows* /
				<= Target_main* $mol_view sub /
					<= Target_status* $mol_view
						sub / <= target_status* \
					<= Target_url* $mol_link
						title <= target_title* \
						uri <= target_url* \
					<= Target_remove* $mol_button_minor
						click <=> target_remove* null
						sub / <= Target_remove_icon* $mol_icon_close
				<= Target_message* $mol_view
					sub / <= target_message*? \
				<= Target_moment* $mol_view
					sub / <= target_moment*? <= waiting_hint @ \Waiting...