react-native-gtkx 0.2.0-alpha.2 → 0.3.0-alpha.1

package/dist/components/index.d.ts

@@ -1,17 +1,19 @@
 export { ActivityIndicator, type ActivityIndicatorProps, } from "./activity-indicator";
-export { Animated, Easing, type AnimatedViewProps, type AnimatedViewStyle, } from "./animated";
+export { Animated, createAnimatedComponent, Easing, type AnimatedComponent, type AnimatedComponentExtraProps, type AnimatedPropsProp, type AnimatedStyleProp, type AnimatedViewProps, type AnimatedViewStyle, } from "./animated";
 export { AppRegistry, type RunApplicationParams } from "./app-registry";
+export { findNodeHandle } from "./find-node-handle";
 export { FlatList, SectionList, type FlatListProps, type ListRenderItemInfo, type SectionListData, type SectionListProps, type ViewabilityConfig, type ViewToken, } from "./flat-list";
-export { Image, type ImageProps, type ImageSource } from "./image";
+export { Image, type ImageHandle, type ImageProps, type ImageSource, } from "./image";
 export { Modal, type ModalProps } from "./modal";
-export { Pressable, TouchableOpacity, type NativeTouch, type PressableProps, type PressableStateCallbackType, type PressEvent, type TouchableOpacityProps, } from "./pressable";
+export { Pressable, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, type NativeTouch, type PressableProps, type PressableStateCallbackType, type PressEvent, type TouchableHighlightProps, type TouchableOpacityProps, type TouchableWithoutFeedbackProps, } from "./pressable";
 export { IntrinsicRoot, NestedRoot, Root, type IntrinsicRootProps, type NestedRootProps, type RootProps, } from "./root";
 export { ScrollView, type ScrollEvent, type ScrollViewHandle, type ScrollViewProps, } from "./scroll-view";
 export { Switch, type SwitchProps } from "./switch";
-export { Text, type TextProps } from "./text";
+export { Text, type TextHandle, type TextProps } from "./text";
 export { TextInput, type TextInputProps } from "./text-input";
 export { SafeAreaView, StatusBar, View, type ViewHandle, type ViewProps, } from "./view";
-export type { MeasureHandle, MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, } from "./measure";
+export type { MeasureHandle, MeasureInWindowOnSuccessCallback, MeasureLayoutOnSuccessCallback, MeasureOnSuccessCallback, NodeHandle, } from "./measure";
+export { VirtualizedList, type ItemLayout, type VirtualizedListHandle, type VirtualizedListProps, } from "./virtualized-list";
 export { type LayoutEvent } from "./use-layout-child";
 export { default as PanResponder } from "../vendor/react-native/pan-responder";
 export type { PanResponderCallbacks, PanResponderGestureState, PanResponderInstance, } from "../vendor/react-native/pan-responder";

package/dist/components/index.js

@@ -1,15 +1,17 @@
 export { ActivityIndicator, } from "./activity-indicator";
-export { Animated, Easing, } from "./animated";
+export { Animated, createAnimatedComponent, Easing, } from "./animated";
 export { AppRegistry } from "./app-registry";
+export { findNodeHandle } from "./find-node-handle";
 export { FlatList, SectionList, } from "./flat-list";
-export { Image } from "./image";
+export { Image, } from "./image";
 export { Modal } from "./modal";
-export { Pressable, TouchableOpacity, } from "./pressable";
+export { Pressable, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, } from "./pressable";
 export { IntrinsicRoot, NestedRoot, Root, } from "./root";
 export { ScrollView, } from "./scroll-view";
 export { Switch } from "./switch";
 export { Text } from "./text";
 export { TextInput } from "./text-input";
 export { SafeAreaView, StatusBar, View, } from "./view";
+export { VirtualizedList, } from "./virtualized-list";
 export { default as PanResponder } from "../vendor/react-native/pan-responder";
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAElB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,QAAQ,EACR,MAAM,GAGP,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,WAAW,EAA6B,MAAM,gBAAgB,CAAA;AACvE,OAAO,EACL,QAAQ,EACR,WAAW,GAOZ,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,EAAqC,MAAM,SAAS,CAAA;AAClE,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EACL,SAAS,EACT,gBAAgB,GAMjB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,aAAa,EACb,UAAU,EACV,IAAI,GAIL,MAAM,QAAQ,CAAA;AACf,OAAO,EACL,UAAU,GAIX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAA;AAC7D,OAAO,EACL,YAAY,EACZ,SAAS,EACT,IAAI,GAGL,MAAM,QAAQ,CAAA;AAQf,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAA","sourcesContent":["export {\n  ActivityIndicator,\n  type ActivityIndicatorProps,\n} from \"./activity-indicator\"\nexport {\n  Animated,\n  Easing,\n  type AnimatedViewProps,\n  type AnimatedViewStyle,\n} from \"./animated\"\nexport { AppRegistry, type RunApplicationParams } from \"./app-registry\"\nexport {\n  FlatList,\n  SectionList,\n  type FlatListProps,\n  type ListRenderItemInfo,\n  type SectionListData,\n  type SectionListProps,\n  type ViewabilityConfig,\n  type ViewToken,\n} from \"./flat-list\"\nexport { Image, type ImageProps, type ImageSource } from \"./image\"\nexport { Modal, type ModalProps } from \"./modal\"\nexport {\n  Pressable,\n  TouchableOpacity,\n  type NativeTouch,\n  type PressableProps,\n  type PressableStateCallbackType,\n  type PressEvent,\n  type TouchableOpacityProps,\n} from \"./pressable\"\nexport {\n  IntrinsicRoot,\n  NestedRoot,\n  Root,\n  type IntrinsicRootProps,\n  type NestedRootProps,\n  type RootProps,\n} from \"./root\"\nexport {\n  ScrollView,\n  type ScrollEvent,\n  type ScrollViewHandle,\n  type ScrollViewProps,\n} from \"./scroll-view\"\nexport { Switch, type SwitchProps } from \"./switch\"\nexport { Text, type TextProps } from \"./text\"\nexport { TextInput, type TextInputProps } from \"./text-input\"\nexport {\n  SafeAreaView,\n  StatusBar,\n  View,\n  type ViewHandle,\n  type ViewProps,\n} from \"./view\"\nexport type {\n  MeasureHandle,\n  MeasureInWindowOnSuccessCallback,\n  MeasureLayoutOnSuccessCallback,\n  MeasureOnSuccessCallback,\n} from \"./measure\"\nexport { type LayoutEvent } from \"./use-layout-child\"\nexport { default as PanResponder } from \"../vendor/react-native/pan-responder\"\nexport type {\n  PanResponderCallbacks,\n  PanResponderGestureState,\n  PanResponderInstance,\n} from \"../vendor/react-native/pan-responder\"\nexport type {\n  GestureResponderEvent,\n  ResponderProps,\n  TouchHistory,\n  TouchRecord,\n} from \"../responder/types\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAElB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EACL,QAAQ,EACR,uBAAuB,EACvB,MAAM,GAOP,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,WAAW,EAA6B,MAAM,gBAAgB,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,QAAQ,EACR,WAAW,GAOZ,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,KAAK,GAIN,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,GAQzB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,aAAa,EACb,UAAU,EACV,IAAI,GAIL,MAAM,QAAQ,CAAA;AACf,OAAO,EACL,UAAU,GAIX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,IAAI,EAAmC,MAAM,QAAQ,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAA;AAC7D,OAAO,EACL,YAAY,EACZ,SAAS,EACT,IAAI,GAGL,MAAM,QAAQ,CAAA;AAQf,OAAO,EACL,eAAe,GAIhB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAA","sourcesContent":["export {\n  ActivityIndicator,\n  type ActivityIndicatorProps,\n} from \"./activity-indicator\"\nexport {\n  Animated,\n  createAnimatedComponent,\n  Easing,\n  type AnimatedComponent,\n  type AnimatedComponentExtraProps,\n  type AnimatedPropsProp,\n  type AnimatedStyleProp,\n  type AnimatedViewProps,\n  type AnimatedViewStyle,\n} from \"./animated\"\nexport { AppRegistry, type RunApplicationParams } from \"./app-registry\"\nexport { findNodeHandle } from \"./find-node-handle\"\nexport {\n  FlatList,\n  SectionList,\n  type FlatListProps,\n  type ListRenderItemInfo,\n  type SectionListData,\n  type SectionListProps,\n  type ViewabilityConfig,\n  type ViewToken,\n} from \"./flat-list\"\nexport {\n  Image,\n  type ImageHandle,\n  type ImageProps,\n  type ImageSource,\n} from \"./image\"\nexport { Modal, type ModalProps } from \"./modal\"\nexport {\n  Pressable,\n  TouchableHighlight,\n  TouchableOpacity,\n  TouchableWithoutFeedback,\n  type NativeTouch,\n  type PressableProps,\n  type PressableStateCallbackType,\n  type PressEvent,\n  type TouchableHighlightProps,\n  type TouchableOpacityProps,\n  type TouchableWithoutFeedbackProps,\n} from \"./pressable\"\nexport {\n  IntrinsicRoot,\n  NestedRoot,\n  Root,\n  type IntrinsicRootProps,\n  type NestedRootProps,\n  type RootProps,\n} from \"./root\"\nexport {\n  ScrollView,\n  type ScrollEvent,\n  type ScrollViewHandle,\n  type ScrollViewProps,\n} from \"./scroll-view\"\nexport { Switch, type SwitchProps } from \"./switch\"\nexport { Text, type TextHandle, type TextProps } from \"./text\"\nexport { TextInput, type TextInputProps } from \"./text-input\"\nexport {\n  SafeAreaView,\n  StatusBar,\n  View,\n  type ViewHandle,\n  type ViewProps,\n} from \"./view\"\nexport type {\n  MeasureHandle,\n  MeasureInWindowOnSuccessCallback,\n  MeasureLayoutOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  NodeHandle,\n} from \"./measure\"\nexport {\n  VirtualizedList,\n  type ItemLayout,\n  type VirtualizedListHandle,\n  type VirtualizedListProps,\n} from \"./virtualized-list\"\nexport { type LayoutEvent } from \"./use-layout-child\"\nexport { default as PanResponder } from \"../vendor/react-native/pan-responder\"\nexport type {\n  PanResponderCallbacks,\n  PanResponderGestureState,\n  PanResponderInstance,\n} from \"../vendor/react-native/pan-responder\"\nexport type {\n  GestureResponderEvent,\n  ResponderProps,\n  TouchHistory,\n  TouchRecord,\n} from \"../responder/types\"\n"]}

package/dist/components/measure.d.ts

@@ -4,10 +4,60 @@ import { type Gtk } from "../gtkx/bridge/index";
 export type MeasureOnSuccessCallback = (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void;
 export type MeasureInWindowOnSuccessCallback = (x: number, y: number, width: number, height: number) => void;
 export type MeasureLayoutOnSuccessCallback = (left: number, top: number, width: number, height: number) => void;
+/**
+ * RN's opaque reference to a mounted host view — what `findNodeHandle`
+ * returns and what `measureLayout` accepts as its first argument. A number,
+ * as it is on every RN platform: the value crosses no boundary here, but the
+ * libraries that ask for one compare it, store it in a map and hand it back,
+ * and an object would only be a different type wearing the same name.
+ */
+export type NodeHandle = number;
 /** The measurement half of a component ref, matching RN's method set. */
 export type MeasureHandle = {
     measure(callback: MeasureOnSuccessCallback): void;
     measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
-    measureLayout(relativeTo: MeasureHandle, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void): void;
+    measureLayout(relativeTo: MeasureHandle | NodeHandle, onSuccess: MeasureLayoutOnSuccessCallback, onFail?: () => void): void;
 };
+/**
+ * @internal Registers `handle` as standing for `widgetRef`'s widget.
+ *
+ * `createMeasureHandle` does this for the handles it builds; components that
+ * COMPOSE one into a larger handle (ScrollView adds `scrollTo`/`scrollToEnd`)
+ * create a new object, which is a new identity and therefore needs its own
+ * entry — otherwise `measureLayout(scrollViewRef, …)` silently fails.
+ */
+export declare const registerHandleWidget: (handle: object, widgetRef: RefObject<Gtk.Widget | null>) => void;
+/**
+ * @internal The `Gtk.Widget` behind a component handle, or null when the
+ * value is not a handle at all (a component that forwards no ref, or one
+ * whose ref is something else entirely).
+ *
+ * Deliberately not exported from the package: a portable API does not hand
+ * out widgets. This is how `createAnimatedComponent` reaches the widget it
+ * has to write opacity and transforms to.
+ */
+export declare const widgetForHandle: (handle: unknown) => Gtk.Widget | null;
+/**
+ * @internal Registers `handle` as standing for whatever widget `other`
+ * stands for.
+ *
+ * For a COMPOSITE that renders a host component and wants to be reachable as
+ * that host: a windowed list owns no widget of its own, but the ScrollView it
+ * renders is the thing another view measures against and the thing
+ * `findNodeHandle` should answer with. RN resolves a `FlatList`'s node handle
+ * through to its inner scroll view for the same reason.
+ *
+ * It deliberately does NOT give the composite `measure()`/`measureInWindow()`
+ * — see the note on `VirtualizedListHandle`. Being measurable AGAINST is a
+ * weaker claim than reporting your own geometry.
+ */
+export declare const registerHandleAlias: (handle: object, other: () => unknown) => void;
+/**
+ * @internal The tag standing for the widget behind `handle`, minted on first
+ * ask. Null when the value is not a component handle, or when its widget is
+ * not mounted — RN returns null in both cases too.
+ */
+export declare const nodeHandleFor: (handle: unknown) => NodeHandle | null;
+/** @internal The widget a tag was minted for, or null once it is gone. */
+export declare const widgetForNodeHandle: (tag: NodeHandle) => Gtk.Widget | null;
 export declare const createMeasureHandle: (widgetRef: RefObject<Gtk.Widget | null>, node: LayoutNodeApi) => MeasureHandle;

package/dist/components/measure.js

@@ -2,7 +2,106 @@ import { computePointIn, computePointInWindow, } from "../gtkx/bridge/index";
 // measureLayout needs the OTHER view's widget, and the public handle type
 // deliberately does not carry one — a portable API should not hand out a
 // Gtk.Widget. The lookup lives here instead, keyed by the handle identity.
+//
+// It is also the seam every animated component reaches through: driving
+// `opacity` and `transform` imperatively needs the widget behind a ref, and
+// this map already holds exactly that association for every component that
+// exposes a handle. Widening it beats adding a second, parallel registry.
 const widgetOf = new WeakMap();
+/**
+ * @internal Registers `handle` as standing for `widgetRef`'s widget.
+ *
+ * `createMeasureHandle` does this for the handles it builds; components that
+ * COMPOSE one into a larger handle (ScrollView adds `scrollTo`/`scrollToEnd`)
+ * create a new object, which is a new identity and therefore needs its own
+ * entry — otherwise `measureLayout(scrollViewRef, …)` silently fails.
+ */
+export const registerHandleWidget = (handle, widgetRef) => {
+    widgetOf.set(handle, () => widgetRef.current);
+};
+/**
+ * @internal The `Gtk.Widget` behind a component handle, or null when the
+ * value is not a handle at all (a component that forwards no ref, or one
+ * whose ref is something else entirely).
+ *
+ * Deliberately not exported from the package: a portable API does not hand
+ * out widgets. This is how `createAnimatedComponent` reaches the widget it
+ * has to write opacity and transforms to.
+ */
+export const widgetForHandle = (handle) => {
+    if (handle === null || typeof handle !== "object") {
+        return null;
+    }
+    return widgetOf.get(handle)?.() ?? null;
+};
+// --- node handles --------------------------------------------------------
+//
+// RN's `findNodeHandle` hands out an integer that stands for a mounted host
+// VIEW. On a bridge platform the integer is the native view tag and the
+// number is the only thing that can cross; here nothing has to cross, so the
+// number is minted on demand and means exactly one thing — "the widget it
+// was minted for".
+//
+// Keyed by the WIDGET rather than by the handle object, which is what makes
+// it behave like RN's: two refs onto the same view report the same tag, and
+// the tag survives a re-render that rebuilt the handle object. It is also why
+// this is not a second registry — `widgetOf` above is still the only thing
+// that knows what a handle stands for, and a tag is minted from its answer.
+//
+// A widget that is gone leaves a tag that resolves to null, which is what a
+// stale RN tag does too.
+const tagOfWidget = new WeakMap();
+const widgetOfTag = new Map();
+let nextTag = 1;
+/**
+ * @internal Registers `handle` as standing for whatever widget `other`
+ * stands for.
+ *
+ * For a COMPOSITE that renders a host component and wants to be reachable as
+ * that host: a windowed list owns no widget of its own, but the ScrollView it
+ * renders is the thing another view measures against and the thing
+ * `findNodeHandle` should answer with. RN resolves a `FlatList`'s node handle
+ * through to its inner scroll view for the same reason.
+ *
+ * It deliberately does NOT give the composite `measure()`/`measureInWindow()`
+ * — see the note on `VirtualizedListHandle`. Being measurable AGAINST is a
+ * weaker claim than reporting your own geometry.
+ */
+export const registerHandleAlias = (handle, other) => {
+    widgetOf.set(handle, () => widgetForHandle(other()));
+};
+/**
+ * @internal The tag standing for the widget behind `handle`, minted on first
+ * ask. Null when the value is not a component handle, or when its widget is
+ * not mounted — RN returns null in both cases too.
+ */
+export const nodeHandleFor = (handle) => {
+    const widget = widgetForHandle(handle);
+    if (widget === null) {
+        return null;
+    }
+    const existing = tagOfWidget.get(widget);
+    if (existing !== undefined) {
+        return existing;
+    }
+    const tag = nextTag;
+    nextTag += 1;
+    tagOfWidget.set(widget, tag);
+    widgetOfTag.set(tag, new WeakRef(widget));
+    return tag;
+};
+/** @internal The widget a tag was minted for, or null once it is gone. */
+export const widgetForNodeHandle = (tag) => {
+    const widget = widgetOfTag.get(tag)?.deref() ?? null;
+    if (widget === null) {
+        widgetOfTag.delete(tag);
+    }
+    return widget;
+};
+/** The widget behind either spelling of "that other view" that RN accepts. */
+const widgetForTarget = (target) => typeof target === "number"
+    ? widgetForNodeHandle(target)
+    : widgetForHandle(target);
 export const createMeasureHandle = (widgetRef, node) => {
     const handle = {
         measure(callback) {
@@ -31,7 +130,7 @@ export const createMeasureHandle = (widgetRef, node) => {
         },
         measureLayout(relativeTo, onSuccess, onFail) {
             const widget = widgetRef.current;
-            const other = widgetOf.get(relativeTo)?.() ?? null;
+            const other = widgetForTarget(relativeTo);
             const rect = node.getRect();
             if (!widget || !other || !rect) {
                 onFail?.();
@@ -45,7 +144,7 @@ export const createMeasureHandle = (widgetRef, node) => {
             onSuccess(origin.x, origin.y, rect.width, rect.height);
         },
     };
-    widgetOf.set(handle, () => widgetRef.current);
+    registerHandleWidget(handle, widgetRef);
     return handle;
 };
 //# sourceMappingURL=measure.js.map

package/dist/components/measure.js.map

@@ -1 +1 @@
-{"version":3,"file":"measure.js","sourceRoot":"","sources":["../../src/components/measure.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,cAAc,EACd,oBAAoB,GAErB,MAAM,sBAAsB,CAAA;AAoC7B,0EAA0E;AAC1E,yEAAyE;AACzE,2EAA2E;AAC3E,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA0C,CAAA;AAEtE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,SAAuC,EACvC,IAAmB,EACJ,EAAE;IACjB,MAAM,MAAM,GAAkB;QAC5B,OAAO,CAAC,QAAQ;YACd,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;gBACrB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,oBAAoB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAC/C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;QACnE,CAAC;QAED,eAAe,CAAC,QAAQ;YACtB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;gBACrB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,oBAAoB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAC/C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QACnD,CAAC;QAED,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM;YACzC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,IAAI,CAAA;YAClD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC/B,MAAM,EAAE,EAAE,CAAA;gBACV,OAAM;YACR,CAAC;YACD,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAClD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,MAAM,EAAE,EAAE,CAAA;gBACV,OAAM;YACR,CAAC;YACD,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QACxD,CAAC;KACF,CAAA;IAED,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,MAAM,CAAA;AACf,CAAC,CAAA","sourcesContent":["// RN's imperative geometry API (measure / measureInWindow / measureLayout),\n// shared by every component that exposes a ref.\n//\n// The size and the parent-relative position come from the Yoga rect the\n// component's layout node already holds — that is the layout truth, and it\n// is what RN reports (a rotated view still measures its own box, not its\n// axis-aligned bounding box). Only the translation into another coordinate\n// space goes through GTK, where compute_point walks the transform chain and\n// therefore already accounts for scroll offsets.\n//\n// RN's contract on failure is to not call back rather than to invent a\n// number: a view whose layout has not been committed yet (before the first\n// onLayout) or that is not in a window has nothing true to report.\nimport type { RefObject } from \"react\"\nimport type { LayoutNodeApi } from \"../contracts\"\nimport {\n  computePointIn,\n  computePointInWindow,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\n\nexport type MeasureOnSuccessCallback = (\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  pageX: number,\n  pageY: number,\n) => void\n\nexport type MeasureInWindowOnSuccessCallback = (\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n) => void\n\nexport type MeasureLayoutOnSuccessCallback = (\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n) => void\n\n/** The measurement half of a component ref, matching RN's method set. */\nexport type MeasureHandle = {\n  measure(callback: MeasureOnSuccessCallback): void\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void\n  measureLayout(\n    relativeTo: MeasureHandle,\n    onSuccess: MeasureLayoutOnSuccessCallback,\n    onFail?: () => void,\n  ): void\n}\n\n// measureLayout needs the OTHER view's widget, and the public handle type\n// deliberately does not carry one — a portable API should not hand out a\n// Gtk.Widget. The lookup lives here instead, keyed by the handle identity.\nconst widgetOf = new WeakMap<MeasureHandle, () => Gtk.Widget | null>()\n\nexport const createMeasureHandle = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  node: LayoutNodeApi,\n): MeasureHandle => {\n  const handle: MeasureHandle = {\n    measure(callback) {\n      const widget = widgetRef.current\n      const rect = node.getRect()\n      if (!widget || !rect) {\n        return\n      }\n      const page = computePointInWindow(widget, 0, 0)\n      if (!page) {\n        return\n      }\n      callback(rect.x, rect.y, rect.width, rect.height, page.x, page.y)\n    },\n\n    measureInWindow(callback) {\n      const widget = widgetRef.current\n      const rect = node.getRect()\n      if (!widget || !rect) {\n        return\n      }\n      const page = computePointInWindow(widget, 0, 0)\n      if (!page) {\n        return\n      }\n      callback(page.x, page.y, rect.width, rect.height)\n    },\n\n    measureLayout(relativeTo, onSuccess, onFail) {\n      const widget = widgetRef.current\n      const other = widgetOf.get(relativeTo)?.() ?? null\n      const rect = node.getRect()\n      if (!widget || !other || !rect) {\n        onFail?.()\n        return\n      }\n      const origin = computePointIn(widget, other, 0, 0)\n      if (!origin) {\n        onFail?.()\n        return\n      }\n      onSuccess(origin.x, origin.y, rect.width, rect.height)\n    },\n  }\n\n  widgetOf.set(handle, () => widgetRef.current)\n  return handle\n}\n"]}
+{"version":3,"file":"measure.js","sourceRoot":"","sources":["../../src/components/measure.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,cAAc,EACd,oBAAoB,GAErB,MAAM,sBAAsB,CAAA;AA6C7B,0EAA0E;AAC1E,yEAAyE;AACzE,2EAA2E;AAC3E,EAAE;AACF,wEAAwE;AACxE,4EAA4E;AAC5E,2EAA2E;AAC3E,0EAA0E;AAC1E,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAmC,CAAA;AAE/D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,MAAc,EACd,SAAuC,EACjC,EAAE;IACR,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;AAC/C,CAAC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAe,EAAqB,EAAE;IACpE,IAAI,MAAM,KAAK,IAAI,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAClD,OAAO,IAAI,CAAA;IACb,CAAC;IACD,OAAO,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,IAAI,CAAA;AACzC,CAAC,CAAA;AAED,4EAA4E;AAC5E,EAAE;AACF,4EAA4E;AAC5E,wEAAwE;AACxE,6EAA6E;AAC7E,0EAA0E;AAC1E,mBAAmB;AACnB,EAAE;AACF,4EAA4E;AAC5E,4EAA4E;AAC5E,8EAA8E;AAC9E,2EAA2E;AAC3E,4EAA4E;AAC5E,EAAE;AACF,4EAA4E;AAC5E,yBAAyB;AACzB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA0B,CAAA;AACzD,MAAM,WAAW,GAAG,IAAI,GAAG,EAAmC,CAAA;AAC9D,IAAI,OAAO,GAAG,CAAC,CAAA;AAEf;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAc,EACd,KAAoB,EACd,EAAE;IACR,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;AACtD,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAe,EAAqB,EAAE;IAClE,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACtC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACxC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,QAAQ,CAAA;IACjB,CAAC;IACD,MAAM,GAAG,GAAG,OAAO,CAAA;IACnB,OAAO,IAAI,CAAC,CAAA;IACZ,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAA;IACzC,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAe,EAAqB,EAAE;IACxE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,IAAI,CAAA;IACpD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IACzB,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,8EAA8E;AAC9E,MAAM,eAAe,GAAG,CACtB,MAAkC,EACf,EAAE,CACrB,OAAO,MAAM,KAAK,QAAQ;IACxB,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;AAE7B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,SAAuC,EACvC,IAAmB,EACJ,EAAE;IACjB,MAAM,MAAM,GAAkB;QAC5B,OAAO,CAAC,QAAQ;YACd,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;gBACrB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,oBAAoB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAC/C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;QACnE,CAAC;QAED,eAAe,CAAC,QAAQ;YACtB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;gBACrB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,oBAAoB,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAC/C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QACnD,CAAC;QAED,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM;YACzC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAA;YAChC,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAAC,CAAA;YACzC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC/B,MAAM,EAAE,EAAE,CAAA;gBACV,OAAM;YACR,CAAC;YACD,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;YAClD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,MAAM,EAAE,EAAE,CAAA;gBACV,OAAM;YACR,CAAC;YACD,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QACxD,CAAC;KACF,CAAA;IAED,oBAAoB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IACvC,OAAO,MAAM,CAAA;AACf,CAAC,CAAA","sourcesContent":["// RN's imperative geometry API (measure / measureInWindow / measureLayout),\n// shared by every component that exposes a ref.\n//\n// The size and the parent-relative position come from the Yoga rect the\n// component's layout node already holds — that is the layout truth, and it\n// is what RN reports (a rotated view still measures its own box, not its\n// axis-aligned bounding box). Only the translation into another coordinate\n// space goes through GTK, where compute_point walks the transform chain and\n// therefore already accounts for scroll offsets.\n//\n// RN's contract on failure is to not call back rather than to invent a\n// number: a view whose layout has not been committed yet (before the first\n// onLayout) or that is not in a window has nothing true to report.\nimport type { RefObject } from \"react\"\nimport type { LayoutNodeApi } from \"../contracts\"\nimport {\n  computePointIn,\n  computePointInWindow,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\n\nexport type MeasureOnSuccessCallback = (\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  pageX: number,\n  pageY: number,\n) => void\n\nexport type MeasureInWindowOnSuccessCallback = (\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n) => void\n\nexport type MeasureLayoutOnSuccessCallback = (\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n) => void\n\n/**\n * RN's opaque reference to a mounted host view — what `findNodeHandle`\n * returns and what `measureLayout` accepts as its first argument. A number,\n * as it is on every RN platform: the value crosses no boundary here, but the\n * libraries that ask for one compare it, store it in a map and hand it back,\n * and an object would only be a different type wearing the same name.\n */\nexport type NodeHandle = number\n\n/** The measurement half of a component ref, matching RN's method set. */\nexport type MeasureHandle = {\n  measure(callback: MeasureOnSuccessCallback): void\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void\n  measureLayout(\n    relativeTo: MeasureHandle | NodeHandle,\n    onSuccess: MeasureLayoutOnSuccessCallback,\n    onFail?: () => void,\n  ): void\n}\n\n// measureLayout needs the OTHER view's widget, and the public handle type\n// deliberately does not carry one — a portable API should not hand out a\n// Gtk.Widget. The lookup lives here instead, keyed by the handle identity.\n//\n// It is also the seam every animated component reaches through: driving\n// `opacity` and `transform` imperatively needs the widget behind a ref, and\n// this map already holds exactly that association for every component that\n// exposes a handle. Widening it beats adding a second, parallel registry.\nconst widgetOf = new WeakMap<object, () => Gtk.Widget | null>()\n\n/**\n * @internal Registers `handle` as standing for `widgetRef`'s widget.\n *\n * `createMeasureHandle` does this for the handles it builds; components that\n * COMPOSE one into a larger handle (ScrollView adds `scrollTo`/`scrollToEnd`)\n * create a new object, which is a new identity and therefore needs its own\n * entry — otherwise `measureLayout(scrollViewRef, …)` silently fails.\n */\nexport const registerHandleWidget = (\n  handle: object,\n  widgetRef: RefObject<Gtk.Widget | null>,\n): void => {\n  widgetOf.set(handle, () => widgetRef.current)\n}\n\n/**\n * @internal The `Gtk.Widget` behind a component handle, or null when the\n * value is not a handle at all (a component that forwards no ref, or one\n * whose ref is something else entirely).\n *\n * Deliberately not exported from the package: a portable API does not hand\n * out widgets. This is how `createAnimatedComponent` reaches the widget it\n * has to write opacity and transforms to.\n */\nexport const widgetForHandle = (handle: unknown): Gtk.Widget | null => {\n  if (handle === null || typeof handle !== \"object\") {\n    return null\n  }\n  return widgetOf.get(handle)?.() ?? null\n}\n\n// --- node handles --------------------------------------------------------\n//\n// RN's `findNodeHandle` hands out an integer that stands for a mounted host\n// VIEW. On a bridge platform the integer is the native view tag and the\n// number is the only thing that can cross; here nothing has to cross, so the\n// number is minted on demand and means exactly one thing — \"the widget it\n// was minted for\".\n//\n// Keyed by the WIDGET rather than by the handle object, which is what makes\n// it behave like RN's: two refs onto the same view report the same tag, and\n// the tag survives a re-render that rebuilt the handle object. It is also why\n// this is not a second registry — `widgetOf` above is still the only thing\n// that knows what a handle stands for, and a tag is minted from its answer.\n//\n// A widget that is gone leaves a tag that resolves to null, which is what a\n// stale RN tag does too.\nconst tagOfWidget = new WeakMap<Gtk.Widget, NodeHandle>()\nconst widgetOfTag = new Map<NodeHandle, WeakRef<Gtk.Widget>>()\nlet nextTag = 1\n\n/**\n * @internal Registers `handle` as standing for whatever widget `other`\n * stands for.\n *\n * For a COMPOSITE that renders a host component and wants to be reachable as\n * that host: a windowed list owns no widget of its own, but the ScrollView it\n * renders is the thing another view measures against and the thing\n * `findNodeHandle` should answer with. RN resolves a `FlatList`'s node handle\n * through to its inner scroll view for the same reason.\n *\n * It deliberately does NOT give the composite `measure()`/`measureInWindow()`\n * — see the note on `VirtualizedListHandle`. Being measurable AGAINST is a\n * weaker claim than reporting your own geometry.\n */\nexport const registerHandleAlias = (\n  handle: object,\n  other: () => unknown,\n): void => {\n  widgetOf.set(handle, () => widgetForHandle(other()))\n}\n\n/**\n * @internal The tag standing for the widget behind `handle`, minted on first\n * ask. Null when the value is not a component handle, or when its widget is\n * not mounted — RN returns null in both cases too.\n */\nexport const nodeHandleFor = (handle: unknown): NodeHandle | null => {\n  const widget = widgetForHandle(handle)\n  if (widget === null) {\n    return null\n  }\n  const existing = tagOfWidget.get(widget)\n  if (existing !== undefined) {\n    return existing\n  }\n  const tag = nextTag\n  nextTag += 1\n  tagOfWidget.set(widget, tag)\n  widgetOfTag.set(tag, new WeakRef(widget))\n  return tag\n}\n\n/** @internal The widget a tag was minted for, or null once it is gone. */\nexport const widgetForNodeHandle = (tag: NodeHandle): Gtk.Widget | null => {\n  const widget = widgetOfTag.get(tag)?.deref() ?? null\n  if (widget === null) {\n    widgetOfTag.delete(tag)\n  }\n  return widget\n}\n\n/** The widget behind either spelling of \"that other view\" that RN accepts. */\nconst widgetForTarget = (\n  target: MeasureHandle | NodeHandle,\n): Gtk.Widget | null =>\n  typeof target === \"number\"\n    ? widgetForNodeHandle(target)\n    : widgetForHandle(target)\n\nexport const createMeasureHandle = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  node: LayoutNodeApi,\n): MeasureHandle => {\n  const handle: MeasureHandle = {\n    measure(callback) {\n      const widget = widgetRef.current\n      const rect = node.getRect()\n      if (!widget || !rect) {\n        return\n      }\n      const page = computePointInWindow(widget, 0, 0)\n      if (!page) {\n        return\n      }\n      callback(rect.x, rect.y, rect.width, rect.height, page.x, page.y)\n    },\n\n    measureInWindow(callback) {\n      const widget = widgetRef.current\n      const rect = node.getRect()\n      if (!widget || !rect) {\n        return\n      }\n      const page = computePointInWindow(widget, 0, 0)\n      if (!page) {\n        return\n      }\n      callback(page.x, page.y, rect.width, rect.height)\n    },\n\n    measureLayout(relativeTo, onSuccess, onFail) {\n      const widget = widgetRef.current\n      const other = widgetForTarget(relativeTo)\n      const rect = node.getRect()\n      if (!widget || !other || !rect) {\n        onFail?.()\n        return\n      }\n      const origin = computePointIn(widget, other, 0, 0)\n      if (!origin) {\n        onFail?.()\n        return\n      }\n      onSuccess(origin.x, origin.y, rect.width, rect.height)\n    },\n  }\n\n  registerHandleWidget(handle, widgetRef)\n  return handle\n}\n"]}

package/dist/components/pressable.d.ts

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
 import type { StyleProp } from "../contracts";
+import { type HitSlop } from "../gtkx/bridge/index";
 import { type PressEvent } from "./press-event";
 import { type LayoutEvent } from "./use-layout-child";
 export type PressableStateCallbackType = {
     pressed: boolean;
     hovered: boolean;
+    focused: boolean;
 };
 export type { NativeTouch, PressEvent } from "./press-event";
 export type PressableProps = {
@@ -16,14 +18,72 @@ export type PressableProps = {
     onLongPress?: (event: PressEvent) => void;
     onHoverIn?: () => void;
     onHoverOut?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    /** Whether Tab and the arrow keys can reach this pressable. Defaults to
+     *  true when `onPress` is set, which is react-native-web's own rule — a
+     *  control you can click and cannot reach from the keyboard is an
+     *  accessibility bug, and on a desktop that matters more, not less. */
+    focusable?: boolean;
     disabled?: boolean;
     delayLongPress?: number;
+    /** RN's hitSlop: how far OUTSIDE its bounds this pressable still counts
+     *  as pressed. A number is all four edges. Limited by an ancestor that
+     *  clips — a ScrollView's viewport, say — because GTK stops picking at
+     *  the clip, the same constraint RN documents on Android. */
+    hitSlop?: number | Partial<HitSlop>;
+    /** RN's pressRetentionOffset: how far the pointer may drift outside the
+     *  hit rect after pressing and still activate on release. Defaults to
+     *  RN's own {top: 20, left: 20, right: 20, bottom: 30}. */
+    pressRetentionOffset?: number | Partial<HitSlop>;
     onLayout?: (event: LayoutEvent) => void;
     testID?: string;
 };
-export declare const Pressable: ({ style, children, onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, disabled, delayLongPress, onLayout, testID, }: PressableProps) => React.JSX.Element;
+export declare const Pressable: ({ style, children, onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, onFocus, onBlur, focusable, disabled, delayLongPress, hitSlop, pressRetentionOffset, onLayout, testID, }: PressableProps) => React.JSX.Element;
 export type TouchableOpacityProps = Omit<PressableProps, "style"> & {
     style?: StyleProp;
     activeOpacity?: number;
 };
 export declare const TouchableOpacity: ({ style, activeOpacity, ...rest }: TouchableOpacityProps) => React.JSX.Element;
+export type TouchableHighlightProps = Omit<PressableProps, "style"> & {
+    style?: StyleProp;
+    /**
+     * RN's default is `"black"`, and its default `activeOpacity` is `0.85` — the
+     * underlay shows through the dimmed child rather than replacing it. Here the
+     * underlay IS the background, because there is no separate underlay view to
+     * put behind a child that may be opaque, so an app that wants RN's exact
+     * blend gives the child a translucent background itself.
+     */
+    underlayColor?: string;
+    activeOpacity?: number;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
+};
+/**
+ * RN's `TouchableHighlight`: a background colour while held.
+ *
+ * Here because `@gorhom/bottom-sheet` re-exports it from its own public entry
+ * as `BottomSheetTouchable` on every platform except iOS — it is upstream's
+ * export, not an app's choice, so an app cannot avoid it. It is also an
+ * ordinary `react-native` component that this surface was simply missing.
+ *
+ * One structural difference, stated rather than papered over: RN renders a
+ * separate underlay VIEW behind the child and lowers the child's opacity onto
+ * it. Reproducing that needs a second box, and an extra box changes flex
+ * layout and what `measureLayout` is relative to — the same reason
+ * `GestureDetector` and `createAnimatedComponent` add none. So the highlight
+ * is this view's own `backgroundColor` while pressed.
+ */
+export declare const TouchableHighlight: ({ style, underlayColor, activeOpacity, onShowUnderlay, onHideUnderlay, onPressIn, onPressOut, ...rest }: TouchableHighlightProps) => React.JSX.Element;
+export type TouchableWithoutFeedbackProps = PressableProps;
+/**
+ * RN's `TouchableWithoutFeedback`: the press callbacks and nothing visual.
+ *
+ * RN's own version clones its single child rather than rendering a box, and
+ * its documentation calls that a mistake it kept for compatibility. This one
+ * renders the `Pressable` box, which is what `Pressable` already is with no
+ * `style` callback — the difference is invisible unless the child was relying
+ * on being laid out by ITS parent, and RN's own docs tell you to use
+ * `Pressable` instead for exactly that reason.
+ */
+export declare const TouchableWithoutFeedback: (props: PressableProps) => React.JSX.Element;

package/dist/components/pressable.js

@@ -2,20 +2,46 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer, useRef, useState, } from "react";
 import { splitStyle, StyleSheet } from "../style/index";
 import { defaultCssRegistry } from "../style/registry.gtkx";
-import { Gtk, GtkBox } from "../gtkx/bridge/index";
+import { getViewBoxComponent, Gtk, setHitSlop, } from "../gtkx/bridge/index";
 import { perfAddTime, perfCount, perfEnabled, perfNow } from "../perf";
 import { HostNodeContext } from "./host-node";
 import { createPressEvent, createTouch } from "./press-event";
+import { useActivateOnKey, useFocusable, useFocusController } from "./use-focus";
 import { useLayoutChild, useRnContainer, } from "./use-layout-child";
+const NO_SLOP = { top: 0, right: 0, bottom: 0, left: 0 };
+/**
+ * RN's own DEFAULT_PRESS_RECT_OFFSETS, from Libraries/Pressability. The
+ * bottom edge is deliberately larger: a thumb rolls downwards off a target
+ * far more often than upwards.
+ */
+const DEFAULT_PRESS_RECT = { top: 20, right: 20, bottom: 30, left: 20 };
+const toRect = (value, fallback) => {
+    if (value === undefined) {
+        return fallback;
+    }
+    if (typeof value === "number") {
+        return { top: value, right: value, bottom: value, left: value };
+    }
+    return {
+        top: value.top ?? 0,
+        right: value.right ?? 0,
+        bottom: value.bottom ?? 0,
+        left: value.left ?? 0,
+    };
+};
 // Coordinates arrive from GtkGestureClick in the widget's own space, which
 // is exactly RN's locationX/locationY; createTouch translates them into the
 // window for pageX/pageY.
 const pressEvent = (widget, x, y) => createPressEvent(createTouch(widget, x, y));
 // A View with a click gesture and hover tracking. State-dependent style and
 // children follow the RN Pressable function-prop contract.
-export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, disabled = false, delayLongPress = 500, onLayout, testID, }) => {
+export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, onFocus, onBlur, focusable, disabled = false, delayLongPress = 500, hitSlop, pressRetentionOffset, onLayout, testID, }) => {
     const widgetRef = useRef(null);
     const [pressed, setPressed] = useState(false);
+    // Focus IS React state, unlike hover: it changes at human-decision rates
+    // (a Tab press), not at pointer-motion rates, so the fast path hover needs
+    // would be complexity with nothing to buy.
+    const [focused, setFocused] = useState(false);
     // Hover is not React state: a boundary crossing should cost what it costs
     // a native GtkListBox row to swap a CSS class, not a setState + render +
     // Yoga + allocate cycle (measured: roughly 500x the latency of a native
@@ -39,6 +65,7 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
     const state = {
         pressed,
         hovered: hoveredRef.current,
+        focused,
     };
     // Gestures are attached imperatively even though rc.3 has a declarative
     // `controllers` slot: the controllers are wired exactly once per widget and
@@ -81,6 +108,7 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         const otherState = {
             pressed,
             hovered: !hoveredRef.current,
+            focused,
         };
         const otherFlat = StyleSheet.flatten(style(otherState));
         const otherSplit = splitStyle(otherFlat);
@@ -133,6 +161,27 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
             }, delayLongPress);
         }
     };
+    /**
+     * Whether a release at (x, y) — in the widget's own coordinates — still
+     * counts as pressing this control. RN's press rect is the hit rect plus
+     * pressRetentionOffset, and a release outside it is a cancel, not a
+     * press: dragging off a button to change your mind is how every toolkit
+     * works, GTK's own GtkButton included. GtkGestureClick keeps an implicit
+     * grab for the whole press, so `released` arrives here wherever the
+     * pointer ended up and the check has to be ours.
+     */
+    const withinPressRect = (x, y) => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return false;
+        }
+        const slop = slopRef.current;
+        const retention = retentionRef.current;
+        return (x >= -(slop.left + retention.left) &&
+            y >= -(slop.top + retention.top) &&
+            x < widget.getWidth() + slop.right + retention.right &&
+            y < widget.getHeight() + slop.bottom + retention.bottom);
+    };
     const handleReleased = (_n, x, y) => {
         if (disabled) {
             return;
@@ -140,8 +189,10 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         clearLongPress();
         setPressed(false);
         const widget = widgetRef.current;
+        // onPressOut fires either way — RN reports the end of the press whether
+        // it turned into an activation or not.
         onPressOut?.(pressEvent(widget, x, y));
-        if (!longPressFired.current) {
+        if (!longPressFired.current && withinPressRect(x, y)) {
             onPress?.(pressEvent(widget, x, y));
         }
     };
@@ -189,6 +240,41 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         handleEnter: () => applyHover(true, onHoverIn),
         handleLeave: () => applyHover(false, onHoverOut),
     };
+    // A pressable that can be clicked should be reachable from the keyboard;
+    // one that only hovers or lays out should not join the Tab order. That is
+    // react-native-web's rule, and it keeps every existing Pressable in this
+    // repo behaving as before unless it had an onPress to begin with.
+    useFocusable(widgetRef, focusable ?? onPress !== undefined);
+    useFocusController(widgetRef, () => {
+        setFocused(true);
+        onFocus?.();
+    }, () => {
+        setFocused(false);
+        onBlur?.();
+    });
+    // Enter and Space activate a focused control on web and on Android, so
+    // they do here. The press event is synthesised at the widget's own origin
+    // — a keyboard press has no coordinates, and RN's own handlers read
+    // locationX/Y unconditionally.
+    useActivateOnKey(widgetRef, disabled || !onPress
+        ? undefined
+        : () => onPress(pressEvent(widgetRef.current, 0, 0)));
+    // Read from the gesture handlers, which are installed once and must not
+    // close over a stale prop.
+    const slopRef = useRef(NO_SLOP);
+    const retentionRef = useRef(DEFAULT_PRESS_RECT);
+    slopRef.current = toRect(hitSlop, NO_SLOP);
+    retentionRef.current = toRect(pressRetentionOffset, DEFAULT_PRESS_RECT);
+    const slop = slopRef.current;
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const empty = slop.top === 0 && slop.right === 0 && slop.bottom === 0 && slop.left === 0;
+        setHitSlop(widget, empty ? null : slop);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [slop.top, slop.right, slop.bottom, slop.left]);
     useLayoutEffect(() => {
         const widget = widgetRef.current;
         if (!widget) {
@@ -199,6 +285,24 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         click.on("released", (n, x, y) => handlersRef.current.handleReleased(n, x, y));
         click.on("cancel", () => handlersRef.current.handleCancel());
         widget.addController(click);
+        // Hover fires from touch as well as from a mouse, and that is left
+        // alone deliberately. react-native-web filters it — `useHover` drops
+        // any event whose pointerType is "touch", because on a phone every tap
+        // would otherwise leave a view looking hovered. Three measurements say
+        // not to copy it here. GTK gives a crossing event no device at all:
+        // inside `enter` and `leave` both `get_current_event()` and
+        // `get_current_event_device()` are null, because GTK routes crossings
+        // through a path that never sets the controller's current event, so the
+        // filter would have to come from somewhere else entirely — a raw event
+        // tap on the toplevel recording the last input source, which is
+        // per-event JS work on every window for a filter nobody can check.
+        // GTK also sends a matching leave when a touch sequence ends, so the
+        // stuck phantom hover that motivates RNW's filter does not arise, and
+        // GTK's own CSS `:hover` lights up on touch — filtering would make this
+        // platform's Pressable behave unlike every widget beside it. And it
+        // cannot be verified either way here: there is no way to inject a touch
+        // on this rig (docs/research/gestures.md). Revisit with a touchscreen
+        // and a reason, not before.
         const motion = new Gtk.EventControllerMotion();
         motion.on("enter", () => handlersRef.current.handleEnter());
         motion.on("leave", () => handlersRef.current.handleLeave());
@@ -208,8 +312,51 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
             widget.removeController(motion);
         };
     }, []);
-    return (_jsx(GtkBox, { ref: widgetRef, name: testID, cssClasses: cssClass ? [cssClass] : [], children: _jsx(HostNodeContext.Provider, { value: { engine: host.engine, node, widgetRef }, children: resolvedChildren }) }));
+    // The same GtkBox subclass a View renders, for its contains() override:
+    // hitSlop is a picking change and nothing in JS can substitute for one,
+    // because a press outside the widget is never delivered to it at all.
+    const PressableBox = getViewBoxComponent();
+    return (_jsx(PressableBox, { ref: widgetRef, name: testID, cssClasses: cssClass ? [cssClass] : [], children: _jsx(HostNodeContext.Provider, { value: { engine: host.engine, node, widgetRef }, children: resolvedChildren }) }));
 };
 // Classic RN touchable: dims itself while pressed via widget opacity.
 export const TouchableOpacity = ({ style, activeOpacity = 0.5, ...rest }) => (_jsx(Pressable, { ...rest, style: ({ pressed }) => [style, pressed && { opacity: activeOpacity }] }));
+/**
+ * RN's `TouchableHighlight`: a background colour while held.
+ *
+ * Here because `@gorhom/bottom-sheet` re-exports it from its own public entry
+ * as `BottomSheetTouchable` on every platform except iOS — it is upstream's
+ * export, not an app's choice, so an app cannot avoid it. It is also an
+ * ordinary `react-native` component that this surface was simply missing.
+ *
+ * One structural difference, stated rather than papered over: RN renders a
+ * separate underlay VIEW behind the child and lowers the child's opacity onto
+ * it. Reproducing that needs a second box, and an extra box changes flex
+ * layout and what `measureLayout` is relative to — the same reason
+ * `GestureDetector` and `createAnimatedComponent` add none. So the highlight
+ * is this view's own `backgroundColor` while pressed.
+ */
+export const TouchableHighlight = ({ style, underlayColor = "black", activeOpacity, onShowUnderlay, onHideUnderlay, onPressIn, onPressOut, ...rest }) => (_jsx(Pressable, { ...rest, onPressIn: (event) => {
+        onShowUnderlay?.();
+        onPressIn?.(event);
+    }, onPressOut: (event) => {
+        onHideUnderlay?.();
+        onPressOut?.(event);
+    }, style: ({ pressed }) => [
+        style,
+        pressed && {
+            backgroundColor: underlayColor,
+            ...(activeOpacity === undefined ? null : { opacity: activeOpacity }),
+        },
+    ] }));
+/**
+ * RN's `TouchableWithoutFeedback`: the press callbacks and nothing visual.
+ *
+ * RN's own version clones its single child rather than rendering a box, and
+ * its documentation calls that a mistake it kept for compatibility. This one
+ * renders the `Pressable` box, which is what `Pressable` already is with no
+ * `style` callback — the difference is invisible unless the child was relying
+ * on being laid out by ITS parent, and RN's own docs tell you to use
+ * `Pressable` instead for exactly that reason.
+ */
+export const TouchableWithoutFeedback = (props) => (_jsx(Pressable, { ...props }));
 //# sourceMappingURL=pressable.js.map