@qontinui/ui-bridge-native 0.6.4 → 0.6.6

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 import { createContext, useRef, useState, useCallback, useEffect, useMemo, use } from 'react';
-import { StyleSheet, Platform } from 'react-native';
+import { Dimensions, StyleSheet, Platform } from 'react-native';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -14,6 +14,10 @@ function extractHandlerNames(props) {
   if (!props) return [];
   return Object.keys(props).filter((k) => typeof props[k] === "function");
 }
+function matchesCurrentRoute(registrationRoute, currentRoute) {
+  if (registrationRoute == null || registrationRoute === "") return true;
+  return registrationRoute === currentRoute;
+}
 function inferActions(type) {
   const baseActions = ["focus", "blur"];
   switch (type) {
@@ -219,13 +223,20 @@ var NativeUIBridgeRegistry = class {
     if (this.config.verbose) {
       console.log(`[ui-bridge-native] Registered element: ${id} (${type})`);
     }
-    this.updateElementState(id, {
+    const seededState = {
       mounted: true,
       visible: true,
       enabled: true,
       focused: false,
       layout: null
-    });
+    };
+    if (type === "input" && typeof props?.value === "string") {
+      seededState.value = props.value;
+    }
+    if (type === "text" && typeof label === "string") {
+      seededState.value = label;
+    }
+    this.updateElementState(id, seededState);
     return registered;
   }
   /**
@@ -387,6 +398,9 @@ var NativeUIBridgeRegistry = class {
       })
     };
     this.elements.set(id, updated);
+    if (element.type === "text" && labelChanged && typeof nextLabel === "string") {
+      this.updateElementState(id, { value: nextLabel });
+    }
     this.emit("element:registered", {
       id,
       type: element.type,
@@ -395,7 +409,22 @@ var NativeUIBridgeRegistry = class {
     return true;
   }
   /**
-   * Update element props (for action execution)
+   * Update element props (for action execution).
+   *
+   * Side effect for `type: 'input'` elements: when `props.value` is a string,
+   * mirror it into `state.value` so AI drivers reading the registry don't see
+   * `state.value === undefined` until the user types. Before this mirror,
+   * controlled-input consumers (`<TextInput value={x} onChangeText={setX} />`
+   * with `captureProps({ value: x, onChangeText: setX })`) registered an
+   * input whose `state.value` only became defined after the FIRST
+   * `onChangeText` call — bridge consumers couldn't read the default value
+   * (e.g. a pre-populated API-URL input) until someone typed into it.
+   *
+   * Re-runs on every `updateElementProps` so a parent passing a fresh
+   * `value` prop (controlled re-render) keeps the registry in sync. The
+   * mirror is gated on `type === 'input'` to avoid touching non-input
+   * elements that may carry an unrelated `value` prop (e.g. a Switch's
+   * boolean value, which lives on `state.checked`).
    */
   updateElementProps(id, props) {
     const element = this.elements.get(id);
@@ -405,6 +434,12 @@ var NativeUIBridgeRegistry = class {
         props: { ...element.props, ...props }
       };
       this.elements.set(id, updated);
+      if (element.type === "input" && Object.prototype.hasOwnProperty.call(props, "value") && typeof props.value === "string") {
+        const currentState = updated.getState();
+        if (currentState.value !== props.value) {
+          this.updateElementState(id, { value: props.value });
+        }
+      }
     }
   }
   /**
@@ -615,7 +650,7 @@ var NativeUIBridgeRegistry = class {
     let elements = options?.visibleOnly ? this.getMountedVisibleElements() : this.getAllElements();
     if (options?.currentRouteOnly && resolvedRoute.currentRoute) {
       const currentRoute = resolvedRoute.currentRoute;
-      elements = elements.filter((e) => e.registrationRoute === currentRoute);
+      elements = elements.filter((e) => matchesCurrentRoute(e.registrationRoute, currentRoute));
     }
     const snapshot = {
       timestamp: Date.now(),
@@ -1554,15 +1589,9 @@ function success(data) {
 function error(message, code) {
   return { success: false, error: message, code, timestamp: Date.now() };
 }
-function createDesignHandlers(registry) {
+function createDesignHandlers(registry, viewportProvider) {
   function getScreenDimensions() {
-    try {
-      const { Dimensions } = __require("react-native");
-      const screen = Dimensions.get("screen");
-      return { width: screen.width, height: screen.height };
-    } catch {
-      return { width: 0, height: 0 };
-    }
+    return viewportProvider?.() ?? { width: 0, height: 0 };
   }
   return {
     // 1. GET /design/element/:id/styles
@@ -2192,15 +2221,6 @@ async function executeWorkflowStep(step, registry, executor) {
     };
   }
 }
-function getWindowDimensions() {
-  try {
-    const { Dimensions } = __require("react-native");
-    const win = Dimensions.get("window");
-    return { width: win.width, height: win.height };
-  } catch {
-    return { width: 0, height: 0 };
-  }
-}
 function success2(data) {
   return {
     success: true,
@@ -2217,7 +2237,7 @@ function error2(message, code) {
   };
 }
 function createServerHandlers(registry, executor, config) {
-  const designHandlers = createDesignHandlers(registry);
+  const designHandlers = createDesignHandlers(registry, config?.viewportProvider);
   return {
     // Elements
     getElements: async (ctx) => {
@@ -2225,7 +2245,7 @@ function createServerHandlers(registry, executor, config) {
       const forRoute = ctx.query?.route || ctx.body?.route;
       let allElements = visibleOnly ? registry.getMountedVisibleElements() : registry.getAllElements();
       if (forRoute) {
-        allElements = allElements.filter((e) => e.registrationRoute === forRoute);
+        allElements = allElements.filter((e) => matchesCurrentRoute(e.registrationRoute, forRoute));
       }
       const elements = allElements.map((e) => {
         const handlers = extractHandlerNames(e.props);
@@ -2408,7 +2428,7 @@ function createServerHandlers(registry, executor, config) {
     },
     getPageHealth: async (ctx) => {
       const bodyViewport = ctx.body?.viewport;
-      const viewport = bodyViewport ?? getWindowDimensions();
+      const viewport = bodyViewport ?? config?.viewportProvider?.() ?? { width: 0, height: 0 };
       const elements = registry.getAllElements().map((e) => ({
         type: e.type,
         state: e.getState()
@@ -3379,7 +3399,8 @@ var NativeUIBridgeServer = class {
     this.handlers = createServerHandlers(registry, executor, {
       appInfo: this.config.appInfo,
       consoleErrorBuffer: this.consoleErrorBuffer,
-      networkRequestBuffer: this.networkRequestBuffer
+      networkRequestBuffer: this.networkRequestBuffer,
+      viewportProvider: this.config.viewportProvider
     });
     this.handlers.getMethods = async () => {
       const testHooks = this.config.testHooks === true;
@@ -5145,7 +5166,17 @@ function UIBridgeNativeProvider({
       serverPort: config.serverPort || 8087,
       cors: true,
       appInfo: config.appInfo,
-      testHooks: features.testHooks === true
+      testHooks: features.testHooks === true,
+      // Injected device-viewport getter for POST /control/page-health. The
+      // server doesn't import `react-native` itself — the require/import
+      // pattern there crashed the host RN app in 0.6.3/0.6.4 (Metro/Hermes
+      // raised `unknownModuleError` past every try/catch). This provider
+      // already has a live react-native import, so it's the safe injection
+      // point. See feedback_metro_require_gotcha for the full incident.
+      viewportProvider: () => {
+        const win = Dimensions.get("window");
+        return { width: win.width, height: win.height };
+      }
     });
     server.setAdapter(serverAdapter);
     if (navigationProvider) {
@@ -5240,7 +5271,11 @@ function UIBridgeNativeProvider({
             serverPort: config.serverPort || 8087,
             cors: true,
             appInfo: config.appInfo,
-            testHooks: features.testHooks === true
+            testHooks: features.testHooks === true,
+            viewportProvider: () => {
+              const win = Dimensions.get("window");
+              return { width: win.width, height: win.height };
+            }
           });
           if (navigationProvider) bareServer.setNavigationProvider(navigationProvider);
           if (screenshotProvider) bareServer.setScreenshotProvider(screenshotProvider);