feat: LVGL 8.4 upgrade, focus navigation, component API refactors, navigation/gateway demos, fix memory leak, and i18n

.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/

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

Makefile

@@ -1,22 +1,27 @@
 BUILD_SIM=build
+BUILD_LIB=build_lib
 
-.PHONY: setup simulator demo clean
+.PHONY: setup simulator lib demo clean
 
 setup:
 	git submodule update --recursive --init
 	npm install
 
 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"; \
 	node build.js && \
 	./${BUILD_SIM}/lvgljs run demo/$$PROJECT/index.js
 
 clean:
-	rm -rf $(BUILD_SIM)
+	rm -rf $(BUILD_SIM) $(BUILD_LIB)

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: {

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",
+  },
+});

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,
+  },
+});

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",
+  },
+});