diff --git a/.gitignore b/.gitignore
index 2db28fdcc..dbd8df51e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,10 +3,13 @@
 
 # Build folders
 debug/
-build*/
+build/*
 dev_*/
 **/.cache/
 
+# For clangd
+compile_commands.json
+
 # CMake files
 CMakeFiles/
 CMakeCache.txt
@@ -21,3 +24,6 @@ CMakeCache.txt
 # NPM
 node_modules/
 src/render/react/index.js
+
+# Cursor AI
+.cursor/
\ No newline at end of file
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 8d6b911f0..34399ebc8 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -3,13 +3,23 @@ cmake_minimum_required(VERSION 3.16)
 project(lvgljs LANGUAGES C CXX)
 
 set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
-set(LV_CONF_PATH ${CMAKE_CURRENT_SOURCE_DIR}/deps/lv_conf.h CACHE INTERNAL "LV_CONF_PATH")
+
+if(NOT DEFINED LVGLJS_CONF_DIR)
+    set(LVGLJS_CONF_DIR ${CMAKE_CURRENT_SOURCE_DIR}/deps CACHE INTERNAL "LVGLJS_CONF_DIR")
+endif()
+
+set(LV_CONF_PATH ${LVGLJS_CONF_DIR}/lv_conf.h CACHE INTERNAL "LV_CONF_PATH")
 
 set(BUILD_NATIVE OFF CACHE BOOL "Build wasm3 with native support")
 
+option(BUILD_STATIC_LIB "Build as static library (.a) instead of executable" OFF)
+
+set(DISP_HOR_RES 1024 CACHE STRING "Display horizontal resolution")
+set(DISP_VER_RES 600 CACHE STRING "Display vertical resolution")
+
 find_path(LVGL_PATH lvgl.h PATHS ${CMAKE_CURRENT_SOURCE_DIR}/deps PATH_SUFFIXES lvgl)
 
-add_executable(lvgljs
+set(LVGLJS_SOURCES
     src/engine/engine.cpp
     src/render/native/core/style/style.cpp
     src/render/native/core/style/font/font.cpp
@@ -29,6 +39,7 @@ add_executable(lvgljs
     src/render/native/core/img/img.cpp
     src/render/native/core/utils/utils.hpp
     src/render/native/core/animate/animate.cpp
+    src/render/native/core/focus_group/focus_group.cpp
     src/render/native/components/arc/arc.cpp
     src/render/native/components/arc/arc_wrap.cpp
     src/render/native/components/mask/mask.cpp
@@ -74,6 +85,14 @@ add_executable(lvgljs
     src/render/native/bootstrap/render_bootstrap.cpp
 )
 
+if(BUILD_STATIC_LIB)
+    add_library(lvgljs STATIC ${LVGLJS_SOURCES})
+    message(STATUS "Building lvgljs as static library (.a)")
+else()
+    add_executable(lvgljs ${LVGLJS_SOURCES} src/engine/main.cpp)
+    message(STATUS "Building lvgljs as executable")
+endif()
+
 if(${CMAKE_BUILD_TYPE} MATCHES Simulator)
     set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -O0 -Wall -g -ggdb -std=c++14")
     set(BUILD_WITH_MIMALLOC OFF) # TODO: SDL and mimalloc don't play well together
@@ -108,6 +127,11 @@ target_include_directories(lvgljs PUBLIC
     src/render/native/core
 )
 
+target_compile_definitions(lvgljs PRIVATE
+    DISP_HOR_RES=${DISP_HOR_RES}
+    DISP_VER_RES=${DISP_VER_RES}
+)
+
 target_link_libraries(lvgljs PUBLIC
     tjs
     lvgl
diff --git a/Makefile b/Makefile
index e82382d4f..75f9a7fb6 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,7 @@
 BUILD_SIM=build
+BUILD_LIB=build_lib
 
-.PHONY: setup simulator demo clean
+.PHONY: setup simulator lib demo clean
 
 setup:
 	git submodule update --recursive --init
@@ -8,10 +9,14 @@ setup:
 
 simulator:
 	@mkdir -p $(BUILD_SIM)
-	cmake -B "$(BUILD_SIM)" -DCMAKE_BUILD_TYPE=Simulator
+	cmake -B "$(BUILD_SIM)" -DCMAKE_BUILD_TYPE=Simulator -DBUILD_STATIC_LIB=OFF
 	cmake --build $(BUILD_SIM) -j
 
-# Set default project argument to 'widgets' if no project is provided
+lib:
+	@mkdir -p $(BUILD_LIB)
+	cmake -B "$(BUILD_LIB)" -DCMAKE_BUILD_TYPE=Simulator -DBUILD_STATIC_LIB=ON
+	cmake --build $(BUILD_LIB) -j
+
 demo: simulator
 	@PROJECT=$${PROJECT:-widgets}; \
 	echo "Running demo with project: $$PROJECT"; \
@@ -19,4 +24,4 @@ demo: simulator
 	./${BUILD_SIM}/lvgljs run demo/$$PROJECT/index.js
 
 clean:
-	rm -rf $(BUILD_SIM)
\ No newline at end of file
+	rm -rf $(BUILD_SIM) $(BUILD_LIB)
diff --git a/build.js b/build.js
index be01ecc07..56ec12b59 100644
--- a/build.js
+++ b/build.js
@@ -13,6 +13,7 @@ function build(pattern){
         entryPoints: [entry],
         bundle: true,
         platform: 'neutral',
+        mainFields: ['module', 'main'],
         external: ['tjs:path'],
         outfile: path.resolve(path.dirname(entry), 'index.js'),
         define: {
diff --git a/demo/gateway/assets/nav_icon/device_info.png b/demo/gateway/assets/nav_icon/device_info.png
new file mode 100644
index 000000000..2b7fffe2d
Binary files /dev/null and b/demo/gateway/assets/nav_icon/device_info.png differ
diff --git a/demo/gateway/assets/nav_icon/device_status.png b/demo/gateway/assets/nav_icon/device_status.png
new file mode 100644
index 000000000..004a6900e
Binary files /dev/null and b/demo/gateway/assets/nav_icon/device_status.png differ
diff --git a/demo/gateway/assets/nav_icon/event_log.png b/demo/gateway/assets/nav_icon/event_log.png
new file mode 100644
index 000000000..1ff82a7b3
Binary files /dev/null and b/demo/gateway/assets/nav_icon/event_log.png differ
diff --git a/demo/gateway/assets/nav_icon/settings.png b/demo/gateway/assets/nav_icon/settings.png
new file mode 100644
index 000000000..a89008129
Binary files /dev/null and b/demo/gateway/assets/nav_icon/settings.png differ
diff --git a/demo/gateway/components/ConfirmDialog.tsx b/demo/gateway/components/ConfirmDialog.tsx
new file mode 100644
index 000000000..6d33be870
--- /dev/null
+++ b/demo/gateway/components/ConfirmDialog.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { Button, Text, View, Dimensions, CreateStyle } from "lvgljs-ui";
+
+const { width, height } = Dimensions.window;
+
+interface ConfirmDialogProps {
+  title: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export function ConfirmDialog({
+  title,
+  onConfirm,
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+}: ConfirmDialogProps) {
+  return (
+    <View style={style.overlay} onCancel={onCancel}>
+      <View style={style.dialog}>
+        <Text style={style.title}>{title}</Text>
+        <View style={style.buttons}>
+          <Button
+            autoFocus
+            style={style.button}
+            onFocusedStyle={style.buttonFocused}
+            onClick={onCancel}
+            addToFocusGroup
+          >
+            <Text style={style.buttonText}>✕</Text>
+          </Button>
+          <Button
+            style={style.button}
+            onFocusedStyle={style.buttonFocused}
+            onClick={onConfirm}
+            addToFocusGroup
+          >
+            <Text style={style.buttonText}>✓</Text>
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  overlay: {
+    position: "absolute",
+    width,
+    height,
+    "background-color": "rgba(0, 0, 0, 0.7)",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    zIndex: 1000,
+  },
+  dialog: {
+    width: width - 80,
+    "background-color": "black",
+    "border-radius": 12,
+    padding: 24,
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+  },
+  title: {
+    "text-color": "white",
+    "font-size": 16,
+    "text-align": "center",
+    "margin-bottom": 24,
+  },
+  buttons: {
+    display: "flex",
+    "flex-direction": "row",
+    "justify-content": "space-between",
+    width: "100%",
+    gap: 16,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    "border-radius": 8,
+    "background-color": "0x404040",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+  },
+  buttonText: {
+    "text-color": "white",
+    "font-size": 18,
+  },
+  buttonFocused: {
+    "border-width": 3,
+    "border-color": "#4660FF",
+  },
+});
diff --git a/demo/gateway/components/Header.tsx b/demo/gateway/components/Header.tsx
new file mode 100644
index 000000000..4644a85e0
--- /dev/null
+++ b/demo/gateway/components/Header.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { CreateStyle, Image, Text, View } from "lvgljs-ui";
+import { useNavigate } from "react-router";
+
+interface HeaderProps {
+  title: string;
+  backIcon?: string;
+}
+
+export function Header({ title, backIcon }: HeaderProps) {
+  const navigate = useNavigate();
+  return (
+    <View style={style.header}>
+      <Image src="left" style={style.headerIcon} onClick={() => navigate(-1)} />
+      {backIcon && <Image src={backIcon} style={style.headerIcon} />}
+      <Text style={style.headerTitle}>{title}</Text>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  header: {
+    width: "100%",
+    height: 52,
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "background-color": "0x202020",
+    padding: "0 16px",
+  },
+  headerIcon: {
+    width: 'auto',
+    height: 'auto',
+    "text-color": "white",
+    "font-size": 18,
+  },
+  headerTitle: {
+    "text-color": "white",
+    "font-size": 16,
+  },
+});
diff --git a/demo/gateway/components/ListItem.tsx b/demo/gateway/components/ListItem.tsx
new file mode 100644
index 000000000..1385ee408
--- /dev/null
+++ b/demo/gateway/components/ListItem.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { CreateStyle, Image, Text, useT, View } from "lvgljs-ui";
+
+interface ListItemProps {
+  title: string;
+  badge?: string;
+  badgeColor?: string;
+  showArrow?: boolean;
+  onClick?: () => void;
+  autoFocus?: boolean;
+}
+
+export function ListItem({
+  title,
+  badge,
+  badgeColor = "0xFF0000",
+  showArrow = true,
+  onClick,
+  autoFocus = false,
+}: ListItemProps) {
+  const t = useT();
+  return (
+    <View
+      autoFocus={autoFocus}
+      addToFocusGroup
+      onFocusedStyle={style.focused}
+      style={style.listItem}
+      onClick={onClick}
+    >
+      <View style={style.content}>
+        <Text style={style.title}>{t(title)}</Text>
+        {badge && (
+          <View style={[style.badge, { "background-color": badgeColor }]}>
+            <Text style={style.badgeText}>{badge}</Text>
+          </View>
+        )}
+      </View>
+      {showArrow && (
+        <Image src={"right"} style={style.arrow} />
+      )}
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  listItem: {
+    width: "100%",
+    height: 60,
+    "background-color": "0x2a2a2a",
+    margin: "0 0 8px 0",
+    padding: "0 12px",
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "justify-content": "space-between",
+    "scroll-on-focus": 1,
+  },
+  content: {
+    display: "flex",
+    width: 'auto',
+    height: 'auto',
+    "flex-direction": "row",
+    "align-items": "center",
+    "flex": 1,
+  },
+  title: {
+    "text-color": "white",
+    "font-size": 16,
+  },
+  badge: {
+    "border-radius": 12,
+    padding: "2px 8px",
+    margin: "0 0 0 12px",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    "min-width": 24,
+    height: 20,
+  },
+  badgeText: {
+    "text-color": "white",
+    "font-size": 12,
+  },
+  arrow: {
+    "text-color": "white",
+    "font-size": 18,
+    margin: "0 0 0 12px",
+  },
+  focused: {
+    padding: "0 12px",
+    "border-radius": 12,
+    "background-color": "#4660FF",
+  },
+});
diff --git a/demo/gateway/i18n/en.json b/demo/gateway/i18n/en.json
new file mode 100644
index 000000000..c62dc17ae
--- /dev/null
+++ b/demo/gateway/i18n/en.json
@@ -0,0 +1,48 @@
+{
+  "home": {
+    "title": "Smart Gateway"
+  },
+  "header": {
+    "eventLog": "Event Log",
+    "deviceInfo": "Device Info",
+    "deviceStatus": "Device Status",
+    "settings": "Setting"
+  },
+  "logs": {
+    "title": "Event Log",
+    "alerts": "Alerts",
+    "notification": "Notification",
+    "detail": "Log Detail",
+    "prevPage": "Previous Page",
+    "nextPage": "Next Page"
+  },
+  "deviceInfo": {
+    "title": "Device Info"
+  },
+  "deviceStatus": {
+    "title": "Device Status"
+  },
+  "settings": {
+    "title": "Setting",
+    "language": "Language",
+    "exportLogs": "Export Logs To Micro SD",
+    "clearLogs": "Clear Logs",
+    "countdown": "Countdown"
+  },
+  "language": {
+    "title": "Language"
+  },
+  "countdown": {
+    "title": "Countdown",
+    "time": "{remain}s"
+  },
+  "exportLogs": {
+    "title": "Export Logs To Micro SD"
+  },
+  "clearLogs": {
+    "title": "Clear Logs",
+    "confirm": "Confirm To Clear The Logs?",
+    "cancel": "Cancel",
+    "confirmBtn": "Confirm"
+  }
+}
diff --git a/demo/gateway/i18n/ja.json b/demo/gateway/i18n/ja.json
new file mode 100644
index 000000000..3b047c09e
--- /dev/null
+++ b/demo/gateway/i18n/ja.json
@@ -0,0 +1,49 @@
+{
+    "home": {
+      "title": "Smart Gateway [ja]"
+    },
+    "header": {
+      "eventLog": "Event Log [ja]",
+      "deviceInfo": "Device Info [ja]",
+      "deviceStatus": "Device Status [ja]",
+      "settings": "Setting [ja]"
+    },
+    "logs": {
+      "title": "Event Log [ja]",
+      "alerts": "Alerts [ja]",
+      "notification": "Notification [ja]",
+      "detail": "Log Detail [ja]",
+      "prevPage": "前のページ",
+      "nextPage": "次のページ"
+    },
+    "deviceInfo": {
+      "title": "Device Info [ja]"
+    },
+    "deviceStatus": {
+      "title": "Device Status [ja]"
+    },
+    "settings": {
+      "title": "Setting [ja]",
+      "language": "Language [ja]",
+      "exportLogs": "Export Logs To Micro SD [ja]",
+      "clearLogs": "Clear Logs [ja]",
+      "countdown": "Countdown [ja]"
+    },
+    "language": {
+      "title": "Language [ja]"
+    },
+    "countdown": {
+      "title": "Countdown [ja]",
+      "time": "{remain}s [ja]"
+    },
+    "exportLogs": {
+      "title": "Export Logs To Micro SD [ja]"
+    },
+    "clearLogs": {
+      "title": "Clear Logs [ja]",
+      "confirm": "Confirm To Clear The Logs? [ja]",
+      "cancel": "Cancel [ja]",
+      "confirmBtn": "Confirm [ja]"
+    }
+  }
+  
\ No newline at end of file
diff --git a/demo/gateway/i18n/zh.json b/demo/gateway/i18n/zh.json
new file mode 100644
index 000000000..f729d4fac
--- /dev/null
+++ b/demo/gateway/i18n/zh.json
@@ -0,0 +1,48 @@
+{
+  "home": {
+    "title": "Smart Gateway [zh]"
+  },
+  "header": {
+    "eventLog": "Event Log [zh]",
+    "deviceInfo": "Device Info [zh]",
+    "deviceStatus": "Device Status [zh]",
+    "settings": "Setting [zh]"
+  },
+  "logs": {
+    "title": "Event Log [zh]",
+    "alerts": "Alerts [zh]",
+    "notification": "Notification [zh]",
+    "detail": "Log Detail [zh]",
+    "prevPage": "上一页",
+    "nextPage": "下一页"
+  },
+  "deviceInfo": {
+    "title": "Device Info [zh]"
+  },
+  "deviceStatus": {
+    "title": "Device Status [zh]"
+  },
+  "settings": {
+    "title": "Setting [zh]",
+    "language": "Language [zh]",
+    "exportLogs": "Export Logs To Micro SD [zh]",
+    "clearLogs": "Clear Logs [zh]",
+    "countdown": "Countdown [zh]"
+  },
+  "language": {
+    "title": "Language [zh]"
+  },
+  "countdown": {
+    "title": "Countdown [zh]",
+    "time": "{remain}s [zh]"
+  },
+  "exportLogs": {
+    "title": "Export Logs To Micro SD [zh]"
+  },
+  "clearLogs": {
+    "title": "Clear Logs [zh]",
+    "confirm": "Confirm To Clear The Logs? [zh]",
+    "cancel": "Cancel [zh]",
+    "confirmBtn": "Confirm [zh]"
+  }
+}
diff --git a/demo/gateway/index.tsx b/demo/gateway/index.tsx
new file mode 100644
index 000000000..62686a6f0
--- /dev/null
+++ b/demo/gateway/index.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { I18nProvider, Render } from "lvgljs-ui";
+import { HomePage } from "./pages/HomePage";
+import { LogListPage } from "./pages/LogListPage";
+import { LogDetailPage } from "./pages/LogDetailPage";
+import { DeviceInfoPage } from "./pages/DeviceInfoPage";
+import { DeviceStatusPage } from "./pages/DeviceStatusPage";
+import { SettingsPage } from "./pages/SettingsPage";
+import { LanguageSettingsPage } from "./pages/LanguageSettingsPage";
+import { CountdownSettingsPage } from "./pages/CountdownSettingsPage";
+import { ExportLogsPage } from "./pages/ExportLogsPage";
+import { ClearLogsPage } from "./pages/ClearLogsPage";
+
+declare const require: any;
+const messages = (locale: string) => {
+  if (locale === "en") return require("./i18n/en.json");
+  if (locale === "ja") return require("./i18n/ja.json");
+  return require("./i18n/zh.json");
+};
+
+function App() {
+  return (
+    <MemoryRouter initialEntries={["/"]}>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/logs" element={<LogListPage />} />
+        <Route path="/logs/:id" element={<LogDetailPage />} />
+        <Route path="/device-info" element={<DeviceInfoPage />} />
+        <Route path="/device-status" element={<DeviceStatusPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="/settings/language" element={<LanguageSettingsPage />} />
+        <Route path="/settings/countdown" element={<CountdownSettingsPage />} />
+        <Route path="/settings/export-logs" element={<ExportLogsPage />} />
+        <Route path="/settings/clear-logs" element={<ClearLogsPage />} />
+      </Routes>
+    </MemoryRouter>
+  );
+}
+
+function Root() {
+  return (
+    <I18nProvider messages={messages} defaultLocale="en" fallbackLocale="en">
+      <App />
+    </I18nProvider>
+  );
+}
+
+Render.render(<Root />);
diff --git a/demo/gateway/pages/ClearLogsPage.tsx b/demo/gateway/pages/ClearLogsPage.tsx
new file mode 100644
index 000000000..6e8651e29
--- /dev/null
+++ b/demo/gateway/pages/ClearLogsPage.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+import { ConfirmDialog } from "../components/ConfirmDialog";
+
+const { width, height } = Dimensions.window;
+
+export function ClearLogsPage() {
+  const t = useT();
+  const navigate = useNavigate();
+  const [showDialog, setShowDialog] = useState(true);
+
+  const handleConfirm = () => {
+    // Perform clear logs action
+    setShowDialog(false);
+    navigate(-1);
+  };
+
+  const handleCancel = () => {
+    setShowDialog(false);
+    navigate(-1);
+  };
+
+  return (
+    <View style={style.pageRoot} onCancel={handleCancel}>
+      <Header title={t("clearLogs.title")} backIcon={"./demo/gateway/assets/nav_icon/clear_logs.png"} />
+      {showDialog && (
+        <ConfirmDialog
+          title={t("clearLogs.confirm")}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          confirmText={t("clearLogs.confirmBtn")}
+          cancelText={t("clearLogs.cancel")}
+        />
+      )}
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+});
diff --git a/demo/gateway/pages/CountdownSettingsPage.tsx b/demo/gateway/pages/CountdownSettingsPage.tsx
new file mode 100644
index 000000000..d38dc70ec
--- /dev/null
+++ b/demo/gateway/pages/CountdownSettingsPage.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { Arc, CreateStyle, Dimensions, Text, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+export function CountdownSettingsPage() {
+  const t = useT();
+  const navigate = useNavigate();
+  const total = 60;
+  const [remain, setRemain] = useState(total);
+
+  useEffect(() => {
+    setRemain(total);
+    const timer = setInterval(() => {
+      setRemain((r) => (r <= 0 ? 0 : r - 1));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const elapsed = total - remain;
+  const angle = Math.floor((1 - elapsed / total) * 360);
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("countdown.title")} />
+
+      <View style={style.centerContent} addToFocusGroup>
+        <Arc
+          style={style.arc}
+          indicatorStyle={style.arcIndicator}
+          knobStyle={style.arcKnobHidden}
+          range={[0, total]}
+          value={elapsed}
+          rotation={270}
+          backgroundStartAngle={360}
+          backgroundEndAngle={0}
+          startAngle={360}
+          endAngle={angle}
+          mode="normal"
+          changeRate={360}
+          onChange={() => {
+            // keep non-interactive for this demo
+          }}
+        />
+        <Text style={style.bigText}>{t("countdown.time", { remain })}</Text>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  centerContent: {
+    width,
+    height: height - 52,
+    display: "flex",
+    "flex-direction": "column",
+    "justify-content": "center",
+    "align-items": "center",
+  },
+  arc: {
+    width: 220,
+    height: 220,
+    "arc-width": 18,
+    "arc-color": "#2E2E2E",
+    "arc-rounded": true,
+    "background-color": "black",
+  },
+  arcIndicator: {
+    "arc-width": 18,
+    "arc-color": "white",
+    "arc-rounded": true,
+  },
+  arcKnobHidden: {
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+  bigText: {
+    "text-color": "white",
+    "font-size": 26,
+    "padding-top": 20,
+  },
+});
diff --git a/demo/gateway/pages/DeviceInfoPage.tsx b/demo/gateway/pages/DeviceInfoPage.tsx
new file mode 100644
index 000000000..3e5737a99
--- /dev/null
+++ b/demo/gateway/pages/DeviceInfoPage.tsx
@@ -0,0 +1,145 @@
+import React, { useMemo } from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, Text, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+interface DeviceInfoSectionProps {
+  title: string;
+  content: Array<string>;
+  autoFocus?: boolean;
+}
+
+function DeviceInfoSection({ title, content, autoFocus = false }: DeviceInfoSectionProps) {
+  return (
+    <View 
+     style={style.ethSection}
+     autoFocus={autoFocus}
+     addToFocusGroup
+     onFocusedStyle={style.ethSectionFocused}
+    >
+      <Text style={style.ethTitle}>{title}</Text>
+      <View style={style.ethContent}>
+        {content.map((item) => (
+          <Text style={style.value}>{item}</Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export function DeviceInfoPage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  const eth1Items = useMemo(
+    () => [{
+      title: "ETH1",
+      content: [
+        "IP:192.168.1.100",
+        "MAC:00:11:22:33:44:55",
+        "Netmask:255.255.255.0",
+        "Gateway:192.168.1.1",
+      ]
+    },
+    {
+      title: "ETH2",
+      content: [
+        "IP:192.168.2.100",
+        "MAC:00:11:22:33:44:56",
+        "Netmask:255.255.255.0",
+        "Gateway:192.168.2.1",
+      ]
+    },
+    {
+      title: "Version",
+      content: [
+        "Firmware Version:1.0.0",
+        "Studio Version:1.0.0",
+      ]
+    }
+  ], []);
+  
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("deviceInfo.title")} backIcon={"./demo/gateway/assets/nav_icon/device_info.png"} />
+
+      <View style={style.scrollBox}>
+        {eth1Items.map((item, index) => (
+          <DeviceInfoSection
+            key={item.title}
+            title={item.title}
+            content={item.content}
+            autoFocus={index === 0}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  scrollBox: {
+    width: width,
+    height: height - 80,
+    padding: "16px",
+    "background-color": "0x101010",
+    overflow: 0,
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  ethSection: {
+    height: 'auto',
+    width: "100%",
+    "background-color": "0x2a2a2a",
+    display: "flex",
+    "flex-direction": "column",
+    "padding": "12px",
+  },
+  ethTitle: {
+    "text-color": "white",
+    "font-size": 24,
+    "font-weight": "bold",
+  },
+  ethSectionFocused: {
+    "background-color": "#4660FF",
+    "border-radius": 12,
+    "padding": "12px",
+  },
+  ethContent: {
+    width: "100%",
+    height: 'auto',
+    display: "flex",
+    "flex-direction": "column",
+  },
+  infoItem: {
+    width: "100%",
+    height: 50,
+    "border-radius": 8,
+    "background-color": "0x1a1a1a",
+    margin: "0 0 8px 0",
+    padding: "0 16px",
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "justify-content": "space-between",
+  },
+  value: {
+    "text-color": "#FFFFFF",
+    "opacity": 0.8,
+    "font-size": 16,
+    "font-weight": "normal",
+    "text-align": "right",
+  },
+});
diff --git a/demo/gateway/pages/DeviceStatusPage.tsx b/demo/gateway/pages/DeviceStatusPage.tsx
new file mode 100644
index 000000000..b7100c5b5
--- /dev/null
+++ b/demo/gateway/pages/DeviceStatusPage.tsx
@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, Text, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+export function DeviceStatusPage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  const statusItems = useMemo(
+    () => [
+      { label: "CPU Usage", value: "45%" },
+      { label: "Memory Usage", value: "62%" },
+      { label: "Temperature", value: "45°C" },
+      { label: "Uptime", value: "15 days" },
+      { label: "Network Status", value: "Connected" },
+    ],
+    []
+  );
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("deviceStatus.title")} backIcon={"./demo/gateway/assets/nav_icon/device_status.png"} />
+
+      <View style={style.scrollBox}>
+        {statusItems.map((item, index) => (
+          <View
+            key={item.label}
+            autoFocus={index === 0}
+            addToFocusGroup
+            onFocusedStyle={style.focused}
+            style={style.statusItem}
+          >
+            <Text style={style.value}>{item.value}</Text>
+            <Text style={style.label}>{item.label}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  scrollBox: {
+    width: width,
+    height: height - 24,
+    padding: 12,
+    "background-color": "0x101010",
+    overflow: 0,
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  statusItem: {
+    width: "100%",
+    height: 160,
+    "background-color": "0x2a2a2a",
+    margin: "0 0 8px 0",
+    padding: "12px",
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "flex-start",
+    "justify-content": "flex-start",
+    "scroll-on-focus": 1,
+  },
+  label: {
+    "text-color": "white",
+    "opacity": 0.8,
+    "font-size": 14,
+    "margin-bottom": 8,
+  },
+  value: {
+    "text-color": "white",
+    "font-size": 24,
+    "font-weight": "bold",
+  },
+  focused: {
+    padding: 12,
+    "border-radius": 12,
+    "background-color": "#4660FF",
+  },
+});
diff --git a/demo/gateway/pages/ExportLogsPage.tsx b/demo/gateway/pages/ExportLogsPage.tsx
new file mode 100644
index 000000000..7b4957ea3
--- /dev/null
+++ b/demo/gateway/pages/ExportLogsPage.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, Text, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+export function ExportLogsPage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("exportLogs.title")} />
+
+      <View style={style.content} addToFocusGroup>
+        <View style={style.messageBox}>
+          <Text style={style.messageText}>
+            {t("exportLogs.title")}
+          </Text>
+          <Text style={style.hintText}>
+            Exporting logs to Micro SD card...
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  content: {
+    width,
+    height: height - 52,
+    padding: 12,
+    display: "flex",
+    "flex-direction": "column",
+    "justify-content": "center",
+    "align-items": "center",
+  },
+  messageBox: {
+    width: width - 48,
+    padding: 24,
+    "background-color": "0x101010",
+    "border-radius": 12,
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+  },
+  messageText: {
+    "text-color": "white",
+    "font-size": 18,
+    "margin-bottom": 12,
+  },
+  hintText: {
+    "text-color": "0xb0b0b0",
+    "font-size": 14,
+  },
+});
diff --git a/demo/gateway/pages/HomePage.tsx b/demo/gateway/pages/HomePage.tsx
new file mode 100644
index 000000000..d44c90fff
--- /dev/null
+++ b/demo/gateway/pages/HomePage.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { Dimensions, CreateStyle, Image, Text, useT, View } from "lvgljs-ui";
+import { useNavigate } from "react-router";
+
+const { width, height } = Dimensions.window;
+
+const colWidth = (width - 12 * 2 - 12) / 2;
+const rowHeight = (height - 12 * 2 - 12) / 2;
+
+export function HomePage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  const buttons = [
+    { path: "/logs", icon: "./demo/gateway/assets/nav_icon/event_log.png", text: t("header.eventLog"), col: 0, row: 0 },
+    { path: "/device-info", icon: "./demo/gateway/assets/nav_icon/device_info.png", text: t("header.deviceInfo"), col: 0, row: 1 },
+    { path: "/device-status", icon: "./demo/gateway/assets/nav_icon/device_status.png", text: t("header.deviceStatus"), col: 1, row: 0 },
+    { path: "/settings", icon: "./demo/gateway/assets/nav_icon/settings.png", text: t("header.settings"), col: 1, row: 1 },
+  ];
+
+  return (
+    <View style={style.grid}>
+      {buttons.map((btn, index) => (
+        <View
+          key={btn.path}
+          autoFocus={index === 0}
+          style={[
+            style.button, 
+            {
+              "grid-column-pos": btn.col,
+              "grid-row-pos": btn.row,
+            },
+          ]}
+          addToFocusGroup
+          onFocusedStyle={style.focused}
+          onClick={() => navigate(btn.path, { state: { from: "home", to: btn.path } })}
+        >
+          {/* <View style={style.buttonContent}> */}
+            <Image src={btn.icon} style={style.image} />
+            <Text style={style.buttonText}>{btn.text}</Text>
+          {/* </View> */}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  grid: {
+    width,
+    height,
+    padding: "12px",
+    display: "grid",
+    "background-color": "black",
+    "grid-template-columns": `${colWidth} ${colWidth}`,
+    "grid-template-rows": `${rowHeight} ${rowHeight}`,
+  },
+  button: {
+    "background-color": "#FFFFFF33",
+    "border-radius": 16,
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    "grid-child": true,
+    "align-self": "stretch",
+    "justify-self": "stretch"
+  },
+  buttonContent: {
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+    "justify-content": "center",
+    gap: 8,
+  },
+  buttonText: {
+    "text-color": "white",
+    "font-size": 16,
+  },
+  focused: {
+    "background-color": "#4660FF",
+    "border-radius": 16,
+  },
+  image: {
+    width: 'auto',
+    height: 'auto',
+  },
+});
diff --git a/demo/gateway/pages/LanguageSettingsPage.tsx b/demo/gateway/pages/LanguageSettingsPage.tsx
new file mode 100644
index 000000000..a8cbc15a2
--- /dev/null
+++ b/demo/gateway/pages/LanguageSettingsPage.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, Image, Text, useI18n, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+export function LanguageSettingsPage() {
+  const t = useT();
+  const navigate = useNavigate();
+  const { locale, setLocale } = useI18n();
+
+  const languages = [
+    { id: "zh", label: "简体中文" },
+    { id: "en", label: "English" },
+    { id: "ja", label: "日本語" },
+  ];
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("language.title")} backIcon={"./demo/gateway/assets/nav_icon/language.png"} />
+
+      <View style={style.content}>
+        <View style={style.scrollBox}>
+          {languages.map((lang, index) => (
+            <View
+              key={lang.id}
+              autoFocus={index === 0}
+              addToFocusGroup
+              onFocusedStyle={style.focused}
+              style={style.langItem}
+              onClick={() => setLocale(lang.id)}
+            >
+              <Text style={style.langText}>{lang.label}</Text>
+              {locale === lang.id && (
+                <Image src={"ok"} style={style.checkmark} />  
+              )}
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  content: {
+    width,
+    height: height - 52,
+    padding: 12,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  scrollBox: {
+    width: width - 24,
+    height: height - 52 - 24,
+    padding: 8,
+    "background-color": "0x101010",
+    "border-radius": 10,
+    overflow: 0,
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  langItem: {
+    width: "100%",
+    height: 60,
+    "border-radius": 10,
+    "background-color": "0x2a2a2a",
+    margin: "0 0 8px 0",
+    padding: "0 12px",
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "justify-content": "space-between",
+    "scroll-on-focus": 1,
+  },
+  langItemSelected: {
+    "background-color": "#4660FF",
+  },
+  langText: {
+    "text-color": "white",
+    "font-size": 16,
+  },
+  checkmark: {
+    "text-color": "white",
+    "font-size": 18,
+  },
+  focused: {
+    padding: "0 12px",
+    "border-radius": 12,
+    "background-color": "#4660FF",
+  },
+});
diff --git a/demo/gateway/pages/LogDetailPage.tsx b/demo/gateway/pages/LogDetailPage.tsx
new file mode 100644
index 000000000..fd9512ae6
--- /dev/null
+++ b/demo/gateway/pages/LogDetailPage.tsx
@@ -0,0 +1,84 @@
+import React, { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, Text, useFocusGroupEdge, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+
+const { width, height } = Dimensions.window;
+
+const TOTAL_ITEMS = 10;
+function loopIndex(index: number) {
+  if (index < 0) {
+    return TOTAL_ITEMS - 1;
+  }
+  if (index >= TOTAL_ITEMS) {
+    return 0;
+  }
+  return index;
+}
+
+export function LogDetailPage() {
+  const t = useT();
+  const navigate = useNavigate();
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+
+  const allLogDetails = useMemo(() => {
+    return Array.from({ length: TOTAL_ITEMS }).map((_, i) => ({
+      id: i + 1,
+      content: `Log entry ${i + 1}, now I am focused, and change index by focus group edge event`,
+    }));
+  }, []);
+
+  useFocusGroupEdge({
+    onEdge: (edgeDirection) => {
+      const result = loopIndex(currentIndex + (edgeDirection === "next" ? 1 : -1));
+      setCurrentIndex(result);
+    }
+  });  
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("logs.detail")} />
+      <View
+        autoFocus
+        addToFocusGroup
+        style={style.logItem}
+      >
+        <Text style={style.logText}>{allLogDetails[currentIndex]?.content ?? ""}</Text>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  logItem: {
+    width: "100%",
+    "min-height": 60,
+    "border-radius": 10,
+    "background-color": "0x2a2a2a",
+    margin: "0 0 8px 0",
+    padding: "12px 16px",
+    display: "flex",
+    "align-items": "flex-start",
+    "justify-content": "flex-start",
+    "scroll-on-focus": 1,
+  },
+  logText: {
+    "text-color": "white",
+    "font-size": 14,
+  },
+  focused: {
+    "border-radius": 10,
+    margin: "0 0 8px 0",
+    padding: "12px 16px",
+    "background-color": "#4660FF",
+  },
+});
diff --git a/demo/gateway/pages/LogListPage.tsx b/demo/gateway/pages/LogListPage.tsx
new file mode 100644
index 000000000..1a7f2c3af
--- /dev/null
+++ b/demo/gateway/pages/LogListPage.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+import { ListItem } from "../components/ListItem";
+
+const { width, height } = Dimensions.window;
+
+export function LogListPage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  const logItems = [
+    { id: "alerts", title: t("logs.alerts"), badge: "999+", badgeColor: "0xFF0000" },
+    { id: "notification", title: t("logs.notification"), badge: "5", badgeColor: "0x4267FF" },
+  ];
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("logs.title")} backIcon={"./demo/gateway/assets/nav_icon/event_log.png"} />
+
+      <View style={style.content}>
+        <View style={style.scrollBox}>
+          {logItems.map((item, index) => (
+            <ListItem
+              key={item.id}
+              title={item.title}
+              badge={item.badge}
+              badgeColor={item.badgeColor}
+              autoFocus={index === 0}
+              onClick={() => navigate(`/logs/${item.id}`)}
+            />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  content: {
+    width,
+    height: height - 52,
+    padding: 12,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  scrollBox: {
+    width: width - 24,
+    height: height - 52 - 24,
+    padding: 8,
+    "background-color": "0x101010",
+    "border-radius": 10,
+    overflow: 0,
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+});
diff --git a/demo/gateway/pages/SettingsPage.tsx b/demo/gateway/pages/SettingsPage.tsx
new file mode 100644
index 000000000..5ac4245f1
--- /dev/null
+++ b/demo/gateway/pages/SettingsPage.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { useNavigate } from "react-router";
+import { CreateStyle, Dimensions, useT, View } from "lvgljs-ui";
+import { Header } from "../components/Header";
+import { ListItem } from "../components/ListItem";
+
+const { width, height } = Dimensions.window;
+
+export function SettingsPage() {
+  const t = useT();
+  const navigate = useNavigate();
+
+  const settingsItems = [
+    { id: "language", title: "settings.language", path: "/settings/language" },
+    { id: "exportLogs", title: "settings.exportLogs", path: "/settings/export-logs" },
+    { id: "clearLogs", title: "settings.clearLogs", path: "/settings/clear-logs" },
+    { id: "countdown", title: "settings.countdown", path: "/settings/countdown" },
+  ];
+
+  return (
+    <View style={style.pageRoot} onCancel={() => navigate(-1)}>
+      <Header title={t("settings.title")} backIcon={"./demo/gateway/assets/nav_icon/settings.png"} />
+
+      <View style={style.content}>
+        <View style={style.scrollBox}>
+          {settingsItems.map((item, index) => (
+            <ListItem
+              key={item.id}
+              title={item.title}
+              autoFocus={index === 0}
+              onClick={() => navigate(item.path)}
+            />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+  content: {
+    width,
+    height: height - 52,
+    padding: 12,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  scrollBox: {
+    width: width - 24,
+    height: height - 52 - 24,
+    padding: 8,
+    "background-color": "0x101010",
+    "border-radius": 10,
+    overflow: 0,
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+});
diff --git a/demo/hello_world/index.tsx b/demo/hello_world/index.tsx
index f937c2b71..ead28e644 100644
--- a/demo/hello_world/index.tsx
+++ b/demo/hello_world/index.tsx
@@ -1,11 +1,12 @@
 import { Button, Render, Text, View } from "lvgljs-ui";
-import React from "react";
+import React, { useState } from "react";
 
 function App() {
+  const [text, setText] = useState("text");
   return (
     <View style={{ "background-color": "blue" }}>
-      <Button style={{ "background-color": "red" }}>
-        <Text>Hello</Text>
+      <Button style={{ "background-color": "red" }} onClick={() => setText("text2")}>
+        <Text>{text}</Text>
       </Button>
     </View>
   );
diff --git a/demo/navigation/i18n/en.json b/demo/navigation/i18n/en.json
new file mode 100644
index 000000000..f34dddf72
--- /dev/null
+++ b/demo/navigation/i18n/en.json
@@ -0,0 +1,46 @@
+{
+  "nav": {
+    "title": "Navigation Demo (5 Pages)",
+    "subTitle": "Four-grid to enter sub-pages, top-left return",
+    "page1": "Page 1",
+    "page2": "Page 2",
+    "page3": "Page 3",
+    "page4": "Page 4",
+    "lang": "Lang"
+  },
+  "header": {
+    "back": "<"
+  },
+  "p1": {
+    "title": "Page 1 - Vertical Scrollable List",
+    "item": "Item {n}"
+  },
+  "p2": {
+    "title": "Page 2 - Info Display/Switch",
+    "prev": "<",
+    "next": ">",
+    "a": { "title": "Info A", "body": "This is the first section of info (for demo switching)." },
+    "b": { "title": "Info B", "body": "This is the second section. Use Left/Right to switch." },
+    "c": { "title": "Info C", "body": "This is the third section. Dots indicate the current page." },
+    "d": { "title": "Info D", "body": "This is the fourth section. A simple info page example." },
+    "e": { "title": "Info E", "body": "This is the fifth section. Switching loops around." }
+  },
+  "p3": {
+    "title": "Page 3 - Control List",
+    "slider": "Slider",
+    "currentValue": "Current Value: {value}%",
+    "checkbox": "Checkbox",
+    "option1": "Option 1",
+    "option2": "Option 2",
+    "buttonText": "Button + Text",
+    "reset": "Reset to Default",
+    "hint": "Hint: This page's controls are vertically arranged, and the container is scrollable.\nAll operable controls are marked with groupType."
+  },
+  "p4": {
+    "title": "Page 4 - 60s Countdown Progress Circle (Circular Progress Bar)",
+    "time": "time{remain}s",
+    "restart": "Restart"
+  }
+}
+
+
diff --git a/demo/navigation/i18n/zh.json b/demo/navigation/i18n/zh.json
new file mode 100644
index 000000000..bdaef4ed8
--- /dev/null
+++ b/demo/navigation/i18n/zh.json
@@ -0,0 +1,46 @@
+{
+  "nav": {
+    "title": "导航演示（5 页）",
+    "subTitle": "四宫格进入子页面，左上角返回",
+    "page1": "页面 1",
+    "page2": "页面 2",
+    "page3": "页面 3",
+    "page4": "页面 4",
+    "lang": "语言"
+  },
+  "header": {
+    "back": "<"
+  },
+  "p1": {
+    "title": "页面 1 - 纵向可滚动列表",
+    "item": "条目 {n}"
+  },
+  "p2": {
+    "title": "页面 2 - 信息展示/切换",
+    "prev": "<",
+    "next": ">",
+    "a": { "title": "信息 A", "body": "这是第一段信息（用于演示切换）。" },
+    "b": { "title": "信息 B", "body": "这是第二段信息。使用左右切换。" },
+    "c": { "title": "信息 C", "body": "这是第三段信息。圆点表示当前页。" },
+    "d": { "title": "信息 D", "body": "这是第四段信息。一个简单的信息页示例。" },
+    "e": { "title": "信息 E", "body": "这是第五段信息。切换会循环。" }
+  },
+  "p3": {
+    "title": "页面 3 - 控件列表",
+    "slider": "滑块",
+    "currentValue": "当前值：{value}%",
+    "checkbox": "复选框",
+    "option1": "选项 1",
+    "option2": "选项 2",
+    "buttonText": "按钮 + 文本",
+    "reset": "恢复默认",
+    "hint": "提示：本页控件纵向排列，容器可滚动。\n所有可操作控件都标记了 groupType。"
+  },
+  "p4": {
+    "title": "页面 4 - 60 秒倒计时进度圆环（圆形进度条）",
+    "time": "剩余{remain}秒",
+    "restart": "重新开始"
+  }
+}
+
+
diff --git a/demo/navigation/index.tsx b/demo/navigation/index.tsx
new file mode 100644
index 000000000..77f3eacdf
--- /dev/null
+++ b/demo/navigation/index.tsx
@@ -0,0 +1,659 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { MemoryRouter, Route, Routes, useNavigate } from "react-router";
+import {
+  Arc,
+  Button,
+  Checkbox,
+  CreateStyle,
+  Dimensions,
+  I18nProvider,
+  Render,
+  Slider,
+  Text,
+  useI18n,
+  useT,
+  View,
+} from "lvgljs-ui";
+
+const { width, height } = Dimensions.window;
+
+declare const require: any;
+const messages = (locale: string) => {
+  if (locale === "zh") return require("./i18n/zh.json");
+  return require("./i18n/en.json");
+};
+
+function Header({
+  title,
+  autoFocusBack,
+}: {
+  title: string;
+  autoFocusBack?: boolean;
+}) {
+  const t = useT();
+  const navigate = useNavigate();
+
+  return (
+    <View style={style.header}>
+      <Button
+        autoFocus={autoFocusBack}
+        style={style.backBtn}
+        onFocusedStyle={style.focused}
+        onClick={() => navigate(-1)}
+      >
+        <Text style={style.backText}>{t("header.back")}</Text>
+      </Button>
+      <Text style={style.headerTitle}>{title}</Text>
+    </View>
+  );
+}
+
+function Page1List() {
+  const t = useT();
+  const items = useMemo(() => Array.from({ length: 40 }).map((_, i) => i + 1), []);
+
+  return (
+    <View style={style.pageRoot}>
+      <Header title={t("p1.title")} autoFocusBack={false} />
+
+      <View style={style.content}>
+        <View style={style.scrollBox}>
+          {items.map((n) => (
+            <View
+              key={n}
+              autoFocus={n === 1}
+              addToFocusGroup
+              onFocusedStyle={style.focused}
+              style={style.listRow}
+              onClick={() => {
+                // no-op (demo)
+              }}
+            >
+              <Text style={style.rowText}>{t("p1.item", { n })}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Page2Info() {
+  const pageCount = 4;
+  const pagerRef = useRef<any>();
+  const pageRefs = useRef<any[]>([]);
+
+  const [active, setActive] = useState(0);
+  const t = useT();
+
+  const pageColors = useMemo(
+    () => ["red", "blue", "green", "orange"],
+    []
+  );
+
+  const scrollTo = (idx: number) => {
+    if (idx < 0 || idx >= pageCount) return;
+    setActive(idx);
+    const target = pageRefs.current[idx];
+    target?.scrollIntoView?.();
+  };
+
+  useEffect(() => {
+    scrollTo(0);
+  }, []);
+
+  return (
+    <View style={style.pageRoot}>
+      <Header title={t("p2.title")} autoFocusBack />
+      <View
+        ref={pagerRef}
+        style={style.pager}
+      >
+        {Array.from({ length: pageCount }).map((_, i) => (
+          <View
+            onFocusedStyle={style.pageFocused}
+            addToFocusGroup
+            key={i}
+            ref={(ins) => (pageRefs.current[i] = ins)}
+            style={[
+              style.page,
+              { "background-color": pageColors[i % pageColors.length] },
+            ]}
+          >
+            <Text style={style.pageTitle}>Page {i + 1}</Text>
+            <Text style={style.pageDesc}>
+              flex-row + scroll-snap-x + scrollIntoView()
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={style.controls}>
+        <Button
+          style={style.navBtn}
+          onClick={() => scrollTo(active - 1)}
+        >
+          <Text>{"<"}</Text>
+        </Button>
+
+        <View style={style.dots}>
+          {Array.from({ length: pageCount }).map((_, i) => (
+            <View
+              key={i}
+              style={[
+                style.dot,
+                i === active ? style.dotActive : style.dotInactive,
+              ]}
+            />
+          ))}
+        </View>
+
+        <Button
+          style={style.navBtn}
+          onClick={() => scrollTo(active + 1)}
+        >
+          <Text>{">"}</Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+function Page3Controls() {
+  const t = useT();
+  const [slider, setSlider] = useState(30);
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(true);
+  return (
+    <View style={style.pageRoot}>
+      <Header title={t("p3.title")} autoFocusBack />
+
+      <View style={style.content}>
+        <View style={style.scrollBox}>
+          <Text style={style.sectionTitle}>{t("p3.slider")}</Text>
+          <Slider
+            style={style.slider}
+            indicatorStyle={style.sliderIndicator}
+            knobStyle={style.sliderKnob}
+            onKnobPressedStyle={style.sliderKnobPressed}
+            onIndicatorPressedStyle={style.sliderIndicatorPressed}
+            range={[0, 100]}
+            value={slider}
+            onChange={(e) => setSlider(e.value)}
+          />
+          <Text style={style.rowText}>
+            {t("p3.currentValue", { value: Math.round(slider) })}
+          </Text>
+
+          <View style={style.divider} />
+
+          <Text style={style.sectionTitle}>{t("p3.checkbox")}</Text>
+          <Checkbox
+            checked={checked1}
+            text={t("p3.option1")}
+            onChange={(e) => setChecked1(!!e.checked)}
+          />
+          <Checkbox
+            checked={checked2}
+            text={t("p3.option2")}
+            onChange={(e) => setChecked2(!!e.checked)}
+          />
+
+          <View style={style.divider} />
+
+          <Text style={style.sectionTitle}>{t("p3.buttonText")}</Text>
+          <Button
+            style={style.actionBtn}
+            onFocusedStyle={style.focused}
+            onClick={() => {
+              setSlider(50);
+              setChecked1(false);
+              setChecked2(true);
+            }}
+          >
+            <Text style={style.actionBtnText}>{t("p3.reset")}</Text>
+          </Button>
+
+          <Text style={style.hintText}>{t("p3.hint")}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Page4Countdown() {
+  const t = useT();
+  const total = 60;
+  const [remain, setRemain] = useState(total);
+
+  useEffect(() => {
+    setRemain(total);
+    const t: ReturnType<typeof setInterval> = setInterval(() => {
+      setRemain((r) => (r <= 0 ? 0 : r - 1));
+    }, 1000);
+    return () => clearInterval(t as any);
+  }, []);
+
+  const elapsed = total - remain;
+  const angle = Math.floor((elapsed / total) * 360);
+  return (
+    <View style={style.pageRoot}>
+      <Header title={t("p4.title")} autoFocusBack />
+
+      <View style={style.centerContent}>
+        <Arc
+          style={style.arc}
+          indicatorStyle={style.arcIndicator}
+          knobStyle={style.arcKnobHidden}
+          range={[0, total]}
+          value={elapsed}
+          rotation={270}
+          backgroundStartAngle={0}
+          backgroundEndAngle={360}
+          startAngle={0}
+          endAngle={angle}
+          mode="normal"
+          changeRate={360}
+          onChange={() => {
+            // keep non-interactive for this demo
+          }}
+        />
+        <Text style={style.bigText}>{t("p4.time", { remain })}</Text>
+        <Button
+          style={style.actionBtn}
+          onFocusedStyle={style.focused}
+          onClick={() => setRemain(total)}
+        >
+          <Text style={style.actionBtnText}>{t("p4.restart")}</Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+function LangSwitcher() {
+  const t = useT();
+  const { locale, setLocale } = useI18n();
+  return (
+    <View style={style.langBar}>
+      <Text style={style.langLabel}>{t("nav.lang")}</Text>
+      <Button
+        style={[style.langBtn, locale === "zh" ? style.langBtnActive : style.langBtnInactive]}
+        onFocusedStyle={style.focused}
+        onClick={() => setLocale("zh")}
+      >
+        <Text style={[style.langBtnText, locale === "zh" ? style.langBtnTextActive : style.langBtnTextInactive]}>
+          中文
+        </Text>
+      </Button>
+      <Button
+        style={[style.langBtn, locale === "en" ? style.langBtnActive : style.langBtnInactive]}
+        onFocusedStyle={style.focused}
+        onClick={() => setLocale("en")}
+      >
+        <Text style={[style.langBtnText, locale === "en" ? style.langBtnTextActive : style.langBtnTextInactive]}>
+          EN
+        </Text>
+      </Button>
+    </View>
+  );
+}
+
+function Home() {
+  const t = useT();
+  const navigate = useNavigate();
+  const btnW = Math.floor((width - 24 * 2 - 12) / 2);
+  const btnH = 72;
+
+  return (
+    <View style={style.pageRoot}>
+      <View style={style.homeHeader}>
+        <Text style={style.homeTitle}>{t("nav.title")}</Text>
+        <Text style={style.homeSubTitle}>{t("nav.subTitle")}</Text>
+        <LangSwitcher />
+      </View>
+
+      <View style={style.homeGrid}>
+        <Button autoFocus
+          style={[style.homeBtn, { width: btnW, height: btnH }]}
+          onFocusedStyle={style.focused}
+          onClick={() => navigate("/p1")}
+        >
+          <Text style={style.homeBtnText}>{t("nav.page1")}</Text>
+        </Button>
+        <Button
+          style={[style.homeBtn, { width: btnW, height: btnH }]}
+          onFocusedStyle={style.focused}
+          onClick={() => navigate("/p2")}
+        >
+          <Text style={style.homeBtnText}>{t("nav.page2")}</Text>
+        </Button>
+        <Button
+          style={[style.homeBtn, { width: btnW, height: btnH }]}
+          onFocusedStyle={style.focused}
+          onClick={() => navigate("/p3")}
+        >
+          <Text style={style.homeBtnText}>{t("nav.page3")}</Text>
+        </Button>
+        <Button
+          style={[style.homeBtn, { width: btnW, height: btnH }]}
+          onFocusedStyle={style.focused}
+          onClick={() => navigate("/p4")}
+        >
+          <Text style={style.homeBtnText}>{t("nav.page4")}</Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+function App() {
+  return (
+    <MemoryRouter initialEntries={["/"]}>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/p1" element={<Page1List />} />
+        <Route path="/p2" element={<Page2Info />} />
+        <Route path="/p3" element={<Page3Controls />} />
+        <Route path="/p4" element={<Page4Countdown />} />
+      </Routes>
+    </MemoryRouter>
+  );
+}
+
+function Root() {
+  return (
+    <I18nProvider messages={messages} defaultLocale="en" fallbackLocale="en">
+      <App />
+    </I18nProvider>
+  );
+}
+
+const style = CreateStyle({
+  pageRoot: {
+    width,
+    height,
+    padding: 0,
+    "background-color": "black",
+    display: "flex",
+    "flex-direction": "column",
+    overflow: "hidden",
+  },
+
+  header: {
+    width,
+    height: 52,
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "background-color": "0x202020",
+  },
+  backBtn: {
+    width: 44,
+    height: 36,
+    "border-radius": 10,
+    "background-color": "0x404040",
+    margin: "0 8px",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+  },
+  backText: { "text-color": "white", "font-size": 18 },
+  headerTitle: { "text-color": "white", "font-size": 16 },
+
+  content: {
+    width,
+    height: height - 52,
+    padding: 12,
+    display: "flex",
+    "flex-direction": "column",
+  },
+  centerContent: {
+    width,
+    height: height - 52,
+    display: "flex",
+    "flex-direction": "column",
+    "justify-content": "center",
+    "align-items": "center",
+  },
+
+  focused: {
+    "border-width": 3,
+    "border-color": "0x00bcd4",
+  },
+
+  scrollBox: {
+    width: width - 24,
+    height: height - 52 - 24,
+    padding: 8,
+    "background-color": "0x101010",
+    "border-radius": 10,
+    overflow: 0, // make scrollable
+    "overflow-scrolling": 1,
+    display: "flex",
+    "flex-direction": "column",
+  },
+
+  listRow: {
+    width: "100%",
+    height: 44,
+    "border-radius": 10,
+    "background-color": "0x2a2a2a",
+    margin: "0 0 8px 0",
+    padding: "0 10px",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "flex-start",
+    "scroll-on-focus": 1,
+  },
+  rowText: { "text-color": "white", "font-size": 14 },
+
+  infoCard: {
+    width: width - 24,
+    height: height - 52 - 140,
+    padding: 12,
+    "background-color": "0x101010",
+    "border-radius": 12,
+  },
+  infoTitle: { "text-color": "white", "font-size": 18, "padding-bottom": 8 },
+  infoBody: { "text-color": "0xd0d0d0", "font-size": 14 },
+  infoControls: {
+    width: width - 24,
+    height: 60,
+    margin: "10px 0 0 0",
+    display: "flex",
+    "flex-direction": "row",
+    "justify-content": "space-between",
+    "align-items": "center",
+  },
+  navBtn: {
+    width: 60,
+    height: 50,
+    "border-radius": 25,
+    "background-color": "white",
+  },
+  navBtnText: { "text-color": "black", "font-size": 18 },
+  dots: {
+    display: "flex",
+    "flex-flow": 0, // row
+    "justify-content": 3,
+    "align-items": 2,
+    width: width - 140,
+    height: 50,
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    "border-radius": 0x7fff,
+  },
+  dotActive: {
+    "background-color": "white",
+    opacity: 255,
+  },
+  dotInactive: {
+    "background-color": "grey",
+    opacity: 80,
+  },
+  pageFocused: {
+    "background-color": "white",
+    opacity: 255,
+  },
+  // Horizontal scroll container
+  pager: {
+    width,
+    height: height - 80,
+    "border-width": 0,
+    "border-radius": 0,
+
+    display: "flex",
+    "flex-direction": "column",
+
+    overflow: 0, // 0 -> add_flag(SCROLLABLE)
+    "overflow-scrolling": 1,
+
+    "scroll-snap-x": 3, // LV_SCROLL_SNAP_CENTER (this repo lvgl: NONE=0 START=1 END=2 CENTER=3)
+  },
+  page: {
+    width,
+    height: height - 80,
+    "border-radius": 0,
+    "border-width": 0,
+    "padding": 16,
+    "scroll-enable-snap": 1,
+  },
+  pageTitle: {
+    "text-color": "white",
+  },
+  pageDesc: {
+    "text-color": "white",
+  },
+  controls: {
+    width,
+    height: 80,
+    display: "flex",
+    "flex-flow": 0, // row
+    "justify-content": 3, // space-evenly
+    "align-items": 2, // center
+    "background-color": "grey",
+  },
+  debugBar: {
+    width,
+    height: 40,
+    "background-color": "black",
+  },
+  debugText: {
+    "text-color": "white",
+  },
+
+  sectionTitle: {
+    "text-color": "white",
+    "font-size": 16,
+    "padding-bottom": 6,
+  },
+  divider: {
+    width: "100%",
+    height: 1,
+    "background-color": "0x303030",
+    margin: "10px 0",
+  },
+  slider: {
+    "background-color": "0x404040",
+    "border-radius": 0x7fff,
+    padding: "-2px 0",
+  },
+  sliderIndicator: { "background-color": "0x00bcd4", "border-radius": 0x7fff },
+  sliderIndicatorPressed: { "background-color": "0x00838F" },
+  sliderKnob: {
+    "background-color": "white",
+    "border-width": 2,
+    "border-color": "0x00bcd4",
+    "border-radius": 0x7fff,
+    padding: 6,
+  },
+  sliderKnobPressed: { "border-color": "0x00838F", "background-color": "0x00838F" },
+
+  actionBtn: {
+    width: width - 24,
+    height: 44,
+    "border-radius": 12,
+    "background-color": "white",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    margin: "6px 0 0 0",
+  },
+  actionBtnText: { "text-color": "black", "font-size": 14 },
+  hintText: {
+    width: "100%",
+    "text-color": "0xb0b0b0",
+    "font-size": 12,
+    "padding-top": 10,
+  },
+
+  arc: {
+    width: 220,
+    height: 220,
+    "arc-width": 18,
+    "arc-color": "red",
+    "arc-rounded": true,
+    "background-color": "black",
+  },
+  arcIndicator: { "arc-width": 18, "arc-color": "0x00bcd4", "arc-rounded": true },
+  arcKnobHidden: { width: 1, height: 1, opacity: 0 },
+  bigText: { "text-color": "black", "font-size": 26, "padding-top": 10 },
+
+  homeHeader: {
+    width,
+    height: 100,
+    padding: "18px 24px 0 24px",
+  },
+  homeTitle: { "text-color": "white", "font-size": 20 },
+  homeSubTitle: { "text-color": "0xb0b0b0", "font-size": 12, "padding-top": 6 },
+  langBar: {
+    width: "100%",
+    height: 32,
+    display: "flex",
+    "flex-direction": "row",
+    "align-items": "center",
+    "justify-content": "flex-start",
+    margin: "10px 0 0 0",
+  },
+  langLabel: { "text-color": "0xb0b0b0", "font-size": 12, padding: "0 8px 0 0" },
+  langBtn: {
+    width: 56,
+    height: 26,
+    "border-radius": 10,
+    margin: "0 8px 0 0",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+  },
+  langBtnActive: { "background-color": "white" },
+  langBtnInactive: { "background-color": "0x1d1d1d" },
+  langBtnText: { "font-size": 12 },
+  langBtnTextActive: { "text-color": "black" },
+  langBtnTextInactive: { "text-color": "white" },
+  homeGrid: {
+    width,
+    height: height - 100,
+    padding: "0 24px",
+    display: "flex",
+    "flex-direction": "row",
+    "flex-wrap": "wrap",
+    "justify-content": "space-between",
+    "align-content": "flex-start",
+  },
+  homeBtn: {
+    "background-color": "0x1d1d1d",
+    "border-radius": 14,
+    margin: "0 0 12px 0",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+  },
+  homeBtnText: { "text-color": "white", "font-size": 16 },
+});
+
+Render.render(<Root />);
+
+
diff --git a/demo/widgets/index.jsx b/demo/widgets/index.jsx
index 76a483888..e858eedf4 100644
--- a/demo/widgets/index.jsx
+++ b/demo/widgets/index.jsx
@@ -1,5 +1,5 @@
 import { View, Render, Animate, Dimensions, EAlignType, Button, Tabs, Theme } from 'lvgljs-ui';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import Profile from './components/profile'
 import Analytics from './components/analytics';
 import Shop from './components/shop'
@@ -34,6 +34,28 @@ function App () {
     const wrapperRef = useRef()
     const colorListRef = useRef()
 
+    const execAnimate = useCallback((expand) => {
+        Animate.timing({
+            duration: 200,
+            startValue: expand ? 0 : 256,
+            endValue: expand ? 256 : 0,
+            execCallback: (value) => {
+                colorListRef.current.setStyle({
+                    width: Math.floor((value / 256) * (width - 60) + 60),
+                })
+                colorListItemsRef.current.forEach(item => {
+                    item.setStyle({
+                        opacity: (value / 256).toFixed(2),
+                    })
+                })
+            }
+        }).start()
+    }, [colorListRef, colorListItemsRef])
+
+    useEffect(() => {
+        execAnimate(colorListExpand)
+    }, [colorListExpand, execAnimate])
+
     return (
         <View ref={wrapperRef} style={style.window}>
             <Tabs
@@ -78,43 +100,7 @@ function App () {
                     pos: [-15, -15]
                 }}
                 onClick={() => {
-                    setColorListExpand(!colorListExpand)
-                    const width = wrapperRef.current.style.width - 20
-                    if (!colorListExpand) {
-                        const animate = Animate.timing({
-                            duration: 200,
-                            startValue: 0,
-                            endValue: 256,
-                            execCallback: (value) => {
-                                colorListRef.current.setStyle({
-                                    width: Math.floor((value / 256) * (width - 60) + 60),
-                                })
-                                colorListItemsRef.current.forEach(item => {
-                                    item.setStyle({
-                                        opacity: (value / 256).toFixed(2),
-                                    })
-                                })
-                            }
-                        })
-                        animate.start()
-                    } else {
-                        const animate = Animate.timing({
-                            duration: 200,
-                            startValue: 256,
-                            endValue: 0,
-                            execCallback: (value) => {
-                                colorListRef.current.setStyle({
-                                    width: Math.floor((value / 256) * (width - 60) + 60),
-                                })
-                                colorListItemsRef.current.forEach(item => {
-                                    item.setStyle({
-                                        opacity: (value / 256).toFixed(2),
-                                    })
-                                })
-                            }
-                        })
-                        animate.start()
-                    }
+                    setColorListExpand((prev) => !prev)
                 }}
             />
         </View>
diff --git a/deps/lvgl b/deps/lvgl
index 23c7b2dbf..74d0a816a 160000
--- a/deps/lvgl
+++ b/deps/lvgl
@@ -1 +1 @@
-Subproject commit 23c7b2dbf2bf91ceb2a731fb428a9a796c6f36e2
+Subproject commit 74d0a816a440eea53e030c4f1af842a94f7ce3d3
diff --git a/deps/txiki b/deps/txiki
index 69fa6a055..e359e5ec5 160000
--- a/deps/txiki
+++ b/deps/txiki
@@ -1 +1 @@
-Subproject commit 69fa6a055cca4d6d8315fdeef35dcdd6bbd90d97
+Subproject commit e359e5ec5f5586a07f9c8f75d19625807a4d5e31
diff --git a/doc/build/build-device.md b/doc/build/build-device.md
index f16b74db6..b0475a036 100644
--- a/doc/build/build-device.md
+++ b/doc/build/build-device.md
@@ -5,9 +5,9 @@ This is not too different from building for a regular Linux target,
 besides that you will probably need to cross-compile and won't want to use the sdl2 simulator.
 
 When building for a target device, the [*device HAL*](../../src/engine/hal/device) is selected.\
-Currently it is not possible to configure the properties of the device and
-it will by default use a screen size of 1024x600 together with the framebuffer device.
+By default, it will use a screen size of 1024x600 together with the framebuffer device.
 
+You can configure the device properties when building lvgljs as a static library or executable.
 You will most likely need to tweak the screen size for your device,
 and can also opt to use a different LVGL display like DRM or
 [wayland](https://github.com/lvgl/lv_drivers/blob/master/wayland/README.md).
@@ -21,11 +21,62 @@ Take a look at the [txiki readme](https://github.com/saghul/txiki.js#building) f
 - you provide your own libffi library, since building it together with txiki doesn't work when cross-compiling at this moment.\
 Do this by passing `-DUSE_EXTERNAL_FFI=ON` to cmake.
 
-You can now cross-compile like normal.
-For instance, if you're using Yocto, you source your SDK environment and then do
+## Configuration Options
+
+When integrating lvgljs into your project, you can configure the following options:
+
+### Build as Static Library
+
+To build lvgljs as a static library instead of an executable:
+
+```cmake
+set(BUILD_STATIC_LIB ON CACHE BOOL "Build lvgljs as static library")
+```
+
+### Display Resolution
+
+Configure the display resolution for your target device:
+
+```cmake
+set(DISP_HOR_RES 480 CACHE STRING "Display horizontal resolution")
+set(DISP_VER_RES 480 CACHE STRING "Display vertical resolution")
+```
+
+### Configuration Directory
+
+Specify a custom directory for LVGL configuration files:
+
+```cmake
+set(LVGLJS_CONF_DIR ${CMAKE_CURRENT_SOURCE_DIR}/config CACHE INTERNAL "LVGLJS_CONF_DIR")
+```
+
+This will set `LV_CONF_PATH` to `${LVGLJS_CONF_DIR}/lv_conf.h`.
+
+### Example: External Project Integration
+
+In your project's `CMakeLists.txt`, you can configure lvgljs like this:
+
+```cmake
+set(BUILD_STATIC_LIB ON CACHE BOOL "Build lvgljs as static library")
+set(DISP_HOR_RES 480 CACHE STRING "Display horizontal resolution")
+set(DISP_VER_RES 480 CACHE STRING "Display vertical resolution")
+set(LVGLJS_CONF_DIR ${CMAKE_CURRENT_SOURCE_DIR}/config CACHE INTERNAL "LVGLJS_CONF_DIR")
+
+add_subdirectory(lv_binding_js)
+
+add_executable(my_app main.cpp)
+target_link_libraries(my_app lvgljs)
+```
+
+Or via command line:
 
 ```sh
-cmake -B build -DUSE_EXTERNAL_FFI=ON
+cmake -B build \
+  -DUSE_EXTERNAL_FFI=ON \
+  -DBUILD_STATIC_LIB=ON \
+  -DDISP_HOR_RES=480 \
+  -DDISP_VER_RES=480 \
+  -DLVGLJS_CONF_DIR=${CMAKE_CURRENT_SOURCE_DIR}/config
 cmake --build build
 ```
 
diff --git a/doc/component/View.md b/doc/component/View.md
index cb73473ca..7a744fd87 100644
--- a/doc/component/View.md
+++ b/doc/component/View.md
@@ -19,10 +19,11 @@
 - [onLongPressRepeat](../props/onLongPressRepeat.md)
 - [align](../props/align.md)
 - [alignTo](../props/alignTo.md)
+- [groupType](../props/groupType.md)
 
 ## Usage
 ```jsx
-import { View, EAlignType, Button, Text } from 'lvlgjs-ui'
+import { View, EAlignType, Button, Text, AddChildToDefGroup } from 'lvlgjs-ui'
 import { useRef, useEffect } from 'react'
 
 function Component () {
@@ -34,6 +35,7 @@ function Component () {
     return (
        <View
           style={style.view}
+          groupType={AddChildToDefGroup}
           onPressedStyle={style.viewPressed}
           onClick={e => { e.stopPropagation() }}
           onPressed={() => {}}
diff --git a/doc/props/groupType.md b/doc/props/groupType.md
new file mode 100644
index 000000000..936654d56
--- /dev/null
+++ b/doc/props/groupType.md
@@ -0,0 +1,59 @@
+# Component prop groupType
+
+`groupType` is used to control **LVGL default group** behavior (focus navigation by keyboard/encoder).
+
+This project exports:
+- `AddCurToDefGroup`: add **current component** to default group
+- `AddChildToDefGroup`: when this component is used as a container, add **its children** to default group (and keep focus order consistent with UI order)
+
+## Type
+```ts
+import type { AddToDefGroupType } from 'lvgljs-ui';
+
+interface Props {
+  groupType?: AddToDefGroupType;
+}
+```
+
+## How it works
+- **Default group**: must be created and set by platform/hal code (simulator already does this via `lv_group_set_default`).
+- **AddCurToDefGroup**:
+  - Adds the current component instance into the default group.
+  - Useful for `View` because LVGL `lv_obj` is not `group_def` by default, but it can still be focused if added to group and has `LV_OBJ_FLAG_CLICK_FOCUSABLE`.
+- **AddChildToDefGroup**:
+  - Marks the current component as a “group container”.
+  - When children are appended to it, those children are added into the default group.
+  - Some widgets (e.g. `Button`, `Slider`, `Textarea`, etc.) are `group_def` in LVGL and will be auto-added to the default group at creation time. When they are later re-parented into the UI tree, this can cause **focus order != UI order**.
+  - This binding will re-order the default group's internal list to match the container's child order when children are appended, so focus navigation follows UI order.
+
+## Usage
+```jsx
+import {
+  View,
+  Text,
+  Button,
+  Slider,
+  AddChildToDefGroup,
+  AddCurToDefGroup,
+} from 'lvgljs-ui';
+
+export function App() {
+  return (
+    <View style={{ width: 300, height: 200 }} groupType={AddChildToDefGroup}>
+      {/* 1) Make a focusable "row" by adding the current View to group */}
+      <View groupType={AddCurToDefGroup} onFocusedStyle={{ borderWidth: 2 }}>
+        <Text>Focusable View</Text>
+      </View>
+
+      {/* 2) LVGL group_def widgets (e.g. Button/Slider) will be in default group */}
+      <Button onFocusedStyle={{ borderWidth: 2 }}>
+        <Text>Button</Text>
+      </Button>
+
+      <Slider onFocusedStyle={{ borderWidth: 2 }} />
+    </View>
+  );
+}
+```
+
+
diff --git a/doc/style/color.md b/doc/style/color.md
index 14e92d724..b0ed94e92 100644
--- a/doc/style/color.md
+++ b/doc/style/color.md
@@ -18,9 +18,16 @@ const style = {
 A notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers
 
 ### Usage
+Supports 3-digit, 4-digit, 6-digit, and 8-digit hexadecimal color formats:
+- 3-digit: `#fff` (equivalent to `#ffffff`)
+- 4-digit: `#fff3` (equivalent to `#ffffff33`, includes alpha channel)
+- 6-digit: `#ff0099` (standard RGB color)
+- 8-digit: `#ff009933` (RGB + Alpha channel, automatically sets corresponding opacity property)
+
 ```js
 const style = {
-    "background-color": "#ff0099",
+    "background-color": "#ff0099",      // Standard color, will set background-opacity to 255
+    "background-color": "#FFFFFF33",    // With opacity, automatically sets background-opacity
 }
 ```
 
diff --git a/package-lock.json b/package-lock.json
index f851b4fc8..373ddaf34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,9 @@
         "fetch-blob": "^3.2.0",
         "lvgljs-ui": "file:src/render/react",
         "nodemon": "^3.1.4",
-        "react": "^16.13.1",
+        "react": "18.3.1",
         "react-proxy": "^2.0.8",
-        "react-reconciler": "^0.25.1",
+        "react-reconciler": "0.29.2",
         "react-router": "^6.3.0",
         "text-encoding": "^0.7.0",
         "urlpattern-polyfill": "^5.0.3",
@@ -30,7 +30,7 @@
       "devDependencies": {
         "@trivago/prettier-plugin-sort-imports": "^4.2.0",
         "@txikijs/types": "^24.6.0",
-        "@types/react": "^16.3.1",
+        "@types/react": "^18.3.0",
         "@types/react-reconciler": "^0.18.0",
         "esbuild-plugin-alias": "^0.2.1",
         "glob": "^10.3.15",
@@ -38,11 +38,15 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.28.6.tgz",
+      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -50,6 +54,8 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.17.7",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.17.7.tgz",
+      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -61,97 +67,119 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator/node_modules/source-map": {
-      "version": "0.5.7",
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
+      "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
       "dev": true,
-      "license": "BSD-3-Clause",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
+    "node_modules/@babel/helper-environment-visitor/node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
+      "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name/node_modules/@babel/types": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.22.5",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
+      "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables/node_modules/@babel/types": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.6",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
+      "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration/node_modules/@babel/types": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -159,76 +187,89 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/highlight": {
-      "version": "7.22.5",
+    "node_modules/@babel/parser": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "@babel/types": "^7.28.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.22.7",
+    "node_modules/@babel/parser/node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "parser": "bin/babel-parser.js"
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template/node_modules/@babel/types": {
-      "version": "7.22.5",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.17.3",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.3",
-        "@babel/types": "^7.17.0",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -236,29 +277,54 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/debug": {
-      "version": "4.3.4",
+    "node_modules/@babel/traverse/node_modules/@babel/generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.28.6.tgz",
+      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
       },
       "engines": {
-        "node": ">=6.0"
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/ms": {
-      "version": "2.1.2",
+    "node_modules/@babel/traverse/node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     },
     "node_modules/@babel/types": {
       "version": "7.17.0",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -269,8 +335,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
+      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -286,57 +370,60 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.2",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.2",
+      "version": "0.3.11",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.14",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
-      "version": "2.0.4",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
+      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
+      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -345,20 +432,24 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.16.1",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@trivago/prettier-plugin-sort-imports": {
-      "version": "4.2.0",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz",
+      "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/generator": "7.17.7",
         "@babel/parser": "^7.20.5",
-        "@babel/traverse": "7.17.3",
+        "@babel/traverse": "7.23.2",
         "@babel/types": "7.17.0",
         "javascript-natural-sort": "0.7.1",
         "lodash": "^4.17.21"
@@ -374,14 +465,16 @@
       }
     },
     "node_modules/@txikijs/types": {
-      "version": "24.6.0",
-      "resolved": "https://registry.npmjs.org/@txikijs/types/-/types-24.6.0.tgz",
-      "integrity": "sha512-BKQvQCUddJBVlAnBxdaaMpBhGKYUaaZVboRwasH6x8TMwMNOrRm+gHywUqLopHXLmIBevECg5L3pAjT2wS+iMg==",
+      "version": "24.12.0",
+      "resolved": "https://registry.npmmirror.com/@txikijs/types/-/types-24.12.0.tgz",
+      "integrity": "sha512-NllY8bX3sn2PLx83QlNuKpWNqbPXWEZk8Uwh4E0fhe0hGHiBzFemXb9KS0wq3ymfzyiOKOT5YohKf8+z60HCdg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/body-parser": {
-      "version": "1.19.2",
+      "version": "1.19.6",
+      "resolved": "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.6.tgz",
+      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
       "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
@@ -389,21 +482,27 @@
       }
     },
     "node_modules/@types/bonjour": {
-      "version": "3.5.10",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmmirror.com/@types/bonjour/-/bonjour-3.5.13.tgz",
+      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@types/connect": {
-      "version": "3.4.35",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmmirror.com/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@types/connect-history-api-fallback": {
-      "version": "1.3.5",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
       "license": "MIT",
       "dependencies": {
         "@types/express-serve-static-core": "*",
@@ -411,7 +510,9 @@
       }
     },
     "node_modules/@types/eslint": {
-      "version": "8.4.5",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
@@ -419,7 +520,9 @@
       }
     },
     "node_modules/@types/eslint-scope": {
-      "version": "3.7.4",
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
       "dependencies": {
         "@types/eslint": "*",
@@ -427,76 +530,126 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "0.0.51",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
     "node_modules/@types/express": {
-      "version": "4.17.13",
+      "version": "4.17.25",
+      "resolved": "https://registry.npmmirror.com/@types/express/-/express-4.17.25.tgz",
+      "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
       "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.33",
         "@types/qs": "*",
-        "@types/serve-static": "*"
+        "@types/serve-static": "^1"
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.29",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-5.1.1.tgz",
+      "integrity": "sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
+      "version": "4.19.8",
+      "resolved": "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.8.tgz",
+      "integrity": "sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
-        "@types/range-parser": "*"
+        "@types/range-parser": "*",
+        "@types/send": "*"
       }
     },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "license": "MIT"
+    },
     "node_modules/@types/http-proxy": {
-      "version": "1.17.9",
+      "version": "1.17.17",
+      "resolved": "https://registry.npmmirror.com/@types/http-proxy/-/http-proxy-1.17.17.tgz",
+      "integrity": "sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.11",
+      "version": "7.0.15",
+      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
     "node_modules/@types/mime": {
-      "version": "1.3.2",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "18.0.3",
-      "license": "MIT"
+      "version": "25.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-25.0.9.tgz",
+      "integrity": "sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/node-forge": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmmirror.com/@types/node-forge/-/node-forge-1.3.14.tgz",
+      "integrity": "sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.14",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "version": "15.7.15",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
-      "version": "6.9.7",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
       "license": "MIT"
     },
     "node_modules/@types/range-parser": {
-      "version": "1.2.4",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "16.14.62",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.62.tgz",
-      "integrity": "sha512-BWf7hqninZav6nerxXj+NeZT/mTpDeG6Lk2zREHAy63CrnXoOGPGtNqTFYFN/sqpSaREDP5otVV88axIXmKfGA==",
+      "version": "18.3.27",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.27.tgz",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "^0.16",
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-reconciler": {
       "version": "0.18.0",
+      "resolved": "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.18.0.tgz",
+      "integrity": "sha512-hLVaxzL7cGgk/2C/sc8yyyvi+aeeimv7SKOFgyuPFYqNb2rnnQApHabcxo5Xp+GloUAfMe3tyQm2nkrmbLXq4w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -505,24 +658,43 @@
     },
     "node_modules/@types/retry": {
       "version": "0.12.0",
+      "resolved": "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/@types/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@types/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
     },
     "node_modules/@types/serve-index": {
-      "version": "1.9.1",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.4.tgz",
+      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
       "license": "MIT",
       "dependencies": {
         "@types/express": "*"
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.13.10",
+      "version": "1.15.10",
+      "resolved": "https://registry.npmmirror.com/@types/serve-static/-/serve-static-1.15.10.tgz",
+      "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "<1"
+      }
+    },
+    "node_modules/@types/serve-static/node_modules/@types/send": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmmirror.com/@types/send/-/send-0.17.6.tgz",
+      "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
       "license": "MIT",
       "dependencies": {
         "@types/mime": "^1",
@@ -530,145 +702,185 @@
       }
     },
     "node_modules/@types/sockjs": {
-      "version": "0.3.33",
+      "version": "0.3.36",
+      "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz",
+      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@types/ws": {
-      "version": "8.5.3",
+      "version": "8.18.1",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
       }
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1"
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
       }
     },
     "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.1",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/helper-wasm-section": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1",
-        "@webassemblyjs/wasm-opt": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1",
-        "@webassemblyjs/wast-printer": "1.11.1"
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/ieee754": "1.11.1",
-        "@webassemblyjs/leb128": "1.11.1",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
       }
     },
     "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-buffer": "1.11.1",
-        "@webassemblyjs/wasm-gen": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1"
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/helper-api-error": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-        "@webassemblyjs/ieee754": "1.11.1",
-        "@webassemblyjs/leb128": "1.11.1",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
       }
     },
     "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.1",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "license": "Apache-2.0"
     },
     "node_modules/accepts": {
       "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "license": "MIT",
       "dependencies": {
         "mime-types": "~2.1.34",
@@ -678,9 +890,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/accepts/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
-      "version": "8.7.1",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -688,36 +912,68 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.8.0",
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      },
       "peerDependencies": {
-        "acorn": "^8"
+        "acorn": "^8.14.0"
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ajv-keywords": {
-      "version": "3.5.2",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
       "peerDependencies": {
-        "ajv": "^6.9.1"
+        "ajv": "^8.8.2"
       }
     },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
+      "resolved": "https://registry.npmmirror.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
       "engines": [
         "node >= 0.8.0"
       ],
@@ -727,7 +983,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "6.0.1",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -738,18 +996,22 @@
       }
     },
     "node_modules/ansi-styles": {
-      "version": "3.2.1",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/anymatch": {
-      "version": "3.1.2",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -760,12 +1022,19 @@
       }
     },
     "node_modules/array-flatten": {
-      "version": "2.1.2",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -775,10 +1044,14 @@
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
       "funding": [
         {
           "type": "github",
@@ -795,58 +1068,86 @@
       ],
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.15",
+      "resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.9.15.tgz",
+      "integrity": "sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "license": "MIT"
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.0",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.4.tgz",
+      "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
       "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "bytes": "~3.1.2",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.10.3",
-        "raw-body": "2.5.1",
+        "destroy": "~1.2.0",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "on-finished": "~2.4.1",
+        "qs": "~6.14.0",
+        "raw-body": "~2.5.3",
         "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
+        "unpipe": "~1.0.0"
       },
       "engines": {
         "node": ">= 0.8",
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/body-parser/node_modules/bytes": {
-      "version": "3.1.2",
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
+      "dependencies": {
+        "ms": "2.0.0"
       }
     },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
     "node_modules/bonjour-service": {
-      "version": "1.0.13",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/bonjour-service/-/bonjour-service-1.3.0.tgz",
+      "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
       "license": "MIT",
       "dependencies": {
-        "array-flatten": "^2.1.2",
-        "dns-equal": "^1.0.0",
         "fast-deep-equal": "^3.1.3",
         "multicast-dns": "^7.2.5"
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -854,17 +1155,21 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.1",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "funding": [
         {
           "type": "opencollective",
@@ -873,14 +1178,20 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001359",
-        "electron-to-chromium": "^1.4.172",
-        "node-releases": "^2.0.5",
-        "update-browserslist-db": "^1.0.4"
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -891,6 +1202,8 @@
     },
     "node_modules/buffer": {
       "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "funding": [
         {
           "type": "github",
@@ -913,28 +1226,70 @@
     },
     "node_modules/buffer-from": {
       "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "license": "MIT"
     },
     "node_modules/bytes": {
-      "version": "3.0.0",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "license": "MIT",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001363",
+      "version": "1.0.30001765",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001765.tgz",
+      "integrity": "sha512-LWcNtSyZrakjECqmpP4qdg0MMGdN368D7X8XvvAqOcqMv0RxnlqVKZl2V6/mBR68oYMxOZPLw/gO7DuisMHUvQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -943,97 +1298,83 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "dev": true,
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/chalk/node_modules/has-flag": {
-      "version": "3.0.0",
-      "dev": true,
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=6.0"
       }
     },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "color-name": "~1.1.4"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.5.3",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.3",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "1.1.3"
+        "node": ">=7.0.0"
       }
     },
     "node_modules/color-name": {
-      "version": "1.1.3",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/colorette": {
-      "version": "2.0.19",
+      "version": "2.0.20",
+      "resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "license": "MIT"
     },
     "node_modules/commander": {
       "version": "2.20.3",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
     "node_modules/compressible": {
       "version": "2.0.18",
+      "resolved": "https://registry.npmmirror.com/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
       "license": "MIT",
       "dependencies": {
         "mime-db": ">= 1.43.0 < 2"
@@ -1043,31 +1384,48 @@
       }
     },
     "node_modules/compression": {
-      "version": "1.7.4",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/compression/-/compression-1.8.1.tgz",
+      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
       "license": "MIT",
       "dependencies": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
+        "bytes": "3.1.2",
+        "compressible": "~2.0.18",
         "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
+        "negotiator": "~0.6.4",
+        "on-headers": "~1.1.0",
+        "safe-buffer": "5.2.1",
         "vary": "~1.1.2"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/compression/node_modules/safe-buffer": {
-      "version": "5.1.2",
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8"
@@ -1075,6 +1433,8 @@
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
+      "resolved": "https://registry.npmmirror.com/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "5.2.1"
@@ -1084,25 +1444,33 @@
       }
     },
     "node_modules/content-type": {
-      "version": "1.0.4",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie-signature": {
-      "version": "1.0.6",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
     "node_modules/core-js": {
-      "version": "3.23.3",
+      "version": "3.47.0",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -1112,10 +1480,14 @@
     },
     "node_modules/core-util-is": {
       "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -1127,19 +1499,33 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "2.6.9",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/default-gateway": {
       "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "execa": "^5.0.0"
@@ -1148,19 +1534,15 @@
         "node": ">= 10"
       }
     },
-    "node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/define-properties": {
+    "node_modules/define-data-property": {
       "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "license": "MIT",
       "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1169,8 +1551,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -1178,6 +1571,8 @@
     },
     "node_modules/destroy": {
       "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8",
@@ -1186,14 +1581,14 @@
     },
     "node_modules/detect-node": {
       "version": "2.1.0",
-      "license": "MIT"
-    },
-    "node_modules/dns-equal": {
-      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "license": "MIT"
     },
     "node_modules/dns-packet": {
-      "version": "5.4.0",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/dns-packet/-/dns-packet-5.6.1.tgz",
+      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
       "license": "MIT",
       "dependencies": {
         "@leichtgewicht/ip-codec": "^2.0.1"
@@ -1202,33 +1597,59 @@
         "node": ">=6"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.180",
+      "version": "1.5.267",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.10.0",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -1238,62 +1659,46 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/es-abstract": {
-      "version": "1.20.1",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
-        "get-symbol-description": "^1.0.0",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
-        "is-negative-zero": "^2.0.2",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "is-string": "^1.0.7",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
-      },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "0.9.3",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "license": "MIT"
     },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "es-errors": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/esbuild": {
-      "version": "0.14.48",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.54.tgz",
+      "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -1303,30 +1708,81 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "esbuild-android-64": "0.14.48",
-        "esbuild-android-arm64": "0.14.48",
-        "esbuild-darwin-64": "0.14.48",
-        "esbuild-darwin-arm64": "0.14.48",
-        "esbuild-freebsd-64": "0.14.48",
-        "esbuild-freebsd-arm64": "0.14.48",
-        "esbuild-linux-32": "0.14.48",
-        "esbuild-linux-64": "0.14.48",
-        "esbuild-linux-arm": "0.14.48",
-        "esbuild-linux-arm64": "0.14.48",
-        "esbuild-linux-mips64le": "0.14.48",
-        "esbuild-linux-ppc64le": "0.14.48",
-        "esbuild-linux-riscv64": "0.14.48",
-        "esbuild-linux-s390x": "0.14.48",
-        "esbuild-netbsd-64": "0.14.48",
-        "esbuild-openbsd-64": "0.14.48",
-        "esbuild-sunos-64": "0.14.48",
-        "esbuild-windows-32": "0.14.48",
-        "esbuild-windows-64": "0.14.48",
-        "esbuild-windows-arm64": "0.14.48"
+        "@esbuild/linux-loong64": "0.14.54",
+        "esbuild-android-64": "0.14.54",
+        "esbuild-android-arm64": "0.14.54",
+        "esbuild-darwin-64": "0.14.54",
+        "esbuild-darwin-arm64": "0.14.54",
+        "esbuild-freebsd-64": "0.14.54",
+        "esbuild-freebsd-arm64": "0.14.54",
+        "esbuild-linux-32": "0.14.54",
+        "esbuild-linux-64": "0.14.54",
+        "esbuild-linux-arm": "0.14.54",
+        "esbuild-linux-arm64": "0.14.54",
+        "esbuild-linux-mips64le": "0.14.54",
+        "esbuild-linux-ppc64le": "0.14.54",
+        "esbuild-linux-riscv64": "0.14.54",
+        "esbuild-linux-s390x": "0.14.54",
+        "esbuild-netbsd-64": "0.14.54",
+        "esbuild-openbsd-64": "0.14.54",
+        "esbuild-sunos-64": "0.14.54",
+        "esbuild-windows-32": "0.14.54",
+        "esbuild-windows-64": "0.14.54",
+        "esbuild-windows-arm64": "0.14.54"
+      }
+    },
+    "node_modules/esbuild-android-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/esbuild-darwin-arm64": {
-      "version": "0.14.48",
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
       "cpu": [
         "arm64"
       ],
@@ -1339,32 +1795,288 @@
         "node": ">=12"
       }
     },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-riscv64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-s390x": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-netbsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/esbuild-plugin-alias": {
       "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz",
+      "integrity": "sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/escalade": {
-      "version": "3.1.1",
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
+      "cpu": [
+        "x64"
+      ],
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "license": "MIT"
+    "node_modules/esbuild-windows-32": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "dev": true,
+    "node_modules/esbuild-windows-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
+      "cpu": [
+        "x64"
+      ],
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=12"
       }
     },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -1376,6 +2088,8 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -1386,6 +2100,8 @@
     },
     "node_modules/esrecurse/node_modules/estraverse": {
       "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -1393,6 +2109,8 @@
     },
     "node_modules/estraverse": {
       "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -1400,6 +2118,8 @@
     },
     "node_modules/etag": {
       "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -1407,10 +2127,14 @@
     },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
     "node_modules/events": {
       "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
@@ -1418,6 +2142,8 @@
     },
     "node_modules/execa": {
       "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.3",
@@ -1437,60 +2163,99 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/execa/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
     "node_modules/express": {
-      "version": "4.18.1",
+      "version": "4.22.1",
+      "resolved": "https://registry.npmmirror.com/express/-/express-4.22.1.tgz",
+      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.0",
-        "content-disposition": "0.5.4",
+        "body-parser": "~1.20.3",
+        "content-disposition": "~0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
-        "cookie-signature": "1.0.6",
+        "cookie": "~0.7.1",
+        "cookie-signature": "~1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "finalhandler": "~1.3.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.0",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
-        "on-finished": "2.4.1",
+        "on-finished": "~2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "~0.1.12",
         "proxy-addr": "~2.0.7",
-        "qs": "6.10.3",
+        "qs": "~6.14.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "~0.19.0",
+        "serve-static": "~1.16.2",
         "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
+        "statuses": "~2.0.1",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/express/node_modules/array-flatten": {
-      "version": "1.1.1",
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "license": "MIT"
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
     },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
+      "resolved": "https://registry.npmmirror.com/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
       "license": "Apache-2.0",
       "dependencies": {
         "websocket-driver": ">=0.5.1"
@@ -1501,6 +2266,8 @@
     },
     "node_modules/fetch-blob": {
       "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
       "funding": [
         {
           "type": "github",
@@ -1521,7 +2288,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -1531,23 +2300,42 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
+        "on-finished": "~2.4.1",
         "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
+        "statuses": "~2.0.2",
         "unpipe": "~1.0.0"
       },
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
     "node_modules/follow-redirects": {
-      "version": "1.15.1",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -1565,31 +2353,30 @@
       }
     },
     "node_modules/for-each": {
-      "version": "0.3.3",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.1.1",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
+        "is-callable": "^1.2.7"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/foreground-child/node_modules/signal-exit": {
-      "version": "4.1.0",
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "dev": true,
       "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
       "engines": {
         "node": ">=14"
       },
@@ -1599,6 +2386,8 @@
     },
     "node_modules/forwarded": {
       "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -1606,21 +2395,30 @@
     },
     "node_modules/fresh": {
       "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/fs-monkey": {
-      "version": "1.0.3",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.1.0.tgz",
+      "integrity": "sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==",
       "license": "Unlicense"
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "license": "ISC"
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1631,91 +2429,97 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "license": "MIT"
-    },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.5",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0",
-        "functions-have-names": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
       "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.2",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "license": "MIT",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-symbol-description": {
-      "version": "1.0.0",
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/glob": {
-      "version": "10.3.15",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.6",
-        "minimatch": "^9.0.1",
-        "minipass": "^7.0.4",
-        "path-scurry": "^1.11.0"
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -1726,60 +2530,69 @@
     },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "license": "BSD-2-Clause"
     },
     "node_modules/globals": {
       "version": "11.12.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
-      "version": "4.2.10",
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
     "node_modules/handle-thing": {
       "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "license": "MIT"
     },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/has-flag": {
-      "version": "4.0.0",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -1789,10 +2602,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1801,8 +2616,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
+      "resolved": "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
       "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.1",
@@ -1812,7 +2641,9 @@
       }
     },
     "node_modules/hpack.js/node_modules/readable-stream": {
-      "version": "2.3.7",
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "license": "MIT",
       "dependencies": {
         "core-util-is": "~1.0.0",
@@ -1826,43 +2657,71 @@
     },
     "node_modules/hpack.js/node_modules/safe-buffer": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
     "node_modules/hpack.js/node_modules/string_decoder": {
       "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
     },
     "node_modules/html-entities": {
-      "version": "2.3.3",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
       "license": "MIT"
     },
     "node_modules/http-errors": {
-      "version": "2.0.0",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
       "license": "MIT",
       "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
       },
       "engines": {
         "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/http-parser-js": {
-      "version": "0.5.8",
+      "version": "0.5.10",
+      "resolved": "https://registry.npmmirror.com/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
       "license": "MIT"
     },
     "node_modules/http-proxy": {
       "version": "1.18.1",
+      "resolved": "https://registry.npmmirror.com/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^4.0.0",
@@ -1874,7 +2733,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.6",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
       "license": "MIT",
       "dependencies": {
         "@types/http-proxy": "^1.17.8",
@@ -1897,6 +2758,8 @@
     },
     "node_modules/human-signals": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=10.17.0"
@@ -1904,6 +2767,8 @@
     },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
@@ -1914,6 +2779,8 @@
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "funding": [
         {
           "type": "github",
@@ -1932,10 +2799,15 @@
     },
     "node_modules/ignore-by-default": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
       "license": "ISC"
     },
     "node_modules/inflight": {
       "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -1944,33 +2816,27 @@
     },
     "node_modules/inherits": {
       "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
-    "node_modules/internal-slot": {
-      "version": "1.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.1.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/ipaddr.js": {
-      "version": "2.0.1",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
+      "integrity": "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==",
       "license": "MIT",
       "engines": {
         "node": ">= 10"
       }
     },
     "node_modules/is-arguments": {
-      "version": "1.1.1",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1979,18 +2845,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "license": "MIT",
-      "dependencies": {
-        "has-bigints": "^1.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -1999,36 +2857,11 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-callable": {
-      "version": "1.2.4",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "license": "MIT",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -2038,6 +2871,8 @@
     },
     "node_modules/is-docker": {
       "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "license": "MIT",
       "bin": {
         "is-docker": "cli.js"
@@ -2051,6 +2886,8 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2058,6 +2895,8 @@
     },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2065,10 +2904,16 @@
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.0.10",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
       "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2079,6 +2924,8 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -2087,38 +2934,19 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "license": "MIT",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -2128,44 +2956,15 @@
       }
     },
     "node_modules/is-regex": {
-      "version": "1.1.4",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-string": {
-      "version": "1.0.7",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2174,28 +2973,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-symbol": {
-      "version": "1.0.4",
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.9",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "license": "MIT",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2204,18 +3000,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
       "license": "MIT",
       "dependencies": {
         "is-docker": "^2.0.0"
@@ -2226,22 +3014,25 @@
     },
     "node_modules/isarray": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
     "node_modules/jackspeak": {
-      "version": "2.3.6",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
-      "engines": {
-        "node": ">=14"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       },
@@ -2251,11 +3042,15 @@
     },
     "node_modules/javascript-natural-sort": {
       "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
+      "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -2266,12 +3061,40 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jest-worker/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -2283,25 +3106,49 @@
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
+    "node_modules/launch-editor": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.12.0.tgz",
+      "integrity": "sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.1.1",
+        "shell-quote": "^1.8.3"
+      }
+    },
     "node_modules/loader-runner": {
-      "version": "4.3.0",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/lodash": {
       "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -2311,54 +3158,77 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "10.2.2",
+      "version": "10.4.3",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
+      "license": "ISC"
     },
     "node_modules/lvgljs-ui": {
       "resolved": "src/render/react",
       "link": true
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.7",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "license": "Unlicense",
       "dependencies": {
-        "fs-monkey": "^1.0.3"
+        "fs-monkey": "^1.0.4"
       },
       "engines": {
         "node": ">= 4.0.0"
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "license": "MIT"
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "license": "MIT"
     },
     "node_modules/methods": {
       "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -2367,6 +3237,8 @@
     },
     "node_modules/mime": {
       "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "license": "MIT",
       "bin": {
         "mime": "cli.js"
@@ -2377,6 +3249,8 @@
     },
     "node_modules/mime-db": {
       "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -2384,6 +3258,8 @@
     },
     "node_modules/mime-types": {
       "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -2394,6 +3270,8 @@
     },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2401,10 +3279,14 @@
     },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
       "license": "ISC"
     },
     "node_modules/minimatch": {
-      "version": "9.0.4",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -2418,7 +3300,9 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.1.1",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "dev": true,
       "license": "ISC",
       "engines": {
@@ -2426,11 +3310,15 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.0.0",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
+      "resolved": "https://registry.npmmirror.com/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
       "license": "MIT",
       "dependencies": {
         "dns-packet": "^5.2.2",
@@ -2441,7 +3329,9 @@
       }
     },
     "node_modules/negotiator": {
-      "version": "0.6.3",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -2449,10 +3339,15 @@
     },
     "node_modules/neo-async": {
       "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
     "node_modules/node-domexception": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
       "funding": [
         {
           "type": "github",
@@ -2469,18 +3364,24 @@
       }
     },
     "node_modules/node-forge": {
-      "version": "1.3.1",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/node-forge/-/node-forge-1.3.3.tgz",
+      "integrity": "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==",
       "license": "(BSD-3-Clause OR GPL-2.0)",
       "engines": {
         "node": ">= 6.13.0"
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.5",
+      "version": "2.0.27",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "license": "MIT"
     },
     "node_modules/nodemon": {
-      "version": "3.1.9",
+      "version": "3.1.11",
+      "resolved": "https://registry.npmmirror.com/nodemon/-/nodemon-3.1.11.tgz",
+      "integrity": "sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==",
       "license": "MIT",
       "dependencies": {
         "chokidar": "^3.5.2",
@@ -2506,37 +3407,19 @@
       }
     },
     "node_modules/nodemon/node_modules/brace-expansion": {
-      "version": "1.1.11",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
-    "node_modules/nodemon/node_modules/debug": {
-      "version": "4.4.0",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/nodemon/node_modules/has-flag": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/nodemon/node_modules/minimatch": {
       "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -2545,22 +3428,10 @@
         "node": "*"
       }
     },
-    "node_modules/nodemon/node_modules/ms": {
-      "version": "2.1.3",
-      "license": "MIT"
-    },
-    "node_modules/nodemon/node_modules/supports-color": {
-      "version": "5.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2568,6 +3439,8 @@
     },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.0.0"
@@ -2576,36 +3449,11 @@
         "node": ">=8"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object-inspect": {
-      "version": "1.12.2",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.assign": {
-      "version": "4.1.2",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -2615,10 +3463,14 @@
     },
     "node_modules/obuf": {
       "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "license": "MIT"
     },
     "node_modules/on-finished": {
       "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
@@ -2628,7 +3480,9 @@
       }
     },
     "node_modules/on-headers": {
-      "version": "1.0.2",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -2636,6 +3490,8 @@
     },
     "node_modules/once": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -2643,6 +3499,8 @@
     },
     "node_modules/onetime": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^2.1.0"
@@ -2655,7 +3513,9 @@
       }
     },
     "node_modules/open": {
-      "version": "8.4.0",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
       "license": "MIT",
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
@@ -2671,6 +3531,8 @@
     },
     "node_modules/p-retry": {
       "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
       "license": "MIT",
       "dependencies": {
         "@types/retry": "0.12.0",
@@ -2680,8 +3542,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -2689,6 +3560,8 @@
     },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2696,6 +3569,8 @@
     },
     "node_modules/path-key": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2703,6 +3578,8 @@
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
+      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -2717,15 +3594,21 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -2734,10 +3617,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/prettier": {
-      "version": "3.0.1",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.8.0.tgz",
+      "integrity": "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -2750,19 +3645,14 @@
     },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "license": "MIT",
       "dependencies": {
         "forwarded": "0.2.0",
@@ -2774,6 +3664,8 @@
     },
     "node_modules/proxy-addr/node_modules/ipaddr.js": {
       "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
@@ -2781,20 +3673,17 @@
     },
     "node_modules/pstree.remy": {
       "version": "1.1.8",
+      "resolved": "https://registry.npmmirror.com/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
       "license": "MIT"
     },
-    "node_modules/punycode": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/qs": {
-      "version": "6.10.3",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">=0.6"
@@ -2805,6 +3694,8 @@
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
@@ -2812,83 +3703,73 @@
     },
     "node_modules/range-parser": {
       "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
       "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
       },
       "engines": {
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-body/node_modules/bytes": {
-      "version": "3.1.2",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/react": {
-      "version": "16.14.0",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
     "node_modules/react-proxy": {
       "version": "2.0.8",
+      "resolved": "https://registry.npmmirror.com/react-proxy/-/react-proxy-2.0.8.tgz",
+      "integrity": "sha512-iYUKak7a+fGRk7mphfah9KnmIZ2l026tkge82Phicc82qltuiqz0lOpizg/7lO4n9ZSom0DpPVdSKLJYQnxOuA==",
       "license": "MIT",
       "dependencies": {
         "lodash": "^4.6.1"
       }
     },
     "node_modules/react-reconciler": {
-      "version": "0.25.1",
+      "version": "0.29.2",
+      "resolved": "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.29.2.tgz",
+      "integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.23.2"
       },
       "engines": {
         "node": ">=0.10.0"
       },
       "peerDependencies": {
-        "react": "^16.13.1"
-      }
-    },
-    "node_modules/react-reconciler/node_modules/scheduler": {
-      "version": "0.19.1",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-router": {
-      "version": "6.23.1",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.16.1"
+        "@remix-run/router": "1.23.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2898,7 +3779,9 @@
       }
     },
     "node_modules/readable-stream": {
-      "version": "3.6.0",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.3",
@@ -2911,6 +3794,8 @@
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -2919,23 +3804,10 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.4.3",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2943,10 +3815,14 @@
     },
     "node_modules/requires-port": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
     "node_modules/retry": {
       "version": "0.13.1",
+      "resolved": "https://registry.npmmirror.com/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -2954,6 +3830,9 @@
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
@@ -2966,7 +3845,9 @@
       }
     },
     "node_modules/rimraf/node_modules/brace-expansion": {
-      "version": "1.1.11",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -2975,6 +3856,9 @@
     },
     "node_modules/rimraf/node_modules/glob": {
       "version": "7.2.3",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -2993,6 +3877,8 @@
     },
     "node_modules/rimraf/node_modules/minimatch": {
       "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3003,6 +3889,8 @@
     },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "funding": [
         {
           "type": "github",
@@ -3019,17 +3907,48 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/schema-utils": {
-      "version": "3.1.1",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "license": "MIT",
       "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -3041,12 +3960,17 @@
     },
     "node_modules/select-hose": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
       "license": "MIT"
     },
     "node_modules/selfsigned": {
-      "version": "2.0.1",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
       "license": "MIT",
       "dependencies": {
+        "@types/node-forge": "^1.3.0",
         "node-forge": "^1"
       },
       "engines": {
@@ -3054,7 +3978,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.3",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3064,33 +3990,48 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmmirror.com/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
         "mime": "1.6.0",
         "ms": "2.1.3",
-        "on-finished": "2.4.1",
+        "on-finished": "~2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
+        "statuses": "~2.0.2"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.0",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -3098,6 +4039,8 @@
     },
     "node_modules/serve-index": {
       "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.4",
@@ -3112,8 +4055,19 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
     "node_modules/serve-index/node_modules/depd": {
       "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -3121,6 +4075,8 @@
     },
     "node_modules/serve-index/node_modules/http-errors": {
       "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
       "license": "MIT",
       "dependencies": {
         "depd": "~1.1.2",
@@ -3134,38 +4090,73 @@
     },
     "node_modules/serve-index/node_modules/inherits": {
       "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
       "license": "ISC"
     },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
     "node_modules/serve-index/node_modules/setprototypeof": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
       "license": "ISC"
     },
     "node_modules/serve-index/node_modules/statuses": {
       "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
+      "version": "1.16.3",
+      "resolved": "https://registry.npmmirror.com/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
       "license": "MIT",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "~0.19.1"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -3174,31 +4165,116 @@
         "node": ">=8"
       }
     },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.0.4",
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "license": "ISC"
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.5.3"
@@ -3209,6 +4285,8 @@
     },
     "node_modules/sockjs": {
       "version": "0.3.24",
+      "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
       "license": "MIT",
       "dependencies": {
         "faye-websocket": "^0.11.3",
@@ -3217,7 +4295,10 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.6.1",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3225,14 +4306,27 @@
     },
     "node_modules/source-map-support": {
       "version": "0.5.21",
+      "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/spdy": {
       "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.1.0",
@@ -3247,6 +4341,8 @@
     },
     "node_modules/spdy-transport": {
       "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.1.0",
@@ -3257,46 +4353,10 @@
         "wbuf": "^1.7.3"
       }
     },
-    "node_modules/spdy-transport/node_modules/debug": {
-      "version": "4.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/spdy-transport/node_modules/ms": {
-      "version": "2.1.2",
-      "license": "MIT"
-    },
-    "node_modules/spdy/node_modules/debug": {
-      "version": "4.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/spdy/node_modules/ms": {
-      "version": "2.1.2",
-      "license": "MIT"
-    },
     "node_modules/statuses": {
-      "version": "2.0.1",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -3304,6 +4364,8 @@
     },
     "node_modules/string_decoder": {
       "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.2.0"
@@ -3311,6 +4373,8 @@
     },
     "node_modules/string-width": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3328,6 +4392,8 @@
     "node_modules/string-width-cjs": {
       "name": "string-width",
       "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3341,6 +4407,8 @@
     },
     "node_modules/string-width-cjs/node_modules/ansi-regex": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3349,11 +4417,15 @@
     },
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3363,32 +4435,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.5",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.5",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/strip-ansi": {
-      "version": "7.1.0",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3404,6 +4454,8 @@
     "node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3415,6 +4467,8 @@
     },
     "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3423,37 +4477,46 @@
     },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/supports-color": {
-      "version": "8.1.1",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "has-flag": "^3.0.0"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
+        "node": ">=4"
       }
     },
     "node_modules/tapable": {
-      "version": "2.2.1",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/terser": {
-      "version": "5.14.1",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.2",
-        "acorn": "^8.5.0",
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -3465,14 +4528,16 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.3",
+      "version": "5.3.16",
+      "resolved": "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
-        "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0",
-        "terser": "^5.7.2"
+        "schema-utils": "^4.3.0",
+        "serialize-javascript": "^6.0.2",
+        "terser": "^5.31.1"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -3498,14 +4563,21 @@
     },
     "node_modules/text-encoding": {
       "version": "0.7.0",
+      "resolved": "https://registry.npmmirror.com/text-encoding/-/text-encoding-0.7.0.tgz",
+      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==",
+      "deprecated": "no longer maintained",
       "license": "(Unlicense OR Apache-2.0)"
     },
     "node_modules/thunky": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3514,6 +4586,8 @@
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -3524,6 +4598,8 @@
     },
     "node_modules/toidentifier": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.6"
@@ -3531,6 +4607,8 @@
     },
     "node_modules/touch": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
       "license": "ISC",
       "bin": {
         "nodetouch": "bin/nodetouch.js"
@@ -3538,6 +4616,8 @@
     },
     "node_modules/type-is": {
       "version": "1.6.18",
+      "resolved": "https://registry.npmmirror.com/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "license": "MIT",
       "dependencies": {
         "media-typer": "0.3.0",
@@ -3547,32 +4627,31 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "license": "MIT"
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.4",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "funding": [
         {
           "type": "opencollective",
@@ -3581,49 +4660,53 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
     "node_modules/urlpattern-polyfill": {
-      "version": "5.0.3",
+      "version": "5.0.9",
+      "resolved": "https://registry.npmmirror.com/urlpattern-polyfill/-/urlpattern-polyfill-5.0.9.tgz",
+      "integrity": "sha512-7MM/vXEZhbWtSBKPTWFb431QUxn9IKBN3HutHN+2JrO9UAusttvvCjEVB+7MZkAowduXCs2v0D/puv6sE9oyFA==",
       "license": "MIT"
     },
     "node_modules/util": {
-      "version": "0.12.4",
+      "version": "0.12.5",
+      "resolved": "https://registry.npmmirror.com/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
       "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.3",
         "is-arguments": "^1.0.4",
         "is-generator-function": "^1.0.7",
         "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
         "which-typed-array": "^1.1.2"
       }
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
     "node_modules/utils-merge": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4.0"
@@ -3631,6 +4714,8 @@
     },
     "node_modules/uuid": {
       "version": "8.3.2",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
@@ -3638,13 +4723,17 @@
     },
     "node_modules/vary": {
       "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.0",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -3656,46 +4745,54 @@
     },
     "node_modules/wbuf": {
       "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
       "license": "MIT",
       "dependencies": {
         "minimalistic-assert": "^1.0.0"
       }
     },
     "node_modules/web-streams-polyfill": {
-      "version": "3.2.1",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
       "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
     },
     "node_modules/webpack": {
-      "version": "5.73.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^0.0.51",
-        "@webassemblyjs/ast": "1.11.1",
-        "@webassemblyjs/wasm-edit": "1.11.1",
-        "@webassemblyjs/wasm-parser": "1.11.1",
-        "acorn": "^8.4.1",
-        "acorn-import-assertions": "^1.7.6",
-        "browserslist": "^4.14.5",
+      "version": "5.104.1",
+      "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.104.1.tgz",
+      "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.15.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.28.1",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.9.3",
-        "es-module-lexer": "^0.9.0",
+        "enhanced-resolve": "^5.17.4",
+        "es-module-lexer": "^2.0.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.9",
+        "graceful-fs": "^4.2.11",
         "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
+        "loader-runner": "^4.3.1",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.3.1",
-        "webpack-sources": "^3.2.3"
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.16",
+        "watchpack": "^2.4.4",
+        "webpack-sources": "^3.3.3"
       },
       "bin": {
         "webpack": "bin/webpack.js"
@@ -3714,7 +4811,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "license": "MIT",
       "dependencies": {
         "colorette": "^2.0.10",
@@ -3734,68 +4833,10 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.11.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
-    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/webpack-dev-server": {
-      "version": "4.9.3",
+      "version": "4.15.2",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
+      "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
       "license": "MIT",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
@@ -3804,7 +4845,7 @@
         "@types/serve-index": "^1.9.1",
         "@types/serve-static": "^1.13.10",
         "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.1",
+        "@types/ws": "^8.5.5",
         "ansi-html-community": "^0.0.8",
         "bonjour-service": "^1.0.11",
         "chokidar": "^3.5.3",
@@ -3817,16 +4858,17 @@
         "html-entities": "^2.3.2",
         "http-proxy-middleware": "^2.0.3",
         "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
         "open": "^8.0.9",
         "p-retry": "^4.5.0",
         "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.1",
+        "selfsigned": "^2.1.1",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
-        "webpack-dev-middleware": "^5.3.1",
-        "ws": "^8.4.2"
+        "webpack-dev-middleware": "^5.3.4",
+        "ws": "^8.13.0"
       },
       "bin": {
         "webpack-dev-server": "bin/webpack-dev-server.js"
@@ -3842,73 +4884,18 @@
         "webpack": "^4.37.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
-        "webpack-cli": {
+        "webpack": {
           "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.11.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
+        },
+        "webpack-cli": {
           "optional": true
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "license": "MIT"
-    },
-    "node_modules/webpack-dev-server/node_modules/schema-utils": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.8.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/webpack-sources": {
-      "version": "3.2.3",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.3.3.tgz",
+      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
@@ -3916,6 +4903,8 @@
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
+      "resolved": "https://registry.npmmirror.com/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
       "license": "Apache-2.0",
       "dependencies": {
         "http-parser-js": ">=0.5.1",
@@ -3928,17 +4917,23 @@
     },
     "node_modules/websocket-extensions": {
       "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8.0"
       }
     },
     "node_modules/whatwg-fetch": {
-      "version": "3.6.2",
+      "version": "3.6.20",
+      "resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
       "license": "MIT"
     },
     "node_modules/which": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -3950,30 +4945,19 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/which-typed-array": {
-      "version": "1.1.8",
+      "version": "1.1.20",
+      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
       "license": "MIT",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.9"
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3984,6 +4968,8 @@
     },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4001,6 +4987,8 @@
     "node_modules/wrap-ansi-cjs": {
       "name": "wrap-ansi",
       "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4017,6 +5005,8 @@
     },
     "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4025,6 +5015,8 @@
     },
     "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4037,29 +5029,17 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4073,6 +5053,8 @@
     },
     "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4082,30 +5064,23 @@
         "node": ">=8"
       }
     },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.8.0",
+      "version": "8.19.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
diff --git a/package.json b/package.json
index c833cb268..ac01e93a6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "sim": "./build/lvgljs run",
     "sim:watch": "nodemon --watch 'demo/**/*.js' --ext 'js' --exec 'npm run sim'",
     "bundle": "node ./build.js",
-    "bundle:watch": "nodemon --watch 'demo/**/*.jsx' --watch 'test/**/*.jsx' --ext 'jsx' --exec 'npm run bundle'",
+    "bundle:watch": "nodemon --watch 'demo/**/*.jsx' --watch 'demo/**/*.tsx' --watch 'test/**/*.jsx' --watch 'test/**/*.tsx' --ext 'jsx,tsx' --exec 'npm run bundle'",
     "fmt": "prettier -w src/render/react"
   },
   "dependencies": {
@@ -20,9 +20,9 @@
     "fetch-blob": "^3.2.0",
     "nodemon": "^3.1.4",
     "lvgljs-ui": "file:src/render/react",
-    "react": "^16.13.1",
+    "react": "18.3.1",
     "react-proxy": "^2.0.8",
-    "react-reconciler": "^0.25.1",
+    "react-reconciler": "0.29.2",
     "react-router": "^6.3.0",
     "text-encoding": "^0.7.0",
     "urlpattern-polyfill": "^5.0.3",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@txikijs/types": "^24.6.0",
-    "@types/react": "^16.3.1",
+    "@types/react": "^18.3.0",
     "@types/react-reconciler": "^0.18.0",
     "esbuild-plugin-alias": "^0.2.1",
     "glob": "^10.3.15",
diff --git a/src/engine/engine.cpp b/src/engine/engine.cpp
index 0b848b6ec..860b75db1 100644
--- a/src/engine/engine.cpp
+++ b/src/engine/engine.cpp
@@ -12,18 +12,18 @@ static void timer_cb(uv_timer_t *handle) {
     lv_timer_handler();
 }
 
-int main(int argc, char **argv) {
+void EngineInit(int argc, char **argv) {
     TJS_Initialize(argc, argv);
 
     qrt = TJS_NewRuntime();
     CHECK_NOT_NULL(qrt);
 
     JSValue global_obj = JS_GetGlobalObject(qrt->ctx);
-    JSValue render_sym = JS_NewSymbol(qrt->ctx, "lvgljs", TRUE);
+    JSValue render_sym = JS_NewSymbol(qrt->ctx, "lvgljs", true);
     JSAtom render_atom = JS_ValueToAtom(qrt->ctx, render_sym);
     JSValue render = JS_NewObjectProto(qrt->ctx, JS_NULL);
 
-    CHECK_EQ(JS_DefinePropertyValue(qrt->ctx, global_obj, render_atom, render, JS_PROP_C_W_E), TRUE);
+    CHECK_EQ(JS_DefinePropertyValue(qrt->ctx, global_obj, render_atom, render, JS_PROP_C_W_E), true);
 
     NativeRenderInit(qrt->ctx, render);
 
@@ -42,7 +42,9 @@ int main(int argc, char **argv) {
     } else if (uv_timer_start(&handle, timer_cb, 30, 30) != 0) {
         printf("uv_timer_start failed\n");
     }
+}
 
+int EngineRun() {
     int exit_code = TJS_Run(qrt);
 
     TJS_FreeRuntime(qrt);
diff --git a/src/engine/engine.hpp b/src/engine/engine.hpp
index e750ab971..33b7c4382 100644
--- a/src/engine/engine.hpp
+++ b/src/engine/engine.hpp
@@ -4,4 +4,7 @@ extern "C" {
     #include "private.h"
 };
 
+void EngineInit(int argc, char **argv);
+int EngineRun();
 TJSRuntime* GetRuntime();
+
diff --git a/src/engine/hal/device/device.cpp b/src/engine/hal/device/device.cpp
index fd61193a3..382cf85db 100644
--- a/src/engine/hal/device/device.cpp
+++ b/src/engine/hal/device/device.cpp
@@ -1,6 +1,6 @@
 #include "./device.hpp"
 
-#define DISP_BUF_SIZE (1024 * 600)
+#define DISP_BUF_SIZE (DISP_HOR_RES * DISP_VER_RES)
 
 void hal_init () {
     /*LittlevGL init*/
@@ -21,8 +21,8 @@ void hal_init () {
     lv_disp_drv_init(&disp_drv);
     disp_drv.draw_buf   = &disp_buf;
     disp_drv.flush_cb   = fbdev_flush;
-    disp_drv.hor_res    = 1024;
-    disp_drv.ver_res    = 600;
+    disp_drv.hor_res    = DISP_HOR_RES;
+    disp_drv.ver_res    = DISP_VER_RES;
     lv_disp_drv_register(&disp_drv);
 
 	/* Linux input device init */
@@ -35,6 +35,7 @@ void hal_init () {
     indev_drv.type = LV_INDEV_TYPE_POINTER;
     indev_drv.read_cb = evdev_read;   //lv_gesture_dir_t lv_indev_get_gesture_dir(const lv_indev_t * indev)
     lv_indev_t * my_indev = lv_indev_drv_register(&indev_drv);
+    (void)my_indev;
 };
 
 uint32_t custom_tick_get(void)
diff --git a/src/engine/hal/simulator/simulator.cpp b/src/engine/hal/simulator/simulator.cpp
index 30a047204..3cb558fb6 100644
--- a/src/engine/hal/simulator/simulator.cpp
+++ b/src/engine/hal/simulator/simulator.cpp
@@ -1,16 +1,40 @@
 #include "./simulator.hpp"
+#include "private.h"
 
-void hal_init(void) {
-    hor_res = SDL_HOR_RES;
-    ver_res = SDL_VER_RES;
+static lv_indev_t *init_input_devices(lv_group_t *g) {
+    /* Add input devices: mouse, keyboard, and encoder */
+    struct {
+        lv_indev_type_t type;
+        void (*read_cb)(lv_indev_drv_t *, lv_indev_data_t *);
+        bool set_group;
+    } indev_configs[] = {
+        {LV_INDEV_TYPE_POINTER, &sdl_mouse_read, false},
+        {LV_INDEV_TYPE_KEYPAD, &sdl_keyboard_read, true},
+        {LV_INDEV_TYPE_ENCODER, &sdl_mousewheel_read, true}
+    };
 
-    static lv_color_t buf[SDL_HOR_RES * 100];
+    static lv_indev_drv_t indev_drvs[3];
+    lv_indev_t *mouse_indev = nullptr;
 
-    flush_cb = sdl_display_flush;
+    for (size_t i = 0; i < ARRAY_SIZE(indev_configs); i++) {
+        lv_indev_drv_init(&indev_drvs[i]); /*Basic initialization*/
+        indev_drvs[i].type = indev_configs[i].type;
+        indev_drvs[i].read_cb = indev_configs[i].read_cb;
+        lv_indev_t *cur_indev = lv_indev_drv_register(&indev_drvs[i]);
+        
+        if (indev_configs[i].set_group)
+            lv_indev_set_group(cur_indev, g);
+        
+        if (indev_configs[i].type == LV_INDEV_TYPE_POINTER)
+            mouse_indev = cur_indev;
+    }
 
-    read_cb1 = &sdl_mouse_read;
-    read_cb2 = &sdl_keyboard_read;
-    read_cb3 = &sdl_mousewheel_read;
+    return mouse_indev;
+}
+
+void hal_init(void) {
+
+    static lv_color_t buf[SDL_HOR_RES * 100];
 
     /* Use the 'monitor' driver which creates window on PC's monitor to simulate a display*/
     sdl_init();
@@ -23,7 +47,7 @@ void hal_init(void) {
     static lv_disp_drv_t disp_drv;
     lv_disp_drv_init(&disp_drv); /*Basic initialization*/
     disp_drv.draw_buf = &disp_buf1;
-    disp_drv.flush_cb = flush_cb;
+    disp_drv.flush_cb = &sdl_display_flush;
     disp_drv.hor_res = SDL_HOR_RES;
     disp_drv.ver_res = SDL_VER_RES;
 
@@ -35,29 +59,7 @@ void hal_init(void) {
     lv_group_t * g = lv_group_create();
     lv_group_set_default(g);
 
-    /* Add the mouse as input device
-    * Use the 'mouse' driver which reads the PC's mouse*/
-    static lv_indev_drv_t indev_drv_1;
-    lv_indev_drv_init(&indev_drv_1); /*Basic initialization*/
-    indev_drv_1.type = LV_INDEV_TYPE_POINTER;
-
-    /*This function will be called periodically (by the library) to get the mouse position and state*/
-    indev_drv_1.read_cb = read_cb1;
-    lv_indev_t *mouse_indev = lv_indev_drv_register(&indev_drv_1);
-
-    static lv_indev_drv_t indev_drv_2;
-    lv_indev_drv_init(&indev_drv_2); /*Basic initialization*/
-    indev_drv_2.type = LV_INDEV_TYPE_KEYPAD;
-    indev_drv_2.read_cb = read_cb2;
-    lv_indev_t *kb_indev = lv_indev_drv_register(&indev_drv_2);
-    lv_indev_set_group(kb_indev, g);
-
-    static lv_indev_drv_t indev_drv_3;
-    lv_indev_drv_init(&indev_drv_3); /*Basic initialization*/
-    indev_drv_3.type = LV_INDEV_TYPE_ENCODER;
-    indev_drv_3.read_cb = read_cb3;
-    lv_indev_t * enc_indev = lv_indev_drv_register(&indev_drv_3);
-    lv_indev_set_group(enc_indev, g);
+    lv_indev_t *mouse_indev = init_input_devices(g);
 
     /*Set a cursor for the mouse*/
     LV_IMG_DECLARE(mouse_cursor_icon); /*Declare the image file.*/
diff --git a/src/engine/hal/simulator/simulator.hpp b/src/engine/hal/simulator/simulator.hpp
index 12713b802..e2f53fd9d 100644
--- a/src/engine/hal/simulator/simulator.hpp
+++ b/src/engine/hal/simulator/simulator.hpp
@@ -4,15 +4,3 @@
 #include "lvgl/lvgl.h"
 #include "lv_drivers/sdl/sdl.h"
 
-static void* buf;
-
-static void (*flush_cb)(struct _lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p);
-
-static lv_coord_t hor_res;
-static lv_coord_t ver_res;
-
-using read_cb = void (*)(struct _lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
-
-static read_cb read_cb1;
-static read_cb read_cb2;
-static read_cb read_cb3;
diff --git a/src/engine/main.cpp b/src/engine/main.cpp
new file mode 100644
index 000000000..2b73f9aa7
--- /dev/null
+++ b/src/engine/main.cpp
@@ -0,0 +1,7 @@
+#include "engine.hpp"
+
+int main(int argc, char **argv) {
+    EngineInit(argc, argv);
+    return EngineRun();
+}
+
diff --git a/src/render/native/bootstrap/render_bootstrap.cpp b/src/render/native/bootstrap/render_bootstrap.cpp
index 03222493f..52a96cde5 100644
--- a/src/render/native/bootstrap/render_bootstrap.cpp
+++ b/src/render/native/bootstrap/render_bootstrap.cpp
@@ -5,6 +5,7 @@
 #include "native/core/dimensions/dimensions.hpp"
 #include "native/core/refresh/refresh.hpp"
 #include "native/core/theme/theme.hpp"
+#include "native/core/focus_group/focus_group.hpp"
 
 #define NATIVE_RENDER_OBJ "NativeRender"
 
@@ -24,6 +25,8 @@ void NativeRenderInit (JSContext* ctx, JSValue ns) {
 
     NativeThemeInit(ctx, obj);
 
+    NativeFocusGroupInit(ctx, obj);
+
     lv_init();
     lv_png_init();
 };
diff --git a/src/render/native/components/arc/arc.cpp b/src/render/native/components/arc/arc.cpp
index 265c70caa..e0f3a9768 100644
--- a/src/render/native/components/arc/arc.cpp
+++ b/src/render/native/components/arc/arc.cpp
@@ -6,9 +6,7 @@ Arc::Arc(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_arc_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
diff --git a/src/render/native/components/arc/arc_wrap.cpp b/src/render/native/components/arc/arc_wrap.cpp
index 6d91866a0..0548c2b0f 100644
--- a/src/render/native/components/arc/arc_wrap.cpp
+++ b/src/render/native/components/arc/arc_wrap.cpp
@@ -18,10 +18,11 @@ WRAPPED_INT32_VALUE(Arc, "Arc", ChangeRate)
 WRAPPED_MOVE_TO_FRONT(Arc, "Arc")
 WRAPPED_MOVE_TO_BACKGROUND(Arc, "Arc")
 WRAPPED_SCROLL_INTO_VIEW(Arc, "Arc")
+WRAPPED_FOCUS(Arc, "Arc")
 WRAPPED_JS_CLOSE_COMPONENT(Arc, "Arc")
 
 static JSValue NativeCompSetRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ArcClassID);
         int32_t min;
         int32_t max;
@@ -99,6 +100,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -154,9 +156,8 @@ static JSValue ArcConstructor(JSContext *ctx, JSValueConst new_target, int argc,
 
 static void ArcFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ArcClassID);
-    LV_LOG_USER("Arc %s release", th->uid);
     if (th) {
-        delete static_cast<Arc*>(th->comp);
+        LV_LOG_USER("Arc %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/button/button.cpp b/src/render/native/components/button/button.cpp
index b0ef1b97f..2ffefba05 100644
--- a/src/render/native/components/button/button.cpp
+++ b/src/render/native/components/button/button.cpp
@@ -7,10 +7,7 @@ Button::Button(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->uid = uid;
     this->instance = lv_btn_create(parent != nullptr ? parent : GetWindowInstance());
 
-    lv_group_add_obj(lv_group_get_default(), this->instance);
-
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
 };
diff --git a/src/render/native/components/button/button_wrap.cpp b/src/render/native/components/button/button_wrap.cpp
index a17a2c747..39b2c2d5a 100644
--- a/src/render/native/components/button/button_wrap.cpp
+++ b/src/render/native/components/button/button_wrap.cpp
@@ -14,6 +14,7 @@ WRAPPED_INSERT_CHILD(Button,"Button")
 WRAPPED_MOVE_TO_FRONT(Button, "Button")
 WRAPPED_MOVE_TO_BACKGROUND(Button, "Button")
 WRAPPED_SCROLL_INTO_VIEW(Button, "Button")
+WRAPPED_FOCUS(Button, "Button")
 WRAPPED_JS_CLOSE_COMPONENT(Button, "Button")
 
 static const JSCFunctionListEntry ComponentProtoFuncs[] = {
@@ -30,6 +31,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -85,9 +87,8 @@ static JSValue ButtonConstructor(JSContext *ctx, JSValueConst new_target, int ar
 
 static void ButtonFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ButtonClassID);
-    LV_LOG_USER("Button %s release", th->uid);
     if (th) {
-        delete static_cast<Button*>(th->comp);
+        LV_LOG_USER("Button %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/calendar/calendar.cpp b/src/render/native/components/calendar/calendar.cpp
index 8f9329d58..89b06cab9 100644
--- a/src/render/native/components/calendar/calendar.cpp
+++ b/src/render/native/components/calendar/calendar.cpp
@@ -9,10 +9,6 @@ Calendar::Calendar(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     lv_calendar_header_dropdown_create(this->instance);
     lv_calendar_header_arrow_create(this->instance);
 
-    lv_group_add_obj(lv_group_get_default(), this->instance);
-
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
-
     lv_obj_set_user_data(this->instance, this);
 };
 
diff --git a/src/render/native/components/calendar/calendar_wrap.cpp b/src/render/native/components/calendar/calendar_wrap.cpp
index ed6e32950..d6dafe4a3 100644
--- a/src/render/native/components/calendar/calendar_wrap.cpp
+++ b/src/render/native/components/calendar/calendar_wrap.cpp
@@ -10,10 +10,11 @@ STYLE_INFO(Calendar, "Calendar")
 WRAPPED_MOVE_TO_FRONT(Calendar, "Calendar")
 WRAPPED_MOVE_TO_BACKGROUND(Calendar, "Calendar")
 WRAPPED_SCROLL_INTO_VIEW(Calendar, "Calendar")
+WRAPPED_FOCUS(Calendar, "Calendar")
 WRAPPED_JS_CLOSE_COMPONENT(Calendar, "Calendar")
 
 static JSValue NativeCompSetHightLights(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0]) && JS_IsNumber(argv[1])) {
+    if (argc >= 1 && JS_IsArray(argv[0]) && JS_IsNumber(argv[1])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, CalendarClassID);
 
         int32_t len;
@@ -30,7 +31,7 @@ static JSValue NativeCompSetHightLights(JSContext *ctx, JSValueConst this_val, i
 
         for (int i=0; i<len; i++) {
             item = JS_GetPropertyUint32(ctx, argv[0], i);
-            if (JS_IsArray(ctx, item)) {
+            if (JS_IsArray(item)) {
                 year_value = JS_GetPropertyUint32(ctx, item, 0);
                 month_value = JS_GetPropertyUint32(ctx, item, 1);
                 day_value = JS_GetPropertyUint32(ctx, item, 2);
@@ -101,6 +102,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -156,9 +158,8 @@ static JSValue CalendarConstructor(JSContext *ctx, JSValueConst new_target, int
 
 static void CalendarFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, CalendarClassID);
-    LV_LOG_USER("Calendar %s release", th->uid);
     if (th) {
-        delete static_cast<Calendar*>(th->comp);
+        LV_LOG_USER("Calendar %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/chart/chart.cpp b/src/render/native/components/chart/chart.cpp
index b6d7ea45c..f4df5cd4f 100644
--- a/src/render/native/components/chart/chart.cpp
+++ b/src/render/native/components/chart/chart.cpp
@@ -6,10 +6,7 @@ Chart::Chart(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->uid = uid;
     this->instance = lv_chart_create(parent != nullptr ? parent : GetWindowInstance());
 
-    lv_group_add_obj(lv_group_get_default(), this->instance);
-
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
 
@@ -65,7 +62,8 @@ void Chart::setBottomAxisOption (
 };
 
 void Chart::setLeftAxisData (std::vector<axis_data>& data) {
-    int32_t i, j, color;
+    size_t i,j;
+    int32_t color;
     axis_data item;
 
     for (i=0; i<this->left_axis.size(); i++) {
@@ -91,7 +89,8 @@ void Chart::setLeftAxisData (std::vector<axis_data>& data) {
 };
 
 void Chart::setRightAxisData (std::vector<axis_data>& data) {
-    int32_t i, j, color;
+    size_t i, j;
+    int32_t color;
     axis_data item;
 
     for (i=0; i<this->right_axis.size(); i++) {
@@ -162,13 +161,13 @@ void Chart::draw_event_cb (lv_event_t * e) {
 
     Chart* comp = (Chart*)e->user_data;
 
-    if(comp->bottom_axis_labels.size() > dsc->value && dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text) {
+    if(comp->bottom_axis_labels.size() > static_cast<size_t>(dsc->value) && dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text) {
         lv_snprintf(dsc->text, dsc->text_length, "%s", comp->bottom_axis_labels[dsc->value].c_str());
-    } else if (comp->left_axis_labels.size() > dsc->value && dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
+    } else if (comp->left_axis_labels.size() > static_cast<size_t>(dsc->value) && dsc->id == LV_CHART_AXIS_PRIMARY_Y && dsc->text) {
         lv_snprintf(dsc->text, dsc->text_length, "%s", comp->left_axis_labels[dsc->value].c_str());
-    } else if (comp->right_axis_labels.size() > dsc->value && dsc->id == LV_CHART_AXIS_SECONDARY_Y && dsc->text) {
+    } else if (comp->right_axis_labels.size() > static_cast<size_t>(dsc->value) && dsc->id == LV_CHART_AXIS_SECONDARY_Y && dsc->text) {
         lv_snprintf(dsc->text, dsc->text_length, "%s", comp->right_axis_labels[dsc->value].c_str());
-    } else if (comp->top_axis_labels.size() > dsc->value && dsc->id == LV_CHART_AXIS_SECONDARY_X && dsc->text) {
+    } else if (comp->top_axis_labels.size() > static_cast<size_t>(dsc->value) && dsc->id == LV_CHART_AXIS_SECONDARY_X && dsc->text) {
         lv_snprintf(dsc->text, dsc->text_length, "%s", comp->top_axis_labels[dsc->value].c_str());
     }
 };
@@ -190,7 +189,8 @@ void Chart::setBottomAxisRange (int32_t min, int32_t max) {
 };
 
 void Chart::setScatterData (std::vector<axis_data>& data) {
-    int32_t i, j, color;
+    size_t i, j;
+    int32_t color;
     axis_data item;
 
     for (i=0; i<this->left_axis.size(); i++) {
diff --git a/src/render/native/components/chart/chart_wrap.cpp b/src/render/native/components/chart/chart_wrap.cpp
index 2a77a5a94..f63f9242a 100644
--- a/src/render/native/components/chart/chart_wrap.cpp
+++ b/src/render/native/components/chart/chart_wrap.cpp
@@ -15,7 +15,7 @@ WRAPPED_JS_REFRESH_COMPONENT(Chart, "Chart")
 WRAPPED_JS_CLOSE_COMPONENT(Chart, "Chart")
 
 static JSValue NativeCompSetLeftAxisLabels(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         int32_t len, i;
@@ -46,7 +46,7 @@ static JSValue NativeCompSetLeftAxisLabels(JSContext *ctx, JSValueConst this_val
 };
 
 static JSValue NativeCompSetRightAxisLabels(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         int32_t len, i;
@@ -77,7 +77,7 @@ static JSValue NativeCompSetRightAxisLabels(JSContext *ctx, JSValueConst this_va
 };
 
 static JSValue NativeCompSetTopAxisLabels(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         int32_t len, i;
@@ -108,7 +108,7 @@ static JSValue NativeCompSetTopAxisLabels(JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetBottomAxisLabels(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         int32_t len, i;
@@ -139,7 +139,7 @@ static JSValue NativeCompSetBottomAxisLabels(JSContext *ctx, JSValueConst this_v
 };
 
 static JSValue NativeCompSetDivLine(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
         int32_t hdiv, vdiv;
 
@@ -295,7 +295,7 @@ static JSValue NativeCompSetBottomAxisOption(JSContext *ctx, JSValueConst this_v
 };
 
 // static JSValue NativeCompSetBottomAxisData(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-//     if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+//     if (argc >= 1 && JS_IsArray(argv[0])) {
 //         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
 //         int32_t len, i, data_item;
@@ -319,7 +319,7 @@ static JSValue NativeCompSetBottomAxisOption(JSContext *ctx, JSValueConst this_v
 // };
 
 // static JSValue NativeCompSetTopAxisData(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-//     if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+//     if (argc >= 1 && JS_IsArray(argv[0])) {
 //         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
 //         int32_t len, i, data_item;
@@ -343,11 +343,11 @@ static JSValue NativeCompSetBottomAxisOption(JSContext *ctx, JSValueConst this_v
 // };
 
 static JSValue NativeCompSetLeftAxisData(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         std::vector<axis_data> data;
-        int32_t len1, len2, i, color, data_item;
+        int32_t len1, len2, color, data_item;
         JSValue item_value;
         JSValue color_value;
         JSValue data_value;
@@ -392,11 +392,11 @@ static JSValue NativeCompSetLeftAxisData(JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetRightAxisData(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         std::vector<axis_data> data;
-        int32_t len1, len2, i, color, data_item;
+        int32_t len1, len2, color, data_item;
         JSValue item_value;
         JSValue color_value;
         JSValue data_value;
@@ -441,11 +441,11 @@ static JSValue NativeCompSetRightAxisData(JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetScatterData (JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         std::vector<axis_data> data;
-        int32_t len1, len2, i, color, data_item;
+        int32_t len1, len2, color, data_item;
         JSValue item_value;
         JSValue color_value;
         JSValue data_value;
@@ -490,7 +490,7 @@ static JSValue NativeCompSetScatterData (JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetLeftAxisRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         JSValue min_value = JS_GetPropertyUint32(ctx, argv[0], 0);
@@ -512,7 +512,7 @@ static JSValue NativeCompSetLeftAxisRange(JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetRightAxisRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         JSValue min_value = JS_GetPropertyUint32(ctx, argv[0], 0);
@@ -534,7 +534,7 @@ static JSValue NativeCompSetRightAxisRange(JSContext *ctx, JSValueConst this_val
 };
 
 static JSValue NativeCompSetTopAxisRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         JSValue min_value = JS_GetPropertyUint32(ctx, argv[0], 0);
@@ -556,7 +556,7 @@ static JSValue NativeCompSetTopAxisRange(JSContext *ctx, JSValueConst this_val,
 };
 
 static JSValue NativeCompSetBottomAxisRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, ChartClassID);
 
         JSValue min_value = JS_GetPropertyUint32(ctx, argv[0], 0);
@@ -666,9 +666,8 @@ static JSValue ChartConstructor(JSContext *ctx, JSValueConst new_target, int arg
 
 static void ChartFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ChartClassID);
-    LV_LOG_USER("Chart %s release", th->uid);
     if (th) {
-        delete static_cast<Chart*>(th->comp);
+        LV_LOG_USER("Chart %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/checkbox/checkbox.cpp b/src/render/native/components/checkbox/checkbox.cpp
index 9d4439abc..5eb41de4e 100644
--- a/src/render/native/components/checkbox/checkbox.cpp
+++ b/src/render/native/components/checkbox/checkbox.cpp
@@ -5,10 +5,8 @@ Checkbox::Checkbox(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_CHECKBOX;
     this->uid = uid;
     this->instance = lv_checkbox_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
 };
diff --git a/src/render/native/components/checkbox/checkbox_wrap.cpp b/src/render/native/components/checkbox/checkbox_wrap.cpp
index ab427156c..b8200b355 100644
--- a/src/render/native/components/checkbox/checkbox_wrap.cpp
+++ b/src/render/native/components/checkbox/checkbox_wrap.cpp
@@ -11,6 +11,7 @@ WRAPPED_JS_BACKGROUND_IMAGE(Checkbox,"Checkbox")
 WRAPPED_MOVE_TO_FRONT(Checkbox, "Checkbox")
 WRAPPED_MOVE_TO_BACKGROUND(Checkbox, "Checkbox")
 WRAPPED_SCROLL_INTO_VIEW(Checkbox, "Checkbox")
+WRAPPED_FOCUS(Checkbox, "Checkbox")
 WRAPPED_JS_CLOSE_COMPONENT(Checkbox, "Checkbox")
 
 static JSValue NativeCompSetText(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
@@ -64,6 +65,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -119,9 +121,8 @@ static JSValue CheckboxConstructor(JSContext *ctx, JSValueConst new_target, int
 
 static void CheckboxFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, CheckboxClassID);
-    LV_LOG_USER("Checkbox %s release", th->uid);
     if (th) {
-        delete static_cast<Checkbox*>(th->comp);
+        LV_LOG_USER("Checkbox %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/component.hpp b/src/render/native/components/component.hpp
index 2fb86339a..aec0d99c2 100644
--- a/src/render/native/components/component.hpp
+++ b/src/render/native/components/component.hpp
@@ -104,12 +104,13 @@ void NativeComponentMaskInit (JSContext* ctx, JSValue ns);
 
 #define WRAPPED_INSERT_CHILD(COMPONENT,COMPONENT_NAME)                                                                      \
     static JSValue NativeCompInsertChildBefore(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {       \
-        if (argc >= 1 && JS_IsObject(argv[0])) {                                                                            \
+        if (argc >= 1 && JS_IsObject(argv[0]) && JS_IsObject(argv[1])) {                                                                            \
             JSClassID _class_id;                                                                                            \
             COMP_REF* child = (COMP_REF*)JS_GetAnyOpaque(argv[0], &_class_id);                                              \
+            COMP_REF* beforeChild = (COMP_REF*)JS_GetAnyOpaque(argv[1], &_class_id);                                       \
             COMP_REF* parent = (COMP_REF*)JS_GetAnyOpaque(this_val, &_class_id);                                            \
                                                                                                                             \
-            ((COMPONENT*)(parent->comp))->insertChildBefore((void*)(child->comp));                                          \
+            ((COMPONENT*)(parent->comp))->insertChildBefore((void*)(child->comp), (void*)(beforeChild->comp));                                          \
             LV_LOG_USER("%s %s insertChildBefore %s", COMPONENT_NAME, parent->uid, child->uid);                             \
         }                                                                                                                   \
         return JS_UNDEFINED;                                                                                                \
@@ -146,9 +147,31 @@ void NativeComponentMaskInit (JSContext* ctx, JSValue ns);
     };                                                                                                                      \
                                                                                                                             \
 
+#define WRAPPED_FOCUS(COMPONENT,COMPONENT_NAME)                                                                             \
+    static JSValue NativeCompFocus(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {                   \
+        COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, COMPONENT##ClassID);                                              \
+        ((COMPONENT*)(ref->comp))->BasicComponent::focus();                                                                 \
+        LV_LOG_USER("%s %s focus", COMPONENT_NAME, ref->uid);                                                               \
+        return JS_UNDEFINED;                                                                                                \
+    };                                                                                                                      \
+                                                                                                                            \
+
+#define WRAPPED_ADD_TO_FOCUS_GROUP(COMPONENT,COMPONENT_NAME)                                                                \
+    static JSValue NativeCompAddToFocusGroup(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {         \
+        COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, COMPONENT##ClassID);                                              \
+        if (ref && ref->comp) {                                                                                             \
+            BasicComponent* comp = (BasicComponent*)(ref->comp);                                                            \
+            if (comp->instance) {                                                                                           \
+                lv_group_add_obj(lv_group_get_default(), comp->instance);                                                    \
+                lv_obj_add_flag(comp->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);                                                \
+            }                                                                                                               \
+        }                                                                                                                   \
+        return JS_UNDEFINED;                                                                                                \
+    }
+
 #define WRAPPED_JS_SETSTYLE(COMPONENT,COMPONENT_NAME)                                                                       \
     static JSValue NativeCompSetStyle(JSContext* ctx, JSValueConst this_val, int argc, JSValueConst* argv) {                \
-        if (argc >= 2 && JS_IsObject(argv[0]) && JS_IsArray(ctx, argv[1]) && JS_IsNumber(argv[2]) && JS_IsNumber(argv[3]) && JS_IsBool(argv[4])) {       \
+        if (argc >= 2 && JS_IsObject(argv[0]) && JS_IsArray(argv[1]) && JS_IsNumber(argv[2]) && JS_IsNumber(argv[3]) && JS_IsBool(argv[4])) {       \
             int len;                                                                                                        \
             std::vector<std::string> keys;                                                                                  \
             std::string key;                                                                                                \
@@ -194,7 +217,7 @@ void NativeComponentMaskInit (JSContext* ctx, JSValue ns);
 
 #define WRAPPED_JS_Align(COMPONENT,COMPONENT_NAME)                                                                          \
     static JSValue NativeCompSetAlign(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {                \
-        if (argc >= 1 && JS_IsNumber(argv[0]) && JS_IsArray(ctx, argv[1])) {                                                \
+        if (argc >= 1 && JS_IsNumber(argv[0]) && JS_IsArray(argv[1])) {                                                \
             COMP_REF* s = (COMP_REF*)JS_GetOpaque(this_val, COMPONENT##ClassID);                                            \
             int32_t x;                                                                                                      \
             int32_t y;                                                                                                      \
@@ -217,7 +240,7 @@ void NativeComponentMaskInit (JSContext* ctx, JSValue ns);
 
 #define WRAPPED_JS_Align_To(COMPONENT,COMPONENT_NAME)                                                                       \
     static JSValue NativeCompSetAlignTo(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {              \
-        if (argc >= 1 && JS_IsNumber(argv[0]) && JS_IsArray(ctx, argv[1]) && JS_IsObject(argv[2])) {                        \
+        if (argc >= 1 && JS_IsNumber(argv[0]) && JS_IsArray(argv[1]) && JS_IsObject(argv[2])) {                        \
             COMP_REF* s = (COMP_REF*)JS_GetOpaque(this_val, COMPONENT##ClassID);                                            \
             int32_t x;                                                                                                      \
             int32_t y;                                                                                                      \
@@ -284,7 +307,10 @@ void NativeComponentMaskInit (JSContext* ctx, JSValue ns);
 #define WRAPPED_JS_CLOSE_COMPONENT(COMPONENT,COMPONENT_NAME)                                                                \
     static JSValue NativeCompCloseComponent(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {          \
         COMP_REF* s = (COMP_REF*)JS_GetOpaque(this_val, COMPONENT##ClassID);                                                \
-        lv_obj_del_async(((BasicComponent*)(s->comp))->instance);                                                           \
+        if (s && s->comp) {                                                                                                 \
+            delete (BasicComponent*)(s->comp);                                                                              \
+            s->comp = nullptr;                                                                                              \
+        }                                                                                                                   \
         return JS_UNDEFINED;                                                                                                \
     }                                                                                                                       \
                                                                                                                             \
diff --git a/src/render/native/components/dropdownlist/dropdownlist.cpp b/src/render/native/components/dropdownlist/dropdownlist.cpp
index b42b04d96..c96a5e218 100644
--- a/src/render/native/components/dropdownlist/dropdownlist.cpp
+++ b/src/render/native/components/dropdownlist/dropdownlist.cpp
@@ -6,9 +6,7 @@ Dropdownlist::Dropdownlist(std::string uid, lv_obj_t* parent): BasicComponent(ui
 
     this->uid = uid;
     this->instance = lv_dropdown_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
@@ -18,7 +16,7 @@ void Dropdownlist::setItems (std::vector<std::string>& items) {
         lv_dropdown_clear_options(this->instance);
     } else {
         std::string str;
-        for(int i=0; i < items.size(); i++) {
+        for(size_t i=0; i < items.size(); i++) {
             std::string item = items[i];
             item.append("\n");
             str.append(item.c_str());
@@ -42,7 +40,7 @@ void Dropdownlist::setDir (lv_dir_t dir) {
 };
 
 void Dropdownlist::setArrowDir (int32_t dir) {
-    const void* arrow;
+    const void* arrow = nullptr;
     switch (dir)
     {
         case DROPDOWNLIST_UP:
diff --git a/src/render/native/components/dropdownlist/dropdownlist_wrap.cpp b/src/render/native/components/dropdownlist/dropdownlist_wrap.cpp
index af9af40e3..3cbe09625 100644
--- a/src/render/native/components/dropdownlist/dropdownlist_wrap.cpp
+++ b/src/render/native/components/dropdownlist/dropdownlist_wrap.cpp
@@ -10,10 +10,11 @@ STYLE_INFO(Dropdownlist, "Dropdownlist")
 WRAPPED_MOVE_TO_FRONT(Dropdownlist, "Dropdownlist")
 WRAPPED_MOVE_TO_BACKGROUND(Dropdownlist, "Dropdownlist")
 WRAPPED_SCROLL_INTO_VIEW(Dropdownlist, "Dropdownlist")
+WRAPPED_FOCUS(Dropdownlist, "Dropdownlist")
 WRAPPED_JS_CLOSE_COMPONENT(Dropdownlist, "Dropdownlist")
 
 static JSValue NativeCompSetItems(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0]) && JS_IsNumber(argv[1])) {
+    if (argc >= 1 && JS_IsArray(argv[0]) && JS_IsNumber(argv[1])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, DropdownlistClassID);
         std::vector<std::string> items;
 
@@ -119,6 +120,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -174,9 +176,8 @@ static JSValue DropdownlistConstructor(JSContext *ctx, JSValueConst new_target,
 
 static void DropdownlistFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, DropdownlistClassID);
-    LV_LOG_USER("Dropdownlist %s release", th->uid);
     if (th) {
-        delete static_cast<Dropdownlist*>(th->comp);
+        LV_LOG_USER("Dropdownlist %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/gif/gif.cpp b/src/render/native/components/gif/gif.cpp
index d839f9e0c..b3e1e8fb8 100644
--- a/src/render/native/components/gif/gif.cpp
+++ b/src/render/native/components/gif/gif.cpp
@@ -6,9 +6,7 @@ GIF::GIF(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_gif_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICKABLE);
     lv_img_set_size_mode(this->instance, LV_IMG_SIZE_MODE_REAL);
     lv_obj_set_user_data(this->instance, this);
diff --git a/src/render/native/components/gif/gif_wrap.cpp b/src/render/native/components/gif/gif_wrap.cpp
index 9c5c2e2a6..df35df80c 100644
--- a/src/render/native/components/gif/gif_wrap.cpp
+++ b/src/render/native/components/gif/gif_wrap.cpp
@@ -25,10 +25,8 @@ static JSValue NativeCompSetGIFBinary(JSContext *ctx, JSValueConst this_val, int
         LV_LOG_USER("GIF %s setGIF", s->uid);
 
         return JS_NewBool(ctx, 1);
-    fail:
-        return JS_ThrowInternalError(ctx, "GIF setBinary fail");
     }
-    return JS_UNDEFINED;
+    return JS_ThrowInternalError(ctx, "GIF setBinary fail");
 };
 
 static const JSCFunctionListEntry ComponentProtoFuncs[] = {
@@ -97,9 +95,8 @@ static JSValue GIFConstructor(JSContext *ctx, JSValueConst new_target, int argc,
 
 static void GIFFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, GIFClassID);
-    LV_LOG_USER("GIF %s release", th->uid);
     if (th) {
-        delete static_cast<GIF*>(th->comp);
+        LV_LOG_USER("GIF %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/image/image.cpp b/src/render/native/components/image/image.cpp
index b7b73bc78..24485c0a5 100644
--- a/src/render/native/components/image/image.cpp
+++ b/src/render/native/components/image/image.cpp
@@ -6,10 +6,8 @@ Image::Image(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_img_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICKABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
 };
diff --git a/src/render/native/components/image/image_wrap.cpp b/src/render/native/components/image/image_wrap.cpp
index c9449ea20..b592599ec 100644
--- a/src/render/native/components/image/image_wrap.cpp
+++ b/src/render/native/components/image/image_wrap.cpp
@@ -25,10 +25,8 @@ static JSValue NativeCompSetImageBinary(JSContext *ctx, JSValueConst this_val, i
         LV_LOG_USER("Image %s setImage", s->uid);
 
         return JS_NewBool(ctx, 1);
-    fail:
-        return JS_ThrowInternalError(ctx, "image setBinary fail");
     }
-    return JS_UNDEFINED;
+    return JS_ThrowInternalError(ctx, "image setBinary fail");
 };
 
 static JSValue NativeCompSetSymbol(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
@@ -44,9 +42,8 @@ static JSValue NativeCompSetSymbol(JSContext *ctx, JSValueConst this_val, int ar
         JS_FreeCString(ctx, str);
 
         return JS_NewBool(ctx, 1);
-    fail:
-        return JS_ThrowInternalError(ctx, "image setSymbol fail");
     }
+    return JS_ThrowInternalError(ctx, "image setSymbol fail");
     return JS_UNDEFINED;
 };
 
@@ -117,9 +114,8 @@ static JSValue ImageConstructor(JSContext *ctx, JSValueConst new_target, int arg
 
 static void ImageFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ImageClassID);
-    LV_LOG_USER("Image %s release", th->uid);
     if (th) {
-        delete static_cast<Image*>(th->comp);
+        LV_LOG_USER("Image %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/keyboard/keyboard.cpp b/src/render/native/components/keyboard/keyboard.cpp
index c1f7c94dc..10fae6700 100644
--- a/src/render/native/components/keyboard/keyboard.cpp
+++ b/src/render/native/components/keyboard/keyboard.cpp
@@ -5,9 +5,7 @@ Keyboard::Keyboard(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_TEXTAREA;
     this->uid = uid;
     this->instance = lv_keyboard_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
diff --git a/src/render/native/components/keyboard/keyboard_wrap.cpp b/src/render/native/components/keyboard/keyboard_wrap.cpp
index b4da2f8e2..78084f9ce 100644
--- a/src/render/native/components/keyboard/keyboard_wrap.cpp
+++ b/src/render/native/components/keyboard/keyboard_wrap.cpp
@@ -103,9 +103,8 @@ static JSValue KeyboardConstructor(JSContext *ctx, JSValueConst new_target, int
 
 static void KeyboardFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, KeyboardClassID);
-    LV_LOG_USER("Keyboard %s release", th->uid);
     if (th) {
-        delete static_cast<Keyboard*>(th->comp);
+        LV_LOG_USER("Keyboard %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/line/line.cpp b/src/render/native/components/line/line.cpp
index 27583ed2f..00813007e 100644
--- a/src/render/native/components/line/line.cpp
+++ b/src/render/native/components/line/line.cpp
@@ -6,9 +6,7 @@ Line::Line(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_line_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
diff --git a/src/render/native/components/line/line_wrap.cpp b/src/render/native/components/line/line_wrap.cpp
index 1711a6ce4..416d565a0 100644
--- a/src/render/native/components/line/line_wrap.cpp
+++ b/src/render/native/components/line/line_wrap.cpp
@@ -7,14 +7,13 @@ WRAPPED_JS_AddEventListener(Line, "Line")
 WRAPPED_JS_Align(Line, "Line")
 WRAPPED_JS_Align_To(Line, "Line")
 STYLE_INFO(Line, "Line")
-WRAPPED_JS_BACKGROUND_IMAGE(Line,"Line")
 WRAPPED_MOVE_TO_FRONT(Line, "Line")
 WRAPPED_MOVE_TO_BACKGROUND(Line, "Line")
 WRAPPED_SCROLL_INTO_VIEW(Line, "Line")
 WRAPPED_JS_CLOSE_COMPONENT(Line, "Line")
 
 static JSValue NativeCompSetPoints(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0]) && JS_IsNumber(argv[1])) {
+    if (argc >= 1 && JS_IsArray(argv[0]) && JS_IsNumber(argv[1])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, LineClassID);
 
         int32_t len;
@@ -29,7 +28,7 @@ static JSValue NativeCompSetPoints(JSContext *ctx, JSValueConst this_val, int ar
 
         for (int i=0; i<len; i++) {
             item = JS_GetPropertyUint32(ctx, argv[0], i);
-            if (JS_IsArray(ctx, item)) {
+            if (JS_IsArray(item)) {
                 first_value = JS_GetPropertyUint32(ctx, item, 0);
                 second_value = JS_GetPropertyUint32(ctx, item, 1);
                 if (JS_IsNumber(first_value) && JS_IsNumber(second_value)) {
@@ -118,9 +117,8 @@ static JSValue LineConstructor(JSContext *ctx, JSValueConst new_target, int argc
 
 static void LineFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, LineClassID);
-    LV_LOG_USER("Line %s release", th->uid);
     if (th) {
-        delete static_cast<Line*>(th->comp);
+        LV_LOG_USER("Line %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/list/list.cpp b/src/render/native/components/list/list.cpp
index cb9964e6d..7c7b0504b 100644
--- a/src/render/native/components/list/list.cpp
+++ b/src/render/native/components/list/list.cpp
@@ -6,8 +6,6 @@ List::List(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_list_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
 };
diff --git a/src/render/native/components/list/list_wrap.cpp b/src/render/native/components/list/list_wrap.cpp
index 9e0683096..7ddbc65ea 100644
--- a/src/render/native/components/list/list_wrap.cpp
+++ b/src/render/native/components/list/list_wrap.cpp
@@ -103,9 +103,8 @@ static JSValue ListConstructor(JSContext *ctx, JSValueConst new_target, int argc
 
 static void ListFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ListClassID);
-    LV_LOG_USER("List %s release", th->uid);
     if (th) {
-        delete static_cast<List*>(th->comp);
+        LV_LOG_USER("List %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/mask/mask.cpp b/src/render/native/components/mask/mask.cpp
index cdc7d5f24..ef0e8d667 100644
--- a/src/render/native/components/mask/mask.cpp
+++ b/src/render/native/components/mask/mask.cpp
@@ -7,17 +7,13 @@ Mask::Mask(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->uid = uid;
     this->instance = lv_obj_create(lv_layer_top());
 
-    lv_group_add_obj(lv_group_get_default(), this->instance);
-
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
 };
 
 void Mask::initCompStyle (int32_t type) {
     this->ensureStyle(type);
-    lv_style_t* style = this->style_map.at(type);
 
     uint32_t width, height;
     lv_disp_t* disp_default = lv_disp_get_default();
diff --git a/src/render/native/components/mask/mask_wrap.cpp b/src/render/native/components/mask/mask_wrap.cpp
index 1d6e290f2..022421729 100644
--- a/src/render/native/components/mask/mask_wrap.cpp
+++ b/src/render/native/components/mask/mask_wrap.cpp
@@ -73,9 +73,8 @@ static JSValue MaskConstructor(JSContext *ctx, JSValueConst new_target, int argc
 
 static void MaskFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, MaskClassID);
-    LV_LOG_USER("Mask %s release", th->uid);
     if (th) {
-        delete static_cast<Mask*>(th->comp);
+        LV_LOG_USER("Mask %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/progressbar/progressbar.cpp b/src/render/native/components/progressbar/progressbar.cpp
index 3da5be5a8..aa3ff0b89 100644
--- a/src/render/native/components/progressbar/progressbar.cpp
+++ b/src/render/native/components/progressbar/progressbar.cpp
@@ -6,9 +6,7 @@ ProgressBar::ProgressBar(std::string uid, lv_obj_t* parent): BasicComponent(uid)
 
     this->uid = uid;
     this->instance = lv_bar_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
diff --git a/src/render/native/components/progressbar/progressbar_wrap.cpp b/src/render/native/components/progressbar/progressbar_wrap.cpp
index c42c18465..987f9cf0e 100644
--- a/src/render/native/components/progressbar/progressbar_wrap.cpp
+++ b/src/render/native/components/progressbar/progressbar_wrap.cpp
@@ -108,9 +108,8 @@ static JSValue ProgressBarConstructor(JSContext *ctx, JSValueConst new_target, i
 
 static void ProgressBarFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ProgressBarClassID);
-    LV_LOG_USER("ProgressBar %s release", th->uid);
     if (th) {
-        delete static_cast<ProgressBar*>(th->comp);
+        LV_LOG_USER("ProgressBar %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/roller/roller.cpp b/src/render/native/components/roller/roller.cpp
index 3bfe2c837..7b1583a56 100644
--- a/src/render/native/components/roller/roller.cpp
+++ b/src/render/native/components/roller/roller.cpp
@@ -5,9 +5,7 @@ Roller::Roller(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_ROLLER;
     this->uid = uid;
     this->instance = lv_roller_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
@@ -17,7 +15,7 @@ void Roller::setOptions (std::vector<std::string>& options, uint32_t mode) {
         lv_roller_set_options(this->instance, "\0", mode);
     } else {
         std::string str;
-        for(int i=0; i < options.size(); i++) {
+        for(size_t i=0; i < options.size(); i++) {
             std::string item = options[i];
             str.append(item.c_str());
             if (i != options.size() - 1) {
diff --git a/src/render/native/components/roller/roller_wrap.cpp b/src/render/native/components/roller/roller_wrap.cpp
index f1a595572..6af9e86c6 100644
--- a/src/render/native/components/roller/roller_wrap.cpp
+++ b/src/render/native/components/roller/roller_wrap.cpp
@@ -10,10 +10,11 @@ STYLE_INFO(Roller, "Roller")
 WRAPPED_MOVE_TO_FRONT(Roller, "Roller")
 WRAPPED_MOVE_TO_BACKGROUND(Roller, "Roller")
 WRAPPED_SCROLL_INTO_VIEW(Roller, "Roller")
+WRAPPED_FOCUS(Roller, "Roller")
 WRAPPED_JS_CLOSE_COMPONENT(Roller, "Roller")
 
 static JSValue NativeCompSetOptions(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0]) && JS_IsNumber(argv[1]) && JS_IsBool(argv[2])) {
+    if (argc >= 1 && JS_IsArray(argv[0]) && JS_IsNumber(argv[1]) && JS_IsBool(argv[2])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, RollerClassID);
         std::vector<std::string> items;
 
@@ -80,6 +81,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -135,9 +137,8 @@ static JSValue RollerConstructor(JSContext *ctx, JSValueConst new_target, int ar
 
 static void RollerFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, RollerClassID);
-    LV_LOG_USER("Roller %s release", th->uid);
     if (th) {
-        delete static_cast<Roller*>(th->comp);
+        LV_LOG_USER("Roller %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/slider/slider.cpp b/src/render/native/components/slider/slider.cpp
index 976f404e6..06489de61 100644
--- a/src/render/native/components/slider/slider.cpp
+++ b/src/render/native/components/slider/slider.cpp
@@ -6,9 +6,7 @@ Slider::Slider(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_slider_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
diff --git a/src/render/native/components/slider/slider_wrap.cpp b/src/render/native/components/slider/slider_wrap.cpp
index 9f70864e9..5cdbbae0f 100644
--- a/src/render/native/components/slider/slider_wrap.cpp
+++ b/src/render/native/components/slider/slider_wrap.cpp
@@ -11,10 +11,11 @@ WRAPPED_JS_BACKGROUND_IMAGE(Slider,"Slider")
 WRAPPED_MOVE_TO_FRONT(Slider, "Slider")
 WRAPPED_MOVE_TO_BACKGROUND(Slider, "Slider")
 WRAPPED_SCROLL_INTO_VIEW(Slider, "Slider")
+WRAPPED_FOCUS(Slider, "Slider")
 WRAPPED_JS_CLOSE_COMPONENT(Slider, "Slider")
 
 static JSValue NativeCompSetRange(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+    if (argc >= 1 && JS_IsArray(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, SliderClassID);
         int32_t min;
         int32_t max;
@@ -55,6 +56,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -110,9 +112,8 @@ static JSValue SliderConstructor(JSContext *ctx, JSValueConst new_target, int ar
 
 static void SliderFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, SliderClassID);
-    LV_LOG_USER("Slider %s release", th->uid);
     if (th) {
-        delete static_cast<Slider*>(th->comp);
+        LV_LOG_USER("Slider %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/switch/switch.cpp b/src/render/native/components/switch/switch.cpp
index 920b7b4c2..751a5a9a9 100644
--- a/src/render/native/components/switch/switch.cpp
+++ b/src/render/native/components/switch/switch.cpp
@@ -5,9 +5,7 @@ Switch::Switch(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_SWITCH;
     this->uid = uid;
     this->instance = lv_switch_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
 };
diff --git a/src/render/native/components/switch/switch_wrap.cpp b/src/render/native/components/switch/switch_wrap.cpp
index a3663c630..b2945fcc0 100644
--- a/src/render/native/components/switch/switch_wrap.cpp
+++ b/src/render/native/components/switch/switch_wrap.cpp
@@ -11,32 +11,9 @@ WRAPPED_JS_BACKGROUND_IMAGE(Switch,"Switch")
 WRAPPED_MOVE_TO_FRONT(Switch, "Switch")
 WRAPPED_MOVE_TO_BACKGROUND(Switch, "Switch")
 WRAPPED_SCROLL_INTO_VIEW(Switch, "Switch")
+WRAPPED_FOCUS(Switch, "Switch")
 WRAPPED_JS_CLOSE_COMPONENT(Switch, "Switch")
 
-static JSValue NativeCompRemoveChild(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsObject(argv[0])) {
-        JSClassID _class_id;
-        COMP_REF* child = (COMP_REF*)JS_GetAnyOpaque(argv[0], &_class_id);
-        COMP_REF* parent = (COMP_REF*)JS_GetOpaque(this_val, SwitchClassID);
-
-        ((Switch*)(parent->comp))->removeChild((void*)(child->comp));
-        LV_LOG_USER("Switch %s remove child %s", parent->uid, child->uid);
-    }
-    return JS_UNDEFINED;
-};
-
-static JSValue NativeCompAppendChild(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-    if (argc >= 1 && JS_IsObject(argv[0])) {
-        JSClassID _class_id;
-        COMP_REF* child = (COMP_REF*)JS_GetAnyOpaque(argv[0], &_class_id);
-        COMP_REF* parent = (COMP_REF*)JS_GetOpaque(this_val, SwitchClassID);
-
-        ((Switch*)(parent->comp))->appendChild((void*)(child->comp));
-        LV_LOG_USER("Switch %s append child %s", parent->uid, child->uid);
-    }
-    return JS_UNDEFINED;
-};
-
 static JSValue NativeCompSetChecked(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
     if (argc >= 1 && JS_IsBool(argv[0])) {
         COMP_REF* ref = (COMP_REF*)JS_GetOpaque(this_val, SwitchClassID);
@@ -74,6 +51,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -129,9 +107,8 @@ static JSValue SwitchConstructor(JSContext *ctx, JSValueConst new_target, int ar
 
 static void ViewFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, SwitchClassID);
-    LV_LOG_USER("Switch %s release", th->uid);
     if (th) {
-        delete static_cast<Switch*>(th->comp);
+        LV_LOG_USER("Switch %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/tabview/tabview.cpp b/src/render/native/components/tabview/tabview.cpp
index 9fefd681d..a0acf7673 100644
--- a/src/render/native/components/tabview/tabview.cpp
+++ b/src/render/native/components/tabview/tabview.cpp
@@ -6,9 +6,7 @@ TabView::TabView(std::string uid, uint32_t pos, uint32_t size, lv_obj_t* parent)
 
     this->uid = uid;
     this->instance = lv_tabview_create(parent != nullptr ? parent : GetWindowInstance(), pos, size);
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
diff --git a/src/render/native/components/tabview/tabview_wrap.cpp b/src/render/native/components/tabview/tabview_wrap.cpp
index d6a743725..2b1239a56 100644
--- a/src/render/native/components/tabview/tabview_wrap.cpp
+++ b/src/render/native/components/tabview/tabview_wrap.cpp
@@ -17,7 +17,7 @@ WRAPPED_SCROLL_INTO_VIEW(TabView, "TabView")
 WRAPPED_JS_CLOSE_COMPONENT(TabView, "TabView")
 
 // static JSValue NativeCompSetTabs(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
-//     if (argc >= 1 && JS_IsArray(ctx, argv[0])) {
+//     if (argc >= 1 && JS_IsArray(argv[0])) {
 //         COMP_REF* ref = (COMP_REF*)JS_GetOpaque3(this_val);
 
 //         COMP_REF* ref_content;
@@ -154,9 +154,8 @@ static JSValue TabViewConstructor(JSContext *ctx, JSValueConst new_target, int a
 
 static void TabViewFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, TabViewClassID);
-    LV_LOG_USER("TabView %s release", th->uid);
     if (th) {
-        delete static_cast<TabView*>(th->comp);
+        LV_LOG_USER("TabView %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/text/text.cpp b/src/render/native/components/text/text.cpp
index 8cbf87286..b42871a2b 100644
--- a/src/render/native/components/text/text.cpp
+++ b/src/render/native/components/text/text.cpp
@@ -6,9 +6,7 @@ Text::Text(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
 
     this->uid = uid;
     this->instance = lv_label_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
     this->initStyle(LV_PART_MAIN);
diff --git a/src/render/native/components/text/text_wrap.cpp b/src/render/native/components/text/text_wrap.cpp
index c1365d377..9c49b74e5 100644
--- a/src/render/native/components/text/text_wrap.cpp
+++ b/src/render/native/components/text/text_wrap.cpp
@@ -93,9 +93,8 @@ static JSValue TextConstructor(JSContext *ctx, JSValueConst new_target, int argc
 
 static void TextFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, TextClassID);
-    LV_LOG_USER("Text %s release", th->uid);
     if (th) {
-        delete static_cast<Text*>(th->comp);
+        LV_LOG_USER("Text %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/textarea/textarea.cpp b/src/render/native/components/textarea/textarea.cpp
index 4c05c3923..7fff21c42 100644
--- a/src/render/native/components/textarea/textarea.cpp
+++ b/src/render/native/components/textarea/textarea.cpp
@@ -5,11 +5,9 @@ Textarea::Textarea(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_TEXTAREA;
     this->uid = uid;
     this->instance = lv_textarea_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
     lv_obj_set_user_data(this->instance, this);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_CLICK_FOCUSABLE);
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     this->initStyle(LV_PART_MAIN);
     this->initStyle(LV_STATE_FOCUSED);
 
@@ -23,9 +21,8 @@ void Textarea::raiseKeyboard (lv_event_t* event) {
     lv_obj_t* keyboard = lv_keyboard_create(lv_layer_top());
     comp->keyboard = keyboard;
 
-    uint32_t width, height;
+    uint32_t height;
     lv_disp_t* disp_default = lv_disp_get_default();
-    width = disp_default->driver->hor_res;
     height = disp_default->driver->ver_res;
 
     lv_keyboard_set_textarea(keyboard, comp->instance);
diff --git a/src/render/native/components/textarea/textarea_wrap.cpp b/src/render/native/components/textarea/textarea_wrap.cpp
index 7095301ba..f7d236176 100644
--- a/src/render/native/components/textarea/textarea_wrap.cpp
+++ b/src/render/native/components/textarea/textarea_wrap.cpp
@@ -10,6 +10,7 @@ STYLE_INFO(Textarea, "Textarea")
 WRAPPED_MOVE_TO_FRONT(Textarea, "Textarea")
 WRAPPED_MOVE_TO_BACKGROUND(Textarea, "Textarea")
 WRAPPED_SCROLL_INTO_VIEW(Textarea, "Textarea")
+WRAPPED_FOCUS(Textarea, "Textarea")
 WRAPPED_JS_CLOSE_COMPONENT(Textarea, "Textarea")
 
 static JSValue NativeCompSetOneLine(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
@@ -104,6 +105,7 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
 };
 
@@ -159,9 +161,8 @@ static JSValue TextareaConstructor(JSContext *ctx, JSValueConst new_target, int
 
 static void TextareaFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, TextareaClassID);
-    LV_LOG_USER("Textarea %s release", th->uid);
     if (th) {
-        delete static_cast<Textarea*>(th->comp);
+        LV_LOG_USER("Textarea %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/view/view.cpp b/src/render/native/components/view/view.cpp
index 917475408..bfef9f5e6 100644
--- a/src/render/native/components/view/view.cpp
+++ b/src/render/native/components/view/view.cpp
@@ -5,25 +5,23 @@ View::View(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
     this->type = COMP_TYPE_VIEW;
     this->uid = uid;
     this->instance = lv_obj_create(parent != nullptr ? parent : GetWindowInstance());
-    lv_group_add_obj(lv_group_get_default(), this->instance);
 
-    lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
     lv_obj_set_user_data(this->instance, this);
-    // this->initStyle(LV_PART_MAIN);
+    this->initStyle(LV_PART_MAIN);
 };
 
-// void View::initCompStyle (int32_t type) {
-//     this->ensureStyle(type);
-//     lv_style_t* style = this->style_map.at(type);
+void View::initCompStyle (int32_t type) {
+    lv_style_t* style = this->style_map.at(type);
 
-//     lv_style_set_pad_left(style, 0);
-//     lv_style_set_pad_right(style, 0);
-//     lv_style_set_pad_bottom(style, 0);
-//     lv_style_set_pad_top(style, 0);
-//     lv_style_set_radius(style, 0);
-//     lv_style_set_outline_width(style, 0);
-//     lv_style_set_outline_pad(style, 0);
-//     lv_style_set_border_width(style, 0);
-//     lv_style_set_border_side(style, LV_BORDER_SIDE_FULL);
-// };
+    lv_style_set_pad_left(style, 0);
+    lv_style_set_pad_right(style, 0);
+    lv_style_set_pad_bottom(style, 0);
+    lv_style_set_pad_top(style, 0);
+    lv_style_set_radius(style, 0);
+    lv_style_set_outline_width(style, 0);
+    lv_style_set_outline_pad(style, 0);
+    lv_style_set_border_width(style, 0);
+    lv_style_set_border_side(style, LV_BORDER_SIDE_FULL);
+    lv_style_set_bg_opa(style, LV_OPA_TRANSP);
+};
diff --git a/src/render/native/components/view/view.hpp b/src/render/native/components/view/view.hpp
index 735ff4f43..ae826a7b4 100644
--- a/src/render/native/components/view/view.hpp
+++ b/src/render/native/components/view/view.hpp
@@ -8,5 +8,5 @@ class View final : public BasicComponent {
  public:
   View(std::string uid, lv_obj_t* parent = nullptr);
 
-  // void initCompStyle (int32_t type);
+  void initCompStyle (int32_t type);
 };
diff --git a/src/render/native/components/view/view_wrap.cpp b/src/render/native/components/view/view_wrap.cpp
index bdba4931b..ba60d72c3 100644
--- a/src/render/native/components/view/view_wrap.cpp
+++ b/src/render/native/components/view/view_wrap.cpp
@@ -14,6 +14,8 @@ WRAPPED_INSERT_CHILD(View,"View")
 WRAPPED_MOVE_TO_FRONT(View, "View")
 WRAPPED_MOVE_TO_BACKGROUND(View, "View")
 WRAPPED_SCROLL_INTO_VIEW(View, "View")
+WRAPPED_FOCUS(View, "View")
+WRAPPED_ADD_TO_FOCUS_GROUP(View, "View")
 WRAPPED_JS_CLOSE_COMPONENT(View, "View")
 
 static const JSCFunctionListEntry ComponentProtoFuncs[] = {
@@ -30,7 +32,9 @@ static const JSCFunctionListEntry ComponentProtoFuncs[] = {
     TJS_CFUNC_DEF("moveToFront", 0, NativeCompMoveToFront),
     TJS_CFUNC_DEF("moveToBackground", 0, NativeCompMoveToBackground),
     TJS_CFUNC_DEF("scrollIntoView", 0, NativeCompScrollIntoView),
+    TJS_CFUNC_DEF("focus", 0, NativeCompFocus),
     TJS_CFUNC_DEF("close", 0, NativeCompCloseComponent),
+    TJS_CFUNC_DEF("addToFocusGroup", 0, NativeCompAddToFocusGroup),
 };
 
 static const JSCFunctionListEntry ComponentClassFuncs[] = {
@@ -85,9 +89,8 @@ static JSValue ViewConstructor(JSContext *ctx, JSValueConst new_target, int argc
 
 static void ViewFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, ViewClassID);
-    LV_LOG_USER("View %s release", th->uid);
     if (th) {
-        delete static_cast<View*>(th->comp);
+        LV_LOG_USER("View %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/components/window/window.cpp b/src/render/native/components/window/window.cpp
index e83678d40..e4a40e4ff 100644
--- a/src/render/native/components/window/window.cpp
+++ b/src/render/native/components/window/window.cpp
@@ -2,25 +2,17 @@
 #include "window.hpp"
 
 lv_obj_t* GetWindowInstance () {
-    return window_instance;
+    return lv_scr_act();
 };
 
-// Window::Window(std::string uid): BasicComponent(uid) {
-//     this->uid = uid;
-//     this->instance = lv_obj_create(lv_scr_act());
-//     window_instance = this->instance;
-//     lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
-//     lv_obj_set_user_data(this->instance, this);
-//     // this->initStyle(LV_PART_MAIN);
-// };
+static void scrollbar_mode_event_cb(lv_event_t * e) {
+    lv_event_code_t code = lv_event_get_code(e);
+    if (code == LV_EVENT_CHILD_CREATED) {
+        lv_obj_t * child = (lv_obj_t *)lv_event_get_param(e);
+        if (child) lv_obj_set_scrollbar_mode(child, LV_SCROLLBAR_MODE_OFF);
+    }
+}
 
 void WindowInit () {
-    lv_disp_t* disp_default = lv_disp_get_default();
-    window_instance = lv_obj_create(lv_scr_act());
-    lv_group_add_obj(lv_group_get_default(), window_instance);
-    lv_obj_set_style_height(window_instance, disp_default->driver->ver_res, 0);
-    lv_obj_set_style_width(window_instance, disp_default->driver->hor_res, 0);
-    lv_obj_set_style_pad_all(window_instance, 0, 0);
-    lv_obj_set_style_radius(window_instance, 0, 0);
-    lv_obj_set_style_border_width(window_instance, 0, 0);
+    lv_obj_add_event_cb(lv_scr_act(), scrollbar_mode_event_cb, LV_EVENT_CHILD_CREATED, NULL);
 };
diff --git a/src/render/native/components/window/window.hpp b/src/render/native/components/window/window.hpp
index f8c6ad844..3b8003196 100644
--- a/src/render/native/components/window/window.hpp
+++ b/src/render/native/components/window/window.hpp
@@ -3,10 +3,3 @@
 
 #include "native/components/component.hpp"
 #include "native/core/basic/comp.hpp"
-
-static lv_obj_t* window_instance;
-
-// class Window : public BasicComponent {
-//  public:
-//   Window(std::string uid);
-// };
\ No newline at end of file
diff --git a/src/render/native/components/window/window_wrap.cpp b/src/render/native/components/window/window_wrap.cpp
index c6a8ed40e..b7fa3a1d4 100644
--- a/src/render/native/components/window/window_wrap.cpp
+++ b/src/render/native/components/window/window_wrap.cpp
@@ -73,9 +73,8 @@ static JSValue WindowConstructor(JSContext *ctx, JSValueConst new_target, int ar
 
 static void WindowFinalizer(JSRuntime *rt, JSValue val) {
     COMP_REF *th = (COMP_REF *)JS_GetOpaque(val, WindowClassID);
-    LV_LOG_USER("Window %s release", th->uid);
     if (th) {
-        delete static_cast<Window*>(th->comp);
+        LV_LOG_USER("Window %s release", th->uid);
         js_free_rt(rt, th);
     }
 };
diff --git a/src/render/native/core/animate/animate.cpp b/src/render/native/core/animate/animate.cpp
index 07b8828c1..a203737bd 100644
--- a/src/render/native/core/animate/animate.cpp
+++ b/src/render/native/core/animate/animate.cpp
@@ -100,6 +100,11 @@ static JSValue NativeAnimateStart(JSContext *ctx, JSValueConst this_val, int arg
         readycb_value = JS_GetPropertyStr(ctx, argv[0], "readyCbUid");
         use_native_value = JS_GetPropertyStr(ctx, argv[0], "useNative");
 
+        if (JS_IsNumber(uid_value)) {
+            JS_ToInt32(ctx, &uid, uid_value);
+            ref->uid = uid;
+        }
+
         if (animate_map.find(uid) != animate_map.end()) {
             animate = animate_map.at(uid);
         } else {
@@ -108,10 +113,6 @@ static JSValue NativeAnimateStart(JSContext *ctx, JSValueConst this_val, int arg
         }
         lv_anim_init(animate);
 
-        if (JS_IsNumber(uid_value)) {
-            JS_ToInt32(ctx, &uid, uid_value);
-            ref->uid = uid;
-        }
         if (JS_IsNumber(execcb_value)) {
             JS_ToInt32(ctx, &exec_uid, execcb_value);
             ref->exec_uid = exec_uid;
diff --git a/src/render/native/core/basic/comp.cpp b/src/render/native/core/basic/comp.cpp
index 7d26e20aa..e8269cf41 100644
--- a/src/render/native/core/basic/comp.cpp
+++ b/src/render/native/core/basic/comp.cpp
@@ -1,6 +1,7 @@
 #include "./comp.hpp"
 
 #include "native/core/utils/utils.hpp"
+#include "native/core/style/style.hpp"
 
 std::unordered_map<std::string, BasicComponent*> comp_map;
 
@@ -35,27 +36,38 @@ bool BasicComponent::isEventRegist(int eventType) {
     return this->registeEvents.count(eventType) > 0;
 };
 
-void BasicComponent::insertChildBefore(void *child) {
-    static_cast<BasicComponent*>(child)->parent_instance = this->instance;
-    if (!(static_cast<BasicComponent*>(child)->is_fixed) && (static_cast<BasicComponent*>(child)->type != COMP_TYPE_MASK)) {
-        lv_obj_t* ins = (static_cast<BasicComponent*>(child))->instance;
-        lv_obj_set_parent(ins, this->instance);
-        uint32_t index = lv_obj_get_index(ins);
-        lv_obj_move_to_index(ins, index);
+void BasicComponent::insertChildBefore(void *child, void *beforeChild) {
+    BasicComponent* childComp = static_cast<BasicComponent*>(child);    
+    BasicComponent* beforeChildComp = static_cast<BasicComponent*>(beforeChild);
+    childComp->parent_instance = this->instance;
+    if (!childComp->is_fixed && childComp->type != COMP_TYPE_MASK) {
+        lv_obj_set_parent(childComp->instance, this->instance);
+        uint32_t index = lv_obj_get_index(beforeChildComp->instance);
+        lv_obj_move_to_index(childComp->instance, index);
+        reorderFocusGroup(this->instance);
     }
 };
 
-void BasicComponent::removeChild(void* child) {
-    lv_obj_del_async((static_cast<BasicComponent*>(child))->instance);
-};
+void BasicComponent::removeChild(void* child) {};
 
 void BasicComponent::appendChild (void* child) {
-    static_cast<BasicComponent*>(child)->parent_instance = this->instance;
-    if (!(static_cast<BasicComponent*>(child)->is_fixed) && (static_cast<BasicComponent*>(child)->type != COMP_TYPE_MASK)) {
-        lv_obj_set_parent((static_cast<BasicComponent*>(child))->instance, this->instance);
+    BasicComponent* childComp = static_cast<BasicComponent*>(child);
+    childComp->parent_instance = this->instance;
+    if (!childComp->is_fixed && childComp->type != COMP_TYPE_MASK) {
+        lv_obj_set_parent(childComp->instance, this->instance);
     }
 };
 
+void BasicComponent::focus () {
+    if (!this->instance) return;
+    lv_group_t* def_group = lv_group_get_default();
+    if (def_group) {
+        lv_group_focus_obj(this->instance);
+    } else {
+        lv_obj_add_state(this->instance, LV_STATE_FOCUSED);
+    }
+}
+
 void BasicComponent::initCompStyle (int32_t type) {
 
 };
@@ -127,9 +139,9 @@ void BasicComponent::setTransition (JSContext* ctx, JSValue obj, lv_style_t* sty
 
 bool BasicComponent::ensureStyle (int32_t type) {
     lv_style_t* style;
-    bool is_new;
+    bool is_new = false;
     if (this->style_map.find(type) != this->style_map.end()) {
-        
+        // style already exists
     } else {
         style = static_cast<lv_style_t*>(style_pool.allocate());
         style_map[type] = style;
@@ -156,18 +168,22 @@ void BasicComponent::setStyle(JSContext* ctx, JSValue& obj, std::vector<std::str
     //     this->initStyle(type);
     // }
 
-    for(int i=0; i < keys.size(); i++) {
+    for(size_t i=0; i < keys.size(); i++) {
         std::string key = keys[i];
 
         if (StyleManager::styles.count(key) > 0) {
-            CompSetStyle* func = StyleManager::styles.at(key);
+            const StyleEntryWrapper& wrapper = StyleManager::styles.at(key);
             JSValue value = JS_GetPropertyStr(ctx, obj, key.c_str());
-            func(this->instance, style, ctx, value);
+            if (wrapper.type == StyleEntryType::SIMPLE) {
+                ApplySimpleStyle(this->instance, style, ctx, value, wrapper.entry.simple);
+            } else {
+                wrapper.entry.complex(this->instance, style, ctx, value);
+            }
             JS_FreeValue(ctx, value);
         }
     }
 
-    for(int i=0; i < keys.size(); i++) {
+    for(size_t i=0; i < keys.size(); i++) {
         std::string key = keys[i];
         if (key == "transition") {
             JSValue value = JS_GetPropertyStr(ctx, obj, key.c_str());
@@ -255,8 +271,18 @@ BasicComponent::~BasicComponent () {
     if (ptr2) {
         free((lv_coord_t*)(ptr2));
     }
-    // do not del here, remove child will do the action
-    // lv_obj_del(this->instance);
+
+    for(auto& trans : this->trans_props_map)
+        if (trans.second != nullptr)
+            free(trans.second);
+
+    for(auto &style : style_map) {
+        lv_style_reset(style.second);
+        style_pool.deallocate(style.second);
+    }
+
+    lv_obj_remove_event_cb(instance, &BasicComponent::EventCallback);
+    lv_obj_del(this->instance);
 };
 
 void BasicComponent::setAlign (int32_t align_type, int32_t x, int32_t y) {
diff --git a/src/render/native/core/basic/comp.hpp b/src/render/native/core/basic/comp.hpp
index cc96f0180..9d4c44a16 100644
--- a/src/render/native/core/basic/comp.hpp
+++ b/src/render/native/core/basic/comp.hpp
@@ -39,7 +39,7 @@ enum ECOMP_TYPE {
 class BasicComponent {
   public:
     BasicComponent(std::string& uid);
-    ~BasicComponent();
+    virtual ~BasicComponent();
 
     lv_obj_t* instance = nullptr;
     lv_obj_t* parent_instance = nullptr;  // used to style position: fixed to normal position
@@ -79,11 +79,12 @@ class BasicComponent {
 
     void appendChild(void* child);
     void removeChild(void* child);
-    void insertChildBefore(void *child);
+    void insertChildBefore(void *child, void *beforeChild);
 
     void moveToFront ();
     void moveToBackground ();
     void scrollIntoView ();
+    void focus ();
 
     void setAlign (int32_t align_type, int32_t x, int32_t y);
     void setAlignTo (int32_t align_type, int32_t x, int32_t y, BasicComponent* parent);
diff --git a/src/render/native/core/event/click/click.cpp b/src/render/native/core/event/click/click.cpp
index ca7c3cd8f..89accb727 100644
--- a/src/render/native/core/event/click/click.cpp
+++ b/src/render/native/core/event/click/click.cpp
@@ -27,6 +27,8 @@ static JSValue GetPressedPoint (JSContext* ctx, JSValueConst this_val) {
             if(value_num == LV_CHART_POINT_NONE) break;
             return JS_NewInt32(ctx, value_num);
             break;
+        default:
+            break;
     }
 
     return JS_UNDEFINED;
@@ -40,7 +42,7 @@ static JSValue GetPressedPointPos (JSContext* ctx, JSValueConst this_val) {
 
     switch (comp_type)
     {
-        case COMP_TYPE_CHART:
+        case COMP_TYPE_CHART: {
             id = lv_chart_get_pressed_point(comp->instance);
             if(id == LV_CHART_POINT_NONE) break;
             JSValue result = JS_NewArray(ctx);
@@ -63,6 +65,9 @@ static JSValue GetPressedPointPos (JSContext* ctx, JSValueConst this_val) {
 
             return result;
             break;
+        }
+        default:
+            break;
     }
 
     return JS_UNDEFINED;
diff --git a/src/render/native/core/event/event.hpp b/src/render/native/core/event/event.hpp
index 4c25065f1..2d9db91c1 100644
--- a/src/render/native/core/event/event.hpp
+++ b/src/render/native/core/event/event.hpp
@@ -56,6 +56,7 @@ static std::map<lv_event_code_t, EventWrapFunc> WrapEventDict {
         if (ref) {                                                                                                                    \
             ref->stop_bubbling = 1;                                                                                                   \
         }                                                                                                                             \
+        return JS_UNDEFINED;                                                                                                          \
     };                                                                                                                                \
                                                                                                                                       \
 
diff --git a/src/render/native/core/event/select/select.cpp b/src/render/native/core/event/select/select.cpp
index 37aa3db0e..3e32ce76a 100644
--- a/src/render/native/core/event/select/select.cpp
+++ b/src/render/native/core/event/select/select.cpp
@@ -27,6 +27,8 @@ static JSValue GetValue (JSContext* ctx, JSValueConst this_val) {
             if(value_num == LV_CHART_POINT_NONE) break;
             return JS_NewInt32(ctx, value_num);
             break;
+        default:
+            break;
     }
 
     return JS_UNDEFINED;
diff --git a/src/render/native/core/event/value_change/value_change.cpp b/src/render/native/core/event/value_change/value_change.cpp
index a72056a88..f20f73011 100644
--- a/src/render/native/core/event/value_change/value_change.cpp
+++ b/src/render/native/core/event/value_change/value_change.cpp
@@ -70,7 +70,7 @@ static JSValue GetValue (JSContext* ctx, JSValueConst this_val) {
             lv_roller_get_selected_str(comp->instance, buf, sizeof(buf));
             return JS_NewString(ctx, buf);
 
-        case COMP_TYPE_CALENDAR:
+        case COMP_TYPE_CALENDAR: {
             lv_calendar_date_t date;
             std::string result;
             lv_calendar_get_pressed_date(comp->instance, &date);
@@ -80,6 +80,9 @@ static JSValue GetValue (JSContext* ctx, JSValueConst this_val) {
             result.append("-");
             result.append(std::to_string(date.day));
             return JS_NewString(ctx, result.c_str());
+        }
+        default:
+            break;
     }
 
     return JS_UNDEFINED;
diff --git a/src/render/native/core/focus_group/focus_group.cpp b/src/render/native/core/focus_group/focus_group.cpp
new file mode 100644
index 000000000..7c759b70d
--- /dev/null
+++ b/src/render/native/core/focus_group/focus_group.cpp
@@ -0,0 +1,78 @@
+#include "focus_group.hpp"
+#include "engine.hpp"
+
+static JSValue js_edge_callback = JS_UNDEFINED;
+static JSContext* stored_ctx = nullptr;
+
+static void focus_group_edge_cb(lv_group_t* group, bool is_next) {
+    if (stored_ctx == nullptr || JS_IsUndefined(js_edge_callback)) {
+        return;
+    }
+
+    JSValue argv[1];
+    argv[0] = JS_NewBool(stored_ctx, is_next);
+
+    JSValue ret = JS_Call(stored_ctx, js_edge_callback, JS_NULL, 1, argv);
+    if (JS_IsException(ret)) {
+        TJSRuntime* qrt = GetRuntime();
+        tjs_dump_error(qrt->ctx);
+    }
+    
+    JS_FreeValue(stored_ctx, ret);
+    JS_FreeValue(stored_ctx, argv[0]);
+}
+
+static JSValue NativeSetFocusGroupEdgeCallback(JSContext* ctx, JSValueConst this_val, int argc, JSValueConst* argv) {
+    if (argc < 1) {
+        return JS_UNDEFINED;
+    }
+
+    if (!JS_IsUndefined(js_edge_callback)) {
+        JS_FreeValue(stored_ctx, js_edge_callback);
+    }
+
+    stored_ctx = ctx;
+
+    if (JS_IsNull(argv[0]) || JS_IsUndefined(argv[0])) {
+        js_edge_callback = JS_UNDEFINED;
+        lv_group_t* def_group = lv_group_get_default();
+        if (def_group) {
+            lv_group_set_edge_cb(def_group, NULL);
+        }
+        return JS_UNDEFINED;
+    }
+
+    js_edge_callback = JS_DupValue(ctx, argv[0]);
+
+    lv_group_t* def_group = lv_group_get_default();
+    if (def_group) {
+        lv_group_set_edge_cb(def_group, focus_group_edge_cb);
+    }
+
+    return JS_UNDEFINED;
+}
+
+static JSValue NativeSetFocusGroupWrap(JSContext* ctx, JSValueConst this_val, int argc, JSValueConst* argv) {
+    if (argc < 1) {
+        return JS_UNDEFINED;
+    }
+
+    bool wrap = JS_ToBool(ctx, argv[0]);
+    lv_group_t* def_group = lv_group_get_default();
+    if (def_group) {
+        lv_group_set_wrap(def_group, wrap);
+    }
+
+    return JS_UNDEFINED;
+}
+
+static const JSCFunctionListEntry focus_group_funcs[] = {
+    TJS_CFUNC_DEF("setEdgeCallback", 1, NativeSetFocusGroupEdgeCallback),
+    TJS_CFUNC_DEF("setWrap", 1, NativeSetFocusGroupWrap),
+};
+
+void NativeFocusGroupInit(JSContext* ctx, JSValue& ns) {
+    JSValue obj = JS_NewObject(ctx);
+    JS_SetPropertyFunctionList(ctx, obj, focus_group_funcs, sizeof(focus_group_funcs) / sizeof(focus_group_funcs[0]));
+    JS_SetPropertyStr(ctx, ns, "FocusGroup", obj);
+}
diff --git a/src/render/native/core/focus_group/focus_group.hpp b/src/render/native/core/focus_group/focus_group.hpp
new file mode 100644
index 000000000..38478cddd
--- /dev/null
+++ b/src/render/native/core/focus_group/focus_group.hpp
@@ -0,0 +1,9 @@
+#pragma once
+
+extern "C" {
+    #include "lvgl.h"
+    #include "private.h"
+    #include "utils.h"
+};
+
+void NativeFocusGroupInit(JSContext* ctx, JSValue& ns);
diff --git a/src/render/native/core/img/img.cpp b/src/render/native/core/img/img.cpp
index 326085d31..64da77154 100644
--- a/src/render/native/core/img/img.cpp
+++ b/src/render/native/core/img/img.cpp
@@ -29,7 +29,6 @@ uint8_t* GetImgDesc (uint8_t* buf, size_t len, lv_img_dsc_t_1* image_desc) {
         return nullptr;
     }
     
-    lv_img_dsc_t_1* prev_desc = image_desc;
     image_desc->type = image_type;
 
     image_desc->header.always_zero = 0;
diff --git a/src/render/native/core/img/png/lodepng.cpp b/src/render/native/core/img/png/lodepng.cpp
index eafbb9a9b..5b2c8e443 100644
--- a/src/render/native/core/img/png/lodepng.cpp
+++ b/src/render/native/core/img/png/lodepng.cpp
@@ -612,7 +612,7 @@ static unsigned readBits(LodePNGBitReader* reader, size_t nbits) {
 }
 
 /* Public for testing only. steps and result must have numsteps values. */
-static unsigned lode_png_test_bitreader(const unsigned char* data, size_t size,
+[[maybe_unused]] static unsigned lode_png_test_bitreader(const unsigned char* data, size_t size,
                                  size_t numsteps, const size_t* steps, unsigned* result) {
   size_t i;
   LodePNGBitReader reader;
diff --git a/src/render/native/core/style/style.cpp b/src/render/native/core/style/style.cpp
index b4836d10c..ec2563872 100644
--- a/src/render/native/core/style/style.cpp
+++ b/src/render/native/core/style/style.cpp
@@ -11,159 +11,24 @@ static std::unordered_map<std::string, lv_anim_path_cb_t> transition_funcs = {
     { "step", &lv_anim_path_step },
 };
 
-static void CompSetWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_width(style, static_cast<int16_t>(width));
-};
-
-static void CompSetMaxWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_max_width(style, static_cast<int16_t>(width));
-};
-
-static void CompSetMinWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_min_width(style, static_cast<int16_t>(width));
-};
-
-static void CompSetMaxWidthPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_max_width(style, lv_pct(static_cast<int16_t>(width)));
-};
-
-static void CompSetMinWidthPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_min_width(style, lv_pct(static_cast<int16_t>(width)));
-};
-
-static void CompSetWidthPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_width(style, lv_pct(static_cast<int16_t>(width)));
-};
-
-static void CompSetHeight (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_height(style, static_cast<int16_t>(height));
-};
-
-static void CompSetHeightPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_height(style, lv_pct(static_cast<int16_t>(height)));
-};
-
-static void CompSetMaxHeight (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_max_height(style, static_cast<int16_t>(height));
-};
-
-static void CompSetMaxHeightPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_max_height(style, lv_pct(static_cast<int16_t>(height)));
-};
-
-static void CompSetMinHeight (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_min_height(style, static_cast<int16_t>(height));
-};
-
-static void CompSetMinHeightPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int height;
-    JS_ToInt32(ctx, &height, obj);
-    lv_style_set_min_height(style, lv_pct(static_cast<int16_t>(height)));
-};
-
-static void CompSetX (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-    lv_style_set_x(style, static_cast<int16_t>(x));
-};
-
-static void CompSetXPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-    lv_style_set_x(style, lv_pct(static_cast<int16_t>(x)));
-};
-
-static void CompSetY (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-    lv_style_set_y(style, static_cast<int16_t>(y));
-};
-
-static void CompSetYPch (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-    lv_style_set_y(style, lv_pct(static_cast<int16_t>(y)));
-};
-
-static void CompSetBackgroundColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_bg_color(style, lv_color_hex(y));
-};
-
-static void CompSetBackgroundOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_bg_opa(style, y);
-};
-
-static void CompSetBackgroundGradColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_bg_grad_color(style, lv_color_hex(y));
-};
-
-static void CompSetBackgroundGradColorDir (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_bg_grad_dir(style, y);
-};
-
-static void CompSetArcWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int width;
-    JS_ToInt32(ctx, &width, obj);
-    lv_style_set_arc_width(style, static_cast<int16_t>(width));
-};
-
-static void CompSetArcRounded (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    bool rounded = JS_ToBool(ctx, obj);
-    lv_style_set_arc_rounded(style, static_cast<bool>(rounded));
-};
-
-static void CompSetArcColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int color;
-    JS_ToInt32(ctx, &color, obj);
-    lv_style_set_arc_color(style, lv_color_hex(color));
-};
-
-static void CompSetArcOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int opacity;
-    JS_ToInt32(ctx, &opacity, obj);
-    lv_style_set_arc_opa(style, static_cast<int16_t>(opacity));
-};
-
-static void CompSetBorderRadius (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
+void ApplySimpleStyle(lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj, const StylePropConfig& config) {
     int x;
     JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_radius(style, x);
-};
+    
+    lv_style_value_t v;
+    switch (config.type) {
+        case StyleValueType::NUM:
+            v.num = x;
+            break;
+        case StyleValueType::COLOR:
+            v.color = lv_color_hex(x);
+            break;
+        case StyleValueType::PCT:
+            v.num = lv_pct(static_cast<int16_t>(x));
+            break;
+    }
+    lv_style_set_prop(style, config.prop, v);
+}
 
 static void CompSetDisplay (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
     size_t len;
@@ -207,7 +72,7 @@ static void CompSetFlexGrow (lv_obj_t* comp, lv_style_t* style, JSContext* ctx,
     int x;
     JS_ToInt32(ctx, &x, obj);
 
-    lv_style_set_flex_grow(style, static_cast<lv_flex_flow_t>(x));
+    lv_style_set_flex_grow(style, static_cast<uint8_t>(x));
 };
 
 static void CompSetFlexFlow (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
@@ -238,89 +103,6 @@ static void CompSetAlignContent (lv_obj_t* comp, lv_style_t* style, JSContext* c
     lv_style_set_flex_track_place(style, static_cast<lv_flex_align_t>(x));
 };
 
-static void CompSetPaddingLeft (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_pad_left(style, x);
-};
-
-static void CompSetPaddingRight (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_pad_right(style, x);
-};
-
-static void CompSetPaddingBottom (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_pad_bottom(style, x);
-};
-
-static void CompSetPaddingTop (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_pad_top(style, x);
-};
-
-static void CompSetBorderWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_border_width(style, x);
-};
-
-static void CompSetBorderOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_border_opa(style, x);
-};
-
-static void CompSetBorderColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_border_color(style, lv_color_hex(x));
-};
-
-static void CompSetBorderSide (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_border_side(style, x);
-};
-
-static void CompSetOutlineWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_outline_width(style, x);
-};
-
-static void CompSetOutlineOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_outline_opa(style, x);
-};
-
-static void CompSetOutlineColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_outline_color(style, lv_color_hex(x));
-};
-
-static void CompSetOutlinePadding (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_outline_pad(style, x);
-};
 
 static void CompSetTextOverFLow (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
     int x;
@@ -329,34 +111,6 @@ static void CompSetTextOverFLow (lv_obj_t* comp, lv_style_t* style, JSContext* c
     lv_label_set_long_mode(comp, x);
 };
 
-static void CompSetLetterSpacing (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_text_letter_space(style, x);
-};
-
-static void CompSetLineSpacing (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_text_line_space(style, x);
-};
-
-static void CompSetTextAlign (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_text_align(style, x);
-};
-
-static void CompSetDecoration (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_text_decor(style, x);
-};
-
 static void CompSetOverFlowScrolling (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
     int x;
     JS_ToInt32(ctx, &x, obj);
@@ -404,55 +158,6 @@ static void CompScrollEnableSnap (lv_obj_t* comp, lv_style_t* style, JSContext*
     }
 };
 
-static void CompSetOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_opa(style, x);
-};
-
-static void CompSetImgOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_img_opa(style, x);
-};
-
-static void CompRecolorOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_img_recolor_opa(style, x);
-};
-
-static void CompSetTranslateX (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_translate_x(style, x);
-};
-
-static void CompSetTranslateY (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_translate_y(style, x);
-};
-
-static void CompSetScale (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_transform_zoom(style, x);
-};
-
-static void CompSetRotate (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_transform_angle(style, x);
-};
-
 static void CompSetImgScale (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
     int x;
     JS_ToInt32(ctx, &x, obj);
@@ -501,27 +206,6 @@ static void CompSetChartScaleY (lv_obj_t* comp, lv_style_t* style, JSContext* ct
     lv_chart_set_zoom_y(comp, x);
 };
 
-static void CompSetTransformWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_transform_width(style, x);
-};
-
-static void CompSetTransformHeight (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_transform_height(style, x);
-};
-
-static void CompSetStyleTransitionTime (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_anim_time(style, x);
-};
-
 void CompSetTransition (
     lv_style_t* style,
     lv_style_transition_dsc_t* trans, 
@@ -562,8 +246,8 @@ void CompSetAnimation (
 
     dura_value = JS_GetPropertyStr(ctx, obj, "duration");
     if (JS_IsNumber(dura_value)) {
-        lv_anim_set_time(animate, duration);
         JS_ToInt32(ctx, &duration, dura_value);
+        lv_anim_set_time(animate, duration);
     }
     JS_FreeValue(ctx, dura_value);
 
@@ -587,97 +271,6 @@ void CompSetAnimation (
     lv_anim_start(animate);
 };
 
-static void CompSetTextColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_text_color(style, lv_color_hex(y));
-};
-
-static void CompSetRecolor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_img_recolor(style, lv_color_hex(y));
-};
-
-static void CompSetRowSpacing (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_pad_row(style, y);
-};
-
-static void CompSetColumnSpacing (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_pad_column(style, y);
-};
-
-static void CompSetLineWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int y;
-    JS_ToInt32(ctx, &y, obj);
-
-    lv_style_set_line_width(style, y);
-};
-
-static void CompSetLineColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_line_color(style, lv_color_hex(x));
-};
-
-static void CompSetLineRounded (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_line_rounded(style, x);
-};
-
-static void CompSetShadowWidth (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_width(style, x);
-};
-
-static void CompSetShadowColor (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_color(style, lv_color_hex(x));
-};
-
-static void CompSetShadowSpread (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_spread(style, x);
-};
-
-static void CompSetShadowOpacity (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_opa(style, x);
-};
-
-static void CompSetOffsetX (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_ofs_x(style, x);
-};
-
-static void CompSetOffsetY (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    int x;
-    JS_ToInt32(ctx, &x, obj);
-
-    lv_style_set_shadow_ofs_y(style, x);
-};
-
 static void CompSetPosition (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
     size_t len;
     const char* str = JS_ToCStringLen(ctx, &len, obj);
@@ -702,7 +295,7 @@ static void CompSetPosition (lv_obj_t* comp, lv_style_t* style, JSContext* ctx,
 };
 
 static void CompGridColumnRow (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    if (JS_IsArray(ctx, obj)) {
+    if (JS_IsArray(obj)) {
         BasicComponent* instance = static_cast<BasicComponent*>(lv_obj_get_user_data(comp));
         const lv_coord_t* old_ptr1 = instance->grid_column_desc;
         const lv_coord_t* old_ptr2 = instance->grid_row_desc;
@@ -754,7 +347,7 @@ static void CompGridColumnRow (lv_obj_t* comp, lv_style_t* style, JSContext* ctx
 };
 
 static void CompSetGridChild (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    if (JS_IsArray(ctx, obj)) {
+    if (JS_IsArray(obj)) {
         JSValue JSValue1 = JS_GetPropertyUint32(ctx, obj, 0);
         JSValue JSValue2 = JS_GetPropertyUint32(ctx, obj, 1);
         JSValue JSValue3 = JS_GetPropertyUint32(ctx, obj, 2);
@@ -786,7 +379,7 @@ static void CompSetGridChild (lv_obj_t* comp, lv_style_t* style, JSContext* ctx,
 };
 
 static void CompsetGridAlign (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
-    if (JS_IsArray(ctx, obj)) {
+    if (JS_IsArray(obj)) {
         JSValue JSValue1 = JS_GetPropertyUint32(ctx, obj, 0);
         JSValue JSValue2 = JS_GetPropertyUint32(ctx, obj, 1);
 
@@ -801,128 +394,111 @@ static void CompsetGridAlign (lv_obj_t* comp, lv_style_t* style, JSContext* ctx,
     }
 };
 
-std::unordered_map<std::string, CompSetStyle*> StyleManager::styles {
-    /* size && position */
-    {"width", &CompSetWidth},
-    {"max-width", &CompSetMaxWidth},
-    {"max-width_pct", &CompSetMaxWidthPch},
-    {"min-width", &CompSetMinWidth},
-    {"min-width_pct", &CompSetMinWidthPch},
-    {"height", &CompSetHeight},
-    {"max-height", &CompSetMaxHeight},
-    {"max-height_pct", &CompSetMaxHeightPch},
-    {"min-height", &CompSetMinHeight},
-    {"min-height_pct", &CompSetMinHeightPch},
-    {"left", &CompSetX},
-    {"top", &CompSetY},
-    {"width_pct", &CompSetWidthPch},
-    {"height_pct", &CompSetHeightPch},
-    {"left_pct", &CompSetXPch},
-    {"top_pct", &CompSetYPch},
-
-    /* background */
-    {"background-color", &CompSetBackgroundColor},
-    {"background-opacity", &CompSetBackgroundOpacity},
-    {"background-grad-color", &CompSetBackgroundGradColor},
-    {"background-grad-color-dir", &CompSetBackgroundGradColorDir},
-
-    /* border-radius */
-    {"border-radius", &CompSetBorderRadius},
-
-    /* arc */
-    {"arc-width", &CompSetArcWidth},
-    {"arc-rounded", &CompSetArcRounded},
-    {"arc-color", &CompSetArcColor},
-    {"arc-opacity", &CompSetArcOpacity},
-
-    /* layout */
-    {"display", &CompSetDisplay},
-    {"flex-align", &CompSetFlexAlign},
-    {"flex-flow", &CompSetFlexFlow},
-    {"flex-grow", &CompSetFlexGrow},
-    {"justify-content", &CompSetJustifyContent},
-    {"align-items", &CompSetAlignItems},
-    {"align-content", &CompSetAlignContent},
-
-    /* padding */
-    {"padding-left", &CompSetPaddingLeft},
-    {"padding-right", &CompSetPaddingRight},
-    {"padding-bottom", &CompSetPaddingBottom},
-    {"padding-top", &CompSetPaddingTop},
-
-    /* border */
-    {"border-width", &CompSetBorderWidth},
-    {"border-opacity", &CompSetBorderOpacity},
-    {"border-color", &CompSetBorderColor},
-    {"border-side", &CompSetBorderSide},
-
-    /* outline */
-    {"outline-width", &CompSetOutlineWidth},
-    {"outline-opacity", &CompSetOutlineOpacity},
-    {"outline-color", &CompSetOutlineColor},
-    {"outline-padding", &CompSetOutlinePadding},
-
-    /* font */
-    {"font-size", &CompSetFontSize},
-    {"font-size-1", &CompSetFontSize1},
-    {"text-overflow", &CompSetTextOverFLow},
-    {"letter-spacing", &CompSetLetterSpacing},
-    {"text-align", &CompSetTextAlign},
-    {"text-decoration", &CompSetDecoration},
-    {"line-spacing", &CompSetLineSpacing},
-
-    /* scroll */
-    {"overflow-scrolling", &CompSetOverFlowScrolling},
-    {"overflow", &CompSetOverflow},
-    {"scroll-snap-x", &CompSetScrollSnapX},
-    {"scroll-snap-y", &CompSetScrollSnapY},
-    {"scroll-enable-snap", &CompScrollEnableSnap},
-
-    /* opacity */
-    {"opacity", &CompSetOpacity},
-    {"img-opacity", &CompSetImgOpacity},
-    {"recolor-opacity", &CompRecolorOpacity},
-
-    /* transform */
-    {"translateX", &CompSetTranslateX},
-    {"translateY", &CompSetTranslateY},
-    {"scale", &CompSetScale},
-    {"rotate", &CompSetRotate},
-    {"img-scale", &CompSetImgScale},
-    {"img-rotate", &CompSetImgRotate},
-    {"img-origin", &CompSetTransformOrigin},
-    {"chart-scaleX", &CompSetChartScaleX},
-    {"chart-scaleY", &CompSetChartScaleY},
-    {"transform-width", &CompSetTransformWidth},
-    {"transform-height", &CompSetTransformHeight},
-    {"style-transition-time", &CompSetStyleTransitionTime},
-
-    /* color */
-    {"text-color", &CompSetTextColor},
-    {"recolor", &CompSetRecolor},
-
-    /* spacing */
-    {"row-spacing", &CompSetRowSpacing},
-    {"column-spacing", &CompSetColumnSpacing},
+std::unordered_map<std::string, StyleEntryWrapper> StyleManager::styles {
+    {"width",           StyleEntryWrapper({LV_STYLE_WIDTH,        StyleValueType::NUM})},
+    {"max-width",       StyleEntryWrapper({LV_STYLE_MAX_WIDTH,    StyleValueType::NUM})},
+    {"min-width",       StyleEntryWrapper({LV_STYLE_MIN_WIDTH,    StyleValueType::NUM})},
+    {"height",          StyleEntryWrapper({LV_STYLE_HEIGHT,       StyleValueType::NUM})},
+    {"max-height",      StyleEntryWrapper({LV_STYLE_MAX_HEIGHT,   StyleValueType::NUM})},
+    {"min-height",      StyleEntryWrapper({LV_STYLE_MIN_HEIGHT,   StyleValueType::NUM})},
+    {"left",            StyleEntryWrapper({LV_STYLE_X,            StyleValueType::NUM})},
+    {"top",             StyleEntryWrapper({LV_STYLE_Y,            StyleValueType::NUM})},
+    
+    {"width_pct",       StyleEntryWrapper({LV_STYLE_WIDTH,        StyleValueType::PCT})},
+    {"height_pct",      StyleEntryWrapper({LV_STYLE_HEIGHT,       StyleValueType::PCT})},
+    {"left_pct",        StyleEntryWrapper({LV_STYLE_X,           StyleValueType::PCT})},
+    {"top_pct",         StyleEntryWrapper({LV_STYLE_Y,           StyleValueType::PCT})},
+    {"max-width_pct",   StyleEntryWrapper({LV_STYLE_MAX_WIDTH,    StyleValueType::PCT})},
+    {"min-width_pct",   StyleEntryWrapper({LV_STYLE_MIN_WIDTH,    StyleValueType::PCT})},
+    {"max-height_pct",  StyleEntryWrapper({LV_STYLE_MAX_HEIGHT,   StyleValueType::PCT})},
+    {"min-height_pct",  StyleEntryWrapper({LV_STYLE_MIN_HEIGHT,   StyleValueType::PCT})},
+    
+    {"background-color",        StyleEntryWrapper({LV_STYLE_BG_COLOR,         StyleValueType::COLOR})},
+    {"background-opacity",      StyleEntryWrapper({LV_STYLE_BG_OPA,           StyleValueType::NUM})},
+    {"background-grad-color",   StyleEntryWrapper({LV_STYLE_BG_GRAD_COLOR,    StyleValueType::COLOR})},
+    {"background-grad-color-dir", StyleEntryWrapper({LV_STYLE_BG_GRAD_DIR,    StyleValueType::NUM})},
+    
+    {"border-radius",   StyleEntryWrapper({LV_STYLE_RADIUS,       StyleValueType::NUM})},
+    
+    {"arc-width",       StyleEntryWrapper({LV_STYLE_ARC_WIDTH,    StyleValueType::NUM})},
+    {"arc-rounded",     StyleEntryWrapper({LV_STYLE_ARC_ROUNDED,  StyleValueType::NUM})},
+    {"arc-color",       StyleEntryWrapper({LV_STYLE_ARC_COLOR,    StyleValueType::COLOR})},
+    {"arc-opacity",     StyleEntryWrapper({LV_STYLE_ARC_OPA,      StyleValueType::NUM})},
+    
+    {"display",         StyleEntryWrapper(&CompSetDisplay)},
+    {"flex-align",      StyleEntryWrapper(&CompSetFlexAlign)},
+    {"flex-flow",       StyleEntryWrapper(&CompSetFlexFlow)},
+    {"flex-grow",       StyleEntryWrapper(&CompSetFlexGrow)},
+    {"justify-content", StyleEntryWrapper(&CompSetJustifyContent)},
+    {"align-items",     StyleEntryWrapper(&CompSetAlignItems)},
+    {"align-content",    StyleEntryWrapper(&CompSetAlignContent)},
+    
+    {"padding-left",    StyleEntryWrapper({LV_STYLE_PAD_LEFT,     StyleValueType::NUM})},
+    {"padding-right",   StyleEntryWrapper({LV_STYLE_PAD_RIGHT,    StyleValueType::NUM})},
+    {"padding-bottom",  StyleEntryWrapper({LV_STYLE_PAD_BOTTOM,   StyleValueType::NUM})},
+    {"padding-top",     StyleEntryWrapper({LV_STYLE_PAD_TOP,      StyleValueType::NUM})},
+    
+    {"border-width",    StyleEntryWrapper({LV_STYLE_BORDER_WIDTH, StyleValueType::NUM})},
+    {"border-opacity",  StyleEntryWrapper({LV_STYLE_BORDER_OPA,   StyleValueType::NUM})},
+    {"border-color",    StyleEntryWrapper({LV_STYLE_BORDER_COLOR, StyleValueType::COLOR})},
+    {"border-side",     StyleEntryWrapper({LV_STYLE_BORDER_SIDE,  StyleValueType::NUM})},
+    
+    {"outline-width",   StyleEntryWrapper({LV_STYLE_OUTLINE_WIDTH, StyleValueType::NUM})},
+    {"outline-opacity", StyleEntryWrapper({LV_STYLE_OUTLINE_OPA,   StyleValueType::NUM})},
+    {"outline-color",   StyleEntryWrapper({LV_STYLE_OUTLINE_COLOR, StyleValueType::COLOR})},
+    {"outline-padding", StyleEntryWrapper({LV_STYLE_OUTLINE_PAD,   StyleValueType::NUM})},
+    
+    {"font-size",       StyleEntryWrapper(&CompSetFontSize)},
+    {"font-size-1",    StyleEntryWrapper(&CompSetFontSize1)},
+    {"text-overflow",   StyleEntryWrapper(&CompSetTextOverFLow)},
+    {"letter-spacing",  StyleEntryWrapper({LV_STYLE_TEXT_LETTER_SPACE, StyleValueType::NUM})},
+    {"text-align",      StyleEntryWrapper({LV_STYLE_TEXT_ALIGN,        StyleValueType::NUM})},
+    {"text-decoration", StyleEntryWrapper({LV_STYLE_TEXT_DECOR,        StyleValueType::NUM})},
+    {"line-spacing",    StyleEntryWrapper({LV_STYLE_TEXT_LINE_SPACE,   StyleValueType::NUM})},
+    
+    {"overflow-scrolling", StyleEntryWrapper(&CompSetOverFlowScrolling)},
+    {"overflow",        StyleEntryWrapper(&CompSetOverflow)},
+    {"scroll-snap-x",   StyleEntryWrapper(&CompSetScrollSnapX)},
+    {"scroll-snap-y",   StyleEntryWrapper(&CompSetScrollSnapY)},
+    {"scroll-enable-snap", StyleEntryWrapper(&CompScrollEnableSnap)},
+    
+    {"opacity",         StyleEntryWrapper({LV_STYLE_OPA,          StyleValueType::NUM})},
+    {"img-opacity",     StyleEntryWrapper({LV_STYLE_IMG_OPA,      StyleValueType::NUM})},
+    {"recolor-opacity", StyleEntryWrapper({LV_STYLE_IMG_RECOLOR_OPA, StyleValueType::NUM})},
+    
+    {"translateX",      StyleEntryWrapper({LV_STYLE_TRANSLATE_X,  StyleValueType::NUM})},
+    {"translateY",      StyleEntryWrapper({LV_STYLE_TRANSLATE_Y,  StyleValueType::NUM})},
+    {"scale",           StyleEntryWrapper({LV_STYLE_TRANSFORM_ZOOM, StyleValueType::NUM})},
+    {"rotate",          StyleEntryWrapper({LV_STYLE_TRANSFORM_ANGLE, StyleValueType::NUM})},
+    {"img-scale",       StyleEntryWrapper(&CompSetImgScale)},
+    {"img-rotate",      StyleEntryWrapper(&CompSetImgRotate)},
+    {"img-origin",      StyleEntryWrapper(&CompSetTransformOrigin)},
+    {"chart-scaleX",    StyleEntryWrapper(&CompSetChartScaleX)},
+    {"chart-scaleY",    StyleEntryWrapper(&CompSetChartScaleY)},
+    {"transform-width", StyleEntryWrapper({LV_STYLE_TRANSFORM_WIDTH, StyleValueType::NUM})},
+    {"transform-height", StyleEntryWrapper({LV_STYLE_TRANSFORM_HEIGHT, StyleValueType::NUM})},
+    {"transition-time", StyleEntryWrapper({LV_STYLE_ANIM_TIME, StyleValueType::NUM})},
+    
+    {"text-color",      StyleEntryWrapper({LV_STYLE_TEXT_COLOR,   StyleValueType::COLOR})},
+    {"recolor",         StyleEntryWrapper({LV_STYLE_IMG_RECOLOR,  StyleValueType::COLOR})},
+    
+    {"row-spacing",     StyleEntryWrapper({LV_STYLE_PAD_ROW,      StyleValueType::NUM})},
+    {"column-spacing",  StyleEntryWrapper({LV_STYLE_PAD_COLUMN,   StyleValueType::NUM})},
+    
+    {"line-width",      StyleEntryWrapper({LV_STYLE_LINE_WIDTH,   StyleValueType::NUM})},
+    {"line-color",      StyleEntryWrapper({LV_STYLE_LINE_COLOR,   StyleValueType::COLOR})},
+    {"line-rounded",    StyleEntryWrapper({LV_STYLE_LINE_ROUNDED, StyleValueType::NUM})},
+    
+    {"shadow-width",    StyleEntryWrapper({LV_STYLE_SHADOW_WIDTH, StyleValueType::NUM})},
+    {"shadow-color",    StyleEntryWrapper({LV_STYLE_SHADOW_COLOR, StyleValueType::COLOR})},
+    {"shadow-spread",   StyleEntryWrapper({LV_STYLE_SHADOW_SPREAD, StyleValueType::NUM})},
+    {"shadow-opacity",  StyleEntryWrapper({LV_STYLE_SHADOW_OPA,   StyleValueType::NUM})},
+    {"shadow-offset-x", StyleEntryWrapper({LV_STYLE_SHADOW_OFS_X, StyleValueType::NUM})},
+    {"shadow-offset-y", StyleEntryWrapper({LV_STYLE_SHADOW_OFS_Y, StyleValueType::NUM})},
+    
+    {"position",        StyleEntryWrapper(&CompSetPosition)},
     
-    /* line comp */
-    {"line-width", &CompSetLineWidth},
-    {"line-color", &CompSetLineColor},
-    {"line-rounded", &CompSetLineRounded},
-
-    /* shadow */
-    {"shadow-width", &CompSetShadowWidth},
-    {"shadow-color", &CompSetShadowColor},
-    {"shadow-spread", &CompSetShadowSpread},
-    {"shadow-opacity", &CompSetShadowOpacity},
-    {"shadow-offset-x", &CompSetOffsetX},
-    {"shadow-offset-y", &CompSetOffsetY},
-
-    /* position */
-    {"position", &CompSetPosition},
-
-    /* grid */
-    {"grid-template", &CompGridColumnRow},
-    {"grid-child", &CompSetGridChild},
-    {"grid-align", &CompsetGridAlign},
+    {"grid-template",   StyleEntryWrapper(&CompGridColumnRow)},
+    {"grid-child",     StyleEntryWrapper(&CompSetGridChild)},
+    {"grid-align",     StyleEntryWrapper(&CompsetGridAlign)},
 };
diff --git a/src/render/native/core/style/style.hpp b/src/render/native/core/style/style.hpp
index ce0445dc1..7ef15282c 100644
--- a/src/render/native/core/style/style.hpp
+++ b/src/render/native/core/style/style.hpp
@@ -14,11 +14,46 @@ extern "C" {
 
 using CompSetStyle = void (lv_obj_t*, lv_style_t*, JSContext*, JSValue);
 
+enum class StyleValueType : uint8_t {
+    NUM,
+    COLOR,
+    PCT,
+};
+
+struct StylePropConfig {
+    lv_style_prop_t prop;
+    StyleValueType type;
+};
+
+enum class StyleEntryType : uint8_t {
+    SIMPLE,
+    COMPLEX,
+};
+
+union StyleEntry {
+    StylePropConfig simple;
+    CompSetStyle* complex;
+    
+    StyleEntry() {}
+    StyleEntry(const StylePropConfig& s) : simple(s) {}
+    StyleEntry(CompSetStyle* c) : complex(c) {}
+};
+
+struct StyleEntryWrapper {
+    StyleEntryType type;
+    StyleEntry entry;
+    
+    StyleEntryWrapper(const StylePropConfig& config) : type(StyleEntryType::SIMPLE), entry(config) {}
+    StyleEntryWrapper(CompSetStyle* func) : type(StyleEntryType::COMPLEX), entry(func) {}
+};
+
 class StyleManager {
   public:
-    static std::unordered_map<std::string, CompSetStyle*> styles;
+    static std::unordered_map<std::string, StyleEntryWrapper> styles;
 };
 
+void ApplySimpleStyle(lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj, const StylePropConfig& config);
+
 void CompSetTransition (
   lv_style_t* style, 
   lv_style_transition_dsc_t* trans, 
diff --git a/src/render/native/core/theme/theme.cpp b/src/render/native/core/theme/theme.cpp
index 819d9b06d..588093837 100644
--- a/src/render/native/core/theme/theme.cpp
+++ b/src/render/native/core/theme/theme.cpp
@@ -1,5 +1,8 @@
 #include "./theme.hpp"
 
+static lv_theme_t theme_default;
+static bool theme_default_init = false;
+
 static void ThemeDefaultInit () {
     if (theme_default_init == false) {
         theme_default_init = true;
diff --git a/src/render/native/core/theme/theme.hpp b/src/render/native/core/theme/theme.hpp
index 09e0c32b2..b684acf41 100644
--- a/src/render/native/core/theme/theme.hpp
+++ b/src/render/native/core/theme/theme.hpp
@@ -8,8 +8,4 @@ extern "C" {
 
 #include "native/core/style/font/font.hpp"
 
-static lv_theme_t theme_default;
-
-static bool theme_default_init = false;
-
 void NativeThemeInit (JSContext* ctx, JSValue& ns);
\ No newline at end of file
diff --git a/src/render/native/core/utils/utils.cpp b/src/render/native/core/utils/utils.cpp
index e69de29bb..4f162c499 100644
--- a/src/render/native/core/utils/utils.cpp
+++ b/src/render/native/core/utils/utils.cpp
@@ -0,0 +1,67 @@
+#include "./utils.hpp"
+#include <src/core/lv_group.h>
+#include <src/core/lv_obj.h>
+#include <vector>
+#include <unordered_map>
+#include <algorithm>
+
+extern "C" {
+    #include "lvgl.h"
+    #include "private.h"
+};
+
+static void getDesiredOrder(lv_obj_t* parent, std::vector<lv_obj_t*>& desired, lv_group_t* def_group) {
+    // Desired order: parent's children order, but only those currently in default group.
+    if (!parent || !def_group) return;
+    uint32_t child_cnt = lv_obj_get_child_cnt(parent);
+    for (uint32_t i = 0; i < child_cnt; i++) {
+        lv_obj_t* child = lv_obj_get_child(parent, i);
+        if (!child) continue;
+        if (lv_obj_get_group(child) == def_group) desired.push_back(child);
+    }
+}
+
+static size_t getMatchedSize(lv_group_t* def_group, std::vector<lv_obj_t*>& desired,
+    std::unordered_map<lv_obj_t*, void*>& node_of
+) {
+    size_t matched_size = 0;
+    node_of.reserve(desired.size());
+
+    void* node;
+    _LV_LL_READ(&def_group->obj_ll, node) {
+        lv_obj_t** obj_i = static_cast<lv_obj_t**>(node);
+        lv_obj_t* obj = *obj_i;
+        if (std::find(desired.begin(), desired.end(), obj) != desired.end()) {
+            if (desired[matched_size] == obj) matched_size++;
+            node_of[obj] = node;
+            if (matched_size == desired.size()) break;
+        }
+    }
+    return matched_size;
+}
+
+static void startReorder(lv_group_t* def_group, std::vector<lv_obj_t*>& desired, 
+    std::unordered_map<lv_obj_t*, void*>& node_of
+) {
+    for (size_t i = desired.size() - 1; i > 0; i--) {
+        void* n_act = node_of[desired[i - 1]];
+        void* n_after = node_of[desired[i]];
+        if (n_act && n_after && n_act != n_after) {
+            _lv_ll_move_before(&def_group->obj_ll, n_act, n_after);
+        }
+    }
+}
+
+void reorderFocusGroup(lv_obj_t * parent) {
+    if (!parent) return;
+
+    std::vector<lv_obj_t*> desired;
+    getDesiredOrder(parent, desired, lv_group_get_default());
+    if (desired.size() < 2) return;
+
+    std::unordered_map<lv_obj_t*, void*> node_of;
+    size_t matched_size = getMatchedSize(lv_group_get_default(), desired, node_of);
+    if (matched_size == desired.size()) return;
+
+    startReorder(lv_group_get_default(), desired, node_of);
+}
\ No newline at end of file
diff --git a/src/render/native/core/utils/utils.hpp b/src/render/native/core/utils/utils.hpp
index 1fe495d01..7cfe150d7 100644
--- a/src/render/native/core/utils/utils.hpp
+++ b/src/render/native/core/utils/utils.hpp
@@ -7,10 +7,11 @@
 
 extern "C" {
     #include "lvgl.h"
-
     #include "private.h"
 };
 
+void reorderFocusGroup(lv_obj_t * parent);
+
 template<size_t BlockSize, size_t BlockNum = 10>
 class MemoryPool {
   public:
@@ -54,7 +55,7 @@ class MemoryPool {
 			free_block_head = &(new_chunk->blocks[0]);
 
 			// link the new chunk's all blocks
-			for (int i = 1; i < BlockNum; i++)
+			for (size_t i = 1; i < BlockNum; i++)
 				new_chunk->blocks[i - 1].next = &(new_chunk->blocks[i]);
 			new_chunk->blocks[BlockNum - 1].next = NULL; // final block next is NULL
 			
diff --git a/src/render/react/components/Arc/comp.ts b/src/render/react/components/Arc/comp.ts
index 5a5b6ef05..b7b9fad1b 100644
--- a/src/render/react/components/Arc/comp.ts
+++ b/src/render/react/components/Arc/comp.ts
@@ -1,5 +1,6 @@
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -35,120 +36,89 @@ export type ArcProps = CommonProps & {
   changeRate?: number;
 };
 
-function setArcProps(comp, newProps: ArcProps, oldProps: ArcProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Arc", comp, newProps, oldProps }),
-    indicatorStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Arc",
-        styleType: STYLE_TYPE.PART_INDICATOR,
-        oldStyleSheet: oldProps.indicatorStyle,
-      });
-    },
-    onIndicatorPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Arc",
-        styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onIndicatorPressedStyle,
-      });
-    },
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Arc",
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    knobStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Arc",
-        styleType: STYLE_TYPE.PART_KNOB,
-        oldStyleSheet: oldProps.knobStyle,
-      });
-    },
-    onKnobPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Arc",
-        styleType: STYLE_TYPE.PART_KNOB | STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onKnobPressedStyle,
-      });
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    range(arr) {
-      if (!Array.isArray(arr)) return;
-      const [min, max] = arr;
-      if (min === oldProps.range?.[0] && max === oldProps.range?.[1]) return;
-      if (isNaN(min) || isNaN(max)) return;
-      comp.setRange([min, max]);
-    },
-    value(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.value) return;
-      comp.setValue(val);
-    },
-    startAngle(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.startAngle) return;
-      comp.setStartAngle(val);
-    },
-    endAngle(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.endAngle) return;
-      comp.setEndAngle(val);
-    },
-    backgroundStartAngle(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.backgroundStartAngle) return;
-      comp.setBackgroundStartAngle(val);
-    },
-    backgroundEndAngle(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.backgroundEndAngle) return;
-      comp.setBackgroundEndAngle(val);
-    },
-    rotation(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.rotation) return;
-      comp.setRotation(val);
-    },
-    mode(val) {
-      if (val !== oldProps.mode && typeof modes[val] !== "undefined") {
-        comp.setMode(modes[val]);
-      }
-    },
-    changeRate(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.changeRate) return;
-      comp.setChangeRate(val);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const arcSetters = {
+  indicatorStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Arc",
+      styleType: STYLE_TYPE.PART_INDICATOR,
+      oldStyleSheet: oldProps.indicatorStyle,
+    });
+  },
+  onIndicatorPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Arc",
+      styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onIndicatorPressedStyle,
+    });
+  },
+  onPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Arc",
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  knobStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Arc",
+      styleType: STYLE_TYPE.PART_KNOB,
+      oldStyleSheet: oldProps.knobStyle,
+    });
+  },
+  onKnobPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Arc",
+      styleType: STYLE_TYPE.PART_KNOB | STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onKnobPressedStyle,
+    });
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  range(comp, arr) {
+    const [min, max] = arr;
+    comp.setRange([min, max]);
+  },
+  value(comp, val) {
+    comp.setValue(val);
+  },
+  startAngle(comp, val) {
+    comp.setStartAngle(val);
+  },
+  endAngle(comp, val) {
+    comp.setEndAngle(val);
+  },
+  backgroundStartAngle(comp, val) {
+    comp.setBackgroundStartAngle(val);
+  },
+  backgroundEndAngle(comp, val) {
+    comp.setBackgroundEndAngle(val);
+  },
+  rotation(comp, val) {
+    comp.setRotation(val);
+  },
+  mode(comp, val) {
+    comp.setMode(modes[val]);
+  },
+  changeRate(comp, val) {
+    comp.setChangeRate(val);
+  },
+};
 
 export class ArcComp extends NativeArc {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -157,14 +127,15 @@ export class ArcComp extends NativeArc {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ArcProps, oldProps: ArcProps) {
-    setArcProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ArcProps>, oldProps: ArcProps) {
+    setComponentProps(this, "Arc", updatePayload, oldProps, arcSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Arc";
diff --git a/src/render/react/components/Arc/config.ts b/src/render/react/components/Arc/config.ts
index 1922ba74e..742921426 100644
--- a/src/render/react/components/Arc/config.ts
+++ b/src/render/react/components/Arc/config.ts
@@ -15,7 +15,7 @@ export default class ArcConfig implements LvgljsComponentConfig<ArcProps, ArcCom
   }
   commitMount(instance, newProps: ArcProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: ArcProps, newProps: ArcProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: ArcProps, oldProps: ArcProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Button/comp.ts b/src/render/react/components/Button/comp.ts
index 5040543c5..37c520719 100644
--- a/src/render/react/components/Button/comp.ts
+++ b/src/render/react/components/Button/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnClickEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnClickEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -31,46 +32,34 @@ export type ButtonProps = CommonProps & {
   }) => void;
 };
 
-function setButtonProps(comp, newProps: ButtonProps, oldProps: ButtonProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Button", comp, newProps, oldProps }),
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Button",
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    onPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
-    },
-    onLongPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
-    },
-    onLongPressRepeat(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const buttonSetters = {
+  onPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Button",
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  onPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
+  },
+  onLongPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
+  },
+  onLongPressRepeat(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
+  },
+};
 
 export class ButtonComp extends NativeButton {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -79,14 +68,15 @@ export class ButtonComp extends NativeButton {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ButtonProps, oldProps: ButtonProps) {
-    setButtonProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ButtonProps>, oldProps: ButtonProps) {
+    setComponentProps(this, "Button", updatePayload, oldProps, buttonSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Button";
diff --git a/src/render/react/components/Button/config.ts b/src/render/react/components/Button/config.ts
index 61433085f..cfe6b2de0 100644
--- a/src/render/react/components/Button/config.ts
+++ b/src/render/react/components/Button/config.ts
@@ -14,7 +14,7 @@ export default class ButtonConfig implements LvgljsComponentConfig<ButtonProps,
   }
   commitMount(instance, newProps: ButtonProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: ButtonProps, newProps: ButtonProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: ButtonProps, oldProps: ButtonProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Calendar/comp.ts b/src/render/react/components/Calendar/comp.ts
index 416062322..dc92a06a5 100644
--- a/src/render/react/components/Calendar/comp.ts
+++ b/src/render/react/components/Calendar/comp.ts
@@ -1,4 +1,5 @@
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -16,49 +17,31 @@ export type CalendarProps = CommonProps & {
   onChange?: (event: OnChangeEvent) => void;
 };
 
-function setCalendarProps(comp, newProps: CalendarProps, oldProps: CalendarProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Calendar", comp, newProps, oldProps }),
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    today(today) {
-      if (today && today !== oldProps.today) {
-        const date = new Date(today);
-        comp.setToday(date.getFullYear(), date.getMonth() + 1, date.getDate());
-      }
-    },
-    shownMonth(month) {
-      if (month && month !== oldProps.shownMonth) {
-        const date = new Date(month);
-        comp.setShownMonth(date.getFullYear(), date.getMonth() + 1);
-      }
-    },
-    highLightDates(dates) {
-      if (Array.isArray(dates) && dates !== oldProps.highLightDates) {
-        dates = dates.map((item) => {
-          const date = new Date(item);
-          return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
-        });
-        comp.setHighlightDates(dates, dates.length);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const calendarSetters = {
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  today(comp, today) {
+    const date = new Date(today);
+    comp.setToday(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  },
+  shownMonth(comp, month) {
+    const date = new Date(month);
+    comp.setShownMonth(date.getFullYear(), date.getMonth() + 1);
+  },
+  highLightDates(comp, dates) {
+    dates = dates.map((item) => {
+      const date = new Date(item);
+      return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
+    });
+    comp.setHighlightDates(dates, dates.length);
+  },
+};
 
 export class CalendarComp extends NativeCalendar {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -67,14 +50,15 @@ export class CalendarComp extends NativeCalendar {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: CalendarProps, oldProps: CalendarProps) {
-    setCalendarProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<CalendarProps>, oldProps: CalendarProps) {
+    setComponentProps(this, "Calendar", updatePayload, oldProps, calendarSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Calendar";
diff --git a/src/render/react/components/Calendar/config.ts b/src/render/react/components/Calendar/config.ts
index 64663ddfa..1db32428f 100644
--- a/src/render/react/components/Calendar/config.ts
+++ b/src/render/react/components/Calendar/config.ts
@@ -14,7 +14,7 @@ export default class CalendarConfig implements LvgljsComponentConfig<CalendarPro
   }
   commitMount(instance, newProps: CalendarProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: CalendarProps, newProps: CalendarProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: CalendarProps, oldProps: CalendarProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Canvas/comp.ts b/src/render/react/components/Canvas/comp.ts
index dc3fc485a..0e8622a6d 100644
--- a/src/render/react/components/Canvas/comp.ts
+++ b/src/render/react/components/Canvas/comp.ts
@@ -1,4 +1,5 @@
-import { CommonProps, OnClickEvent } from "../common";
+import { setComponentProps, CommonProps, OnClickEvent } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -16,53 +17,17 @@ export type CanvasProps = CommonProps & {
   alignTo?: { type: number; pos: [number, number]; parent: any };
 };
 
-function setCanvasProps(comp, newProps: CanvasProps, oldProps: CanvasProps) {
-  const setter = {
-    set style(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Canvas",
-        styleType: 0x0000,
-        oldStyleSheet: oldProps.style,
-      });
-    },
-    set onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    set align({ type, pos = [0, 0] }) {
-      if (
-        !type ||
-        (type === oldProps.align?.type &&
-          pos[0] === oldProps.align?.pos?.[0] &&
-          pos[1] === oldProps.align?.pos?.[1])
-      )
-        return;
-      comp.align(type, pos);
-    },
-    set alignTo({ type, pos = [0, 0], parent }) {
-      if (
-        !type ||
-        (type === oldProps.alignTo?.type &&
-          pos[0] === (oldProps.alignTo?.pos?.[0] || 0) &&
-          pos[1] === (oldProps.alignTo?.pos?.[1] || 0) &&
-          parent?.uid === oldProps.alignTo?.parent?.uid)
-      )
-        return;
-      comp.alignTo(type, pos, parent);
-    },
-  };
-  Object.assign(setter, newProps);
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const canvasSetters = {
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+};
 
 export class CanvasComp extends NativeButton {
+  uid: string;
+  style: any;
+  ctx: CanvasContext = null;
+
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -71,14 +36,15 @@ export class CanvasComp extends NativeButton {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: CanvasProps, oldProps: CanvasProps) {
-    setCanvasProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<CanvasProps>, oldProps: CanvasProps) {
+    setComponentProps(this, "Canvas", updatePayload, oldProps, canvasSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Canvas";
diff --git a/src/render/react/components/Canvas/config.ts b/src/render/react/components/Canvas/config.ts
index e66d0897d..c99446b15 100644
--- a/src/render/react/components/Canvas/config.ts
+++ b/src/render/react/components/Canvas/config.ts
@@ -14,7 +14,7 @@ export default class CanvasConfig implements LvgljsComponentConfig<CanvasProps,
   }
   commitMount(instance, newProps: CanvasProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: CanvasProps, newProps: CanvasProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: CanvasProps, oldProps: CanvasProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Chart/comp.ts b/src/render/react/components/Chart/comp.ts
index 5f4edaddc..9ec2d475f 100644
--- a/src/render/react/components/Chart/comp.ts
+++ b/src/render/react/components/Chart/comp.ts
@@ -1,10 +1,9 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
 import { colorTransform } from "../../core/style/color";
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
-  EVENTTYPE_MAP,
   STYLE_TYPE,
-  handleEvent,
   setStyle,
   styleGetterProp,
 } from "../config";
@@ -46,236 +45,139 @@ export type ChartProps = CommonProps & {
   bottomAxisRange?: [number, number];
 };
 
-function setChartProps(comp, newProps: ChartProps, oldProps: ChartProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Chart", comp, newProps, oldProps }),
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Chart",
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    indicatorStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Chart",
-        styleType: STYLE_TYPE.PART_INDICATOR,
-        oldStyleSheet: oldProps.pointStyle,
-      });
-    },
-    itemStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Chart",
-        styleType: STYLE_TYPE.PART_ITEMS,
-        oldStyleSheet: oldProps.pointStyle,
-      });
-    },
-    type(type) {
-      if (chartType[type] !== void 0) {
-        comp.setType(chartType[type]);
-      }
-    },
-    divLineCount(arr) {
-      if (
-        arr?.[0] !== oldProps?.divLineCount?.[0] ||
-        arr?.[1] !== oldProps?.divLineCount?.[1]
-      ) {
-        comp.setDivLineCount(arr);
-      }
-    },
-    pointNum(num) {
-      if (num !== oldProps?.pointNum) {
-        comp.setPointNum(num);
-      }
-    },
-    scatterData(data) {
-      if (data !== oldProps?.scatterData) {
-        data = data.map((item) => {
-          const arr = [];
-          item.data.forEach((item1) => {
-            arr.push(item1[0]);
-            arr.push(item1[1]);
-          });
-          return {
-            color: item.color === void 0 ? -1 : colorTransform(item.color),
-            data: arr,
-          };
+const chartSetters = {
+  onPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Chart",
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  indicatorStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Chart",
+      styleType: STYLE_TYPE.PART_INDICATOR,
+      oldStyleSheet: oldProps.indicatorStyle,
+    });
+  },
+  itemStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Chart",
+      styleType: STYLE_TYPE.PART_ITEMS,
+      oldStyleSheet: oldProps.itemStyle,
+    });
+  },
+  type(comp, type) {
+    if (chartType[type] !== void 0) {
+      comp.setType(chartType[type]);
+    }
+  },
+  divLineCount(comp, arr) {
+    comp.setDivLineCount(arr);
+  },
+  pointNum(comp, num) {
+    comp.setPointNum(num);
+  },
+  scatterData(comp, data) {
+    if (data) {
+      data = data.map((item) => {
+        const arr = [];
+        item.data.forEach((item1) => {
+          arr.push(item1[0]);
+          arr.push(item1[1]);
         });
-
-        comp.setScatterData(data);
-      }
-    },
-    leftAxisOption(options) {
-      if (
-        options.majorLen == void 0 ||
-        options.minorLen == void 0 ||
-        options.majorNum == void 0 ||
-        options.minorNum == void 0 ||
-        !options.drawSize
-      ) {
-        return;
-      }
-      if (options != oldProps?.leftAxisOption) {
-        comp.setLeftAxisOption(options);
-      }
-    },
-    leftAxisData(data) {
-      if (data !== oldProps?.leftAxisData) {
-        data = data.map((item) => ({
-          ...item,
-          color: item.color === void 0 ? -1 : colorTransform(item.color),
-        }));
-        comp.setLeftAxisData(data);
-      }
-    },
-    bottomAxisOption(options) {
-      if (
-        options.majorLen == void 0 ||
-        options.minorLen == void 0 ||
-        options.majorNum == void 0 ||
-        options.minorNum == void 0 ||
-        !options.drawSize
-      ) {
-        return;
-      }
-
-      if (options != oldProps?.bottomAxisOption) {
-        comp.setBottomAxisOption(options);
-      }
-    },
-    bottomAxisData(data) {
-      if (data !== oldProps?.bottomAxisData) {
-        data = data.map((item) => ({
-          ...item,
-          color: item.color === void 0 ? -1 : colorTransform(item.color),
-        }));
-        comp.setBottomAxisData(data);
-      }
-    },
-    rightAxisOption(options) {
-      if (
-        options.majorLen == void 0 ||
-        options.minorLen == void 0 ||
-        options.majorNum == void 0 ||
-        options.minorNum == void 0 ||
-        !options.drawSize
-      ) {
-        return;
-      }
-
-      if (options != oldProps?.rightAxisOption) {
-        comp.setRightAxisOption(options);
-      }
-    },
-    rightAxisData(data) {
-      if (data !== oldProps?.rightAxisData) {
-        data = data.map((item) => ({
-          ...item,
-          color: item.color === void 0 ? -1 : colorTransform(item.color),
-        }));
-        comp.setRightAxisData(data);
-      }
-    },
-    topAxisOption(options) {
-      if (
-        options.majorLen == void 0 ||
-        options.minorLen == void 0 ||
-        options.majorNum == void 0 ||
-        options.minorNum == void 0 ||
-        !options.drawSize
-      ) {
-        return;
-      }
-
-      if (options != oldProps?.topAxisOption) {
-        comp.setTopAxisOption(options);
-      }
-    },
-    topAxisData(data) {
-      if (data !== oldProps?.topAxisData) {
-        data = data.map((item) => ({
-          ...item,
+        return {
           color: item.color === void 0 ? -1 : colorTransform(item.color),
-        }));
-        comp.setTopAxisData(data);
-      }
-    },
-    leftAxisLabels(arr) {
-      if (arr !== oldProps?.leftAxisLabels) {
-        comp.setLeftAxisLabels(arr);
-      }
-    },
-    rightAxisLabels(arr) {
-      if (arr !== oldProps?.rightAxisLabels) {
-        comp.setRightAxisLabels(arr);
-      }
-    },
-    topAxisLabels(arr) {
-      if (arr !== oldProps?.topAxisLabels) {
-        comp.setTopAxisLabels(arr);
-      }
-    },
-    bottomAxisLabels(arr) {
-      if (arr !== oldProps?.bottomAxisLabels) {
-        comp.setBottomAxisLabels(arr);
-      }
-    },
-    leftAxisRange(arr) {
-      if (
-        arr?.[0] !== oldProps?.leftAxisRange?.[0] ||
-        arr?.[1] !== oldProps?.leftAxisRange?.[1]
-      ) {
-        comp.setLeftAxisRange(arr);
-      }
-    },
-    rightAxisRange(arr) {
-      if (
-        arr?.[0] !== oldProps?.rightAxisRange?.[0] ||
-        arr?.[1] !== oldProps?.rightAxisRange?.[1]
-      ) {
-        comp.setRightAxisRange(arr);
-      }
-    },
-    topAxisRange(arr) {
-      if (
-        arr?.[0] !== oldProps?.topAxisRange?.[0] ||
-        arr?.[1] !== oldProps?.topAxisRange?.[1]
-      ) {
-        comp.setTopAxisRange(arr);
-      }
-    },
-    bottomAxisRange(arr) {
-      if (
-        arr?.[0] !== oldProps?.bottomAxisRange?.[0] ||
-        arr?.[1] !== oldProps?.bottomAxisRange?.[1]
-      ) {
-        comp.setBottomAxisRange(arr);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
+          data: arr,
+        };
+      });
+      comp.setScatterData(data);
     }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
+  },
+  leftAxisOption(comp, options) {
+    comp.setLeftAxisOption(options);
+  },
+  leftAxisData(comp, data) {
+    if (data) {
+      data = data.map((item) => ({
+        ...item,
+        color: item.color === void 0 ? -1 : colorTransform(item.color),
+      }));
+      comp.setLeftAxisData(data);
     }
-  });
-  // This gives issues: invalid call to setPointNum?
-  // comp.refresh();
-}
+  },
+  bottomAxisOption(comp, options) {
+    comp.setBottomAxisOption(options);
+  },
+  bottomAxisData(comp, data) {
+    if (data) {
+      data = data.map((item) => ({
+        ...item,
+        color: item.color === void 0 ? -1 : colorTransform(item.color),
+      }));
+      comp.setBottomAxisData(data);
+    }
+  },
+  rightAxisOption(comp, options) {
+    comp.setRightAxisOption(options);
+  },
+  rightAxisData(comp, data) {
+    if (data) {
+      data = data.map((item) => ({
+        ...item,
+        color: item.color === void 0 ? -1 : colorTransform(item.color),
+      }));
+      comp.setRightAxisData(data);
+    }
+  },
+  topAxisOption(comp, options) {
+    comp.setTopAxisOption(options);
+  },
+  topAxisData(comp, data) {
+    if (data) {
+      data = data.map((item) => ({
+        ...item,
+        color: item.color === void 0 ? -1 : colorTransform(item.color),
+      }));
+      comp.setTopAxisData(data);
+    }
+  },
+  leftAxisLabels(comp, arr) {
+    comp.setLeftAxisLabels(arr);
+  },
+  rightAxisLabels(comp, arr) {
+    comp.setRightAxisLabels(arr);
+  },
+  topAxisLabels(comp, arr) {
+    comp.setTopAxisLabels(arr);
+  },
+  bottomAxisLabels(comp, arr) {
+    comp.setBottomAxisLabels(arr);
+  },
+  leftAxisRange(comp, arr) {
+    comp.setLeftAxisRange(arr);
+  },
+  rightAxisRange(comp, arr) {
+    comp.setRightAxisRange(arr);
+  },
+  topAxisRange(comp, arr) {
+    comp.setTopAxisRange(arr);
+  },
+  bottomAxisRange(comp, arr) {
+    comp.setBottomAxisRange(arr);
+  },
+};
 
 export class ChartComp extends NativeChart {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -284,14 +186,15 @@ export class ChartComp extends NativeChart {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ChartProps, oldProps: ChartProps) {
-    setChartProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ChartProps>, oldProps: ChartProps) {
+    setComponentProps(this, "Chart", updatePayload, oldProps, chartSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Chart";
diff --git a/src/render/react/components/Chart/config.ts b/src/render/react/components/Chart/config.ts
index d2f769931..e6b2c8312 100644
--- a/src/render/react/components/Chart/config.ts
+++ b/src/render/react/components/Chart/config.ts
@@ -14,7 +14,7 @@ export default class ChartConfig implements LvgljsComponentConfig<ChartProps, Ch
   }
   commitMount(instance, newProps: ChartProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: ChartProps, newProps: ChartProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: ChartProps, oldProps: ChartProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Checkbox/comp.ts b/src/render/react/components/Checkbox/comp.ts
index 7a3c5d939..1adbf28e9 100644
--- a/src/render/react/components/Checkbox/comp.ts
+++ b/src/render/react/components/Checkbox/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -21,70 +22,52 @@ export type CheckboxProps = CommonProps & {
   onChange?: (event: OnChangeEvent) => void;
 };
 
-function setCheckboxProps(comp, newProps: CheckboxProps, oldProps: CheckboxProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Checkbox", comp, newProps, oldProps }),
-    checked(val) {
-      if (val !== oldProps.checked) {
-        comp.setChecked(val);
-      }
-    },
-    disabled(val) {
-      if (val !== oldProps.disabled) {
-        comp.setDisabled(val);
-      }
-    },
-    text(val) {
-      if (val !== oldProps.text) {
-        comp.setText(val);
-      }
-    },
-    checkedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Checkbox",
-        styleType: STYLE_TYPE.STATE_CHECKED,
-        oldStyleSheet: oldProps.checkedStyle,
-      });
-    },
-    indicatorStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Checkbox",
-        styleType: STYLE_TYPE.PART_INDICATOR,
-        oldStyleSheet: oldProps.indicatorStyle,
-      });
-    },
-    indicatorCheckedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Checkbox",
-        styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_CHECKED,
-        oldStyleSheet: oldProps.indicatorCheckedStyle,
-      });
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const checkboxSetters = {
+  checked(comp, val) {
+    comp.setChecked(val);
+  },
+  disabled(comp, val) {
+    comp.setDisabled(val);
+  },
+  text(comp, val) {
+    comp.setText(val);
+  },
+  checkedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Checkbox",
+      styleType: STYLE_TYPE.STATE_CHECKED,
+      oldStyleSheet: oldProps.checkedStyle,
+    });
+  },
+  indicatorStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Checkbox",
+      styleType: STYLE_TYPE.PART_INDICATOR,
+      oldStyleSheet: oldProps.indicatorStyle,
+    });
+  },
+  indicatorCheckedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Checkbox",
+      styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_CHECKED,
+      oldStyleSheet: oldProps.indicatorCheckedStyle,
+    });
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+};
 
 export class CheckboxComp extends NativeView {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -93,17 +76,18 @@ export class CheckboxComp extends NativeView {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: CheckboxProps, oldProps: CheckboxProps) {
-    setCheckboxProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<CheckboxProps>, oldProps: CheckboxProps) {
+    setComponentProps(this, "Checkbox", updatePayload, oldProps, checkboxSetters);
   }
   insertBefore(child, beforeChild) {
-    this.insertChildBefore(child, beforeChild);
+    super.insertChildBefore(child, beforeChild);
   }
   appendInitialChild(child) {
     this.appendChild(child);
diff --git a/src/render/react/components/Checkbox/config.ts b/src/render/react/components/Checkbox/config.ts
index b78838430..ab8aacb97 100644
--- a/src/render/react/components/Checkbox/config.ts
+++ b/src/render/react/components/Checkbox/config.ts
@@ -13,7 +13,7 @@ export default class CheckboxConfig implements LvgljsComponentConfig<CheckboxPro
   }
   commitMount(instance, newProps: CheckboxProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: CheckboxProps, newProps: CheckboxProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: CheckboxProps, oldProps: CheckboxProps) {}
diff --git a/src/render/react/components/Dropdownlist/comp.ts b/src/render/react/components/Dropdownlist/comp.ts
index aee1d275c..b60ccc400 100644
--- a/src/render/react/components/Dropdownlist/comp.ts
+++ b/src/render/react/components/Dropdownlist/comp.ts
@@ -1,9 +1,9 @@
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EDropdownListArrowDirection,
   EDropdownlistDirection,
   EVENTTYPE_MAP,
-  STYLE_TYPE,
   handleEvent,
   setStyle,
   styleGetterProp,
@@ -23,63 +23,34 @@ export type DropdownListProps = CommonProps & {
   onChange?: (event: OnChangeEvent) => void;
 };
 
-function setListProps(comp, newProps: DropdownListProps, oldProps: DropdownListProps) {
-  const setter = {
-    ...CommonComponentApi({
-      compName: "Dropdownlist",
-      comp,
-      newProps,
-      oldProps,
-    }),
-    items(items) {
-      if (items !== oldProps.items && Array.isArray(items)) {
-        comp.setItems(items, items.length);
-      }
-    },
-    arrow(arrow) {
-      if (arrow != oldProps.arrow && typeof arrow === "number") {
-        comp.setArrowDir(arrow);
-      }
-    },
-    selectIndex(selectIndex) {
-      if (selectIndex !== oldProps.selectIndex) {
-        comp.setselectIndex(selectIndex);
-      }
-    },
-    text(text) {
-      if (text !== oldProps.text) {
-        comp.setText(text);
-      }
-    },
-    direction(direction) {
-      if (direction !== oldProps.direction) {
-        comp.setDir(direction);
-      }
-    },
-    highlightSelect(payload) {
-      if (payload != oldProps.highlightSelect) {
-        comp.setHighLightSelect(payload);
-      }
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const dropdownlistSetters = {
+  items(comp, items) {
+    comp.setItems(items, items.length);
+  },
+  arrow(comp, arrow) {
+    comp.setArrowDir(arrow);
+  },
+  selectIndex(comp, selectIndex) {
+    comp.setselectIndex(selectIndex);
+  },
+  text(comp, text) {
+    comp.setText(text);
+  },
+  direction(comp, direction) {
+    comp.setDir(direction);
+  },
+  highlightSelect(comp, payload) {
+    comp.setHighLightSelect(payload);
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+};
 
 export class DropdownlistComp extends NativeDropdownlist {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -88,14 +59,15 @@ export class DropdownlistComp extends NativeDropdownlist {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: DropdownListProps, oldProps: DropdownListProps) {
-    setListProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<DropdownListProps>, oldProps: DropdownListProps) {
+    setComponentProps(this, "Dropdownlist", updatePayload, oldProps, dropdownlistSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Dropdownlist";
diff --git a/src/render/react/components/Dropdownlist/config.ts b/src/render/react/components/Dropdownlist/config.ts
index 99cb3b146..34782005a 100644
--- a/src/render/react/components/Dropdownlist/config.ts
+++ b/src/render/react/components/Dropdownlist/config.ts
@@ -14,7 +14,7 @@ export default class DropdownlistConfig implements LvgljsComponentConfig<Dropdow
   }
   commitMount(instance, newProps: DropdownListProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: DropdownListProps, newProps: DropdownListProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: DropdownListProps, oldProps: DropdownListProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/GIF/comp.ts b/src/render/react/components/GIF/comp.ts
index 36da7314f..11d415552 100644
--- a/src/render/react/components/GIF/comp.ts
+++ b/src/render/react/components/GIF/comp.ts
@@ -1,76 +1,55 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { BUILT_IN_SYMBOL } from "../../core/style/symbol";
-import { isValidUrl } from "../../utils/helpers";
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { isValidUrl, fetchBinary } from "../../utils/helpers";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
-  setStyle,
   styleGetterProp,
 } from "../config";
+import path from 'tjs:path';
 
 const bridge = globalThis[Symbol.for('lvgljs')];
 const NativeGIF = bridge.NativeRender.NativeComponents.GIF;
 
-async function getGIFBinary(url) {
-  const resp = await fetch(url, {
-    headers: {
-      "Content-Type": "application/octet-stream",
-    },
-  });
-  const GIFBuffer = await resp.arrayBuffer();
-  return GIFBuffer;
-}
-
 export type GIFProps = CommonProps & {
   src: string;
 }
 
-function setGIFProps(comp, newProps: GIFProps, oldProps: GIFProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "GIF", comp, newProps, oldProps }),
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    src(url) {
-      if (url && url !== oldProps.src) {
-        if (BUILT_IN_SYMBOL[url]) {
-          comp.setSymbol(BUILT_IN_SYMBOL[url]);
-          return;
-        }
-        if (!isValidUrl(url)) {
-          if (!path.isAbsolute(url)) {
-            url = path.resolve(__dirname, url);
-          }
-          fs.readFile(url, { encoding: "binary" })
-            .then((data) => {
-              comp.setGIFBinary(data.buffer);
-            })
-            .catch((e) => {
-              console.log("setGIF error", e);
-            });
-        } else {
-          getGIFBinary(url)
-            .then((buffer) => comp.setGIFBinary(Buffer.from(buffer).buffer))
-            .catch(console.warn);
+const gifSetters = {
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  src(comp, url) {
+    if (url) {
+      if (BUILT_IN_SYMBOL[url]) {
+        comp.setSymbol(BUILT_IN_SYMBOL[url]);
+        return;
+      }
+      if (!isValidUrl(url)) {
+        if (!path.isAbsolute(url)) {
+          url = path.resolve(__dirname, url);
         }
+        tjs.readFile(url)
+          .then((data) => {
+            comp.setGIFBinary(data.buffer);
+          })
+          .catch((e) => {
+            console.log("setGIF error", e);
+          });
+      } else {
+        fetchBinary(url)
+          .then((buffer) => comp.setGIFBinary(buffer))
+          .catch(console.warn);
       }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
     }
-  });
-}
+  },
+};
 
 export class GIFComp extends NativeGIF {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -79,14 +58,15 @@ export class GIFComp extends NativeGIF {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: GIFProps, oldProps: GIFProps) {
-    setGIFProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<GIFProps>, oldProps: GIFProps) {
+    setComponentProps(this, "GIF", updatePayload, oldProps, gifSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "GIF";
diff --git a/src/render/react/components/GIF/config.ts b/src/render/react/components/GIF/config.ts
index 5f2c76084..7508673ec 100644
--- a/src/render/react/components/GIF/config.ts
+++ b/src/render/react/components/GIF/config.ts
@@ -14,7 +14,7 @@ export default class GIFConfig implements LvgljsComponentConfig<GIFProps, GIFCom
   }
   commitMount(instance, newProps: GIFProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: GIFProps, newProps: GIFProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: GIFProps, oldProps: GIFProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Image/comp.ts b/src/render/react/components/Image/comp.ts
index 6e183e395..b10b20238 100644
--- a/src/render/react/components/Image/comp.ts
+++ b/src/render/react/components/Image/comp.ts
@@ -1,6 +1,7 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { BUILT_IN_SYMBOL } from "../../core/style/symbol";
-import { isValidUrl } from "../../utils/helpers";
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { isValidUrl, fetchBinary } from "../../utils/helpers";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -12,67 +13,45 @@ import path from 'tjs:path';
 const bridge = globalThis[Symbol.for('lvgljs')];
 const NativeImage = bridge.NativeRender.NativeComponents.Image;
 
-async function getImageBinary(url) {
-  const resp = await fetch(url, {
-    headers: {
-      "Content-Type": "application/octet-stream",
-    },
-  });
-  const imageBuffer = await resp.arrayBuffer();
-  return imageBuffer;
-}
-
 export type ImageProps = CommonProps & {
   /** GIF loading resource, support network url, local path, buildtin symbol */
   src: string;
 };
 
-function setImageProps(comp, newProps: ImageProps, oldProps: ImageProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Image", comp, newProps, oldProps }),
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    src(url) {
-      if (url && url !== oldProps.src) {
-        if (BUILT_IN_SYMBOL[url]) {
-          comp.setSymbol(BUILT_IN_SYMBOL[url]);
-          return;
-        }
-        if (!isValidUrl(url)) {
-          if (!path.isAbsolute(url)) {
-            url = path.resolve(url);
-          }
-          tjs.readFile(url, { encoding: "binary" })
-            .then((data) => {
-              comp.setImageBinary(data.buffer);
-            })
-            .catch((e) => {
-              console.log("setImage error", e);
-            });
-        } else {
-          getImageBinary(url)
-            .then((buffer) => comp.setImageBinary(Buffer.from(buffer).buffer))
-            .catch(console.warn);
+const imageSetters = {
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  src(comp, url) {
+    if (url) {
+      if (BUILT_IN_SYMBOL[url]) {
+        comp.setSymbol(BUILT_IN_SYMBOL[url]);
+        return;
+      }
+      if (!isValidUrl(url)) {
+        if (!path.isAbsolute(url)) {
+          url = path.resolve(url);
         }
+        tjs.readFile(url)
+          .then((data) => {
+            comp.setImageBinary(data.buffer);
+          })
+          .catch((e) => {
+            console.log("setImage error", e);
+          });
+      } else {
+        fetchBinary(url)
+          .then((buffer) => comp.setImageBinary(buffer))
+          .catch(console.warn);
       }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
     }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+  },
+};
 
 export class ImageComp extends NativeImage {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -81,14 +60,15 @@ export class ImageComp extends NativeImage {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ImageProps, oldProps: ImageProps) {
-    setImageProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ImageProps>, oldProps: ImageProps) {
+    setComponentProps(this, "Image", updatePayload, oldProps, imageSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Image";
diff --git a/src/render/react/components/Image/config.ts b/src/render/react/components/Image/config.ts
index bca45d3ff..0e3075239 100644
--- a/src/render/react/components/Image/config.ts
+++ b/src/render/react/components/Image/config.ts
@@ -9,12 +9,12 @@ export default class ImageConfig implements LvgljsComponentConfig<ImageProps, Im
   }
   createInstance(newProps: ImageProps, rootInstance, context, workInProgress, uid) {
     const instance = new ImageComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as ImageProps);
     return instance;
   }
   commitMount(instance, newProps: ImageProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: ImageProps, newProps: ImageProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: ImageProps, oldProps: ImageProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Input/comp.ts b/src/render/react/components/Input/comp.ts
index 86df585a6..0df2a23bf 100644
--- a/src/render/react/components/Input/comp.ts
+++ b/src/render/react/components/Input/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -33,71 +34,47 @@ export type InputProps = CommonProps & {
   autoKeyBoard: boolean;
 };
 
-function setInputProps(comp, newProps: InputProps, oldProps: InputProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Input", comp, newProps, oldProps }),
-    placeholder(str) {
-      if (str !== oldProps.placeholder) {
-        comp.setPlaceHolder(str);
-      }
-    },
-    mode(mode) {
-      if (mode == oldProps.mode) return;
-      if (mode === "password") {
-        comp.setPasswordMode(true);
-      } else if (oldProps.mode === "password") {
-        comp.setPasswordMode(false);
-      }
-    },
-    maxlength(len) {
-      if (len === oldProps.maxlength) return;
-      comp.setMaxLength(len);
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    onFocus(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_FOCUSED);
-    },
-    onBlur(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_DEFOCUSED);
-    },
-    onFocusStyle(styleSheet) {
-      setStyle({
-        comp,
-        compName: "Input",
-        styleType: 0x0002,
-        oldStyleSheet: oldProps.onFocusStyle,
-        styleSheet,
-      });
-    },
-    value(str) {
-      if (str !== oldProps.value) {
-        comp.setText(str);
-      }
-    },
-    autoKeyBoard(payload) {
-      if (payload !== oldProps?.autoKeyBoard) {
-        comp.setAutoKeyboard(payload);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const inputSetters = {
+  placeholder(comp, str) {
+    comp.setPlaceHolder(str);
+  },
+  mode(comp, mode) {
+    comp.setPasswordMode(!!(mode === "password"));
+  },
+  maxlength(comp, len) {
+    comp.setMaxLength(len);
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  onFocus(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_FOCUSED);
+  },
+  onBlur(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_DEFOCUSED);
+  },
+  onFocusStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      compName: "Input",
+      styleType: 0x0002,
+      oldStyleSheet: oldProps.onFocusStyle,
+      styleSheet,
+    });
+  },
+  value(comp, str) {
+    comp.setText(str);
+  },
+  autoKeyBoard(comp, payload) {
+    comp.setAutoKeyboard(payload);
+  },
+};
 
 /** A one line mode of Textarea */
 export class InputComp extends NativeView {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -108,14 +85,15 @@ export class InputComp extends NativeView {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: InputProps, oldProps: InputProps) {
-    setInputProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<InputProps>, oldProps: InputProps) {
+    setComponentProps(this, "Input", updatePayload, oldProps, inputSetters);
   }
   insertBefore(child, beforeChild) {}
   appendInitialChild(child) {}
diff --git a/src/render/react/components/Input/config.ts b/src/render/react/components/Input/config.ts
index 5cc441867..da5ca480c 100644
--- a/src/render/react/components/Input/config.ts
+++ b/src/render/react/components/Input/config.ts
@@ -13,7 +13,7 @@ export default class InputConfig implements LvgljsComponentConfig<InputProps, In
   }
   commitMount(instance, newProps: InputProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: InputProps, newProps: InputProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: InputProps, oldProps: InputProps) {}
diff --git a/src/render/react/components/Keyboard/comp.ts b/src/render/react/components/Keyboard/comp.ts
index c6b9f1649..cf3e3f5ab 100644
--- a/src/render/react/components/Keyboard/comp.ts
+++ b/src/render/react/components/Keyboard/comp.ts
@@ -1,4 +1,5 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -30,41 +31,25 @@ export type KeyboardProps = CommonProps & {
   onOk?: () => void;
 };
 
-function setKeyboardProps(comp, newProps: KeyboardProps, oldProps: KeyboardProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Keyboard", comp, newProps, oldProps }),
-    mode(mode) {
-      if (mode !== oldProps.mode && typeof modes[mode] !== "undefined") {
-        comp.setMode(modes[mode]);
-      }
-    },
-    textarea(textarea) {
-      if (textarea?.uid !== oldProps.textarea?.uid) {
-        comp.setTextarea(textarea);
-      }
-    },
-    onClose(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CANCEL);
-    },
-    onOk(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_READY);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const keyboardSetters = {
+  mode(comp, mode) {
+    comp.setMode(modes[mode]);
+  },
+  textarea(comp, textarea) {
+    comp.setTextarea(textarea);
+  },
+  onClose(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CANCEL);
+  },
+  onOk(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_READY);
+  },
+};
 
 export class KeyboardComp extends NativeView {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -73,14 +58,15 @@ export class KeyboardComp extends NativeView {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: KeyboardProps, oldProps: KeyboardProps) {
-    setKeyboardProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<KeyboardProps>, oldProps: KeyboardProps) {
+    setComponentProps(this, "Keyboard", updatePayload, oldProps, keyboardSetters);
   }
   insertBefore(child, beforeChild) {}
   appendInitialChild(child) {}
diff --git a/src/render/react/components/Keyboard/config.ts b/src/render/react/components/Keyboard/config.ts
index 72c92f1fd..370ebefb0 100644
--- a/src/render/react/components/Keyboard/config.ts
+++ b/src/render/react/components/Keyboard/config.ts
@@ -13,7 +13,7 @@ export default class KeyboardConfig implements LvgljsComponentConfig<KeyboardPro
   }
   commitMount(instance, newProps: KeyboardProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: KeyboardProps, newProps: KeyboardProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: KeyboardProps, oldProps: KeyboardProps) {}
diff --git a/src/render/react/components/Line/comp.ts b/src/render/react/components/Line/comp.ts
index d0c75510e..96a98c04c 100644
--- a/src/render/react/components/Line/comp.ts
+++ b/src/render/react/components/Line/comp.ts
@@ -1,8 +1,6 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
-  EVENTTYPE_MAP,
-  handleEvent,
-  setStyle,
   styleGetterProp,
 } from "../config";
 
@@ -13,33 +11,16 @@ export type LineProps = CommonProps & {
   points: [number, number][];
 };
 
-function setLineProps(comp, newProps, oldProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Keyboard", comp, newProps, oldProps }),
-    points(points) {
-      if (
-        (Array.isArray(points) && points !== oldProps?.points) ||
-        points?.length !== oldProps?.points?.length
-      ) {
-        comp.setPoints(points, points.length);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const lineSetters = {
+  points(comp, points) {
+    comp.setPoints(points, points.length);
+  },
+};
 
 export class LineComp extends NativeLine {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -48,14 +29,15 @@ export class LineComp extends NativeLine {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: LineProps, oldProps: LineProps) {
-    setLineProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<LineProps>, oldProps: LineProps) {
+    setComponentProps(this, "Line", updatePayload, oldProps, lineSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Line";
diff --git a/src/render/react/components/Line/config.ts b/src/render/react/components/Line/config.ts
index e0f44aa10..c0aef7935 100644
--- a/src/render/react/components/Line/config.ts
+++ b/src/render/react/components/Line/config.ts
@@ -14,7 +14,7 @@ export default class LineConfig implements LvgljsComponentConfig<LineProps, Line
   }
   commitMount(instance, newProps: LineProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: LineProps, newProps: LineProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: LineProps, oldProp: LineProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Mask/comp.ts b/src/render/react/components/Mask/comp.ts
index e0bad5474..dcb6fd8cd 100644
--- a/src/render/react/components/Mask/comp.ts
+++ b/src/render/react/components/Mask/comp.ts
@@ -1,5 +1,6 @@
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnClickEvent } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps, OnClickEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -31,46 +32,34 @@ export type MaskProps = CommonProps & {
   }) => void;
 };
 
-function setMaskProps(comp, newProps: MaskProps, oldProps: MaskProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Mask", comp, newProps, oldProps }),
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Mask",
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    onPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
-    },
-    onLongPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
-    },
-    onLongPressRepeat(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const maskSetters = {
+  onPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Mask",
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  onPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
+  },
+  onLongPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
+  },
+  onLongPressRepeat(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
+  },
+};
 
 export class MaskComp extends NativeMask {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -79,14 +68,15 @@ export class MaskComp extends NativeMask {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: MaskProps, oldProps: MaskProps) {
-    setMaskProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<MaskProps>, oldProps: MaskProps) {
+    setComponentProps(this, "Mask", updatePayload, oldProps, maskSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Mask";
diff --git a/src/render/react/components/Mask/config.ts b/src/render/react/components/Mask/config.ts
index 63032b041..0e0eabc9e 100644
--- a/src/render/react/components/Mask/config.ts
+++ b/src/render/react/components/Mask/config.ts
@@ -14,7 +14,7 @@ export default class MaskConfig implements LvgljsComponentConfig<MaskProps, Mask
   }
   commitMount(instance, newProps: MaskProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: MaskProps, newProps: MaskProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: MaskProps, oldProps: MaskProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/ProgressBar/comp.ts b/src/render/react/components/ProgressBar/comp.ts
index 6976eaecb..c5b9e7ab1 100644
--- a/src/render/react/components/ProgressBar/comp.ts
+++ b/src/render/react/components/ProgressBar/comp.ts
@@ -1,6 +1,7 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps } from "../common/index";
-import { STYLE_TYPE, handleEvent, setStyle, styleGetterProp } from "../config";
+import { setComponentProps, CommonProps } from "../common/index";
+import { STYLE_TYPE, setStyle, styleGetterProp } from "../config";
 
 const bridge = globalThis[Symbol.for('lvgljs')];
 const NativeProgressBar = bridge.NativeRender.NativeComponents.ProgressBar;
@@ -8,66 +9,36 @@ const NativeProgressBar = bridge.NativeRender.NativeComponents.ProgressBar;
 export type ProgressBarProps = CommonProps & {
   value: number;
   range: number[];
-  animationTime?: number;
   useAnimation?: boolean;
   indicatorStyle?: StyleProps;
 };
 
-function setProgressBarProps(comp, newProps: ProgressBarProps, oldProps: ProgressBarProps) {
-  const setter = {
-    ...CommonComponentApi({
-      compName: "ProgressBar",
+const progressBarSetters = {
+  indicatorStyle(comp, styleSheet, oldProps) {
+    setStyle({
       comp,
-      newProps,
-      oldProps,
-    }),
-    style(styleSheet) {
-      if (newProps.animationTime) {
-        styleSheet["style-transition-time"] = newProps.animationTime;
-      }
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "ProgressBar",
-        styleType: STYLE_TYPE.PART_MAIN,
-        oldStyleSheet: oldProps.style,
-      });
-    },
-    indicatorStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "ProgressBar",
-        styleType: STYLE_TYPE.PART_INDICATOR,
-        oldStyleSheet: oldProps.style,
-      });
-    },
-    value(value) {
-      if (value !== oldProps.value) {
-        comp.setValue(value, !!newProps.useAnimation);
-      }
-    },
-    range(arr) {
-      if (arr?.[0] !== oldProps?.arr?.[0] || arr?.[1] !== oldProps?.arr?.[1]) {
-        comp.setRange(arr[0], arr[1]);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+      styleSheet,
+      compName: "ProgressBar",
+      styleType: STYLE_TYPE.PART_INDICATOR,
+      oldStyleSheet: oldProps.indicatorStyle,
+    });
+  },
+  range(comp, arr) {
+    comp.setRange(arr[0], arr[1]);
+  },
+  value(comp, value) {
+    comp.setValue(value, comp.useAnimation);
+  },
+  useAnimation(comp, useAnimation: boolean) {
+    comp.useAnimation = useAnimation;
+  },
+};
 
 export class ProgressBarComp extends NativeProgressBar {
+  uid: string;
+  style: any;
+  useAnimation: boolean = false;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -76,14 +47,15 @@ export class ProgressBarComp extends NativeProgressBar {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ProgressBarProps, oldProps: ProgressBarProps) {
-    setProgressBarProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ProgressBarProps>, oldProps: ProgressBarProps) {
+    setComponentProps(this, "ProgressBar", updatePayload, oldProps, progressBarSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "ProgressBar";
diff --git a/src/render/react/components/ProgressBar/config.ts b/src/render/react/components/ProgressBar/config.ts
index 08b1aeb1e..0bc6df41b 100644
--- a/src/render/react/components/ProgressBar/config.ts
+++ b/src/render/react/components/ProgressBar/config.ts
@@ -9,12 +9,12 @@ export default class ProgressBarConfig implements LvgljsComponentConfig<Progress
   }
   createInstance(newProps: ProgressBarProps, rootInstance, context, workInProgress, uid) {
     const instance = new ProgressBarComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as ProgressBarProps);
     return instance;
   }
   commitMount(instance, newProps: ProgressBarProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: ProgressBarProps, newProps: ProgressBarProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: ProgressBarProps, oldProps: ProgressBarProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Roller/comp.ts b/src/render/react/components/Roller/comp.ts
index febf15895..2a456772d 100644
--- a/src/render/react/components/Roller/comp.ts
+++ b/src/render/react/components/Roller/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -21,52 +22,38 @@ export type RollerProps = CommonProps & {
   onChange?: (event: OnChangeEvent) => void;
 };
 
-function setRollerProps(comp, newProps: RollerProps, oldProps: RollerProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Roller", comp, newProps, oldProps }),
-    selectedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Roller",
-        styleType: STYLE_TYPE.PART_SELECTED,
-        oldStyleSheet: oldProps.selectedStyle,
-      });
-    },
-    options(options) {
-      if (options !== oldProps.options && Array.isArray(options)) {
-        comp.setOptions(options, options.length, !!newProps.infinity);
-      }
-    },
-    selectIndex(selectIndex) {
-      if (selectIndex !== oldProps.selectIndex) {
-        comp.setSelectIndex(selectIndex);
-      }
-    },
-    visibleRowCount(count) {
-      if (count !== oldProps.visibleRowCount) {
-        comp.setVisibleRowCount(count);
-      }
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const rollerSetters = {
+  selectedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Roller",
+      styleType: STYLE_TYPE.PART_SELECTED,
+      oldStyleSheet: oldProps.selectedStyle,
+    });
+  },
+  options(comp, options) {
+    comp.setOptions(options, options.length, comp.infinity);
+  },
+  selectIndex(comp, selectIndex) {
+    comp.setSelectIndex(selectIndex);
+  },
+  visibleRowCount(comp, count) {
+    comp.setVisibleRowCount(count);
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  infinity(comp, infinity: boolean) {
+    comp.infinity = infinity;
+  },
+};
 
 export class RollerComp extends NativeRoller {
+  uid: string;
+  style: any;
+  infinity: boolean = false;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -75,14 +62,15 @@ export class RollerComp extends NativeRoller {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: RollerProps, oldProps: RollerProps) {
-    setRollerProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<RollerProps>, oldProps: RollerProps) {
+    setComponentProps(this, "Roller", updatePayload, oldProps, rollerSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Roller";
diff --git a/src/render/react/components/Roller/config.ts b/src/render/react/components/Roller/config.ts
index 9da946668..dba7df22f 100644
--- a/src/render/react/components/Roller/config.ts
+++ b/src/render/react/components/Roller/config.ts
@@ -9,12 +9,12 @@ export default class RollerConfig implements LvgljsComponentConfig<RollerProps,
   }
   createInstance(newProps: RollerProps, rootInstance, context, workInProgress, uid) {
     const instance = new RollerComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as RollerProps);
     return instance;
   }
   commitMount(instance, newProps: RollerProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: RollerProps, newProps: RollerProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: RollerProps, oldProps: RollerProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Slider/comp.ts b/src/render/react/components/Slider/comp.ts
index bda7b395b..b6a2bb4f5 100644
--- a/src/render/react/components/Slider/comp.ts
+++ b/src/render/react/components/Slider/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -22,85 +23,68 @@ export type SliderProps = CommonProps & {
   value: number;
 };
 
-function setSliderProps(comp, newProps: SliderProps, oldProps: SliderProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Slider", comp, newProps, oldProps }),
-    indicatorStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Slider",
-        styleType: STYLE_TYPE.PART_INDICATOR,
-        oldStyleSheet: oldProps.indicatorStyle,
-      });
-    },
-    onIndicatorPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Slider",
-        styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onIndicatorPressedStyle,
-      });
-    },
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Slider",
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    knobStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Slider",
-        styleType: STYLE_TYPE.PART_KNOB,
-        oldStyleSheet: oldProps.knobStyle,
-      });
-    },
-    onKnobPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Slider",
-        styleType: STYLE_TYPE.PART_KNOB | STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onKnobPressedStyle,
-      });
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    range(arr) {
-      if (!Array.isArray(arr)) return;
-      const [min, max] = arr;
-      if (min === oldProps.range?.[0] && max === oldProps.range?.[1]) return;
-      if (isNaN(min) || isNaN(max)) return;
-      comp.setRange([min, max]);
-    },
-    value(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.value) return;
-      comp.setValue(val);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const sliderSetters = {
+  indicatorStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Slider",
+      styleType: STYLE_TYPE.PART_INDICATOR,
+      oldStyleSheet: oldProps.indicatorStyle,
+    });
+  },
+  onIndicatorPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Slider",
+      styleType: STYLE_TYPE.PART_INDICATOR | STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onIndicatorPressedStyle,
+    });
+  },
+  onPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Slider",
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  knobStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Slider",
+      styleType: STYLE_TYPE.PART_KNOB,
+      oldStyleSheet: oldProps.knobStyle,
+    });
+  },
+  onKnobPressedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Slider",
+      styleType: STYLE_TYPE.PART_KNOB | STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onKnobPressedStyle,
+    });
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  range(comp, arr) {
+    const [min, max] = arr;
+    comp.setRange([min, max]);
+  },
+  value(comp, val) {
+    comp.setValue(val);
+  },
+};
 
 export class SliderComp extends NativeSlider {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -109,14 +93,15 @@ export class SliderComp extends NativeSlider {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: SliderProps, oldProps: SliderProps) {
-    setSliderProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<SliderProps>, oldProps: SliderProps) {
+    setComponentProps(this, "Slider", updatePayload, oldProps, sliderSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Slider";
diff --git a/src/render/react/components/Slider/config.ts b/src/render/react/components/Slider/config.ts
index 30956694e..9e1c38497 100644
--- a/src/render/react/components/Slider/config.ts
+++ b/src/render/react/components/Slider/config.ts
@@ -9,12 +9,12 @@ export default class SliderConfig implements LvgljsComponentConfig<SliderProps,
   }
   createInstance(newProps: SliderProps, rootInstance, context, workInProgress, uid) {
     const instance = new SliderComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as SliderProps);
     return instance;
   }
   commitMount(instance, newProps: SliderProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: SliderProps, newProps: SliderProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: SliderProps, oldProps: SliderProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Switch/comp.ts b/src/render/react/components/Switch/comp.ts
index cd004b418..b4ee8d1c6 100644
--- a/src/render/react/components/Switch/comp.ts
+++ b/src/render/react/components/Switch/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   STYLE_TYPE,
@@ -18,47 +19,31 @@ export type SwitchProps = CommonProps & {
   disabled?: boolean;
 };
 
-function setSwitchProps(comp, newProps: SwitchProps, oldProps: SwitchProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Switch", comp, newProps, oldProps }),
-    checkedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Switch",
-        styleType: STYLE_TYPE.STATE_CHECKED,
-        oldStyleSheet: oldProps.checkedStyle,
-      });
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    checked(val) {
-      if (isNaN(val)) return;
-      if (val == oldProps.value) return;
-      comp.setChecked(val);
-    },
-    disabled(val) {
-      if (val !== oldProps.disabled) {
-        comp.setDisabled(val);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const switchSetters = {
+  checkedStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Switch",
+      styleType: STYLE_TYPE.STATE_CHECKED,
+      oldStyleSheet: oldProps.checkedStyle,
+    });
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  checked(comp, val) {
+    comp.setChecked(val);
+  },
+  disabled(comp, val) {
+    comp.setDisabled(val);
+  },
+};
 
 export class SwitchComp extends NativeComp {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -67,17 +52,18 @@ export class SwitchComp extends NativeComp {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps, oldProps) {
-    setSwitchProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<SwitchProps>, oldProps: SwitchProps) {
+    setComponentProps(this, "Switch", updatePayload, oldProps, switchSetters);
   }
   insertBefore(child, beforeChild) {
-    this.insertChildBefore(child, beforeChild);
+    super.insertChildBefore(child, beforeChild);
   }
   appendInitialChild(child) {
     this.appendChild(child);
diff --git a/src/render/react/components/Switch/config.ts b/src/render/react/components/Switch/config.ts
index 0bb5f012a..24a8d97cb 100644
--- a/src/render/react/components/Switch/config.ts
+++ b/src/render/react/components/Switch/config.ts
@@ -13,7 +13,7 @@ export default class SwitchConfig implements LvgljsComponentConfig<SwitchProps,
   }
   commitMount(instance, newProps: SwitchProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: SwitchProps, newProps: SwitchProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: SwitchProps, oldProps: SwitchProps) {}
diff --git a/src/render/react/components/Tabs/comp.ts b/src/render/react/components/Tabs/comp.ts
index 28a3e657f..4234936c9 100644
--- a/src/render/react/components/Tabs/comp.ts
+++ b/src/render/react/components/Tabs/comp.ts
@@ -1,9 +1,8 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { setComponentProps, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import {
   EVENTTYPE_MAP,
-  STYLE_TYPE,
   handleEvent,
-  setStyle,
   styleGetterProp,
 } from "../config";
 
@@ -16,35 +15,20 @@ export type TabsProps = CommonProps & {
   tabSize?: number;
 };
 
-function setTabsProps(comp, newProps: TabsProps, oldProps: TabsProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Tabs", comp, newProps, oldProps }),
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    onPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
-    },
-    onLongPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
-    },
-    onLongPressRepeat(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const tabsSetters = {
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  onPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
+  },
+  onLongPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
+  },
+  onLongPressRepeat(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
+  },
+};
 
 const tabPositionObj = {
   left: 1 << 0,
@@ -54,6 +38,9 @@ const tabPositionObj = {
 };
 
 export class TabsComp extends NativeTabs {
+  uid: string;
+  style: any;
+  
   constructor({ uid, tabPosition, tabSize = 0 }) {
     tabPosition = tabPositionObj[tabPosition] || tabPositionObj.top;
     super({ uid, tabPosition, tabSize });
@@ -63,16 +50,19 @@ export class TabsComp extends NativeTabs {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
     this.currentAppendIndex = 0;
   }
-  setProps(newProps: TabsProps, oldProps: TabsProps) {
-    this.tabs = newProps.tabs;
-    setTabsProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<TabsProps>, oldProps: TabsProps) {
+    if (updatePayload?.tabs) {
+      this.tabs = updatePayload.tabs;
+    }
+    setComponentProps(this, "Tabs", updatePayload, oldProps, tabsSetters);
   }
   insertBefore(child, beforeChild) {}
   static tagName = "Tabs";
diff --git a/src/render/react/components/Tabs/config.ts b/src/render/react/components/Tabs/config.ts
index bdc388137..d75b9628d 100644
--- a/src/render/react/components/Tabs/config.ts
+++ b/src/render/react/components/Tabs/config.ts
@@ -14,7 +14,7 @@ export default class TabsConfig implements LvgljsComponentConfig<TabsProps, Tabs
   }
   commitMount(instance, newProps: TabsProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: TabsProps, newProps: TabsProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: TabsProps, oldProps: TabsProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/Text/comp.ts b/src/render/react/components/Text/comp.ts
index f47114a00..a55f79e2f 100644
--- a/src/render/react/components/Text/comp.ts
+++ b/src/render/react/components/Text/comp.ts
@@ -1,8 +1,6 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
-  EVENTTYPE_MAP,
-  STYLE_TYPE,
-  handleEvent,
   setStyle,
   styleGetterProp,
 } from "../config";
@@ -14,38 +12,26 @@ export type TextProps = CommonProps & {
   children: string | number | (string | number)[];
 };
 
-function setTextProps(comp, newProps: TextProps, oldProps: TextProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Text", comp, newProps, oldProps }),
-    children(str) {
-      const type = typeof str;
-      if ((type == "string" || type == "number") && oldProps.children !== str) {
-        comp.setText(String(str));
-      } else if (Array.isArray(str)) {
-        const isStringArr = str.every(
-          (item) => typeof item === "string" || typeof item === "number",
-        );
-        if (isStringArr) {
-          comp.setText(str.join(""));
-        }
+const textSetters = {
+  children(comp: typeof NativeText, str: string | number | (string | number)[]) {
+    const type = typeof str;
+    if ((type == "string" || type == "number")) {
+      comp.setText(String(str));
+    } else if (Array.isArray(str)) {
+      const isStringArr = str.every(
+        (item) => typeof item === "string" || typeof item === "number",
+      );
+      if (isStringArr) {
+        comp.setText(str.join(""));
       }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
     }
-  });
-}
+  },
+};
 
 export class TextComp extends NativeText {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -54,14 +40,15 @@ export class TextComp extends NativeText {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: TextProps, oldProps: TextProps) {
-    setTextProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<TextProps>, oldProps: TextProps) {
+    setComponentProps(this, "Text", updatePayload, oldProps, textSetters);
   }
   insertBefore(child, beforeChild) {}
   appendInitialChild(child) {}
diff --git a/src/render/react/components/Text/config.ts b/src/render/react/components/Text/config.ts
index 43b7afc67..03ac2348b 100644
--- a/src/render/react/components/Text/config.ts
+++ b/src/render/react/components/Text/config.ts
@@ -8,12 +8,12 @@ export default class TextConfig implements LvgljsComponentConfig<TextProps, Text
   }
   createInstance(newProps: TextProps, rootInstance, context, workInProgress, uid) {
     const instance = new TextComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as TextProps);
     return instance;
   }
   commitMount(instance, newProps: TextProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: TextProps, newProps: TextProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: TextProps, oldProps: TextProps) {}
diff --git a/src/render/react/components/Textarea/comp.ts b/src/render/react/components/Textarea/comp.ts
index 2b5f0bfec..5207f1778 100644
--- a/src/render/react/components/Textarea/comp.ts
+++ b/src/render/react/components/Textarea/comp.ts
@@ -1,5 +1,6 @@
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import { StyleProps } from "../../core/style";
-import { CommonComponentApi, CommonProps, OnChangeEvent } from "../common/index";
+import { setComponentProps, CommonProps, OnChangeEvent } from "../common/index";
 import {
   EVENTTYPE_MAP,
   handleEvent,
@@ -26,62 +27,40 @@ export type TextAreaProps = CommonProps & {
   autoKeyBoard: boolean;
 };
 
-function setTextareaProps(comp, newProps: TextAreaProps, oldProps: TextAreaProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Textarea", comp, newProps, oldProps }),
-    placeholder(str) {
-      if (str !== oldProps.placeholder) {
-        comp.setPlaceHolder(str);
-      }
-    },
-    mode(mode) {
-      if (mode === "password") {
-        comp.setPasswordMode(true);
-      } else if (oldProps.mode === "password") {
-        comp.setPasswordMode(false);
-      }
-    },
-    onFocusStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName: "Textarea",
-        styleType: 0x0002,
-        oldStyleSheet: oldProps.onFocusStyle,
-      });
-    },
-    onChange(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
-    },
-    onFocus(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_FOCUSED);
-    },
-    value(str) {
-      if (str !== oldProps.value) {
-        comp.setText(str);
-      }
-    },
-    autoKeyBoard(payload) {
-      if (payload !== oldProps?.autoKeyBoard) {
-        comp.setAutoKeyboard(payload);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const textareaSetters = {
+  placeholder(comp, str) {
+    comp.setPlaceHolder(str);
+  },
+  mode(comp, mode) {
+    comp.setPasswordMode(!!(mode === "password"));
+  },
+  onFocusStyle(comp, styleSheet, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName: "Textarea",
+      styleType: 0x0002,
+      oldStyleSheet: oldProps.onFocusStyle,
+    });
+  },
+  onChange(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_VALUE_CHANGED);
+  },
+  onFocus(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_FOCUSED);
+  },
+  value(comp, str) {
+    comp.setText(str);
+  },
+  autoKeyBoard(comp, payload) {
+    comp.setAutoKeyboard(payload);
+  },
+};
 
 export class TextareaComp extends NativeView {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -92,14 +71,15 @@ export class TextareaComp extends NativeView {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: TextAreaProps, oldProps: TextAreaProps) {
-    setTextareaProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<TextAreaProps>, oldProps: TextAreaProps) {
+    setComponentProps(this, "Textarea", updatePayload, oldProps, textareaSetters);
   }
   insertBefore(child, beforeChild) {}
   appendInitialChild(child) {}
diff --git a/src/render/react/components/Textarea/config.ts b/src/render/react/components/Textarea/config.ts
index 9a6754d49..81f920311 100644
--- a/src/render/react/components/Textarea/config.ts
+++ b/src/render/react/components/Textarea/config.ts
@@ -8,12 +8,12 @@ export default class TextareaConfig implements LvgljsComponentConfig<TextAreaPro
   }
   createInstance(newProps: TextAreaProps, rootInstance, context, workInProgress, uid) {
     const instance = new TextareaComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as TextAreaProps);
     return instance;
   }
   commitMount(instance, newProps: TextAreaProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: TextAreaProps, newProps: TextAreaProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: TextAreaProps, oldProps: TextAreaProps) {}
diff --git a/src/render/react/components/View/comp.ts b/src/render/react/components/View/comp.ts
index 937bbfe58..879ef58e7 100644
--- a/src/render/react/components/View/comp.ts
+++ b/src/render/react/components/View/comp.ts
@@ -1,8 +1,6 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
+import { setComponentProps, CommonProps } from "../common/index";
 import {
-  EVENTTYPE_MAP,
-  STYLE_TYPE,
-  handleEvent,
   setStyle,
   styleGetterProp,
 } from "../config";
@@ -12,25 +10,12 @@ const NativeView = bridge.NativeRender.NativeComponents.View;
 
 export type ViewProps = CommonProps
 
-function setViewProps(comp, newProps: ViewProps, oldProps: ViewProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "View", comp, newProps, oldProps }),
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const viewSetters = {};
 
 export class ViewComp extends NativeView {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -39,14 +24,15 @@ export class ViewComp extends NativeView {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: ViewProps, oldProps: ViewProps) {
-    setViewProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<ViewProps>, oldProps: ViewProps) {
+    setComponentProps(this, "View", updatePayload, oldProps, viewSetters);
   }
   insertBefore(child, beforeChild) {
     super.insertChildBefore(child, beforeChild);
diff --git a/src/render/react/components/View/config.ts b/src/render/react/components/View/config.ts
index a8380b7ff..748974ab7 100644
--- a/src/render/react/components/View/config.ts
+++ b/src/render/react/components/View/config.ts
@@ -1,5 +1,6 @@
 import { LvgljsComponentConfig } from "../config";
 import { ViewComp, ViewProps } from "./comp";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 
 export default class ViewConfig implements LvgljsComponentConfig<ViewProps, ViewComp> {
   tagName = "View";
@@ -8,12 +9,12 @@ export default class ViewConfig implements LvgljsComponentConfig<ViewProps, View
   }
   createInstance(newProps: ViewProps, rootInstance, context, workInProgress, uid) {
     const instance = new ViewComp({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as ViewProps);
     return instance;
   }
   commitMount(instance, newProps: ViewProps, internalInstanceHandle) {}
-  commitUpdate(instance, updatePayload, oldProps: ViewProps, newProps: ViewProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+  commitUpdate(instance: ViewComp, updatePayload: UpdatePayload<ViewProps>, oldProps: ViewProps, newProps: ViewProps, finishedWork) {
+    instance.setProps(updatePayload, oldProps);
   }
   commitUnmount(instance) {}
   setProps(newProps: ViewProps, oldProps: ViewProps) {}
diff --git a/src/render/react/components/Window/comp.ts b/src/render/react/components/Window/comp.ts
index a6af15b95..86eada798 100644
--- a/src/render/react/components/Window/comp.ts
+++ b/src/render/react/components/Window/comp.ts
@@ -1,9 +1,8 @@
-import { CommonComponentApi, CommonProps } from "../common/index";
+import { setComponentProps, CommonProps } from "../common/index";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 import {
-  EVENTTYPE_MAP,
-  handleEvent,
-  setStyle,
   styleGetterProp,
+  setStyle,
 } from "../config";
 
 const bridge = globalThis[Symbol.for('lvgljs')];
@@ -13,30 +12,16 @@ export type WindowProps = CommonProps & {
   title: string;
 };
 
-function setWindowProps(comp, newProps: WindowProps, oldProps: WindowProps) {
-  const setter = {
-    ...CommonComponentApi({ compName: "Window", comp, newProps, oldProps }),
-    title(title) {
-      if (oldProps.title != title) {
-        comp.setTitle(title);
-      }
-    },
-  };
-  Object.keys(setter).forEach((key) => {
-    if (newProps.hasOwnProperty(key)) {
-      setter[key](newProps[key]);
-    }
-  });
-  comp.dataset = {};
-  Object.keys(newProps).forEach((prop) => {
-    const index = prop.indexOf("data-");
-    if (index === 0) {
-      comp.dataset[prop.substring(5)] = newProps[prop];
-    }
-  });
-}
+const windowSetters = {
+  title(comp, title) {
+    comp.setTitle(title);
+  },
+};
 
 export class Window extends NativeComp {
+  uid: string;
+  style: any;
+  
   constructor({ uid }) {
     super({ uid });
     this.uid = uid;
@@ -45,14 +30,15 @@ export class Window extends NativeComp {
     const that = this;
     this.style = new Proxy(this, {
       get(obj, prop) {
-        if (styleGetterProp.includes(prop)) {
-          return style[prop].call(that);
+        const propStr = String(prop);
+        if (styleGetterProp.includes(propStr)) {
+          return style[propStr].call(that);
         }
       },
     });
   }
-  setProps(newProps: WindowProps, oldProps: WindowProps) {
-    setWindowProps(this, newProps, oldProps);
+  setProps(updatePayload: UpdatePayload<WindowProps>, oldProps: WindowProps) {
+    setComponentProps(this, "Window", updatePayload, oldProps, windowSetters);
   }
   insertBefore(child, beforeChild) {}
   appendInitialChild(child) {
diff --git a/src/render/react/components/Window/config.ts b/src/render/react/components/Window/config.ts
index d90782ad2..ba9260001 100644
--- a/src/render/react/components/Window/config.ts
+++ b/src/render/react/components/Window/config.ts
@@ -8,12 +8,12 @@ export default class WindowConfig implements LvgljsComponentConfig<WindowProps,
   }
   createInstance(newProps: WindowProps, rootInstance, context, workInProgress, uid) {
     const instance = new Window({ uid });
-    instance.setProps(newProps, {});
+    instance.setProps(newProps, {} as WindowProps);
     return instance;
   }
   commitMount(instance, props: WindowProps, internalInstanceHandle) {}
   commitUpdate(instance, updatePayload, oldProps: WindowProps, newProps: WindowProps, finishedWork) {
-    instance.setProps(newProps, oldProps);
+    instance.setProps(updatePayload, oldProps);
   }
   setProps(newProps: WindowProps, oldProps: WindowProps) {}
   insertBefore(child, beforeChild) {}
diff --git a/src/render/react/components/common/index.ts b/src/render/react/components/common/index.ts
index 0660a3cac..c8c658226 100644
--- a/src/render/react/components/common/index.ts
+++ b/src/render/react/components/common/index.ts
@@ -5,9 +5,9 @@ import {
   STYLE_TYPE,
   handleEvent,
   setStyle,
-  styleGetterProp,
 } from "../config";
 import { StyleProps } from "../../core/style";
+import { UpdatePayload } from "../../core/reconciler/propDiffer";
 
 export type CommonProps = {
   style?: StyleProps;
@@ -56,6 +56,14 @@ export type CommonProps = {
     currentTarget: any,
     stopPropogation: () => void,
   }) => void;
+  onCancel?: (event: {
+    target: any,
+    currentTarget: any,
+    stopPropogation: () => void,
+  }) => void;
+  onFocusedStyle?: StyleProps;
+  addToFocusGroup?: boolean;
+  autoFocus?: boolean;
 };
 
 export type OnChangeEvent = {
@@ -63,6 +71,7 @@ export type OnChangeEvent = {
   currentTarget: any,
   stopPropogation: () => void,
   value: number,
+  checked?: boolean,
 }
 
 export type OnClickEvent = {
@@ -71,96 +80,133 @@ export type OnClickEvent = {
   stopPropogation: () => void,
 }
 
-export const CommonComponentApi = function ({
-  compName,
-  comp,
-  newProps,
-  oldProps,
-}: {compName: any, comp: any, newProps: CommonProps, oldProps: CommonProps}) {
-  return {
-    style(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName,
-        styleType: STYLE_TYPE.PART_MAIN,
-        oldStyleSheet: oldProps.style,
-      });
-    },
-    align({ type, pos = [0, 0] }) {
-      if (
-        !type ||
-        (type === oldProps.align?.type &&
-          newProps.align?.pos?.[0] === oldProps.align?.pos?.[0] &&
-          newProps.align?.pos?.[1] === oldProps.align?.pos?.[1])
-      )
-        return;
-      comp.align(type, pos);
-    },
-    alignTo({ type, pos = [0, 0], parent }) {
-      if (
-        !type ||
-        (type === oldProps.alignTo?.type &&
-          newProps.alignTo?.pos?.[0] === oldProps.alignTo?.pos?.[0] &&
-          newProps.alignTo?.pos?.[1] === oldProps.alignTo?.pos?.[1] &&
-          parent?.uid === oldProps.alignTo?.parent?.uid)
-      )
-        return;
-      comp.alignTo(type, pos, parent);
-    },
-    scrollbarStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName,
-        styleType: STYLE_TYPE.PART_SCROLLBAR,
-        oldStyleSheet: oldProps.scrollbarStyle,
-      });
-    },
-    onScrollbarPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName,
-        styleType: STYLE_TYPE.PART_SCROLLBAR | STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onScrollbarPressedStyle,
-      });
-    },
-    onScrollbarScrollingStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName,
-        styleType: STYLE_TYPE.PART_SCROLLBAR | STYLE_TYPE.STATE_SCROLLED,
-        oldStyleSheet: oldProps.scrollbarScrollingStyle,
-      });
-    },
-    onPressedStyle(styleSheet) {
-      setStyle({
-        comp,
-        styleSheet,
-        compName,
-        styleType: STYLE_TYPE.STATE_PRESSED,
-        oldStyleSheet: oldProps.onPressedStyle,
-      });
-    },
-    onClick(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
-    },
-    onPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
-    },
-    onLongPressed(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
-    },
-    onLongPressRepeat(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
-    },
-    onPressLost(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESS_LOST);
-    },
-    onReleased(fn) {
-      handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_RELEASED);
-    },
-  };
+export const commonSetters = {
+  style(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.PART_MAIN,
+      oldStyleSheet: oldProps.style,
+    });
+  },
+  align(comp, { type, pos = [0, 0] }) {
+    comp.align(type, pos);
+  },
+  alignTo(comp, { type, pos = [0, 0], parent }) {
+    comp.alignTo(type, pos, parent);
+  },
+  scrollbarStyle(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.PART_SCROLLBAR,
+      oldStyleSheet: oldProps.scrollbarStyle,
+    });
+  },
+  onScrollbarPressedStyle(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.PART_SCROLLBAR | STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onScrollbarPressedStyle,
+    });
+  },
+  onScrollbarScrollingStyle(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.PART_SCROLLBAR | STYLE_TYPE.STATE_SCROLLED,
+      oldStyleSheet: oldProps.scrollbarScrollingStyle,
+    });
+  },
+  onPressedStyle(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.STATE_PRESSED,
+      oldStyleSheet: oldProps.onPressedStyle,
+    });
+  },
+  onClick(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CLICKED);
+  },
+  onPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESSED);
+  },
+  onLongPressed(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED);
+  },
+  onLongPressRepeat(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_LONG_PRESSED_REPEAT);
+  },
+  onPressLost(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_PRESS_LOST);
+  },
+  onReleased(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_RELEASED);
+  },
+  onCancel(comp, fn) {
+    handleEvent(comp, fn, EVENTTYPE_MAP.EVENT_CANCEL);
+  },
+  onFocusedStyle(comp, styleSheet, compName, oldProps) {
+    setStyle({
+      comp,
+      styleSheet,
+      compName,
+      styleType: STYLE_TYPE.STATE_FOCUSED,
+      oldStyleSheet: oldProps.onFocusedStyle,
+    });
+  },
+  addToFocusGroup(comp, v) {
+    if (v) comp.addToFocusGroup?.();
+  },
+  autoFocus() {
+    // handled in commitMount
+  },
 };
+
+export function setComponentProps(
+  comp: any,
+  compName: string,
+  updatePayload: UpdatePayload<CommonProps>,
+  oldProps: CommonProps,
+  componentSetters: Record<string, Function>
+) {
+  if (!updatePayload) return;
+  
+  for (const key in updatePayload) {
+    const value = updatePayload[key];
+    const setter = componentSetters[key] || commonSetters[key];
+    if (!setter) continue;
+    if (setter.length === 0) {
+      setter();
+    } else if (setter.length === 2) {
+      setter(comp, value);
+    } else if (setter.length === 3) {
+      setter(comp, value, oldProps);
+    } else if (setter.length === 4) {
+      setter(comp, value, compName, oldProps);
+    }
+  }
+  
+  comp.dataset = {};
+  for (const key in updatePayload) {
+    if (key.indexOf("data-") === 0) {
+      comp.dataset[key.substring(5)] = updatePayload[key];
+    }
+  }
+}
+
+export function reorderProps<T extends object>(props: T, priorityKey: keyof T & string): T {
+  if (props && priorityKey in props) {
+    const { [priorityKey]: priorityValue, ...rest } = props;
+    return { [priorityKey]: priorityValue, ...rest } as T;
+  }
+
+  return props;
+}
\ No newline at end of file
diff --git a/src/render/react/core/focus-group/index.ts b/src/render/react/core/focus-group/index.ts
new file mode 100644
index 000000000..33037f448
--- /dev/null
+++ b/src/render/react/core/focus-group/index.ts
@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+const bridge = globalThis[Symbol.for('lvgljs')] as any;
+const FocusGroup = bridge?.NativeRender?.FocusGroup;
+
+export type EdgeDirection = 'next' | 'prev';
+
+export interface UseFocusGroupEdgeOptions {
+  /**
+   * Callback when focus reaches the edge.
+   * @param direction 'next' means bottom/right edge, 'prev' means top/left edge
+   */
+  onEdge: (direction: EdgeDirection) => void;
+  
+  /**
+   * Whether to enable wrap (focus wraps to the other end when reaching edge).
+   * Default false so that the edge callback can be triggered.
+   */
+  wrap?: boolean;
+}
+
+/**
+ * Listen for focus group edge events
+ * 
+ * @example
+ * ```tsx
+ * useFocusGroupEdge({
+ *   onEdge: (direction) => {
+ *     if (direction === 'next' && !isLastPage) {
+ *       setCurrentPage(p => p + 1);
+ *     } else if (direction === 'prev' && !isFirstPage) {
+ *       setCurrentPage(p => p - 1);
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export function useFocusGroupEdge(options: UseFocusGroupEdgeOptions) {
+  const { onEdge, wrap = false } = options;
+  const callbackRef = useRef(onEdge);
+  
+  useEffect(() => {
+    callbackRef.current = onEdge;
+  }, [onEdge]);
+
+  useEffect(() => {
+    if (!FocusGroup) {
+      console.warn('FocusGroup API not available');
+      return;
+    }
+
+    FocusGroup.setWrap(wrap);
+
+    const handler = (isNext: boolean) => {
+      const direction: EdgeDirection = isNext ? 'next' : 'prev';
+      callbackRef.current(direction);
+    };
+
+    FocusGroup.setEdgeCallback(handler);
+
+    return () => {
+      FocusGroup.setWrap(true);
+      FocusGroup.setEdgeCallback(null);
+    };
+  }, [wrap]);
+}
+
+export function setFocusGroupWrap(wrap: boolean) {
+  if (!FocusGroup) {
+    console.warn('FocusGroup API not available');
+    return;
+  }
+  FocusGroup.setWrap(wrap);
+}
diff --git a/src/render/react/core/reconciler/index.js b/src/render/react/core/reconciler/index.js
index 0bdda5777..3739290c7 100644
--- a/src/render/react/core/reconciler/index.js
+++ b/src/render/react/core/reconciler/index.js
@@ -1,6 +1,8 @@
 import { getComponentByTagName } from "../../components/config";
 import { unRegistEvent } from "../event";
 import Reconciler from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+import { diffProps } from "./propDiffer.ts";
 
 let id = 1;
 
@@ -11,11 +13,24 @@ export const getUid = () => {
 const instanceMap = new Map();
 
 export const getInstance = (uid) => {
-  return instanceMap[uid];
+  return instanceMap.get(uid);
+};
+
+const cleanupInstance = (child) => {
+  if (!child) return;
+  const uid = child.uid;
+  if (uid) {
+    unRegistEvent(uid);
+    instanceMap.delete(uid);
+  }
+  child.style = null;
+  child.dataset = null;
+  child.uid = null; 
+  child.close?.();
 };
 
 const HostConfig = {
-  now: Date.now,
+  // --- Core Methods ---
   getPublicInstance: (instance) => {
     //for supporting refs
     return instance;
@@ -26,16 +41,46 @@ const HostConfig = {
     };
     return context;
   },
-  prepareForCommit: () => {},
-  resetAfterCommit: () => {},
   getChildHostContext: () => {
     return {};
   },
+  prepareForCommit: () => {
+    return null;
+  },
+  resetAfterCommit: () => {},
+  preparePortalMount: () => {},
+  
+  // --- Scheduling ---
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  supportsMicrotasks: true,
+  scheduleMicrotask: typeof queueMicrotask === 'function' 
+    ? queueMicrotask 
+    : (fn) => Promise.resolve().then(fn),
+  
+  // --- Mode Configuration ---
+  isPrimaryRenderer: true,
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  
+  // --- Event Priority ---
+  getCurrentEventPriority: () => {
+    return DefaultEventPriority;
+  },
+  
+  // --- Instance Lifecycle ---
   shouldSetTextContent: function (type, props) {
+    // Keep text as a prop for our `Text` host component, not as separate text children.
+    if (type === "Text") {
+      const c = props?.children;
+      if (typeof c === "string" || typeof c === "number") return true;
+      if (Array.isArray(c)) {
+        return c.every((x) => typeof x === "string" || typeof x === "number");
+      }
+    }
     return false;
-    return (
-      typeof props.children === "string" || typeof props.children === "number"
-    );
   },
   createInstance: (
     type,
@@ -53,7 +98,6 @@ const HostConfig = {
       workInProgress,
       uid,
     );
-    instanceMap[uid] = instance;
     return instance;
   },
   createTextInstance: (
@@ -62,47 +106,58 @@ const HostConfig = {
     context,
     workInProgress,
   ) => {
-    return null;
-    // const { createInstance } = getComponentByTagName('Text');
-    // const uid = getUid()
-
-    // return createInstance(
-    //   {
-    //     text
-    //   },
-    //   rootContainerInstance,
-    //   context,
-    //   workInProgress,
-    //   uid
-    // );
+    const { createInstance } = getComponentByTagName("Text");
+    const uid = getUid();
+    const instance = createInstance(
+      { children: text },
+      rootContainerInstance,
+      context,
+      workInProgress,
+      uid,
+    );
+    return instance;
   },
   appendInitialChild: (parent, child) => {
     parent.appendChild(child);
   },
+  finalizeInitialChildren: (instance, type, props) => {
+    return true;
+  },
+  prepareUpdate(instance, type, oldProps, newProps, rootContainer, hostContext) {
+    const skipKeys = type === 'Text' ? [] : ['children'];
+    return diffProps(oldProps, newProps, skipKeys);
+  },
+
+  // --- Mutation Methods ---
   appendChild(parent, child) {
     parent.appendChild(child);
   },
-  finalizeInitialChildren: (yueElement, type, props) => {
-    return true;
+  appendChildToContainer: function (container, child) {
+    container.add(child);
   },
   insertBefore: (parent, child, beforeChild) => {
     parent.insertBefore(child, beforeChild);
   },
-  supportsMutation: true,
-  appendChildToContainer: function (container, child) {
-    container.add(child);
-  },
   insertInContainerBefore: (container, child, beforeChild) => {
-    container.add(child);
+    container.insertBefore(child, beforeChild);
+  },
+  removeChild(parent, child) {
+    parent?.removeChild(child);
   },
   removeChildFromContainer: (container, child) => {
     container.delete(child);
-    if (child.close) {
-      child.close();
-    }
   },
-  prepareUpdate(instance, oldProps, newProps) {
-    return true;
+  resetTextContent: (instance) => {},
+  commitTextUpdate(textInstance, oldText, newText) {
+    textInstance.setText(newText);
+  },
+  commitMount: function (instance, type, newProps, internalInstanceHandle) {
+    instanceMap.set(instance.uid, instance);
+    if (newProps.autoFocus) {
+      instance.focus?.();
+    }
+    const { commitMount } = getComponentByTagName(type);
+    return commitMount(instance, newProps, internalInstanceHandle);
   },
   commitUpdate: function (
     instance,
@@ -112,27 +167,40 @@ const HostConfig = {
     newProps,
     finishedWork,
   ) {
+    console.log('updatePayload', updatePayload);
     const { commitUpdate } = getComponentByTagName(type);
-    return commitUpdate(
-      instance,
-      updatePayload,
-      oldProps,
-      newProps,
-      finishedWork,
-    );
+    return commitUpdate(instance, updatePayload, oldProps, newProps, finishedWork);
   },
-  commitTextUpdate(textInstance, oldText, newText) {
-    textInstance.setText(newText);
+  
+  // --- Visibility Methods (for Suspense) ---
+  hideInstance: (instance) => {
+    instance.setStyle?.({ opa: 0 });
   },
-  removeChild(parent, child) {
-    parent?.removeChild(child);
-    unRegistEvent(child.uid);
-    delete instanceMap[child.uid];
+  hideTextInstance: (textInstance) => {
+    textInstance.setStyle?.({ opa: 0 });
   },
-  commitMount: function (instance, type, newProps, internalInstanceHandle) {
-    const { commitMount } = getComponentByTagName(type);
-    return commitMount(instance, newProps, internalInstanceHandle);
+  unhideInstance: (instance, props) => {
+    instance.setStyle?.({ opa: 255 });
+  },
+  unhideTextInstance: (textInstance, text) => {
+    textInstance.setStyle?.({ opa: 255 });
   },
+  
+  // --- Cleanup ---
+  clearContainer: (container) => {
+    // Clear all children from the container
+    container.clear?.();
+  },
+  detachDeletedInstance: (instance) => {
+    cleanupInstance(instance);
+  },
+
+  // --- Other required methods ---
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  prepareScopeUpdate: () => {},
+  getInstanceFromScope: () => null,
 };
 
 export default Reconciler(HostConfig);
diff --git a/src/render/react/core/reconciler/propDiffer.ts b/src/render/react/core/reconciler/propDiffer.ts
new file mode 100644
index 000000000..9df83d208
--- /dev/null
+++ b/src/render/react/core/reconciler/propDiffer.ts
@@ -0,0 +1,111 @@
+export type UpdatePayload<Props = any> = Partial<Props> | null;
+
+export function diffProps<Props extends Record<string, any>>(
+  oldProps: Props,
+  newProps: Props,
+  skipKeys: string[]
+): UpdatePayload<Props> {
+  const updatePayload: Partial<Props> = {};
+  
+  for (const key in newProps) {
+    if (skipKeys.includes(key)) {
+      continue;
+    }
+    
+    const oldValue = oldProps[key];
+    const newValue = newProps[key];
+    
+    if (hasChanged(oldValue, newValue)) {
+      updatePayload[key as keyof Props] = newValue; 
+    }
+  }
+  
+  return Object.keys(updatePayload).length > 0 ? updatePayload : null;
+}
+
+function commonPreCheckChanged(oldValue: any, newValue: any): boolean | null {
+  if (Object.is(oldValue, newValue) || (oldValue == null && newValue == null)) {
+    return false;
+  }
+
+  if ((oldValue == null && newValue !== null) || (oldValue !== null && newValue == null)) {
+    return true;
+  }
+  
+  if (typeof oldValue === 'function' && typeof newValue === 'function') {
+    return false;
+  }
+  
+  if (typeof oldValue !== typeof newValue) {
+    return true;
+  }
+
+  return null;
+}
+
+function hasChanged(oldValue: any, newValue: any): boolean {
+  const preCheck = commonPreCheckChanged(oldValue, newValue);
+  if (typeof preCheck === 'boolean') return preCheck;
+
+  if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+    return hasArrayChanged(oldValue, newValue);
+  }
+  
+  if (typeof oldValue === 'object' && typeof newValue === 'object') {
+    return hasObjectChanged(oldValue, newValue);
+  }
+  
+  return oldValue !== newValue;
+}
+
+function hasItemChanged(oldValue: any, newValue: any): boolean {
+  const preCheck = commonPreCheckChanged(oldValue, newValue);
+  if (typeof preCheck === 'boolean') return preCheck;
+  
+  if (typeof oldValue === 'object' && typeof newValue === 'object') {
+    if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+      return hasArrayChanged(oldValue, newValue);
+    } else if (!Array.isArray(oldValue) && !Array.isArray(newValue)) {
+      return hasObjectChanged(oldValue, newValue);
+    } else {
+      return true;
+    }
+  }
+  
+  return oldValue !== newValue;
+}
+
+function hasArrayChanged(oldArray: any[], newArray: any[]): boolean {
+  if (oldArray.length !== newArray.length) {
+    return true;
+  }
+  
+  for (let i = 0; i < oldArray.length; i++) {
+    if (hasItemChanged(oldArray[i], newArray[i])) {
+      return true;
+    }
+  }
+  
+  return false;
+}
+
+function hasObjectChanged(oldObj: Record<string, any>, newObj: Record<string, any>): boolean {
+  const oldKeys = Object.keys(oldObj);
+  const newKeys = Object.keys(newObj);
+  
+  if (oldKeys.length !== newKeys.length) {
+    return true;
+  }
+  
+  for (const key of oldKeys) {
+    if (!(key in newObj)) {
+      return true;
+    }
+    
+    if (hasItemChanged(oldObj[key], newObj[key])) {
+      return true;
+    }
+  }
+  
+  return false;
+}
\ No newline at end of file
diff --git a/src/render/react/core/renderer/index.js b/src/render/react/core/renderer/index.js
index 2af1851a9..8a51c8d88 100644
--- a/src/render/react/core/renderer/index.js
+++ b/src/render/react/core/renderer/index.js
@@ -1,19 +1,47 @@
 import reconciler from "../reconciler";
 
-const containerInfo = new Set();
+class RootContainer {
+  constructor() {
+    this.children = [];
+  }
+  add(child) {
+    const idx = this.children.indexOf(child);
+    if (idx === -1) this.children.push(child);
+  }
+  insertBefore(child, beforeChild) {
+    // Ensure stable ordering semantics for reconciler
+    const curIdx = this.children.indexOf(child);
+    if (curIdx !== -1) this.children.splice(curIdx, 1);
+
+    const beforeIdx = this.children.indexOf(beforeChild);
+    if (beforeIdx === -1) {
+      this.children.push(child);
+    } else {
+      this.children.splice(beforeIdx, 0, child);
+    }
+  }
+  delete(child) {
+    const idx = this.children.indexOf(child);
+    if (idx !== -1) this.children.splice(idx, 1);
+  }
+}
 
 export class Renderer {
   static container;
   static portalContainer;
 
   static render(element, options) {
-    const isConcurrent = true;
-    const hydrate = false;
-
+    const containerInfo = new RootContainer();
+    
+    // react-reconciler 0.29.x API:
     Renderer.container = reconciler.createContainer(
-      containerInfo,
-      isConcurrent,
-      hydrate,
+      containerInfo,           // containerInfo
+      0,                       // tag (LegacyRoot)
+      null,                    // hydrationCallbacks
+      false,                   // isStrictMode
+      false,                   // concurrentUpdatesByDefaultOverride
+      '',                      // identifierPrefix
+      (error) => console.error('React error:', error), // onRecoverableError
     );
 
     const parentComponent = null;
diff --git a/src/render/react/core/style/color.ts b/src/render/react/core/style/color.ts
index 77ba09b53..db006c28f 100644
--- a/src/render/react/core/style/color.ts
+++ b/src/render/react/core/style/color.ts
@@ -30,6 +30,8 @@ export const colorTransform = (data) => {
     return builtinColor[data];
   }
   data = data.replace(/(^\s*)|(\s*$)/g, "");
+  const reg8 = /^#([0-9a-fA-f]{8})$/;
+  const reg4 = /^#([0-9a-fA-f]{4})$/;
   const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
   if (/^(rgb|RGB)/.test(data)) {
     const aColor = data.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
@@ -45,6 +47,17 @@ export const colorTransform = (data) => {
       num = "";
     }
     return num;
+  } else if (reg8.test(data)) {
+    // 8-digit hex: #RRGGBBAA, return RGB part
+    return Number(`0x${data.substring(1, 7)}`);
+  } else if (reg4.test(data)) {
+    // 4-digit hex: #RGBA, return RGB part
+    const aNum = data.replace(/#/, "").split("");
+    let num = "0x";
+    for (let i = 0; i < 3; i += 1) {
+      num += aNum[i] + aNum[i];
+    }
+    return Number(num);
   } else if (reg.test(data)) {
     const aNum = data.replace(/#/, "").split("");
     if (aNum.length === 6) {
@@ -59,3 +72,27 @@ export const colorTransform = (data) => {
   }
   return "";
 };
+
+/**
+ * Extract opacity value (0-1 range) from color string
+ * Supports 8-digit hex format: #RRGGBBAA or #RGBA
+ */
+export const extractOpacity = (data) => {
+  if (builtinColor[data]) {
+    return 255; // Built-in colors don't have opacity information
+  }
+  data = data.replace(/(^\s*)|(\s*$)/g, "");
+  const reg8 = /^#([0-9a-fA-f]{8})$/;
+  const reg4 = /^#([0-9a-fA-f]{4})$/;
+  
+  if (reg8.test(data)) {
+    // 8-digit hex: #RRGGBBAA, extract last two digits AA
+    const alphaHex = data.substring(7, 9);
+    return parseInt(alphaHex, 16) / 255;
+  } else if (reg4.test(data)) {
+    // 4-digit hex: #RGBA, extract last digit A and duplicate
+    const alphaHex = data.substring(4, 5);
+    return parseInt(alphaHex + alphaHex, 16) / 255;
+  }
+  return 255;
+};
diff --git a/src/render/react/core/style/index.ts b/src/render/react/core/style/index.ts
index 03dcb1874..b25c3a00c 100644
--- a/src/render/react/core/style/index.ts
+++ b/src/render/react/core/style/index.ts
@@ -44,6 +44,7 @@ class StyleSheet {
           } else {
             obj.__dirty = value;
           }
+          return true;
         },
       },
     );
@@ -88,12 +89,6 @@ export function setStyle({
 }) {
   if (!styleSheet) return;
   styleSheet = Array.isArray(styleSheet) ? styleSheet : [styleSheet];
-  oldStyleSheet = Array.isArray(oldStyleSheet)
-    ? oldStyleSheet
-    : [oldStyleSheet];
-  const maybeChange = styleSheet.some((item, i) => item !== oldStyleSheet[i]);
-
-  if (!maybeChange) return;
   styleSheet = Object.assign({}, defaultStyle, ...styleSheet);
   const result = StyleSheet.transform(styleSheet, compName);
 
diff --git a/src/render/react/core/style/pipe/misc.ts b/src/render/react/core/style/pipe/misc.ts
index 646ad70e2..07f8b9fd1 100644
--- a/src/render/react/core/style/pipe/misc.ts
+++ b/src/render/react/core/style/pipe/misc.ts
@@ -2,7 +2,7 @@ import { ColorType } from "../color";
 import { ProcessColor } from "../util";
 
 export type MiscStyleType = {
-  "style-transition-time"?: number;
+  "transition-time"?: number;
   recolor?: ColorType;
 };
 
@@ -10,10 +10,10 @@ export function MiscStyle(style: MiscStyleType, result, compName) {
   if (style["recolor"] && compName === "Image") {
     ProcessColor("recolor", style["recolor"], result);
   }
-  if (style["style-transition-time"]) {
-    const value = style["style-transition-time"];
+  if (style["transition-time"]) {
+    const value = style["transition-time"];
     if (!isNaN(value)) {
-      result["style-transition-time"] = value;
+      result["transition-time"] = value;
     }
   }
 
diff --git a/src/render/react/core/style/post.ts b/src/render/react/core/style/post.ts
index 03fda2cca..00987d858 100644
--- a/src/render/react/core/style/post.ts
+++ b/src/render/react/core/style/post.ts
@@ -1,13 +1,7 @@
 import { StyleProps } from "./index";
-import { isValidUrl } from "../../utils/helpers";
+import { isValidUrl, fetchBinary } from "../../utils/helpers";
 import { BUILT_IN_SYMBOL } from "./symbol";
 
-async function getImageBinary(url) {
-  const resp = await fetch(url, {});
-  const imageBuffer = await resp.arrayBuffer();
-  return imageBuffer;
-}
-
 export function PostProcessStyle({ comp, styleSheet, styleType }: { comp: any; styleSheet: StyleProps; styleType: any }) {
   if (styleSheet["background-image"] !== void 0) {
     let url = styleSheet["background-image"];
@@ -31,11 +25,8 @@ export function PostProcessStyle({ comp, styleSheet, styleType }: { comp: any; s
           console.log("setBackground error", e);
         });
     } else {
-      getImageBinary(url)
-        .then(
-          (buffer) => comp.setBackgroundImage(Buffer.from(buffer).buffer),
-          styleType,
-        )
+      fetchBinary(url)
+        .then((buffer) => comp.setBackgroundImage(buffer, styleType))
         .catch(console.warn);
     }
   }
@@ -62,11 +53,8 @@ export function PostProcessStyle({ comp, styleSheet, styleType }: { comp: any; s
           console.log("setArcImage error", e);
         });
     } else {
-      getImageBinary(url)
-        .then(
-          (buffer) => comp.setArcImage(Buffer.from(buffer).buffer),
-          styleType,
-        )
+      fetchBinary(url)
+        .then((buffer) => comp.setArcImage(buffer, styleType))
         .catch(console.warn);
     }
   }
diff --git a/src/render/react/core/style/util.ts b/src/render/react/core/style/util.ts
index c36926178..113653d95 100644
--- a/src/render/react/core/style/util.ts
+++ b/src/render/react/core/style/util.ts
@@ -1,4 +1,4 @@
-import { colorTransform } from "./color";
+import { colorTransform, extractOpacity } from "./color";
 
 export function NormalizePx(value) {
   if (value == void 0) return null;
@@ -66,9 +66,16 @@ export function ProcessEnum(obj) {
 }
 
 export function ProcessColor(key, value, result) {
-  value = colorTransform(value);
-  if (!isNaN(value)) {
-    result[key] = value;
+  const colorValue = colorTransform(value);
+  if (!isNaN(colorValue)) {
+    result[key] = colorValue;
+    
+    // Detect 8-digit hex color (with alpha channel), automatically set corresponding opacity
+    const opacity = extractOpacity(value);
+    if (opacity !== undefined) {
+      const opacityKey = key.replace("color", "opacity");
+      result[opacityKey] = NormalizeOpacity(opacity);
+    }
   }
 }
 
@@ -108,3 +115,5 @@ export function ProcessDeg(key, value, result) {
 export function ProcessBoolean(key, value, result) {
   result[key] = !!value;
 }
+
+export const CreateStyle = <T extends Record<string, any>>(styles: T): { [K in keyof T]: any } => styles;
\ No newline at end of file
diff --git a/src/render/react/i18n/index.ts b/src/render/react/i18n/index.ts
new file mode 100644
index 000000000..9aaf73189
--- /dev/null
+++ b/src/render/react/i18n/index.ts
@@ -0,0 +1,135 @@
+import * as React from "react";
+
+export type I18nVars = Record<string, string | number | boolean | null | undefined>;
+export type I18nLocale = string;
+
+export interface I18nMessages {
+  [key: string]: string | I18nMessages;
+}
+
+export type I18nAllMessages = Record<I18nLocale, I18nMessages>;
+export type I18nMessagesLoader = (locale: I18nLocale) => I18nMessages | undefined;
+export type I18nMessagesSource = I18nAllMessages | I18nMessagesLoader;
+
+function isMessagesLoader(x: I18nMessagesSource): x is I18nMessagesLoader {
+  return typeof x === "function";
+}
+
+function getByPath(messages: I18nMessages | undefined, key: string): string | undefined {
+  if (!messages) return;
+  const parts = key.split(".");
+  let cur: any = messages;
+  for (const p of parts) {
+    if (!cur || typeof cur !== "object") return;
+    cur = cur[p];
+  }
+  return typeof cur === "string" ? cur : undefined;
+}
+
+function format(template: string, vars?: I18nVars): string {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (_, k) => {
+    const v = vars[k];
+    if (v === null || v === undefined) return "";
+    return String(v);
+  });
+}
+
+export type TranslateFn = (key: string, vars?: I18nVars) => string;
+
+export type I18nContextValue = {
+  locale: I18nLocale;
+  fallbackLocale?: I18nLocale;
+  setLocale: (locale: I18nLocale) => void;
+  t: TranslateFn;
+};
+
+const I18nContext = React.createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({
+  children,
+  messages,
+  defaultLocale = "en",
+  locale: controlledLocale,
+  fallbackLocale,
+  onMissingKey,
+}: {
+  children: React.ReactNode;
+  messages: I18nMessagesSource;
+  defaultLocale?: I18nLocale;
+  locale?: I18nLocale;
+  fallbackLocale?: I18nLocale;
+  onMissingKey?: (key: string, info: { locale: string; fallbackLocale?: string }) => void;
+}) {
+  const [uncontrolledLocale, setUncontrolledLocale] = React.useState<I18nLocale>(defaultLocale);
+  const locale = controlledLocale ?? uncontrolledLocale;
+  const setLocale = React.useCallback(
+    (next: I18nLocale) => {
+      if (controlledLocale === undefined) setUncontrolledLocale(next);
+    },
+    [controlledLocale],
+  );
+
+  const loaderCacheRef = React.useRef<Map<I18nLocale, I18nMessages>>(new Map());
+
+  const getMessagesForLocale = React.useCallback(
+    (loc: I18nLocale): I18nMessages | undefined => {
+      if (!isMessagesLoader(messages)) return (messages as I18nAllMessages)?.[loc];
+
+      const cached = loaderCacheRef.current.get(loc);
+      if (cached) return cached;
+      const loaded = messages(loc);
+      if (loaded) loaderCacheRef.current.set(loc, loaded);
+      return loaded;
+    },
+    [messages],
+  );
+
+  React.useEffect(() => {
+    if (!isMessagesLoader(messages)) return;
+
+    const keep = new Set<I18nLocale>([locale]);
+    if (fallbackLocale) keep.add(fallbackLocale);
+    for (const k of loaderCacheRef.current.keys()) {
+      if (!keep.has(k)) loaderCacheRef.current.delete(k);
+    }
+  }, [messages, locale, fallbackLocale]);
+
+  const t: TranslateFn = React.useCallback(
+    (key: string, vars?: I18nVars) => {
+      const msg =
+        getByPath(getMessagesForLocale(locale), key) ??
+        (fallbackLocale ? getByPath(getMessagesForLocale(fallbackLocale), key) : undefined);
+      if (msg === undefined) {
+        onMissingKey?.(key, { locale, fallbackLocale });
+        return key;
+      }
+      return format(msg, vars);
+    },
+    [getMessagesForLocale, locale, fallbackLocale, onMissingKey],
+  );
+
+  const value = React.useMemo<I18nContextValue>(
+    () => ({
+      locale,
+      fallbackLocale,
+      setLocale,
+      t,
+    }),
+    [locale, fallbackLocale, setLocale, t],
+  );
+
+  return React.createElement(I18nContext.Provider, { value }, children);
+}
+
+export function useI18n(): I18nContextValue {
+  const ctx = React.useContext(I18nContext);
+  if (!ctx) throw new Error("useI18n must be used within <I18nProvider />");
+  return ctx;
+}
+
+export function useT(): TranslateFn {
+  return useI18n().t;
+}
+
+
diff --git a/src/render/react/index.ts b/src/render/react/index.ts
index 3f509f204..f67a5b388 100644
--- a/src/render/react/index.ts
+++ b/src/render/react/index.ts
@@ -40,30 +40,32 @@ import { TextareaComp, TextAreaProps } from "./components/Textarea/comp";
 import TextareaConfig from "./components/Textarea/config";
 import { ViewComp, ViewProps } from "./components/View/comp";
 import ViewConfig from "./components/View/config";
-import { registerComponent } from "./components/config";
 import { Renderer } from "./core/renderer";
+import { registerWithRef } from "./ref";
+export { I18nProvider, useI18n, useT } from "./i18n";
+export type { I18nAllMessages, I18nLocale, I18nMessages, I18nVars, TranslateFn } from "./i18n";
 
-export const View = registerComponent<ViewProps, ViewComp>(new ViewConfig());
+export const View = registerWithRef<ViewProps, ViewComp>(new ViewConfig());
 // export const Window = registerComponent<WindowProps, Window>(new WindowConfig());
-export const Text = registerComponent<TextProps, TextComp>(new TextConfig());
-export const Image = registerComponent<ImageProps, ImageComp>(new ImageConfig());
-export const Button = registerComponent<ButtonProps, ButtonComp>(new ButtonConfig());
-export const Slider = registerComponent<SliderProps, SliderComp>(new SliderConfig());
-export const Arc = registerComponent<ArcProps, ArcComp>(new ArcConfig());
-export const Switch = registerComponent<SwitchProps, SwitchComp>(new SwitchConfig());
-export const Textarea = registerComponent<TextAreaProps, TextareaComp>(new TextareaConfig());
-export const Input = registerComponent<InputProps, InputComp>(new InputConfig());
-export const Keyboard = registerComponent<KeyboardProps, KeyboardComp>(new KeyboardConfig());
-export const Checkbox = registerComponent<CheckboxProps, CheckboxComp>(new CheckboxConfig());
-export const Dropdownlist = registerComponent<DropdownListProps, DropdownlistComp>(new DropdownlistConfig());
-export const ProgressBar = registerComponent<ProgressBarProps, ProgressBarComp>(new ProgressBarConfig());
-export const Roller = registerComponent<RollerProps, RollerComp>(new RollerConfig());
-export const Line = registerComponent<LineProps, LineComp>(new LineConfig());
-export const Calendar = registerComponent<CalendarProps, CalendarComp>(new CalendarConfig());
-export const GIF = registerComponent<GIFProps, GIFComp>(new GIFConfig());
-export const Tabs = registerComponent<TabsProps, TabsComp>(new TabsConfig());
-export const Chart = registerComponent<ChartProps, ChartComp>(new ChartConfig());
-export const Mask = registerComponent<MaskProps, MaskComp>(new MaskConfig());
+export const Text = registerWithRef<TextProps, TextComp>(new TextConfig());
+export const Image = registerWithRef<ImageProps, ImageComp>(new ImageConfig());
+export const Button = registerWithRef<ButtonProps, ButtonComp>(new ButtonConfig());
+export const Slider = registerWithRef<SliderProps, SliderComp>(new SliderConfig());
+export const Arc = registerWithRef<ArcProps, ArcComp>(new ArcConfig());
+export const Switch = registerWithRef<SwitchProps, SwitchComp>(new SwitchConfig());
+export const Textarea = registerWithRef<TextAreaProps, TextareaComp>(new TextareaConfig());
+export const Input = registerWithRef<InputProps, InputComp>(new InputConfig());
+export const Keyboard = registerWithRef<KeyboardProps, KeyboardComp>(new KeyboardConfig());
+export const Checkbox = registerWithRef<CheckboxProps, CheckboxComp>(new CheckboxConfig());
+export const Dropdownlist = registerWithRef<DropdownListProps, DropdownlistComp>(new DropdownlistConfig());
+export const ProgressBar = registerWithRef<ProgressBarProps, ProgressBarComp>(new ProgressBarConfig());
+export const Roller = registerWithRef<RollerProps, RollerComp>(new RollerConfig());
+export const Line = registerWithRef<LineProps, LineComp>(new LineConfig());
+export const Calendar = registerWithRef<CalendarProps, CalendarComp>(new CalendarConfig());
+export const GIF = registerWithRef<GIFProps, GIFComp>(new GIFConfig());
+export const Tabs = registerWithRef<TabsProps, TabsComp>(new TabsConfig());
+export const Chart = registerWithRef<ChartProps, ChartComp>(new ChartConfig());
+export const Mask = registerWithRef<MaskProps, MaskComp>(new MaskConfig());
 
 export {
   EAlignType,
@@ -74,5 +76,8 @@ export { EAnimateEasingFunc, Animate } from "./core/animate";
 export { Dimensions } from "./core/dimensions";
 export { BUILT_IN_SYMBOL } from "./core/style/symbol";
 export { Theme } from "./core/theme";
+export { CreateStyle } from "./core/style/util";
+export { useFocusGroupEdge, setFocusGroupWrap } from "./core/focus-group";
+export type { EdgeDirection, UseFocusGroupEdgeOptions } from "./core/focus-group";
 
 export const Render = Renderer;
diff --git a/src/render/react/package.json b/src/render/react/package.json
index bfc2c5cfb..2c067eb36 100644
--- a/src/render/react/package.json
+++ b/src/render/react/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "description": "lvgljs react frame",
   "main": "index.js",
+  "types": "index.ts",
   "scripts": {
     "build": "esbuild index.ts --outfile=index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/src/render/react/ref.ts b/src/render/react/ref.ts
new file mode 100644
index 000000000..65e4daa3c
--- /dev/null
+++ b/src/render/react/ref.ts
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { LvgljsComponentConfig, registerComponent } from "./components/config";
+
+export type WithRef<Props, Instance> = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<Props> & React.RefAttributes<Instance>
+>;
+
+/**
+ * Type-only helper: declare that a host component supports `ref` to its public instance.
+ * Runtime behavior is unchanged; reconciler already supports refs via `getPublicInstance`.
+ */
+export function registerWithRef<Props, Instance>(config: LvgljsComponentConfig<Props, Instance>): WithRef<Props, Instance> {
+  return registerComponent<Props, Instance>(config) as unknown as WithRef<Props, Instance>;
+}
diff --git a/src/render/react/utils/helpers.ts b/src/render/react/utils/helpers.ts
index bd4e32d50..441f874c0 100644
--- a/src/render/react/utils/helpers.ts
+++ b/src/render/react/utils/helpers.ts
@@ -13,3 +13,14 @@ export function isValidUrl(str: string) {
     return false;
   }
 }
+
+export async function fetchBinary(url: string): Promise<ArrayBuffer> {
+  const resp = await fetch(url);
+  
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch ${url}: ${resp.status} ${resp.statusText}`);
+  }
+  
+  const blob = await resp.blob();
+  return await blob.arrayBuffer();
+}
diff --git a/test/arc/1/index.tsx b/test/arc/1/index.tsx
new file mode 100644
index 000000000..e73dfb5e1
--- /dev/null
+++ b/test/arc/1/index.tsx
@@ -0,0 +1,88 @@
+import { View, Text, Render, Dimensions, Arc } from 'lvgljs-ui';
+import React, { useState } from 'react';
+
+const { width, height } = Dimensions.window;
+
+function App() {
+  const [value, setValue] = useState(35);
+
+  return (
+    <View style={style.window}>
+      <Arc
+        style={style.arc}
+        indicatorStyle={style.indicator}
+        onIndicatorPressedStyle={style.indicatorPressed}
+        onPressedStyle={style.arcPressed}
+        knobStyle={style.knob}
+        onKnobPressedStyle={style.knobPressed}
+        range={[0, 100]}
+        value={value}
+        rotation={135}
+        backgroundStartAngle={0}
+        backgroundEndAngle={270}
+        startAngle={0}
+        endAngle={Math.floor((value / 100) * 270)}
+        mode="normal"
+        changeRate={360}
+        onChange={(e) => setValue(e.value)}
+      />
+      <Text style={style.text}>{`value: ${Math.round(value)}`}</Text>
+      <Text style={style.hint}>Drag the knob or click the arc</Text>
+    </View>
+  );
+}
+
+const style = {
+  window: {
+    width,
+    height,
+    display: 'flex',
+    'flex-direction': 'column',
+    'justify-content': 'center',
+    'align-items': 'center',
+  },
+  arc: {
+    width: 200,
+    height: 200,
+    'arc-width': 16,
+    'arc-color': 'rgb(200,200,200)',
+    'arc-rounded': true,
+    'background-color': 'white',
+  },
+  arcPressed: {
+    'arc-color': 'rgb(160,160,160)',
+  },
+  indicator: {
+    'arc-width': 16,
+    'arc-color': 'cyan',
+    'arc-rounded': true,
+  },
+  indicatorPressed: {
+    'arc-color': '0x00838F',
+  },
+  knob: {
+    'background-color': 'white',
+    'border-width': 2,
+    'border-color': 'cyan',
+    'border-radius': 0x7fff,
+    padding: 6,
+  },
+  knobPressed: {
+    'background-color': '0x00838F',
+    'border-color': '0x00838F',
+  },
+  text: {
+    'text-color': 'black',
+    'font-size': 20,
+    'padding-top': 10,
+  },
+  hint: {
+    'text-color': 'grey',
+    'font-size': 14,
+    'padding-top': 4,
+  },
+};
+
+Render.render(<App />);
+
+
diff --git a/test/arc/2/index.tsx b/test/arc/2/index.tsx
new file mode 100644
index 000000000..9a1d7ad24
--- /dev/null
+++ b/test/arc/2/index.tsx
@@ -0,0 +1,158 @@
+import { View, Text, Render, Dimensions, Arc, Button } from 'lvgljs-ui';
+import React, { useMemo, useState } from 'react';
+
+const { width, height } = Dimensions.window;
+
+const modes: Array<'normal' | 'symmetrical' | 'reverse'> = [
+  'normal',
+  'symmetrical',
+  'reverse',
+];
+
+function App() {
+  const [modeIndex, setModeIndex] = useState(0);
+  const [rotation, setRotation] = useState(0);
+  const [rangeToggle, setRangeToggle] = useState(false);
+  const [value, setValue] = useState(10);
+
+  const mode = modes[modeIndex];
+  const range: [number, number] = useMemo(
+    () => (rangeToggle ? [-50, 50] : [0, 100]),
+    [rangeToggle],
+  );
+
+  return (
+    <View style={style.window}>
+      <Arc
+        style={style.arc}
+        indicatorStyle={style.indicator}
+        knobStyle={style.knob}
+        range={range}
+        value={value}
+        rotation={rotation}
+        backgroundStartAngle={0}
+        backgroundEndAngle={270}
+        startAngle={0}
+        endAngle={270}
+        mode={mode}
+        changeRate={360}
+        onChange={(e) => setValue(e.value)}
+      />
+
+      <Text style={style.text}>
+        {`mode: ${mode}  rotation: ${rotation}°  range: [${range[0]}, ${range[1]}]  value: ${Math.round(
+          value,
+        )}`}
+      </Text>
+
+      <View style={style.controls}>
+        <Button
+          style={style.button}
+          onPressedStyle={style.buttonPressed}
+          onClick={() => setModeIndex((i) => (i + 1) % modes.length)}
+        >
+          <Text style={style.buttonText}>Mode</Text>
+        </Button>
+
+        <Button
+          style={style.button}
+          onPressedStyle={style.buttonPressed}
+          onClick={() => setRotation((r) => (r + 30) % 360)}
+        >
+          <Text style={style.buttonText}>Rotate +30</Text>
+        </Button>
+
+        <Button
+          style={style.button}
+          onPressedStyle={style.buttonPressed}
+          onClick={() => setRangeToggle((t) => !t)}
+        >
+          <Text style={style.buttonText}>Toggle Range</Text>
+        </Button>
+
+        <Button
+          style={style.button}
+          onPressedStyle={style.buttonPressed}
+          onClick={() => {
+            setModeIndex(0);
+            setRotation(0);
+            setRangeToggle(false);
+            setValue(10);
+          }}
+        >
+          <Text style={style.buttonText}>Reset</Text>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const style = {
+  window: {
+    width,
+    height,
+    display: 'flex',
+    'flex-direction': 'column',
+    'justify-content': 'center',
+    'align-items': 'center',
+  },
+  arc: {
+    width: 220,
+    height: 220,
+    'arc-width': 18,
+    'arc-color': 'rgb(210,210,210)',
+    'arc-rounded': true,
+    'background-color': 'white',
+  },
+  indicator: {
+    'arc-width': 18,
+    'arc-color': '0x4caf50',
+    'arc-rounded': true,
+  },
+  knob: {
+    'background-color': 'white',
+    'border-width': 2,
+    'border-color': '0x4caf50',
+    'border-radius': 0x7fff,
+    padding: 6,
+  },
+  text: {
+    width: width - 20,
+    'text-color': 'black',
+    'font-size': 14,
+    'text-align': 'center',
+    'padding-top': 12,
+    'padding-bottom': 12,
+  },
+  controls: {
+    width: width - 20,
+    display: 'flex',
+    'flex-direction': 'row',
+    'justify-content': 'space-evenly',
+    'align-items': 'center',
+  },
+  button: {
+    width: 90,
+    height: 44,
+    'border-width': 2,
+    'border-color': 'grey',
+    'background-color': 'white',
+    'border-radius': 12,
+    display: 'flex',
+    'justify-content': 'center',
+    'align-items': 'center',
+  },
+  buttonPressed: {
+    'border-color': '0x4caf50',
+    'border-width': 3,
+  },
+  buttonText: {
+    'text-color': 'black',
+    'font-size': 12,
+    'text-align': 'center',
+  },
+};
+
+Render.render(<App />);
+
+
diff --git a/test/calendar/1/index.jsx b/test/calendar/1/index.jsx
index f9731e427..62d5d3f2b 100644
--- a/test/calendar/1/index.jsx
+++ b/test/calendar/1/index.jsx
@@ -1,27 +1,43 @@
-import { Calendar, Render, Line, EAlignType, Button } from 'lvgljs-ui';
+import { Calendar, Render, Button, Text, EAlignType, View } from 'lvgljs-ui';
 import React, { useState } from 'react';
+import { Dimensions } from 'lvgljs-ui';
 
-function App () {
+const { width, height } = Dimensions.window
 
+function App () {
+    const [pos, setPos] = useState([0, 0])
     return (
-        <Calendar
-            style={style.calendar}
-            today={"2022-10-1"}
-            shownMonth={"2022-10"}
-            highLightDates={[
-                "2022-10-10",
-                "2022-10-11",
-            ]}
-            align={{
-                type: EAlignType.ALIGN_CENTER,
-                pos: [0, 27]
-            }}
-            onChange={(e) => { console.log(e.value) }}
-        />
+        <View style={style.window}>
+            <Button onClick={() => { 
+                setPos(prevPos => {
+                    return [prevPos[0] + 10, prevPos[1] + 10];
+                });
+            }}>
+                <Text>Click me</Text>
+            </Button>
+            <Calendar
+                style={style.calendar}
+                today={"2025-10-1"}
+                shownMonth={"2025-10"}
+                highLightDates={[
+                    "2025-10-10",
+                    "2025-10-11",
+                ]}
+                align={{
+                    type: EAlignType.ALIGN_CENTER,
+                    pos: pos
+                }}
+                onChange={(e) => { console.log(e.value) }}
+            />
+        </View>
     )
 };
 
 const style = {
+    window: {
+        width: width,
+        height: height,
+    },
     calendar: {
         'width': 285,
         'height': 285,
diff --git a/test/group/1/index.jsx b/test/group/1/index.jsx
new file mode 100644
index 000000000..4f29b2b2e
--- /dev/null
+++ b/test/group/1/index.jsx
@@ -0,0 +1,123 @@
+import { View, Render, Text, Button, Slider, Dimensions } from 'lvgljs-ui';
+import React, { useState } from 'react';
+
+const { width, height } = Dimensions.window;
+
+function App() {
+    const [showSlider, setShowSlider] = useState(true);
+
+    return (
+        <View style={style.window}>
+            <View style={style.header}>
+                <View 
+                    style={style.header}
+                    addToFocusGroup
+                    onFocusedStyle={style.buttonFocused} 
+                    onClick={() => setShowSlider(!showSlider)}
+                >
+                    <Text style={style.headerText}>Header (in group)</Text>
+                </View>
+                <Button 
+                    autoFocus
+                    style={style.toggleBtn}
+                    onClick={() => setShowSlider(!showSlider)}
+                >
+                    <Text>{showSlider ? 'Hide Slider' : 'Show Slider'}</Text>
+                </Button>
+            </View>
+
+
+            <View style={style.content}>
+                <View addToFocusGroup onFocusedStyle={style.buttonFocused}> 
+                    <Text style={style.contentText}>Content (in group, use keyboard to navigate)</Text>
+                </View>
+                <Text style={style.contentText}>Content (not in group)</Text>
+                <Text style={style.contentText}>Content (not in group)</Text>
+                
+                <Button 
+                    style={style.button}
+                    onFocusedStyle={style.buttonFocused}
+                >
+                    <Text>Button 1</Text>
+                </Button>
+
+                {showSlider && (
+                    <Slider 
+                        style={style.slider}
+                        onFocusedStyle={style.sliderFocused}
+                        value={50}
+                    />
+                )}
+
+                <Button 
+                    style={style.button}
+                    onFocusedStyle={style.buttonFocused}
+                >
+                    <Text>Button 2</Text>
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+const style = {
+    window: {
+        width,
+        height,
+        display: 'flex',
+        'flex-direction': 'column',
+    },
+    header: {
+        width: 'auto',
+        height: 'auto',
+        'background-color': '#f0f0f0',
+        display: 'flex',
+        'align-items': 'center',
+        'padding-left': 20,
+    },
+    headerText: {
+        'text-color': '#333',
+    },
+    toggleBtn: {
+        width: 140,
+        height: 40,
+        'margin-left': 20,
+        'background-color': '#2196f3',
+    },
+    content: {
+        width: 'auto',
+        height: 'auto',
+        padding: 20,
+        display: 'flex',
+        'flex-direction': 'column',
+        'row-spacing': 15,
+    },
+    contentText: {
+        'text-color': '#666',
+        'margin-bottom': 10,
+    },
+    button: {
+        width: 200,
+        height: 50,
+        'border-width': 2,
+        'border-color': '#ccc',
+        'background-color': '#ffffff',
+        display: 'flex',
+        'justify-content': 'center',
+        'align-items': 'center',
+    },
+    buttonFocused: {
+        'border-width': 3,
+        'border-color': '#ff0000',
+        'background-color': '#ffe0e0',
+    },
+    slider: {
+        width: 200,
+        height: 20,
+    },
+    sliderFocused: {
+        'background-color': '#e0ffe0',
+    },
+};
+
+Render.render(<App />);
diff --git a/test/image/1/index.jsx b/test/image/1/index.jsx
index a36f875df..5afec4f25 100644
--- a/test/image/1/index.jsx
+++ b/test/image/1/index.jsx
@@ -6,7 +6,7 @@ const { width, height } = Dimensions.window
 function App () {
     return (
         <View style={style.window}>
-            <Image src={'./1.png'} style={style.image1} />
+            <Image src={'./test/image/1/1.png'} style={style.image1} />
             <Image src={'https://png.pngtree.com/png-clipart/20220827/ourmid/pngtree-halloween-flowers-png-image_6127104.png'} style={style.image2} />
         </View>
     )
diff --git a/test/image/2/index.jsx b/test/image/2/index.jsx
index e0120a155..3972f989d 100644
--- a/test/image/2/index.jsx
+++ b/test/image/2/index.jsx
@@ -52,7 +52,7 @@ function App () {
                 onChange={e=> setOpacity(e.value)}
             />
             <Image 
-                src={'./2.png'} 
+                src={'./test/image/2/2.png'} 
                 style={[style.image, { recolor: `rgb(${color1}, ${color2}, ${color3})`, 'recolor-opacity': opacity / 100 }]} 
                 align={{
                     type: EAlignType.ALIGN_RIGHT_MID,
diff --git a/test/image/3/index.jsx b/test/image/3/index.jsx
index a2cb0dabd..380bd0289 100644
--- a/test/image/3/index.jsx
+++ b/test/image/3/index.jsx
@@ -39,7 +39,7 @@ function App () {
     return (
         <View style={style.window}>
             <Image 
-                src={'./3.png'} 
+                src={'./test/image/3/3.png'} 
                 style={style.image} 
                 ref={ref} 
                 align={{
diff --git a/test/progressbar/2/index.jsx b/test/progressbar/2/index.jsx
index d8d07a419..045303656 100644
--- a/test/progressbar/2/index.jsx
+++ b/test/progressbar/2/index.jsx
@@ -13,7 +13,6 @@ function App () {
                 }}
                 value={100}
                 useAnimation={true}
-                animationTime={1000}
                 indicatorStyle={style.indicator}
             />
         </View>
@@ -31,7 +30,8 @@ const style = {
         'border-color': 'blue',
         'border-width': 2,
         'padding': 6,
-        'border-radius': 6
+        'border-radius': 6,
+        'transition-time': 1000,
     },
     indicator: {
         'background-color': 'blue',
diff --git a/test/progressbar/3/index.jsx b/test/progressbar/3/index.jsx
index 69602b81d..939710c72 100644
--- a/test/progressbar/3/index.jsx
+++ b/test/progressbar/3/index.jsx
@@ -40,7 +40,6 @@ function App () {
                 value={value}
                 range={[-20, 40]}
                 useAnimation={true}
-                animationTime={1000}
                 indicatorStyle={style.indicator}
             />
         </View>
@@ -60,6 +59,7 @@ const style = {
     bar: {
         'width': 20,
         'height': 200,
+        'transition-time': 1000,
     }
 };
 
diff --git a/tsconfig.json b/tsconfig.json
index 12aeaeb09..3019e2710 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,25 @@
 {
     "compilerOptions": {
       "module": "NodeNext",
+      "jsx": "react",
+      "target": "ES2020",
+      "lib": ["ES2020"],
+      "moduleResolution": "NodeNext",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "strict": false,
       "typeRoots": [
         "node_modules/@txikijs/types",
         "node_modules/@types"
-      ]
+      ],
+      "paths": {
+        "lvgljs-ui": ["./src/render/react"]
+      }
     },
-    "include": ["src/**/*"],
-    "exclude": ["**/*.spec.ts"]
+    "include": [
+      "src/**/*",
+      "demo/**/*",
+      "test/**/*"
+    ],
+    "exclude": ["**/*.spec.ts", "node_modules", "build", "deps"]
   }
\ No newline at end of file