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

[sunnyswag]

Summary

This PR includes LVGL and React dependency upgrades, LVGL Group-based focus navigation, component API and styling refactors, new navigation and gateway demos with i18n, and build/config improvements.

Dependencies & core

• LVGL: Upgrade from v8.3.0-dev to v8.4.0 (includes scroll-to-view fix for horizontal focus navigation).
• React: Upgrade to 18.3.1 with react-reconciler 0.29.2; improved instance cleanup and finalization.
• Txiki: Update subproject to support fetch blob.
• Build: CMake updates for LVGLJS_CONF_DIR and display resolution; add static library build and refactor main entry.

Focus & navigation

• Implement LVGL Group focus navigation (GroupManager later removed in favor of direct lv_group_* usage).
• Add addToFocusGroup and focus handling on View; refine LV_OBJ_FLAG_SCROLL_ON_FOCUS usage.
• Simplify focus handling: remove useAutoFocus hook and GroupManager; use autoFocus and addToFocusGroup props.
• Improve child insertion and focus order via reorderFocusGroup and BasicComponent changes.

Component API & styling

• setProps: Refactor to use UpdatePayload and propDiffer across Button, Text, View, Arc, Calendar, Canvas, Chart, Checkbox, Dropdownlist, GIF, Image, Input, Keyboard, Line, Mask, ProgressBar, Roller, Slider, Switch, Tabs, Textarea, Window.
• Replace CommonComponentApi with setComponentProps for consistent property handling.
• Use CreateStyle instead of Record<string, any> for style types; rename style-transition-time to transition-time.
• Simplify align logic in common setters; remove duplicate code in style.cpp.
• Style updates: padding/border-radius across components; remove background-opacity; improve color handling (4/8-digit hex with opacity); countdown angle and CountdownSettingsPage styles.

Demos

• Navigation demo: Multi-page demo with React Router, auto-focus, and ref-based component registration.
• i18n: Internationalization (EN/CN/JP) with message caching and improved locale loading.
• Gateway demo: New demo with device info, device status, event log, settings, and updated icons/header.

Fixes & misc

• fetchBinary: Better HTTP error handling and messaging; GIF/Image use shared fetchBinary instead of getBinary.
• Fix image paths in test components; fix countdown angle calculation; fix select item order; resolve compile and TS warnings.
• Refactor init_input_devices for indev init; update .gitignore.

---

Summary by cubic

Upgrades LVGL to 8.4 and React to 18.3.1, adds LVGL group-based focus navigation, and ships new navigation/gateway demos with i18n. Also adds a static library build and device resolution config, plus component API and styling refactors.

• New Features

  • Focus navigation: LVGL group-based; add autoFocus and addToFocusGroup; expose focus() on components; improved focus order; focus edge callback for pagination.
  • Demos: new multi-page navigation and gateway demos using React Router and i18n (EN/JA/ZH) with message caching.
  • Build: static library option (-DBUILD_STATIC_LIB), LVGLJS_CONF_DIR support, and configurable DISP_HOR_RES/DISP_VER_RES.
  • Component/API: unified setComponentProps with UpdatePayload/propDiffer; CreateStyle for styles; improved color parsing (3/4/6/8-digit hex).

• Bug Fixes

  • Horizontal scroll-to-view works correctly with LVGL 8.4.
  • fetchBinary now reports HTTP errors; GIF/Image use the shared loader.
  • Fixed countdown angle and select item order; resolved compile and TypeScript warnings.

^{Written for commit d34d458. Summary will update on new commits.}

[cubic-dev-ai]

4 issues found across 176 files

Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed.

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="doc/style/color.md">

<violation number="1" location="doc/style/color.md:29">
P3: The example uses duplicate "background-color" keys in one object literal, so the first value is overwritten and the standard color case is never demonstrated.</violation>
</file>

<file name=".gitignore">

<violation number="1" location=".gitignore:6">
P2: Narrowing the ignore rule to `build/*` no longer ignores `build_lib/` created by the Makefile, so build artifacts can be accidentally committed.</violation>
</file>

<file name="demo/gateway/components/ConfirmDialog.tsx">

<violation number="1" location="demo/gateway/components/ConfirmDialog.tsx:33">
P2: confirmText/cancelText props are defined but the button labels are hard-coded (✕/✓), so callers cannot customize button text (e.g., localization).</violation>
</file>

<file name="demo/navigation/index.tsx">

<violation number="1" location="demo/navigation/index.tsx:379">
P2: Pager uses scroll-snap-x for horizontal paging but is laid out with flex-direction: "column", which stacks pages vertically and prevents horizontal scroll snapping/scrollIntoView from working as intended.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}