@qontinui/ui-bridge-native 0.6.10 → 0.6.12

package/dist/core/index.js

@@ -1,5 +1,178 @@
 'use strict';
 
+// src/core/vision-fields.ts
+var INTERACTIVE_HANDLER_NAMES = /* @__PURE__ */ new Set([
+  "onPress",
+  "onPressIn",
+  "onPressOut",
+  "onLongPress",
+  "onChangeText",
+  "onValueChange",
+  "onChange",
+  "onSubmitEditing",
+  "onClick",
+  "onTouchStart",
+  "onTouchEnd"
+]);
+var INTERACTIVE_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "input",
+  "switch",
+  "checkbox",
+  "radio",
+  "touchable",
+  "pressable",
+  "listItem"
+]);
+function roleForType(type) {
+  switch (type) {
+    case "button":
+    case "touchable":
+    case "pressable":
+      return "button";
+    case "input":
+      return "textbox";
+    case "text":
+      return "text";
+    case "switch":
+      return "switch";
+    case "checkbox":
+      return "checkbox";
+    case "radio":
+      return "radio";
+    case "image":
+      return "img";
+    case "list":
+      return "list";
+    case "listItem":
+      return "listitem";
+    case "modal":
+      return "dialog";
+    case "scroll":
+    case "view":
+    case "custom":
+    default:
+      return void 0;
+  }
+}
+function deriveInteractable(type, handlerNames) {
+  if (INTERACTIVE_TYPES.has(type)) return true;
+  if (handlerNames) {
+    for (const name of handlerNames) {
+      if (INTERACTIVE_HANDLER_NAMES.has(name)) return true;
+    }
+  }
+  return false;
+}
+function deriveText(state, label) {
+  const candidates = [state.value, state.textContent, label];
+  for (const c of candidates) {
+    if (typeof c === "string") {
+      const trimmed = c.trim();
+      if (trimmed.length > 0) return trimmed;
+    }
+  }
+  return void 0;
+}
+var NAMED_COLORS = {
+  black: { r: 0, g: 0, b: 0 },
+  white: { r: 255, g: 255, b: 255 },
+  red: { r: 255, g: 0, b: 0 },
+  green: { r: 0, g: 128, b: 0 },
+  blue: { r: 0, g: 0, b: 255 },
+  gray: { r: 128, g: 128, b: 128 },
+  grey: { r: 128, g: 128, b: 128 },
+  silver: { r: 192, g: 192, b: 192 },
+  transparent: { r: 0, g: 0, b: 0 },
+  orange: { r: 255, g: 165, b: 0 },
+  yellow: { r: 255, g: 255, b: 0 },
+  purple: { r: 128, g: 0, b: 128 },
+  navy: { r: 0, g: 0, b: 128 }
+};
+var clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
+function parseColorToRgb(input) {
+  if (typeof input !== "string") return void 0;
+  const raw = input.trim().toLowerCase();
+  if (raw.length === 0) return void 0;
+  if (Object.prototype.hasOwnProperty.call(NAMED_COLORS, raw)) {
+    return NAMED_COLORS[raw];
+  }
+  if (raw.startsWith("#")) {
+    const hex = raw.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      const r = parseInt(hex[0] + hex[0], 16);
+      const g = parseInt(hex[1] + hex[1], 16);
+      const b = parseInt(hex[2] + hex[2], 16);
+      if ([r, g, b].every((v) => Number.isFinite(v))) return { r, g, b };
+      return void 0;
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      if ([r, g, b].every((v) => Number.isFinite(v))) return { r, g, b };
+      return void 0;
+    }
+    return void 0;
+  }
+  const rgbMatch = raw.match(/^rgba?\(([^)]+)\)$/);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(",").map((p) => p.trim());
+    if (parts.length < 3) return void 0;
+    const channel = (p) => {
+      if (p.endsWith("%")) {
+        const pct = parseFloat(p.slice(0, -1));
+        if (!Number.isFinite(pct)) return void 0;
+        return clamp255(pct / 100 * 255);
+      }
+      const n = parseFloat(p);
+      if (!Number.isFinite(n)) return void 0;
+      return clamp255(n);
+    };
+    const r = channel(parts[0]);
+    const g = channel(parts[1]);
+    const b = channel(parts[2]);
+    if (r === void 0 || g === void 0 || b === void 0) return void 0;
+    return { r, g, b };
+  }
+  return void 0;
+}
+function parseFontSizePx(input) {
+  if (typeof input === "number") {
+    return Number.isFinite(input) && input > 0 ? input : void 0;
+  }
+  if (typeof input === "string") {
+    const m = input.trim().match(/^(-?\d*\.?\d+)/);
+    if (m) {
+      const n = parseFloat(m[1]);
+      return Number.isFinite(n) && n > 0 ? n : void 0;
+    }
+  }
+  return void 0;
+}
+function projectVisionFields(args) {
+  const { type, label, handlerNames, state, flatStyle } = args;
+  const fields = {
+    interactable: deriveInteractable(type, handlerNames)
+  };
+  const text = deriveText(state, label);
+  if (text !== void 0) fields.text = text;
+  const role = roleForType(type);
+  if (role !== void 0) fields.role = role;
+  if (flatStyle) {
+    const fg = parseColorToRgb(flatStyle.color);
+    if (fg !== void 0) fields.fg_color = fg;
+    const bg = parseColorToRgb(flatStyle.backgroundColor);
+    if (bg !== void 0) fields.bg_color = bg;
+    const size = parseFontSizePx(flatStyle.fontSize);
+    if (size !== void 0) fields.font_size_px = size;
+    if (typeof flatStyle.fontFamily === "string" && flatStyle.fontFamily.trim().length > 0) {
+      fields.font_family = flatStyle.fontFamily;
+    }
+  }
+  return fields;
+}
+
 // src/core/registry.ts
 function extractHandlerNames(props) {
   if (!props) return [];
@@ -9,6 +182,25 @@ function matchesCurrentRoute(registrationRoute, currentRoute) {
   if (registrationRoute == null || registrationRoute === "") return true;
   return registrationRoute === currentRoute;
 }
+function projectBbox(state, visibility, pixelRatio = 1) {
+  if (visibility !== "visible") return void 0;
+  const layout = state.layout;
+  if (!layout) return void 0;
+  const ratio = pixelRatio > 0 && Number.isFinite(pixelRatio) ? pixelRatio : 1;
+  const toPx = (v) => Math.max(0, Math.round(v * ratio));
+  const hasPage = typeof layout.pageX === "number" && typeof layout.pageY === "number" && Number.isFinite(layout.pageX) && Number.isFinite(layout.pageY);
+  const originX = hasPage ? layout.pageX : layout.x;
+  const originY = hasPage ? layout.pageY : layout.y;
+  if (typeof originX !== "number" || typeof originY !== "number" || typeof layout.width !== "number" || typeof layout.height !== "number" || !Number.isFinite(originX) || !Number.isFinite(originY) || !Number.isFinite(layout.width) || !Number.isFinite(layout.height)) {
+    return void 0;
+  }
+  return {
+    x: toPx(originX),
+    y: toPx(originY),
+    w: toPx(layout.width),
+    h: toPx(layout.height)
+  };
+}
 function inferActions(type) {
   const baseActions = ["focus", "blur"];
   switch (type) {
@@ -73,6 +265,15 @@ var NativeUIBridgeRegistry = class {
      * already installs.
      */
     this.routeProvider = null;
+    /**
+     * Device pixel ratio used to project `state.layout` (logical dp) into the
+     * physical-pixel `bbox` emitted on each snapshot element. Defaults to `1`
+     * (dp ≈ px) so callers/tests that never inject a ratio still get a usable
+     * box; the React provider wires the real `PixelRatio.get()` via
+     * {@link setPixelRatio}. Read from a non-React core module on purpose — see
+     * the `projectBbox` doc comment for why we don't import `react-native` here.
+     */
+    this.pixelRatio = 1;
     /**
      * Sticky flag: flips `true` the first time any element is registered and
      * stays `true` even after elements are unregistered. Lets agents distinguish
@@ -110,6 +311,21 @@ var NativeUIBridgeRegistry = class {
   getRouteProvider() {
     return this.routeProvider;
   }
+  /**
+   * Set the device pixel ratio used to project per-element `bbox` geometry
+   * into physical pixels. The React provider passes `PixelRatio.get()` here
+   * once at startup. Ignores non-finite / non-positive values (keeps the
+   * previous ratio) so a bad call can't zero out every bbox.
+   */
+  setPixelRatio(ratio) {
+    if (typeof ratio === "number" && Number.isFinite(ratio) && ratio > 0) {
+      this.pixelRatio = ratio;
+    }
+  }
+  /** Read-only accessor for the device pixel ratio used for bbox projection. */
+  getPixelRatio() {
+    return this.pixelRatio;
+  }
   // ============================================================================
   // Snapshot Enricher Slots
   // ============================================================================
@@ -335,6 +551,103 @@ var NativeUIBridgeRegistry = class {
       console.log(`[ui-bridge-native] Marked ${cleared} elements offscreen for route: ${route}`);
     }
   }
+  /**
+   * Re-measure every mounted-visible element's geometry via its stored React
+   * ref and write the fresh coordinates into the registry ("measure-on-
+   * snapshot").
+   *
+   * Why: element geometry is otherwise captured ONCE at mount time
+   * (`onLayout` + `measureInWindow` in `useUIElement`) and RN never re-fires
+   * `onLayout` on pure translation — scrolling a virtualized list
+   * (FlashList), recycling a cell, a keyboard shift or an orientation change
+   * all move elements WITHOUT updating the stored `state.layout`. Snapshot
+   * consumers (vision analyzers hit-testing `bbox`, coord-based tap) then
+   * operate on stale positions. Re-measuring at READ time is correct
+   * regardless of what moved the element and needs zero per-consumer wiring:
+   * every registry entry already stores its ref (see `registerElement`).
+   *
+   * Per-element outcomes:
+   *   - non-zero dims → write a fresh full layout (same state shape as the
+   *     mount-time measure loop in `useUIElement`); counted as `measured`.
+   *   - zero dims AND the element previously had a non-null `state.layout` →
+   *     the view collapsed / left the screen; clear to
+   *     `{ visible: false, layout: null }` (same shape `markRouteOffscreen`
+   *     writes); counted as `cleared`.
+   *   - zero dims and it never had a layout → leave state untouched (element
+   *     in the mount→first-onLayout gap; don't demote `likely-visible`);
+   *     counted as `skipped`.
+   *   - no ref / no callable `measureInWindow` (test fixtures, web) → leave
+   *     untouched; counted as `skipped`.
+   *
+   * The whole sweep races an overall timeout (default 250 ms) so a dead ref
+   * whose `measureInWindow` never calls back can never hang a snapshot: the
+   * returned promise resolves at the deadline with whatever counts have
+   * accumulated. Late callbacks may still write state afterwards — harmless,
+   * freshest data wins. Never throws.
+   *
+   * Non-React core module on purpose — `measureInWindow` is duck-typed off
+   * the stored ref rather than imported from `react-native` (see the
+   * `projectBbox` doc comment for why this file must not import RN).
+   */
+  async refreshMeasurements(options) {
+    const timeoutMs = typeof options?.timeoutMs === "number" && Number.isFinite(options.timeoutMs) && options.timeoutMs > 0 ? options.timeoutMs : 250;
+    const counts = { measured: 0, cleared: 0, skipped: 0 };
+    const pending = [];
+    for (const element of this.getMountedVisibleElements()) {
+      const node = element.ref?.current;
+      if (!node || typeof node.measureInWindow !== "function") {
+        counts.skipped++;
+        continue;
+      }
+      const id = element.id;
+      pending.push(
+        new Promise((resolve) => {
+          let settled = false;
+          try {
+            node.measureInWindow((pageX, pageY, w, h) => {
+              if (settled) return;
+              settled = true;
+              try {
+                if (w > 0 && h > 0) {
+                  this.updateElementState(id, {
+                    mounted: true,
+                    visible: true,
+                    enabled: true,
+                    focused: false,
+                    layout: { x: pageX, y: pageY, width: w, height: h, pageX, pageY }
+                  });
+                  counts.measured++;
+                } else if (this.elements.get(id)?.getState().layout != null) {
+                  this.updateElementState(id, { visible: false, layout: null });
+                  counts.cleared++;
+                } else {
+                  counts.skipped++;
+                }
+              } finally {
+                resolve();
+              }
+            });
+          } catch {
+            if (!settled) {
+              settled = true;
+              counts.skipped++;
+              resolve();
+            }
+          }
+        })
+      );
+    }
+    if (pending.length > 0) {
+      await new Promise((resolve) => {
+        const timer = setTimeout(resolve, timeoutMs);
+        void Promise.all(pending).then(() => {
+          clearTimeout(timer);
+          resolve();
+        });
+      });
+    }
+    return counts;
+  }
   /**
    * Update element state
    */
@@ -649,6 +962,18 @@ var NativeUIBridgeRegistry = class {
         const handlers = extractHandlerNames(e.props);
         const state = e.getState();
         const visibility = !state.visible ? "hidden" : state.layout !== null ? "visible" : "likely-visible";
+        const bbox = projectBbox(state, visibility, this.pixelRatio);
+        const vision = projectVisionFields({
+          type: e.type,
+          label: e.label,
+          // Real interactivity signal: the names of props that are actually
+          // functions (onPress/onChangeText/...). NOT `e.actions`, which
+          // `inferActions` synthesizes press/click onto for every element —
+          // using it would mark plain text/view nodes interactable.
+          handlerNames: handlers,
+          state,
+          flatStyle: e.flatStyle
+        });
         return {
           id: e.id,
           type: e.type,
@@ -659,7 +984,9 @@ var NativeUIBridgeRegistry = class {
           customActions: e.customActions ? Object.keys(e.customActions) : void 0,
           registeredHandlers: handlers.length > 0 ? handlers : void 0,
           registrationRoute: e.registrationRoute,
-          visibility
+          visibility,
+          ...bbox ? { bbox } : {},
+          ...vision
         };
       }),
       components: this.getAllComponents().map((c) => ({
@@ -884,6 +1211,7 @@ exports.getGlobalRegistry = getGlobalRegistry;
 exports.matchesCurrentRoute = matchesCurrentRoute;
 exports.matchesIdentifier = matchesIdentifier;
 exports.parseTreePath = parseTreePath;
+exports.projectBbox = projectBbox;
 exports.resetGlobalRegistry = resetGlobalRegistry;
 exports.setGlobalRegistry = setGlobalRegistry;
 //# sourceMappingURL=index.js.map