@intentcomputing/koko-agent-sdk 1.0.1

package/src/ui/progressChrome.ts

@@ -0,0 +1,73 @@
+import { Dimensions } from 'react-native';
+import type { Point } from '../types';
+
+export type ChromeRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+/** Last measured progress pill + stop button bounds (window coords). */
+let measured: ChromeRect | null = null;
+
+export function setProgressChromeFrame(rect: ChromeRect | null) {
+  measured = rect;
+}
+
+export function getProgressChromeFrame(): ChromeRect | null {
+  return measured;
+}
+
+/**
+ * Bottom-right dock: where the chrome rests before the user moves it.
+ * Only a stand-in for when we have no real measurement yet.
+ */
+function bottomRightDock(): ChromeRect {
+  const { width, height } = Dimensions.get('window');
+  const dockH = 120;
+  const dockW = Math.min(340, Math.max(200, width * 0.55));
+  return {
+    x: width - dockW,
+    y: height - dockH,
+    width: dockW,
+    height: dockH,
+  };
+}
+
+/**
+ * Clearance rect = where the chrome actually is, padded for hitSlop.
+ *
+ * Follows the chrome once the user drags it; the fixed bottom-right band is
+ * only a guess for before the first measurement lands. Blanketing the corner
+ * regardless would both hide host controls the chrome has been moved off of
+ * and keep swallowing tab-bar centres that were never covered.
+ */
+export function getChromeClearanceRect(): ChromeRect {
+  if (!measured || measured.width <= 0 || measured.height <= 0) {
+    return bottomRightDock();
+  }
+  return {
+    x: measured.x - 12,
+    y: measured.y - 12,
+    width: measured.width + 24,
+    height: measured.height + 24,
+  };
+}
+
+export function pointOverlapsProgressChrome(point: Point, pad = 16): boolean {
+  const r = getChromeClearanceRect();
+  return (
+    point.x >= r.x - pad &&
+    point.x <= r.x + r.width + pad &&
+    point.y >= r.y - pad &&
+    point.y <= r.y + r.height + pad
+  );
+}
+
+export function pointsOverlapProgressChrome(
+  points: Point[],
+  pad = 16,
+): boolean {
+  return points.some((p) => pointOverlapsProgressChrome(p, pad));
+}

package/src/ui/safeArea.ts

@@ -0,0 +1,95 @@
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+export type SafeAreaInsets = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+/**
+ * Best-effort top inset when SafeAreaProvider / context is missing
+ * (common inside RN Modal on a new window).
+ */
+function fallbackTopInset(): number {
+  if (Platform.OS === 'android') {
+    return StatusBar.currentHeight ?? 24;
+  }
+  const { height, width } = Dimensions.get('window');
+  const short = Math.min(width, height);
+  const long = Math.max(width, height);
+  // iPhone X+ notch / Dynamic Island
+  if (long >= 852 || short >= 393) return 59;
+  if (long >= 812) return 47;
+  return 20;
+}
+
+function readNativeInitialInsets(): SafeAreaInsets | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('react-native-safe-area-context');
+    const metrics = mod?.initialWindowMetrics;
+    if (metrics?.insets) {
+      return {
+        top: metrics.insets.top ?? 0,
+        right: metrics.insets.right ?? 0,
+        bottom: metrics.insets.bottom ?? 0,
+        left: metrics.insets.left ?? 0,
+      };
+    }
+  } catch {
+    // optional peer
+  }
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { TurboModuleRegistry } = require('react-native');
+    const native = TurboModuleRegistry?.get?.('RNCSafeAreaContext');
+    const insets = native?.getConstants?.()?.initialWindowMetrics?.insets;
+    if (insets) {
+      return {
+        top: insets.top ?? 0,
+        right: insets.right ?? 0,
+        bottom: insets.bottom ?? 0,
+        left: insets.left ?? 0,
+      };
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+/**
+ * Optional safe-area without requiring react-native-safe-area-context as peer.
+ * Prefers live context → native initial metrics → platform heuristics (Modal-safe).
+ */
+export function useSafeAreaInsetsOptional(): SafeAreaInsets {
+  let fromHook: SafeAreaInsets | null = null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('react-native-safe-area-context');
+    if (typeof mod?.useSafeAreaInsets === 'function') {
+      // Same module presence for the lifetime of the app (optional peer).
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      fromHook = mod.useSafeAreaInsets();
+    }
+  } catch {
+    // peer not installed
+  }
+
+  const native = readNativeInitialInsets();
+  const pick = (key: keyof SafeAreaInsets, heuristic = 0) => {
+    const a = fromHook?.[key] ?? 0;
+    const b = native?.[key] ?? 0;
+    if (a > 0) return a;
+    if (b > 0) return b;
+    return heuristic;
+  };
+
+  return {
+    top: pick('top', fallbackTopInset()),
+    right: pick('right'),
+    bottom: pick('bottom'),
+    left: pick('left'),
+  };
+}

package/src/ui/useOverlayOrigin.ts

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from 'react';
+import type { View } from 'react-native';
+
+export type OverlayOrigin = { x: number; y: number };
+
+/**
+ * Where the overlay layer itself sits inside the window.
+ *
+ * Agent coordinates are window-absolute: that is what the native dump reports
+ * and where a synthetic touch is dispatched. The cursor, though, is laid out
+ * inside the host's React tree, and hosts routinely pad their root for the
+ * status bar — so a fingertip drawn at the tap coordinate lands a status bar
+ * lower than the touch it is meant to represent. Measuring the layer's own
+ * origin and subtracting it keeps the two in the same space, and costs nothing
+ * for hosts that do not pad (the origin is then zero).
+ */
+export function useOverlayOrigin() {
+  const ref = useRef<View>(null);
+  const [origin, setOrigin] = useState<OverlayOrigin>({ x: 0, y: 0 });
+
+  const measure = useCallback(() => {
+    ref.current?.measureInWindow((x, y) => {
+      if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+      setOrigin((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
+    });
+  }, []);
+
+  return { ref, origin, measure };
+}