@quicktvui/web-renderer 1.0.0

package/src/core/patches.js

@@ -0,0 +1,958 @@
+// Patches for web renderer
+// Contains various patches and fixes for Hippy web-renderer
+
+import { setWebEngine, findComponentById } from './componentRegistry'
+import { TV_WIDTH, TV_HEIGHT } from './constants'
+import { AndroidDeviceModule } from '../modules/AndroidDeviceModule'
+import { androidNetworkModuleInstance as AndroidNetworkModule } from '../modules/AndroidNetworkModule'
+import { runtimeDeviceModuleInstance as RuntimeDeviceModule } from '../modules/RuntimeDeviceModule'
+import { esToastModuleInstance as ESToastModule } from '../modules/ESToastModule'
+import { ESIJKAudioPlayerModule } from '../modules/ESIJKAudioPlayerModule'
+import { esNetworkSpeedModuleInstance as ESNetworkSpeedModule } from '../modules/ESNetworkSpeedModule'
+
+// Create singleton instance for audio player
+const audioPlayerModule = new ESIJKAudioPlayerModule(null)
+global.__WEB_MODULES__ = global.__WEB_MODULES__ || {}
+global.__WEB_MODULES__['ESIJKAudioPlayerModule'] = audioPlayerModule
+global.__WEB_MODULES__['ESNetworkSpeedModule'] = ESNetworkSpeedModule
+
+// Track root node ID
+let rootNodeId = null
+let callNativePatched = false
+let hippyCallNativesPatched = false
+
+export function patchHippyCallNatives(engine) {
+  if (hippyCallNativesPatched) {
+    return
+  }
+  const original = global.hippyCallNatives
+  if (typeof original !== 'function') {
+    return
+  }
+
+  const storageMethods = new Set([
+    'initSharedPreferences',
+    'initESSharedPreferences',
+    'getBoolean',
+    'putBoolean',
+    'getInt',
+    'putInt',
+    'getLong',
+    'putLong',
+    'getString',
+    'putString',
+    'getItem',
+    'setItem',
+  ])
+
+  const esMethods = new Set([
+    'getESDeviceInfo',
+    'getESSDKInfo',
+    'getESSDKVersionCode',
+    'getESSDKVersionName',
+    'getESPackageName',
+    'getESAppFilePath',
+    'getESAppRuntimePath',
+    'getSupportSchemes',
+    'launchESPageByArgs',
+    'launchESPage',
+    'launchNativeApp',
+    'launchNativeAppWithPackage',
+    'finish',
+    'finishAll',
+    'isModuleRegistered',
+    'isComponentRegistered',
+  ])
+
+  // ESDevelop 模块方法
+  const developMethods = new Set([
+    'getDevelop',
+    'getPackageName',
+    'getVersionName',
+    'getVersionCode',
+    'getChannel',
+    'getVendor',
+  ])
+
+  global.hippyCallNatives = (moduleName, methodName, callId, params) => {
+    console.log('hippyCallNatives', moduleName, methodName, callId, params)
+
+    // Handle ExtendModule.callUIFunction - support sid-based component lookup
+    if (moduleName === 'ExtendModule' && methodName === 'callUIFunction') {
+      // params format: [sid, funcName, args]
+      const [sid, funcName, args] = params || []
+      console.log('[Web Renderer] ExtendModule.callUIFunction:', { sid, funcName, args })
+
+      if (!sid || !funcName) {
+        console.warn('[Web Renderer] ExtendModule.callUIFunction missing sid or funcName')
+        return
+      }
+
+      // Find component by sid
+      const component = findComponentById(sid)
+      if (component && typeof component[funcName] === 'function') {
+        console.log('[Web Renderer] Calling', funcName, 'on component with sid:', sid)
+        try {
+          const result = component[funcName](...(args || []))
+          return result
+        } catch (e) {
+          console.error('[Web Renderer] Error calling', funcName, ':', e)
+        }
+      } else if (component) {
+        console.warn('[Web Renderer] Component with sid:', sid, 'has no method:', funcName)
+      } else {
+        console.warn('[Web Renderer] Component not found for sid:', sid)
+      }
+      return
+    }
+
+    // Handle ESIJKAudioPlayerModule - redirect to web audio adapter
+    if (moduleName === 'ESIJKAudioPlayerModule') {
+      const audioModule = global.__WEB_MODULES__?.['ESIJKAudioPlayerModule']
+      if (audioModule && typeof audioModule[methodName] === 'function') {
+        console.log(
+          '[Web Renderer] ESIJKAudioPlayerModule (hippyCallNatives):',
+          methodName,
+          'callId:',
+          callId,
+          'params:',
+          params
+        )
+        // callId is the player id, params is array of additional args
+        const result = audioModule[methodName](callId, ...(params || [])).catch((e) => {
+          console.warn('[Web Renderer] ESIJKAudioPlayerModule error:', e)
+        })
+        return result
+      }
+    }
+
+    const hasModule = !!engine?.modules?.[moduleName]
+    if (!hasModule) {
+      console.error(`[Web Renderer] Module ${moduleName} not found!`)
+      if (storageMethods.has(methodName)) {
+        return original('ESLocalStorageModule', methodName, callId, params)
+      }
+      if (esMethods.has(methodName)) {
+        return original('ESModule', methodName, callId, params)
+      }
+      if (developMethods.has(methodName)) {
+        return original('AndroidDevelopModule', methodName, callId, params)
+      }
+    }
+    return original(moduleName, methodName, callId, params)
+  }
+
+  hippyCallNativesPatched = true
+}
+
+// Patch Hippy.bridge.callNative to intercept and modify node creation
+export function patchCallNative(engine) {
+  if (callNativePatched) {
+    return
+  }
+
+  const bridge = global.Hippy?.bridge
+  if (!bridge || !bridge.callNative) {
+    console.error('[Web Renderer] Hippy.bridge not available!')
+    return
+  }
+
+  const originalCallNative = bridge.callNative.bind(bridge)
+
+  bridge.callNative = (moduleName, methodName, ...args) => {
+    // Handle ESIJKAudioPlayerModule - redirect to web audio adapter
+    if (moduleName === 'ESIJKAudioPlayerModule') {
+      const audioModule = global.__WEB_MODULES__?.['ESIJKAudioPlayerModule']
+      if (audioModule && typeof audioModule[methodName] === 'function') {
+        console.log('[Web Renderer] ESIJKAudioPlayerModule:', methodName, 'args:', args)
+        // Native call format: callNative(module, method, ...params)
+        // For play: callNative('ESIJKAudioPlayerModule', 'play', url)
+        // Module methods expect: method(id, ...params), but native calls don't have id
+        // So we pass -1 as default id
+        const id = -1
+        return audioModule[methodName](id, ...args)
+      }
+    }
+
+    if (moduleName === 'UIManagerModule') {
+      // Handle addEventListener - register event listener on component
+      if (methodName === 'addEventListener') {
+        const [id, eventName, handler] = args
+        console.log('[Web Renderer] addEventListener:', { id, eventName })
+
+        const component = findComponentById(id)
+        if (component && component.addEventListener) {
+          component.addEventListener(eventName, handler)
+          console.log(
+            '[Web Renderer] Event listener registered:',
+            eventName,
+            'on component',
+            component.tagName
+          )
+        } else {
+          console.warn('[Web Renderer] Component not found or no addEventListener for id:', id)
+        }
+        return
+      }
+
+      // Handle removeEventListener
+      if (methodName === 'removeEventListener') {
+        const [id, eventName, handler] = args
+        console.log('[Web Renderer] removeEventListener:', { id, eventName })
+
+        const component = findComponentById(id)
+        if (component && component.removeEventListener) {
+          component.removeEventListener(eventName, handler)
+        }
+        return
+      }
+
+      // Handle callUIFunction
+      if (methodName === 'callUIFunction') {
+        const [nodeId, funcName, params, callback] = args
+        console.log('[Web Renderer] callUIFunction:', { nodeId, funcName, params })
+
+        const component = findComponentById(nodeId)
+        if (component && typeof component[funcName] === 'function') {
+          console.log('[Web Renderer] Calling', funcName, 'on component', component.tagName)
+          try {
+            const result = component[funcName](...(params || []))
+            if (callback && typeof callback === 'function') {
+              callback(result)
+            }
+            return result
+          } catch (e) {
+            console.error('[Web Renderer] Error calling', funcName, ':', e)
+          }
+        } else if (component) {
+          console.warn('[Web Renderer] Component', component.tagName, 'has no method:', funcName)
+        } else {
+          console.warn('[Web Renderer] Component not found for id:', nodeId)
+        }
+        return
+      }
+
+      if (methodName === 'createNode') {
+        const [rootViewId, nodes] = args
+
+        if (Array.isArray(nodes)) {
+          const processedNodes = nodes.map((node) => {
+            let nodeData = node
+            let props = null
+
+            if (Array.isArray(node)) {
+              nodeData = node[0]
+              props = node[1]
+            }
+
+            if (nodeData && typeof nodeData === 'object') {
+              if (!nodeData.name) {
+                nodeData.name = 'View'
+              }
+
+              // Log component creation
+              console.log('[Web Renderer] Creating node:', nodeData.id, 'name:', nodeData.name)
+
+              if (!rootNodeId && (nodeData.pId === 'app' || nodeData.pId === rootViewId)) {
+                rootNodeId = nodeData.id
+                console.log('[Web Renderer] ROOT NODE detected: id=' + rootNodeId)
+
+                if (nodeData.props) {
+                  nodeData.props.style = nodeData.props.style || {}
+                  nodeData.props.style.width = TV_WIDTH
+                  nodeData.props.style.height = TV_HEIGHT
+                  delete nodeData.props.style.flex
+                }
+              }
+            }
+
+            return Array.isArray(node) ? [nodeData, props] : nodeData
+          })
+
+          return originalCallNative(moduleName, methodName, rootViewId, processedNodes)
+        }
+      }
+
+      if (methodName === 'updateNode') {
+        const [rootViewId, nodes] = args
+
+        if (Array.isArray(nodes)) {
+          const processedNodes = nodes.map((node) => {
+            let nodeData = node
+            let props = null
+
+            if (Array.isArray(node)) {
+              nodeData = node[0]
+              props = node[1]
+            }
+
+            if (nodeData && typeof nodeData === 'object') {
+              if (!nodeData.name) {
+                nodeData.name = 'View'
+              }
+
+              if (rootNodeId && nodeData.id === rootNodeId) {
+                if (nodeData.props) {
+                  nodeData.props.style = nodeData.props.style || {}
+                  nodeData.props.style.width = TV_WIDTH
+                  nodeData.props.style.height = TV_HEIGHT
+                  delete nodeData.props.style.flex
+                }
+              }
+            }
+
+            return Array.isArray(node) ? [nodeData, props] : nodeData
+          })
+
+          return originalCallNative(moduleName, methodName, rootViewId, processedNodes)
+        }
+      }
+    }
+
+    // Handle ESToastModule - redirect to web toast adapter
+    if (moduleName === 'ESToastModule') {
+      if (ESToastModule && typeof ESToastModule[methodName] === 'function') {
+        console.log('[Web Renderer] ESToastModule:', methodName, args)
+        ESToastModule[methodName](...args)
+        return
+      }
+    }
+
+    // Handle ESNetworkSpeedModule - redirect to web network speed adapter
+    if (moduleName === 'ESNetworkSpeedModule') {
+      if (ESNetworkSpeedModule && typeof ESNetworkSpeedModule[methodName] === 'function') {
+        console.log('[Web Renderer] ESNetworkSpeedModule:', methodName, args)
+        ESNetworkSpeedModule[methodName](...args)
+        return
+      }
+    }
+
+    // Handle ESPluginModule - intercept plugin installation for web platform
+    if (moduleName === 'ESPluginModule') {
+      console.log(`[Web Renderer] ESPluginModule call: ${methodName}`, args)
+
+      if (methodName === 'install') {
+        const pluginInfo = Array.isArray(args[0]) ? args[0][0] : args[0]
+        const pkg = pluginInfo?.pkg
+        console.log(`[Web Renderer] ESPluginModule.install: ${pkg}`, pluginInfo)
+
+        // 发送 EventBus 事件（格式必须匹配 ESPlugin 的期望）
+        try {
+          const { EventBus } = require('@extscreen/es3-vue')
+          if (EventBus?.$emit) {
+            EventBus.$emit('onESPluginStateChanged', {
+              success: true, // 必须是 success，不是 state
+              pkg,
+              status: 0,
+              msg: 'Plugin installed successfully (web)',
+            })
+            console.log(`[Web Renderer] EventBus event sent for ${pkg}`)
+          }
+        } catch (e) {
+          console.log('[Web Renderer] EventBus error:', e.message)
+        }
+
+        console.log(`[Web Renderer] Plugin ${pkg} install completed (web)`)
+
+        return
+      }
+
+      return
+    }
+
+    return originalCallNative(moduleName, methodName, ...args)
+  }
+
+  callNativePatched = true
+  console.log('[Web Renderer] Patched Hippy.bridge.callNative')
+}
+
+// Patch Hippy.bridge.callNativeWithPromise for ESIJKAudioPlayerModule and RuntimeDeviceModule
+export function patchCallNativeWithPromise() {
+  const bridge = global.Hippy?.bridge
+  if (!bridge || !bridge.callNativeWithPromise) {
+    console.log('[Web Renderer] Hippy.bridge.callNativeWithPromise not available')
+    return
+  }
+
+  const originalCallNativeWithPromise = bridge.callNativeWithPromise.bind(bridge)
+
+  bridge.callNativeWithPromise = (moduleName, methodName, ...args) => {
+    console.log('[Web Renderer] callNativeWithPromise:', moduleName, methodName, args)
+    // Handle ESIJKAudioPlayerModule - redirect to web audio adapter
+    if (moduleName === 'ESIJKAudioPlayerModule') {
+      const audioModule = global.__WEB_MODULES__?.['ESIJKAudioPlayerModule']
+      if (audioModule && typeof audioModule[methodName] === 'function') {
+        console.log('[Web Renderer] ESIJKAudioPlayerModule (Promise):', methodName, args)
+        // Native call format doesn't have id, pass -1 as default
+        const id = -1
+        const result = audioModule[methodName](id, ...args)
+        if (result instanceof Promise) {
+          return result
+        }
+        return Promise.resolve(result)
+      }
+    }
+
+    // Handle RuntimeDeviceModule - redirect to web device adapter
+    if (moduleName === 'RuntimeDeviceModule') {
+      if (RuntimeDeviceModule && typeof RuntimeDeviceModule[methodName] === 'function') {
+        console.log('[Web Renderer] RuntimeDeviceModule (Promise):', methodName, args)
+        const result = RuntimeDeviceModule[methodName](...args)
+        if (result instanceof Promise) {
+          return result
+        }
+        return Promise.resolve(result)
+      }
+    }
+
+    // Handle AndroidDeviceModule - redirect to web device adapter
+    if (moduleName === 'AndroidDeviceModule') {
+      if (AndroidDeviceModule && typeof AndroidDeviceModule[methodName] === 'function') {
+        console.log('[Web Renderer] AndroidDeviceModule (Promise):', methodName, args)
+        const result = AndroidDeviceModule[methodName](...args)
+        if (result instanceof Promise) {
+          return result
+        }
+        return Promise.resolve(result)
+      }
+    }
+
+    // Handle AndroidNetworkModule - redirect to web network adapter
+    if (moduleName === 'AndroidNetworkModule') {
+      if (AndroidNetworkModule && typeof AndroidNetworkModule[methodName] === 'function') {
+        console.log('[Web Renderer] AndroidNetworkModule (Promise):', methodName, args)
+        const result = AndroidNetworkModule[methodName](...args)
+        if (result instanceof Promise) {
+          return result
+        }
+        return Promise.resolve(result)
+      }
+    }
+
+    return originalCallNativeWithPromise(moduleName, methodName, ...args)
+  }
+
+  console.log('[Web Renderer] Patched Hippy.bridge.callNativeWithPromise')
+}
+
+// Patch Hippy.document.callUIFunction
+export function patchDocumentCallUIFunction() {
+  const originalDocCallUIFunction = global.Hippy.document.callUIFunction.bind(global.Hippy.document)
+
+  // Retry helper for callUIFunction - handles timing issues where component not yet created
+  const retryCallUIFunction = (
+    nodeId,
+    funcName,
+    params,
+    callback,
+    retriesLeft = 10,
+    delay = 50
+  ) => {
+    const component = findComponentById(nodeId)
+    if (component && typeof component[funcName] === 'function') {
+      console.log(
+        '[Web Renderer] Retry successful - Calling',
+        funcName,
+        'on component',
+        component.tagName
+      )
+      try {
+        const result = component[funcName](params)
+        if (callback && typeof callback === 'function') {
+          callback(result)
+        }
+        return result
+      } catch (e) {
+        console.error('[Web Renderer] Error calling', funcName, ':', e)
+      }
+    } else if (retriesLeft > 0) {
+      console.log(
+        '[Web Renderer] Component not found for id:',
+        nodeId,
+        '- retrying in',
+        delay,
+        'ms (retries left:',
+        retriesLeft,
+        ')'
+      )
+      setTimeout(() => {
+        retryCallUIFunction(nodeId, funcName, params, callback, retriesLeft - 1, delay)
+      }, delay)
+    } else {
+      console.warn('[Web Renderer] Retry exhausted - Component still not found for id:', nodeId)
+    }
+  }
+
+  global.Hippy.document.callUIFunction = (nodeId, funcName, params, callback) => {
+    console.log('[Web Renderer] Hippy.document.callUIFunction:', {
+      nodeId,
+      funcName,
+      paramsLength: params?.length,
+    })
+
+    const component = findComponentById(nodeId)
+    if (component && typeof component[funcName] === 'function') {
+      console.log(
+        '[Web Renderer] Calling',
+        funcName,
+        'on component',
+        component.tagName,
+        'with',
+        params?.length,
+        'params'
+      )
+      try {
+        const result = component[funcName](params)
+        if (callback && typeof callback === 'function') {
+          callback(result)
+        }
+        return result
+      } catch (e) {
+        console.error('[Web Renderer] Error calling', funcName, ':', e)
+      }
+    } else if (component) {
+      console.warn('[Web Renderer] Component', component.tagName, 'has no method:', funcName)
+    } else {
+      // Component not found yet - use retry mechanism
+      retryCallUIFunction(nodeId, funcName, params, callback)
+      return
+    }
+
+    return originalDocCallUIFunction(nodeId, funcName, params, callback)
+  }
+
+  console.log('[Web Renderer] Patched Hippy.document.callUIFunction')
+}
+
+// Override Hippy.device dimensions
+export function overrideDeviceDimensions() {
+  if (typeof global.Hippy === 'undefined' || !global.Hippy.device) {
+    setTimeout(overrideDeviceDimensions, 10)
+    return
+  }
+
+  global.Hippy.device.window = {
+    width: TV_WIDTH,
+    height: TV_HEIGHT,
+    scale: 1,
+    fontScale: 1,
+    statusBarHeight: 0,
+    navigatorBarHeight: 0,
+  }
+
+  global.Hippy.device.screen = {
+    width: TV_WIDTH,
+    height: TV_HEIGHT,
+    scale: 1,
+    fontScale: 1,
+    statusBarHeight: 0,
+    navigatorBarHeight: 0,
+  }
+
+  global.Hippy.device.pixelRatio = 1
+
+  console.log('[Web Renderer] Overridden Hippy.device dimensions to', TV_WIDTH, 'x', TV_HEIGHT)
+}
+
+// Fix #app container style
+export function fixAppContainerStyle() {
+  const appContainer = document.getElementById('app')
+  if (!appContainer) {
+    setTimeout(fixAppContainerStyle, 10)
+    return
+  }
+
+  appContainer.style.width = TV_WIDTH + 'px'
+  appContainer.style.height = TV_HEIGHT + 'px'
+
+  console.log('[Web Renderer] Fixed #app container style to', TV_WIDTH, 'x', TV_HEIGHT)
+
+  const observer = new MutationObserver(() => {
+    if (
+      appContainer.style.width !== TV_WIDTH + 'px' ||
+      appContainer.style.height !== TV_HEIGHT + 'px'
+    ) {
+      appContainer.style.width = TV_WIDTH + 'px'
+      appContainer.style.height = TV_HEIGHT + 'px'
+    }
+  })
+
+  observer.observe(appContainer, {
+    attributes: true,
+    attributeFilter: ['style'],
+  })
+}
+
+// Focus style property names
+const FOCUS_STYLE_PROPS = [
+  'focusColor',
+  'focusBackgroundColor',
+  'focusTextColor',
+  'focusBorderColor',
+  'focusBorderWidth',
+  'focusBorderRadius',
+  'focusOpacity',
+  'focusScale',
+]
+
+// Properties that are numeric values, not colors (should not be converted via argbToCssColor)
+const NUMERIC_FOCUS_PROPS = ['focusBorderWidth', 'focusBorderRadius', 'focusOpacity', 'focusScale']
+
+// Convert ARGB number to CSS color string
+function argbToCssColor(argb) {
+  if (typeof argb !== 'number') return argb
+  const a = ((argb >> 24) & 0xff) / 255
+  const r = (argb >> 16) & 0xff
+  const g = (argb >> 8) & 0xff
+  const b = argb & 0xff
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+// Convert Android ARGB color string (#AARRGGBB) to CSS color (#RRGGBBAA or rgba())
+function convertArgbColorString(color) {
+  if (typeof color !== 'string') return color
+
+  // Handle #AARRGGBB format (8 hex chars with #)
+  if (/^#[0-9A-Fa-f]{8}$/.test(color)) {
+    const alpha = color.substring(1, 3)
+    const red = color.substring(3, 5)
+    const green = color.substring(5, 7)
+    const blue = color.substring(7, 9)
+
+    // Convert hex to decimal
+    const a = parseInt(alpha, 16) / 255
+    const r = parseInt(red, 16)
+    const g = parseInt(green, 16)
+    const b = parseInt(blue, 16)
+
+    return `rgba(${r}, ${g}, ${b}, ${a})`
+  }
+
+  // Handle #ARGB format (4 hex chars with #)
+  if (/^#[0-9A-Fa-f]{4}$/.test(color)) {
+    const alpha = color.substring(1, 2) + color.substring(1, 2)
+    const red = color.substring(2, 3) + color.substring(2, 3)
+    const green = color.substring(3, 4) + color.substring(3, 4)
+    const blue = color.substring(4, 5) + color.substring(4, 5)
+
+    const a = parseInt(alpha, 16) / 255
+    const r = parseInt(red, 16)
+    const g = parseInt(green, 16)
+    const b = parseInt(blue, 16)
+
+    return `rgba(${r}, ${g}, ${b}, ${a})`
+  }
+
+  // Already in CSS format (#RRGGBB, #RGB, rgba(), etc.)
+  return color
+}
+
+// Gradient orientation mapping (ESGradientOrientation to CSS direction)
+const GRADIENT_ORIENTATION_MAP = {
+  0: 'to bottom', // TOP_BOTTOM
+  1: 'to bottom left', // TR_BL
+  2: 'to left', // RIGHT_LEFT
+  3: 'to top left', // BR_TL
+  4: 'to top', // BOTTOM_TOP
+  5: 'to top right', // BL_TR
+  6: 'to right', // LEFT_RIGHT
+  7: 'to bottom right', // TL_BR
+}
+
+// Convert QTGradient to CSS gradient string
+function gradientBackgroundToCss(gradient) {
+  if (!gradient || !gradient.colors || gradient.colors.length === 0) {
+    return null
+  }
+
+  // Convert colors from ARGB format to CSS format
+  const colors = gradient.colors.map((color) => convertArgbColorString(color))
+  const orientation = gradient.orientation ?? 6 // Default: LEFT_RIGHT
+  const type = gradient.type ?? 0 // Default: LINEAR
+  const cornerRadius = gradient.cornerRadius
+  const cornerRadii4 = gradient.cornerRadii4
+  const cornerRadii8 = gradient.cornerRadii8
+
+  // Build CSS gradient
+  let cssGradient = ''
+
+  if (type === 1) {
+    // Radial gradient
+    const gradientRadius = gradient.gradientRadius || 'farthest-corner'
+    cssGradient = `radial-gradient(circle ${gradientRadius}, ${colors.join(', ')})`
+  } else {
+    // Linear gradient (default)
+    const direction = GRADIENT_ORIENTATION_MAP[orientation] || 'to right'
+    cssGradient = `linear-gradient(${direction}, ${colors.join(', ')})`
+  }
+
+  // Build border-radius
+  let borderRadius = ''
+  if (cornerRadii8 && cornerRadii8.length === 8) {
+    // 8 values: [topLeftX, topLeftY, topRightX, topRightY, bottomRightX, bottomRightY, bottomLeftX, bottomLeftY]
+    borderRadius = `${cornerRadii8[0]}px ${cornerRadii8[2]}px ${cornerRadii8[4]}px ${cornerRadii8[6]}px / ${cornerRadii8[1]}px ${cornerRadii8[3]}px ${cornerRadii8[5]}px ${cornerRadii8[7]}px`
+  } else if (cornerRadii4 && cornerRadii4.length === 4) {
+    // 4 values: [topLeft, topRight, bottomRight, bottomLeft]
+    borderRadius = `${cornerRadii4[0]}px ${cornerRadii4[1]}px ${cornerRadii4[2]}px ${cornerRadii4[3]}px`
+  } else if (cornerRadius !== undefined && cornerRadius !== null) {
+    borderRadius = `${cornerRadius}px`
+  }
+
+  return {
+    background: cssGradient,
+    borderRadius: borderRadius,
+  }
+}
+
+// Extract focus styles from style object and store as data attributes
+function extractFocusStyles(element, styleObj) {
+  if (!styleObj || typeof styleObj !== 'object') return styleObj
+  if (!element || !element.setAttribute) return styleObj
+
+  const result = { ...styleObj }
+
+  // Handle gradientBackground - convert to CSS gradient
+  const gradientBg = styleObj.gradientBackground
+  if (gradientBg) {
+    const cssGradient = gradientBackgroundToCss(gradientBg)
+    if (cssGradient) {
+      result.background = cssGradient.background
+      if (cssGradient.borderRadius) {
+        result.borderRadius = cssGradient.borderRadius
+      }
+    }
+    delete result.gradientBackground
+  }
+
+  FOCUS_STYLE_PROPS.forEach((prop) => {
+    const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+    const value = styleObj[prop] || styleObj[kebabProp]
+
+    if (value !== undefined) {
+      // Numeric props should not be converted as colors
+      let cssValue
+      if (NUMERIC_FOCUS_PROPS.includes(prop)) {
+        cssValue = value
+      } else {
+        // Convert ARGB to CSS color if needed (for color props)
+        cssValue = typeof value === 'number' ? argbToCssColor(value) : value
+      }
+      // Store as data attribute
+      element.setAttribute('data-' + kebabProp, String(cssValue))
+      // Remove from style object (browser won't understand it)
+      delete result[prop]
+      delete result[kebabProp]
+    }
+  })
+
+  return result
+}
+
+// Patch HippyWeb.setElementStyle to extract focus styles
+function patchHippyWebSetElementStyle(engine) {
+  const HippyWeb = engine.context?.getModuleByName?.('HippyWeb')
+  if (HippyWeb && HippyWeb.setElementStyle && !HippyWeb._setElementStylePatched) {
+    const originalSetElementStyle = HippyWeb.setElementStyle.bind(HippyWeb)
+    HippyWeb.setElementStyle = (element, styleObj) => {
+      const cleanedStyle = extractFocusStyles(element, styleObj)
+      originalSetElementStyle(element, cleanedStyle)
+    }
+    HippyWeb._setElementStylePatched = true
+    console.log('[Web Renderer] Patched HippyWeb.setElementStyle for focus styles')
+  }
+}
+
+function patchFocusCssVars() {
+  const focusKebabProps = [
+    'focus-color',
+    'focus-background-color',
+    'focus-background',
+    'focus-text-color',
+    'focus-border-color',
+    'focus-border-width',
+    'focus-border-radius',
+    'focus-opacity',
+    'focus-scale',
+  ]
+
+  const patchRuleStyle = (style) => {
+    if (!style) return
+    focusKebabProps.forEach((prop) => {
+      const value = style.getPropertyValue(prop)
+      if (!value) return
+      const varName = '--' + prop
+      const existing = style.getPropertyValue(varName)
+      if (existing) return
+      style.setProperty(varName, value.trim())
+    })
+  }
+
+  const visitRules = (rules) => {
+    if (!rules) return
+    Array.from(rules).forEach((rule) => {
+      if (!rule) return
+      const type = rule.type
+      if (type === CSSRule.STYLE_RULE) {
+        patchRuleStyle(rule.style)
+      } else if (
+        type === CSSRule.MEDIA_RULE ||
+        type === CSSRule.SUPPORTS_RULE ||
+        type === CSSRule.DOCUMENT_RULE
+      ) {
+        visitRules(rule.cssRules)
+      }
+    })
+  }
+
+  Array.from(document.styleSheets || []).forEach((sheet) => {
+    try {
+      visitRules(sheet.cssRules)
+    } catch (e) {}
+  })
+}
+
+let _focusCssVarObserver = null
+function ensureFocusCssVarsPatched() {
+  patchFocusCssVars()
+  if (_focusCssVarObserver) return
+  _focusCssVarObserver = new MutationObserver(() => patchFocusCssVars())
+  _focusCssVarObserver.observe(document.head, { childList: true, subtree: true })
+}
+
+// Patch UIManagerModule
+export function patchUIManager(engine) {
+  const uiManager = engine.context?.getModuleByName?.('UIManagerModule')
+  if (uiManager && !uiManager._addEventListenerPatched) {
+    const originalAddEventListener = uiManager.addEventListener.bind(uiManager)
+    uiManager.addEventListener = (id, eventName, callback) => {
+      const view = uiManager.findViewById(id)
+      if (view && view.addEventListener) {
+        view.addEventListener(eventName, callback)
+      }
+    }
+
+    const originalDefaultUpdateViewProps = uiManager.defaultUpdateViewProps.bind(uiManager)
+    uiManager.defaultUpdateViewProps = (view, props) => {
+      if (!view.dom) {
+        console.warn('[UIManagerModule] defaultUpdateViewProps: view.dom is null, skipping')
+        return
+      }
+
+      if (props?.style) {
+        // If this is ESPageRootView or ESPageRouterView, intercept and force default background
+        if (
+          (view._originalComponentName === 'ESPageRootView' ||
+            view._originalComponentName === 'ESPageRouterView') &&
+          (!props.style.backgroundColor || props.style.backgroundColor === 'transparent') &&
+          !props.isDialogMode
+        ) {
+          props.style.backgroundColor = '#000000'
+        }
+
+        props.style = extractFocusStyles(view.dom, props.style)
+      }
+
+      const normalizeClass = (value) => {
+        if (!value) return ''
+        if (typeof value === 'string') return value
+        if (Array.isArray(value)) return value.map(normalizeClass).filter(Boolean).join(' ')
+        if (typeof value === 'object')
+          return Object.keys(value)
+            .filter((k) => value[k])
+            .join(' ')
+        return String(value)
+      }
+
+      const applyClass = (element, value) => {
+        const cls = normalizeClass(value)
+        if (!cls) return
+        cls
+          .split(/\s+/)
+          .filter(Boolean)
+          .forEach((c) => element.classList.add(c))
+      }
+
+      const applyFocusProps = (element, p) => {
+        if (!element || !element.setAttribute || !p) return
+        FOCUS_STYLE_PROPS.forEach((prop) => {
+          const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+          const value = p[prop] ?? p[kebabProp]
+          if (value === undefined || value === null) return
+          // Numeric props should not be converted as colors
+          const cssValue = NUMERIC_FOCUS_PROPS.includes(prop)
+            ? value
+            : typeof value === 'number'
+              ? argbToCssColor(value)
+              : value
+          element.setAttribute('data-' + kebabProp, String(cssValue))
+        })
+      }
+
+      applyClass(view.dom, props?.className || props?.class)
+      applyFocusProps(view.dom, props)
+      const parent = uiManager.findViewById(view.pId)
+      if (!parent || !parent.dom) {
+        console.log(
+          '[UIManagerModule] defaultUpdateViewProps: parent or parent.dom is null, using safe update'
+        )
+        const keys = Object.keys(props)
+        if (props.style) {
+          const HippyWeb = engine.context.getModuleByName('HippyWeb')
+          if (HippyWeb?.setElementStyle) {
+            HippyWeb.setElementStyle(view.dom, props.style)
+          } else {
+            Object.assign(view.dom.style, props.style)
+          }
+        }
+        return
+      }
+      originalDefaultUpdateViewProps(view, props)
+      applyClass(view.dom, props?.className || props?.class)
+      applyFocusProps(view.dom, props)
+
+      // Apply gradientBackground from props (not in style)
+      if (props?.gradientBackground) {
+        const cssGradient = gradientBackgroundToCss(props.gradientBackground)
+        if (cssGradient) {
+          view.dom.style.background = cssGradient.background
+          if (cssGradient.borderRadius) {
+            view.dom.style.borderRadius = cssGradient.borderRadius
+          }
+        }
+      }
+    }
+
+    uiManager._addEventListenerPatched = true
+    console.log('[Web Renderer] Patched UIManagerModule methods for debugging and safety')
+    return true
+  }
+  return false
+}
+
+// Apply all patches
+export function applyAllPatches(engine) {
+  setWebEngine(engine)
+  patchHippyCallNatives(engine)
+  patchCallNative(engine)
+  patchCallNativeWithPromise()
+  patchDocumentCallUIFunction()
+  overrideDeviceDimensions()
+  fixAppContainerStyle()
+
+  // Patch HippyWeb.setElementStyle for focus styles
+  patchHippyWebSetElementStyle(engine)
+  ensureFocusCssVarsPatched()
+
+  // Try to patch UIManagerModule
+  if (!patchUIManager(engine)) {
+    const tryPatch = () => {
+      if (patchUIManager(engine)) {
+        console.log('[Web Renderer] UIManagerModule patched via requestAnimationFrame')
+      } else {
+        requestAnimationFrame(tryPatch)
+      }
+    }
+    requestAnimationFrame(tryPatch)
+  }
+}