@blario/react-native 0.1.2 → 0.1.4

package/README.md

@@ -312,7 +312,7 @@ Wire envelope (mirrors the backend): `agent_command` / `request_dom_state` / `re
 
 | `action.type` | Fields | Target |
 | --- | --- | --- |
-| `click` | | `btn-N` (a switch toggles, an input is focused) |
+| `click` | | `btn-N` (a switch toggles, an input is focused, a wheel picker's row scrolls to the center) |
 | `type` | `value`, `clear_first` (default true) | `inp-N` text input |
 | `check` | `checked` (omit to toggle) | `inp-N` switch |
 | `press_key` | `key` (`Enter` only) | `inp-N`, or the last input used |
@@ -322,7 +322,8 @@ Wire envelope (mirrors the backend): `agent_command` / `request_dom_state` / `re
 | `highlight` | `duration_ms` (default 3000) | any element |
 
 `click`, `type`, `check` and `highlight` scroll the target into view first. Elements that sit beyond their scroll
-viewport are listed with `offscreen=above|below|left|right` (at most 30, nearest first).
+viewport are listed with `offscreen=above|below|left|right` (at most 30, nearest first). A wheel picker is a snapping
+list (`snapToInterval` or `snapToOffsets`) of plain text rows: each row is a `btn-N`, and all of them stay listed.
 
 ## Develop
 

package/dist/actions/scrolling.d.ts

@@ -5,6 +5,8 @@ type ScrollAction = Extract<AgentAction, {
     type: 'scroll';
 }>;
 export declare function scrollContainer(target: ResolvedTarget, action: ScrollAction): Promise<HandlerResult>;
+export declare function isInWheel(target: ResolvedTarget): boolean;
+export declare function selectWheelOption(target: ResolvedTarget): Promise<HandlerResult>;
 export declare function scrollIntoView(target: ResolvedTarget, options?: {
     animated: boolean;
 }): Promise<HandlerResult>;

package/dist/snapshot/collect.d.ts

@@ -8,6 +8,7 @@ export interface Candidate {
     host: Fiber;
     ancestors: Fiber[];
     scrollContainers: Fiber[];
+    wheelOption?: boolean;
 }
 export interface TextBlock {
     host: Fiber;

package/dist/snapshot/scroll.d.ts

@@ -7,9 +7,11 @@ export interface ScrollGeometry {
     horizontal: boolean;
 }
 export declare function isHorizontal(fiber: Fiber): boolean;
+export declare function isWheel(fiber: Fiber): boolean;
 export declare function measureScrollGeometry(scrollFiber: Fiber): Promise<ScrollGeometry | null>;
 export declare function scrollOffsetOf(geometry: ScrollGeometry): number;
 export declare function maxScrollOffsetOf(geometry: ScrollGeometry): number;
 export declare function viewportExtentOf(geometry: ScrollGeometry): number;
+export declare function offsetCentering(rect: Rect, geometry: ScrollGeometry): number;
 export declare function scrollDirectionsOf(geometry: ScrollGeometry): ScrollDirection[];
 export declare function describeScrollDirections(geometry: ScrollGeometry | null): string;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.1.2";
+export declare const SDK_VERSION = "0.1.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blario/react-native",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Blar agent SDK for React Native",
   "license": "MIT",
   "repository": {

package/src/actions/click.ts

@@ -6,6 +6,7 @@ import { buildPressEvent } from './events.ts';
 import { checkInteractable } from './interaction-guards.ts';
 import { failed, failedFromException, succeeded } from './result.ts';
 import type { ActionServices } from './services.ts';
+import { isInWheel, selectWheelOption } from './scrolling.ts';
 import type { ResolvedTarget } from './target.ts';
 import type { HandlerResult } from './types.ts';
 import { toggleSwitch } from './switch.ts';
@@ -49,6 +50,6 @@ export async function click(target: ResolvedTarget, services: ActionServices): P
     case 'text_input':
       return focusInput(target, services);
     default:
-      return pressButton(target);
+      return !isFunction(target.props.onPress) && isInWheel(target) ? selectWheelOption(target) : pressButton(target);
   }
 }

package/src/actions/scrolling.ts

@@ -1,7 +1,7 @@
 import { measureHost } from '../host/measure.ts';
 import { type Band, scrollDeltaIntoBand } from '../host/rect.ts';
 import { scrollInstanceOf } from '../snapshot/classify.ts';
-import { maxScrollOffsetOf, measureScrollGeometry, scrollOffsetOf, type ScrollGeometry, viewportExtentOf } from '../snapshot/scroll.ts';
+import { isWheel, maxScrollOffsetOf, measureScrollGeometry, offsetCentering, scrollOffsetOf, type ScrollGeometry, viewportExtentOf } from '../snapshot/scroll.ts';
 import { failed, failedFromException, succeeded } from './result.ts';
 import type { ResolvedTarget } from './target.ts';
 import type { AgentAction, HandlerResult } from './types.ts';
@@ -61,6 +61,28 @@ function nearestScrollAncestor(target: ResolvedTarget): ResolvedTarget['fiber']
   return null;
 }
 
+export function isInWheel(target: ResolvedTarget): boolean {
+  const container = nearestScrollAncestor(target);
+  return container !== null && isWheel(container);
+}
+
+// The animated scroll ends in onMomentumScrollEnd, the event a wheel commits its value on, as a user's swipe does.
+export async function selectWheelOption(target: ResolvedTarget): Promise<HandlerResult> {
+  const container = nearestScrollAncestor(target);
+  if (container === null || target.host === null) {
+    return failed('element_not_interactable', 'the option is not inside a wheel');
+  }
+  const [geometry, rect] = await Promise.all([measureScrollGeometry(container), measureHost(target.host)]);
+  if (geometry === null || rect === null) {
+    return failed('element_not_found', 'the option or its wheel could not be measured');
+  }
+  const next = offsetCentering(rect, geometry);
+  if (Math.abs(next - scrollOffsetOf(geometry)) < MOVEMENT_TOLERANCE) {
+    return succeeded('the option is already selected');
+  }
+  return applyOffset({ ...target, fiber: container }, geometry, next, true);
+}
+
 function offsetDeltaToReveal(start: number, end: number, viewportStart: number, viewportEnd: number): number {
   const startShortfall = start - (viewportStart + VISIBLE_MARGIN);
   if (startShortfall < 0) {

package/src/agent-mode/ui/AgentLayerHost.tsx

@@ -25,8 +25,10 @@ export function AgentLayerHost({ visible, generation, onRequestClose, children }
       </Modal>
     );
   }
+  // Fabric's FullWindowOverlay appends every child it mounts and ignores the index, so a flattened layer would stack a
+  // late child (the spotlight dim) over an earlier one (the card). One unflattened view keeps React's order.
   const content = (
-    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none" collapsable={false}>
       {children}
     </View>
   );