fix imports to copied react.ts

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {

src/View/ChatPages/boardPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { BoardStatusGridPage } from "./boardStatusGridPage";
 import { BoardKanbanPage } from "./boardKanbanPage";
 import { ViewController } from "../viewController";

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {

src/View/ChatPages/calendarPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import "./calendarPage.css";
 import { ViewController } from "../viewController";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";

src/View/ChatPages/messagePage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import "./messagePage.css";
 import { ViewController } from "../viewController";
 import { MessageFilterModal } from "../Modals/messageFilterModal";

src/View/ChatPages/settingsPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { DeletableListItem } from "../Components/deletableListItem";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { ColorPicker } from "../Components/colorPicker";

src/View/ChatPages/taskPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import "./taskPage.css";
 import { BoardPage } from "./boardPage";
 import { ViewController } from "../viewController";

src/View/Components/boardEntry.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 

src/View/Components/boardViewToggleButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { RibbonButton } from "./ribbonButton";
 import BoardViewModel, {
     BoardPageTypes,

src/View/Components/chatEntry.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 
 export function ChatEntry(chatViewModel: ChatViewModel) {

src/View/Components/chatMessage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { MessageReactionButtonRow } from "./messageReactionButtonRow";
 import { InlineReply } from "./inlineReply";
 import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";

src/View/Components/chatViewToggleButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { RibbonButton } from "./ribbonButton";
 import ChatViewModel, {
     ChatPageTypes,

src/View/Components/colorPicker.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { Colors } from "../../colors";
 
 export function ColorPicker(selectedColor: React.State<Colors>) {

src/View/Components/dangerousActionButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
 export function DangerousActionButton(

src/View/Components/deletableListItem.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
 export function DeletableListItem(

src/View/Components/directoryItemList.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import StorageViewModel from "../../ViewModel/Global/storageViewModel";
 import StorageModel, {
     PATH_COMPONENT_SEPARATOR,

src/View/Components/filteredList.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import {
     StringEntryObject,
     checkDoesObjectMatchReference,

src/View/Components/homePageButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function HomePageButton(
     action: () => void,

src/View/Components/infoTile.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function InfoTile(
     icon: string,

src/View/Components/inlineReply.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 

src/View/Components/messageReactionButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ReactionSymbols } from "../../Model/Chat/chatModel";

src/View/Components/messageReactionButtonRow.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { MessageReactionButton } from "./messageReactionButton";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";

src/View/Components/messageReactionEntry.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ChatMessageReaction } from "../../Model/Chat/chatModel";
 
 export function MessageReactionEntry(reaction: ChatMessageReaction) {

src/View/Components/messageReactionFilterButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import { ReactionSymbols } from "../../Model/Chat/chatModel";
 

src/View/Components/monthGrid.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import "./monthGrid.css";
 import { ViewController } from "../viewController";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";

src/View/Components/navigationButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
 export function NavigationButton<T>(

src/View/Components/option.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function Option(text: string, value: string, selectedOnCreate: boolean) {
     return (

src/View/Components/optionButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function OptionButton<T>(
     text: string,

src/View/Components/optionButtonList.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { OptionButton } from "./optionButton";
 
 export function OptionButtonList<T>(

src/View/Components/placeholderView.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function PlaceholderView(text: string) {
     return (

src/View/Components/propertyValueList.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import {
     StringEntryObject,
     collectObjectValuesForKey,

src/View/Components/replyPreview.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 

src/View/Components/ribbonButton.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export function RibbonButton(
     label: string,

src/View/Components/taskEntry.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 
 export function TaskEntry(taskViewModel: TaskViewModel) {

src/View/Components/textSpan.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 
 export const StringToTextSpan: React.StateItemConverter<string> = (
     string: string,

src/View/Modals/boardSettingsModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { ColorPicker } from "../Components/colorPicker";

src/View/Modals/chatMessageInfoModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { MessageReactionEntry } from "../Components/messageReactionEntry";
 import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
 import { InfoTile } from "../Components/infoTile";

src/View/Modals/connectionModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { DeletableListItem } from "../Components/deletableListItem";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";

src/View/Modals/dataTransferModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { StringToTextSpan } from "../Components/textSpan";
 import FileTransferViewModel, {

src/View/Modals/messageFilterModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { MessageReactionFilterButton } from "../Components/messageReactionFilterButton";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";

src/View/Modals/searchModal.tsx

@@ -1,5 +1,5 @@
 import { v4 } from "uuid";
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { StringToOption } from "../Components/option";
 import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
@@ -70,7 +70,7 @@ export function SearchModal<T>(
                         </button>
                     </div>
 
-		    <div 
+		    <div
 			toggle:hidden={searchViewModel.hasNoSuggestions}>
 			<hr></hr>
 			<h3>{coreViewModel.translations.general.searchSuggestionsLabel}</h3>
@@ -105,14 +105,14 @@ function SuggestionView<T>(suggestion: string, searchViewModel: SearchViewModel<
 
     return <div class="flex-row surface align-center">
 	<span class="width-100 flex-1 padding-h">{suggestion}</span>
-	<button 
+	<button
 	    class="danger"
 	    aria-label={coreViewModel.translations.general.deleteButton}
 	    on:click={deleteSuggestion}
 	>
 	    <span class="icon">delete</span>
 	</button>
-	<button 
+	<button
 	    class="primary"
 	    aria-label={coreViewModel.translations.general.applyButton}
 	    on:click={applySuggestion}

src/View/Modals/settingsModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { SplitModal } from "./splitModal";
 import { languageNames } from "../translations";
 import { PlaceholderView } from "../Components/placeholderView";

src/View/Modals/splitModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import "./splitModal.css";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 

src/View/Modals/storageModal.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { SplitModal } from "./splitModal";
 import { DirectoryItemList } from "../Components/directoryItemList";
 import { DangerousActionButton } from "../Components/dangerousActionButton";

src/View/Modals/taskSettingsModal.tsx

@@ -1,5 +1,5 @@
 import { v4 } from "uuid";
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import {
     Entry,
     Option,
@@ -245,7 +245,7 @@ export function TaskSettingsModal(
 		bind:value={taskViewModel.description}
 	    ></textarea>
 	</main>
-	<div 
+	<div
 	    class="flex-row width-100"
 	    id="fullscreen-exit"
 	>
@@ -257,7 +257,7 @@ export function TaskSettingsModal(
 	    <span class="icon">fullscreen_exit</span>
 	</button>
     </div>
-	<div 
+	<div
 	    class="flex-row width-100"
 	    id="controls"
 	>

src/View/chatPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../react";
 import { ViewController } from "./viewController";
 import "./homePage.css";
 import { ChatViewToggleButton } from "./Components/chatViewToggleButton";

src/View/chatPageWrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../react";
 import "./chatPage.css";
 import { ChatPage } from "./chatPage";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";

src/View/homePage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../react";
 import "./homePage.css";
 import { StringToOption } from "./Components/option";
 import { HomePageButton } from "./Components/homePageButton";

src/View/mainPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../react";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
 
 export function MainPage(coreViewModel: CoreViewModel) {

src/View/viewController.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../react";
 
 class Tracker<T> {
     state: React.State<T> | undefined;

src/ViewModel/Chat/chatListViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import ChatViewModel from "./chatViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import {

src/ViewModel/Chat/chatViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import ChatListViewModel from "./chatListViewModel";
 import TaskPageViewModel from "../Pages/taskPageViewModel";
 import SettingsPageViewModel from "../Pages/settingsPageViewModel";

src/ViewModel/Global/connectionViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel from "./coreViewModel";
 
 export default class ConnectionViewModel {

src/ViewModel/Global/coreViewModel.ts

@@ -1,5 +1,5 @@
 import { v4 } from "uuid";
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { allTranslations, Translations } from "../../View/translations";
 import { HandlerManager } from "../../Model/Utility/utility";
 import StorageModel from "../../Model/Global/storageModel";
@@ -177,7 +177,7 @@ export class ContextHost<T> extends Context {
         this.coreViewModel.context = selectedContext;
         this.currentContext.value = selectedContext;
     };
-    
+
     constructor(contextDebugDescription: string, public coreViewModel: CoreViewModel) {
 	super(contextDebugDescription);
     }

src/ViewModel/Global/fileTransferViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
 import { CommonKeys } from "../../View/keystrokes";
 import StorageModel, {

src/ViewModel/Global/notificationViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { ChatPageTypes } from "../Chat/chatViewModel";
 import ChatListViewModel from "../Chat/chatListViewModel";
 import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";

src/ViewModel/Global/settingsViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
 import { CommonKeys } from "../../View/keystrokes";
 import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
@@ -83,7 +83,7 @@ export default class SettingsViewModel extends Context {
 	    return DynamicSceneDay;
 	} else if (hour < 17) {
 	    return DynamicSceneAfternoon
-	} else if (hour < 21) {
+	} else {
 	    return DynamicSceneSunset
 	}
     }

src/ViewModel/Global/storageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
 import { CommonKeys } from "../../View/keystrokes";
 import StorageModel, {

src/ViewModel/Pages/boardViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import TaskPageViewModel from "./taskPageViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
@@ -32,7 +32,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
     filteredTaskViewModels: React.ListState<TaskViewModel> =
         new React.ListState();
     isFilterActive: React.State<boolean>;
-    
+
     // paths
     getBasePath = (): string[] => {
         return [

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import CoreViewModel from "../Global/coreViewModel";

src/ViewModel/Pages/messagePageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import SearchViewModel from "../Utility/searchViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import { Colors } from "../../colors";

src/ViewModel/Pages/taskContainingPageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
@@ -17,7 +17,7 @@ export default class TaskContainingPageViewModel extends Context {
         new React.State<any>(undefined);
 
     taskViewModels: React.MapState<TaskViewModel> = new React.MapState();
-    
+
     taskCategorySuggestions: React.ListState<string> = new React.ListState();
     taskStatusSuggestions: React.ListState<string> = new React.ListState();
 

src/ViewModel/Pages/taskPageViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import BoardViewModel from "./boardViewModel";
 import CoreViewModel, { ContextHost } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";

src/ViewModel/Pages/taskViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel from "../Chat/chatViewModel";

src/ViewModel/Utility/searchViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import { checkDoesObjectMatchSearch } from "../../Model/Utility/utility";
 
 export default class SearchViewModel<T> {

src/ViewModel/Utility/taskPropertyBulkChangeViewModel.ts

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "../../react";
 import TaskViewModel from "../Pages/taskViewModel";
 
 export default class TaskPropertyBulkChangeViewModel {

src/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "bloatless-react";
+import * as React from "./react";
 import "./colors.css";
 import "./coloredTile.css";
 import "./base.css";

src/react.ts

@@ -108,7 +108,7 @@ export class ListState<T> extends State<Set<T>> {
             this.removalHandlers.set(item, new Set());
         this.removalHandlers.get(item)!.add(handler);
     }
-    
+
     handleRemovals(handler: RemovalSubscription<T>): void {
         this.genericRemovalHandlers.add(handler);
     }
@@ -279,103 +279,105 @@ export function createElement(
 		case "on": {
 		    switch (directiveValue) {
 			case "enter": {
-			    element.addEventListener("keydown", (e: KeyboardEvent) => {
-				if (e.key != "Enter") return;
-				value(e);
-			    });
-			    break;
+			element.addEventListener("keydown", (e: Event) => {
+			if (!(e instanceof KeyboardEvent)) return;
+			if (e.key != "Enter") return;
+			value(e);
+   });
+   break;
 			}
 			default: {
-			    element.addEventListener(directiveValue, value);
+   element.addEventListener(directiveValue, value);
 			}
 		    }
 		    break;
 		}
 		case "keystroke": {
-		    element.addEventListener("keydown", (e: KeyboardEvent) => {
-			if (e.metaKey == false && e.ctrlKey == false) return;
-			if (e.key != directiveValue) return;
-			value(e);
-		    })
-		    break;
+  element.addEventListener("keydown", (e: Event) => {
+    if (!(e instanceof KeyboardEvent)) return;
+		if (e.metaKey == false && e.ctrlKey == false) return;
+		if (e.key != directiveValue) return;
+		value(e);
+  })
+  break;
 		}
 		case "subscribe": {
-		    const state = value as State<any>;
-		    state.subscribe(
-			(newValue) => (element[directiveValue] = newValue)
-		    );
+  const state = value as State<any>;
+  state.subscribe(
+		(newValue) => (element[directiveValue] = newValue)
+  );
 
-		    break;
+  break;
 		}
 		case "bind": {
-		    const state = value as State<any>;
-		    state.subscribe(
-			(newValue) => (element[directiveValue] = newValue)
-		    );
-		    element.addEventListener(
-			"input",
-			() => (state.value = (element as any)[directiveValue])
-		    );
-		    break;
+  const state = value as State<any>;
+  state.subscribe(
+		(newValue) => (element[directiveValue] = newValue)
+  );
+  element.addEventListener(
+		"input",
+		() => (state.value = (element as any)[directiveValue])
+  );
+  break;
 		}
 		case "toggle": {
-		    if (value.subscribe) {
-			const state = value as State<any>;
-			state.subscribe((newValue) =>
-			    element.toggleAttribute(directiveValue, newValue)
-			);
-		    } else {
-			element.toggleAttribute(directiveValue, value);
-		    }
-		    break;
+  if (value.subscribe) {
+		const state = value as State<any>;
+		state.subscribe((newValue) =>
+  element.toggleAttribute(directiveValue, newValue)
+		);
+  } else {
+		element.toggleAttribute(directiveValue, value);
+  }
+  break;
 		}
 		case "set": {
-		    const state = value as State<any>;
-		    state.subscribe((newValue) =>
-			element.setAttribute(directiveValue, newValue)
-		    );
-		    break;
+  const state = value as State<any>;
+  state.subscribe((newValue) =>
+		element.setAttribute(directiveValue, newValue)
+  );
+  break;
 		}
 		case "children": {
-		    switch (directiveValue) {
-			case "set": {
-			    const state = value as State<Node | Node[]>;
-			    state.subscribe((newValue) => {
-				element.innerHTML = "";
-				element.append(...[newValue].flat());
-			    });
-			    break;
-			}
-			case "append":
-			case "prepend": {
-			    try {
-				const [listState, toElement] = value as [
-				    listState: ListState<any>,
-				    StateItemConverter<any>
-				];
+  switch (directiveValue) {
+		case "set": {
+  const state = value as State<Node | Node[]>;
+  state.subscribe((newValue) => {
+		element.innerHTML = "";
+		element.append(...[newValue].flat());
+  });
+  break;
+		}
+		case "append":
+		case "prepend": {
+  try {
+		const [listState, toElement] = value as [
+  listState: ListState<any>,
+  StateItemConverter<any>
+		];
 
-				listState.handleAddition((newItem) => {
-				    const child = toElement(newItem);
-				    listState.handleRemoval(newItem, () =>
-					child.remove()
-				    );
+		listState.handleAddition((newItem) => {
+  const child = toElement(newItem);
+  listState.handleRemoval(newItem, () =>
+		child.remove()
+  );
 
-				    if (directiveValue == "append") {
-					element.append(child);
-				    } else if (directiveValue == "prepend") {
-					element.prepend(child);
-				    }
-				});
-			    } catch (error) {
-				console.error(error);
-				throw `error: cannot process subscribe:children directive. \n Usage: "children:append={[list, converter]}"; you can find a more detailed example in the documentation.`;
-			    }
-			}
-		    }
-		    break;
+  if (directiveValue == "append") {
+		element.append(child);
+  } else if (directiveValue == "prepend") {
+		element.prepend(child);
+  }
+		});
+  } catch (error) {
+		console.error(error);
+		throw `error: cannot process subscribe:children directive. \n Usage: "children:append={[list, converter]}"; you can find a more detailed example in the documentation.`;
+  }
+		}
+  }
+  break;
 		}
 		default:
-		    element.setAttribute(attributename, value);
+  element.setAttribute(attributename, value);
 	    }
 	});