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

package/dist/components/pressable.d.ts

@@ -1,16 +1,14 @@
 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 PressEvent = {
-    nativeEvent: {
-        x: number;
-        y: number;
-    };
-};
+export type { NativeTouch, PressEvent } from "./press-event";
 export type PressableProps = {
     style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp);
     children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
@@ -20,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,18 +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 pressEvent = (x, y) => ({
-    nativeEvent: { x, y },
-});
+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
@@ -37,8 +65,9 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
     const state = {
         pressed,
         hovered: hoveredRef.current,
+        focused,
     };
-    // Gestures are attached imperatively even though rc.2 has a declarative
+    // Gestures are attached imperatively even though rc.3 has a declarative
     // `controllers` slot: the controllers are wired exactly once per widget and
     // the handlers read the latest props through a ref, so a re-render never
     // detaches and re-adds a gesture mid-press.
@@ -79,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);
@@ -119,24 +149,51 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         }
         longPressFired.current = false;
         setPressed(true);
-        onPressIn?.(pressEvent(x, y));
+        const widget = widgetRef.current;
+        onPressIn?.(pressEvent(widget, x, y));
         if (onLongPress) {
             clearLongPress();
             longPressTimer.current = setTimeout(() => {
                 longPressFired.current = true;
-                onLongPress(pressEvent(x, y));
+                // Timestamped when it FIRES, not when the press started — the delay
+                // is the whole point of the event.
+                onLongPress(pressEvent(widgetRef.current, x, y));
             }, 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;
         }
         clearLongPress();
         setPressed(false);
-        onPressOut?.(pressEvent(x, y));
-        if (!longPressFired.current) {
-            onPress?.(pressEvent(x, y));
+        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 && withinPressRect(x, y)) {
+            onPress?.(pressEvent(widget, x, y));
         }
     };
     const handleCancel = () => {
@@ -183,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) {
@@ -193,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());
@@ -202,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

package/dist/components/pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"pressable.js","sourceRoot":"","sources":["../../src/components/pressable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useLayoutEffect,\n  useReducer,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type { StyleProp } from \"../contracts\"\nimport { Gtk, GtkBox } from \"../gtkx/bridge/index\"\nimport { perfAddTime, perfCount, perfEnabled, perfNow } from \"../perf\"\nimport { HostNodeContext } from \"./host-node\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\nexport type PressableStateCallbackType = {\n  pressed: boolean\n  hovered: boolean\n}\n\nexport type PressEvent = { nativeEvent: { x: number; y: number } }\n\nexport type PressableProps = {\n  style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp)\n  children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode)\n  onPress?: (event: PressEvent) => void\n  onPressIn?: (event: PressEvent) => void\n  onPressOut?: (event: PressEvent) => void\n  onLongPress?: (event: PressEvent) => void\n  onHoverIn?: () => void\n  onHoverOut?: () => void\n  disabled?: boolean\n  delayLongPress?: number\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst pressEvent = (x: number, y: number): PressEvent => ({\n  nativeEvent: { x, y },\n})\n\n// A View with a click gesture and hover tracking. State-dependent style and\n// children follow the RN Pressable function-prop contract.\nexport const Pressable = ({\n  style,\n  children,\n  onPress,\n  onPressIn,\n  onPressOut,\n  onLongPress,\n  onHoverIn,\n  onHoverOut,\n  disabled = false,\n  delayLongPress = 500,\n  onLayout,\n  testID,\n}: PressableProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const [pressed, setPressed] = useState(false)\n  // Hover is not React state: a boundary crossing should cost what it costs\n  // a native GtkListBox row to swap a CSS class, not a setState + render +\n  // Yoga + allocate cycle (measured: roughly 500x the latency of a native\n  // row at rest, see docs/research/scroll-performance.md, task 007).\n  // `hoveredRef` is the single source of truth, read directly at render\n  // time — safe here because this component already mutates\n  // `handlersRef.current` in the render body below, so render was never\n  // React-DOM-pure to begin with. `forceRender` is used only for the two\n  // cases that genuinely need a real render: `children` reads `hovered`,\n  // or hovering would itself change layout (not just paint).\n  const hoveredRef = useRef(false)\n  const [, forceRender] = useReducer((n: number) => n + 1, 0)\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const longPressFired = useRef(false)\n  // TEMPORARY perf instrumentation (task 007, see\n  // docs/research/scroll-performance.md): timestamp the native enter/leave\n  // signal so hover's real signal-to-applied latency can be reported —\n  // synchronously for the fast path below, after the resulting commit for\n  // the slow one. perf.ts hooks are no-ops unless GTKX_PERF=1.\n  const hoverSignalAt = useRef<number | null>(null)\n\n  const state: PressableStateCallbackType = {\n    pressed,\n    hovered: hoveredRef.current,\n  }\n\n  // Gestures are attached imperatively even though rc.2 has a declarative\n  // `controllers` slot: the controllers are wired exactly once per widget and\n  // the handlers read the latest props through a ref, so a re-render never\n  // detaches and re-adds a gesture mid-press.\n  const handlersRef = useRef({\n    handlePressed: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleReleased: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleCancel: (): void => {},\n    handleEnter: (): void => {},\n    handleLeave: (): void => {},\n  })\n  const resolvedStyle = typeof style === \"function\" ? style(state) : style\n  const resolvedChildren =\n    typeof children === \"function\" ? children(state) : children\n\n  const { host, node, cssClass, flat } = useLayoutChild(widgetRef, {\n    style: resolvedStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  // Hover fast path: when `children` does not read state, hovering can\n  // never change what is rendered — only `style` might. Precompute the CSS\n  // class for the OTHER hover value so the native enter/leave handlers\n  // below can swap classes directly on the widget, with no React involved\n  // at all. If hovering would also change LAYOUT (rare — every hover style\n  // in this codebase's own examples is background/border) that swap is\n  // unsafe, since a real reflow is required; fall back to the ordinary\n  // render in that case, exactly as before this change.\n  let hoverOnClass: string | null = null\n  let hoverOffClass: string | null = null\n  let canSwapHoverClass = typeof children !== \"function\"\n  if (canSwapHoverClass && typeof style === \"function\") {\n    const otherState: PressableStateCallbackType = {\n      pressed,\n      hovered: !hoveredRef.current,\n    }\n    const otherFlat = StyleSheet.flatten(style(otherState))\n    const otherSplit = splitStyle(otherFlat)\n    const currentLayout = splitStyle(flat).layout\n    if (JSON.stringify(currentLayout) !== JSON.stringify(otherSplit.layout)) {\n      // Hovering resizes or repositions this widget — a CSS class alone\n      // cannot do that, it needs Yoga. Fall back to a real render.\n      canSwapHoverClass = false\n    } else {\n      const otherClass = defaultCssRegistry.getClassName(otherSplit.visual)\n      hoverOnClass = hoveredRef.current ? cssClass : otherClass\n      hoverOffClass = hoveredRef.current ? otherClass : cssClass\n    }\n  }\n\n  // TEMPORARY perf instrumentation (task 007): runs after every commit, so\n  // it always lands right after whatever render the SLOW hover path\n  // triggered. A no-op when no hover signal is pending (the common case:\n  // renders triggered by anything else, or the fast path above, which\n  // measures itself synchronously) or when GTKX_PERF is unset.\n  useLayoutEffect(() => {\n    if (!perfEnabled || hoverSignalAt.current === null) {\n      return\n    }\n    perfAddTime(\"pressable.hoverApply\", perfNow() - hoverSignalAt.current)\n    perfCount(\"pressable.hoverFullCycle\")\n    hoverSignalAt.current = null\n  })\n\n  const clearLongPress = (): void => {\n    if (longPressTimer.current !== null) {\n      clearTimeout(longPressTimer.current)\n      longPressTimer.current = null\n    }\n  }\n\n  const handlePressed = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    longPressFired.current = false\n    setPressed(true)\n    onPressIn?.(pressEvent(x, y))\n    if (onLongPress) {\n      clearLongPress()\n      longPressTimer.current = setTimeout(() => {\n        longPressFired.current = true\n        onLongPress(pressEvent(x, y))\n      }, delayLongPress)\n    }\n  }\n\n  const handleReleased = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    clearLongPress()\n    setPressed(false)\n    onPressOut?.(pressEvent(x, y))\n    if (!longPressFired.current) {\n      onPress?.(pressEvent(x, y))\n    }\n  }\n\n  const handleCancel = (): void => {\n    clearLongPress()\n    setPressed(false)\n  }\n\n  // Applies a hover transition: fires the RN callback, then either swaps\n  // the precomputed CSS class directly on the widget (fast path) or forces\n  // the ordinary render (slow path) — see the `canSwapHoverClass` block\n  // above for which one applies this render.\n  const applyHover = (next: boolean, fire: (() => void) | undefined): void => {\n    const t0 = perfEnabled ? perfNow() : 0\n    hoveredRef.current = next\n    fire?.()\n    if (!canSwapHoverClass) {\n      if (perfEnabled) {\n        hoverSignalAt.current = t0\n        perfCount(\"pressable.hoverEvent\")\n      }\n      forceRender()\n      return\n    }\n    const widget = widgetRef.current\n    const applyClass = next ? hoverOnClass : hoverOffClass\n    const removeClass = next ? hoverOffClass : hoverOnClass\n    if (widget && hoverOnClass !== hoverOffClass) {\n      if (removeClass) {\n        widget.removeCssClass(removeClass)\n      }\n      if (applyClass) {\n        widget.addCssClass(applyClass)\n      }\n    }\n    if (perfEnabled) {\n      perfAddTime(\"pressable.hoverApply\", perfNow() - t0)\n      perfCount(\"pressable.hoverEvent\")\n      perfCount(\"pressable.hoverFast\")\n    }\n  }\n\n  handlersRef.current = {\n    handlePressed,\n    handleReleased,\n    handleCancel,\n    handleEnter: () => applyHover(true, onHoverIn),\n    handleLeave: () => applyHover(false, onHoverOut),\n  }\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const click = new Gtk.GestureClick()\n    click.on(\"pressed\", (n: number, x: number, y: number) =>\n      handlersRef.current.handlePressed(n, x, y),\n    )\n    click.on(\"released\", (n: number, x: number, y: number) =>\n      handlersRef.current.handleReleased(n, x, y),\n    )\n    click.on(\"cancel\", () => handlersRef.current.handleCancel())\n    widget.addController(click)\n\n    const motion = new Gtk.EventControllerMotion()\n    motion.on(\"enter\", () => handlersRef.current.handleEnter())\n    motion.on(\"leave\", () => handlersRef.current.handleLeave())\n    widget.addController(motion)\n\n    return () => {\n      widget.removeController(click)\n      widget.removeController(motion)\n    }\n  }, [])\n\n  return (\n    <GtkBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {resolvedChildren}\n      </HostNodeContext.Provider>\n    </GtkBox>\n  )\n}\n\nexport type TouchableOpacityProps = Omit<PressableProps, \"style\"> & {\n  style?: StyleProp\n  activeOpacity?: number\n}\n\n// Classic RN touchable: dims itself while pressed via widget opacity.\nexport const TouchableOpacity = ({\n  style,\n  activeOpacity = 0.5,\n  ...rest\n}: TouchableOpacityProps) => (\n  <Pressable\n    {...rest}\n    style={({ pressed }) => [style, pressed && { opacity: activeOpacity }]}\n  />\n)\n"]}
+{"version":3,"file":"pressable.js","sourceRoot":"","sources":["../../src/components/pressable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useLayoutEffect,\n  useReducer,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type { StyleProp } from \"../contracts\"\nimport {\n  getViewBoxComponent,\n  Gtk,\n  GtkBox,\n  setHitSlop,\n  type HitSlop,\n} from \"../gtkx/bridge/index\"\nimport { perfAddTime, perfCount, perfEnabled, perfNow } from \"../perf\"\nimport { HostNodeContext } from \"./host-node\"\nimport { createPressEvent, createTouch, type PressEvent } from \"./press-event\"\nimport { useActivateOnKey, useFocusable, useFocusController } from \"./use-focus\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\n// react-native-web's own Pressable state is `{focused, hovered, pressed}`.\n// `hovered` was already a documented extension here for that reason;\n// `focused` is the same move, and it is what lets a row draw the focus ring\n// `outlineWidth`/`outlineColor` made drawable.\nexport type PressableStateCallbackType = {\n  pressed: boolean\n  hovered: boolean\n  focused: boolean\n}\n\nexport type { NativeTouch, PressEvent } from \"./press-event\"\n\nexport type PressableProps = {\n  style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp)\n  children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode)\n  onPress?: (event: PressEvent) => void\n  onPressIn?: (event: PressEvent) => void\n  onPressOut?: (event: PressEvent) => void\n  onLongPress?: (event: PressEvent) => void\n  onHoverIn?: () => void\n  onHoverOut?: () => void\n  onFocus?: () => void\n  onBlur?: () => void\n  /** Whether Tab and the arrow keys can reach this pressable. Defaults to\n   *  true when `onPress` is set, which is react-native-web's own rule — a\n   *  control you can click and cannot reach from the keyboard is an\n   *  accessibility bug, and on a desktop that matters more, not less. */\n  focusable?: boolean\n  disabled?: boolean\n  delayLongPress?: number\n  /** RN's hitSlop: how far OUTSIDE its bounds this pressable still counts\n   *  as pressed. A number is all four edges. Limited by an ancestor that\n   *  clips — a ScrollView's viewport, say — because GTK stops picking at\n   *  the clip, the same constraint RN documents on Android. */\n  hitSlop?: number | Partial<HitSlop>\n  /** RN's pressRetentionOffset: how far the pointer may drift outside the\n   *  hit rect after pressing and still activate on release. Defaults to\n   *  RN's own {top: 20, left: 20, right: 20, bottom: 30}. */\n  pressRetentionOffset?: number | Partial<HitSlop>\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst NO_SLOP: HitSlop = { top: 0, right: 0, bottom: 0, left: 0 }\n\n/**\n * RN's own DEFAULT_PRESS_RECT_OFFSETS, from Libraries/Pressability. The\n * bottom edge is deliberately larger: a thumb rolls downwards off a target\n * far more often than upwards.\n */\nconst DEFAULT_PRESS_RECT: HitSlop = { top: 20, right: 20, bottom: 30, left: 20 }\n\nconst toRect = (\n  value: number | Partial<HitSlop> | undefined,\n  fallback: HitSlop,\n): HitSlop => {\n  if (value === undefined) {\n    return fallback\n  }\n  if (typeof value === \"number\") {\n    return { top: value, right: value, bottom: value, left: value }\n  }\n  return {\n    top: value.top ?? 0,\n    right: value.right ?? 0,\n    bottom: value.bottom ?? 0,\n    left: value.left ?? 0,\n  }\n}\n\n// Coordinates arrive from GtkGestureClick in the widget's own space, which\n// is exactly RN's locationX/locationY; createTouch translates them into the\n// window for pageX/pageY.\nconst pressEvent = (\n  widget: Gtk.Widget | null,\n  x: number,\n  y: number,\n): PressEvent => createPressEvent(createTouch(widget, x, y))\n\n// A View with a click gesture and hover tracking. State-dependent style and\n// children follow the RN Pressable function-prop contract.\nexport const Pressable = ({\n  style,\n  children,\n  onPress,\n  onPressIn,\n  onPressOut,\n  onLongPress,\n  onHoverIn,\n  onHoverOut,\n  onFocus,\n  onBlur,\n  focusable,\n  disabled = false,\n  delayLongPress = 500,\n  hitSlop,\n  pressRetentionOffset,\n  onLayout,\n  testID,\n}: PressableProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const [pressed, setPressed] = useState(false)\n  // Focus IS React state, unlike hover: it changes at human-decision rates\n  // (a Tab press), not at pointer-motion rates, so the fast path hover needs\n  // would be complexity with nothing to buy.\n  const [focused, setFocused] = useState(false)\n  // Hover is not React state: a boundary crossing should cost what it costs\n  // a native GtkListBox row to swap a CSS class, not a setState + render +\n  // Yoga + allocate cycle (measured: roughly 500x the latency of a native\n  // row at rest, see docs/research/scroll-performance.md, task 007).\n  // `hoveredRef` is the single source of truth, read directly at render\n  // time — safe here because this component already mutates\n  // `handlersRef.current` in the render body below, so render was never\n  // React-DOM-pure to begin with. `forceRender` is used only for the two\n  // cases that genuinely need a real render: `children` reads `hovered`,\n  // or hovering would itself change layout (not just paint).\n  const hoveredRef = useRef(false)\n  const [, forceRender] = useReducer((n: number) => n + 1, 0)\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const longPressFired = useRef(false)\n  // TEMPORARY perf instrumentation (task 007, see\n  // docs/research/scroll-performance.md): timestamp the native enter/leave\n  // signal so hover's real signal-to-applied latency can be reported —\n  // synchronously for the fast path below, after the resulting commit for\n  // the slow one. perf.ts hooks are no-ops unless GTKX_PERF=1.\n  const hoverSignalAt = useRef<number | null>(null)\n\n  const state: PressableStateCallbackType = {\n    pressed,\n    hovered: hoveredRef.current,\n    focused,\n  }\n\n  // Gestures are attached imperatively even though rc.3 has a declarative\n  // `controllers` slot: the controllers are wired exactly once per widget and\n  // the handlers read the latest props through a ref, so a re-render never\n  // detaches and re-adds a gesture mid-press.\n  const handlersRef = useRef({\n    handlePressed: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleReleased: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleCancel: (): void => {},\n    handleEnter: (): void => {},\n    handleLeave: (): void => {},\n  })\n  const resolvedStyle = typeof style === \"function\" ? style(state) : style\n  const resolvedChildren =\n    typeof children === \"function\" ? children(state) : children\n\n  const { host, node, cssClass, flat } = useLayoutChild(widgetRef, {\n    style: resolvedStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  // Hover fast path: when `children` does not read state, hovering can\n  // never change what is rendered — only `style` might. Precompute the CSS\n  // class for the OTHER hover value so the native enter/leave handlers\n  // below can swap classes directly on the widget, with no React involved\n  // at all. If hovering would also change LAYOUT (rare — every hover style\n  // in this codebase's own examples is background/border) that swap is\n  // unsafe, since a real reflow is required; fall back to the ordinary\n  // render in that case, exactly as before this change.\n  let hoverOnClass: string | null = null\n  let hoverOffClass: string | null = null\n  let canSwapHoverClass = typeof children !== \"function\"\n  if (canSwapHoverClass && typeof style === \"function\") {\n    const otherState: PressableStateCallbackType = {\n      pressed,\n      hovered: !hoveredRef.current,\n      focused,\n    }\n    const otherFlat = StyleSheet.flatten(style(otherState))\n    const otherSplit = splitStyle(otherFlat)\n    const currentLayout = splitStyle(flat).layout\n    if (JSON.stringify(currentLayout) !== JSON.stringify(otherSplit.layout)) {\n      // Hovering resizes or repositions this widget — a CSS class alone\n      // cannot do that, it needs Yoga. Fall back to a real render.\n      canSwapHoverClass = false\n    } else {\n      const otherClass = defaultCssRegistry.getClassName(otherSplit.visual)\n      hoverOnClass = hoveredRef.current ? cssClass : otherClass\n      hoverOffClass = hoveredRef.current ? otherClass : cssClass\n    }\n  }\n\n  // TEMPORARY perf instrumentation (task 007): runs after every commit, so\n  // it always lands right after whatever render the SLOW hover path\n  // triggered. A no-op when no hover signal is pending (the common case:\n  // renders triggered by anything else, or the fast path above, which\n  // measures itself synchronously) or when GTKX_PERF is unset.\n  useLayoutEffect(() => {\n    if (!perfEnabled || hoverSignalAt.current === null) {\n      return\n    }\n    perfAddTime(\"pressable.hoverApply\", perfNow() - hoverSignalAt.current)\n    perfCount(\"pressable.hoverFullCycle\")\n    hoverSignalAt.current = null\n  })\n\n  const clearLongPress = (): void => {\n    if (longPressTimer.current !== null) {\n      clearTimeout(longPressTimer.current)\n      longPressTimer.current = null\n    }\n  }\n\n  const handlePressed = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    longPressFired.current = false\n    setPressed(true)\n    const widget = widgetRef.current\n    onPressIn?.(pressEvent(widget, x, y))\n    if (onLongPress) {\n      clearLongPress()\n      longPressTimer.current = setTimeout(() => {\n        longPressFired.current = true\n        // Timestamped when it FIRES, not when the press started — the delay\n        // is the whole point of the event.\n        onLongPress(pressEvent(widgetRef.current, x, y))\n      }, delayLongPress)\n    }\n  }\n\n  /**\n   * Whether a release at (x, y) — in the widget's own coordinates — still\n   * counts as pressing this control. RN's press rect is the hit rect plus\n   * pressRetentionOffset, and a release outside it is a cancel, not a\n   * press: dragging off a button to change your mind is how every toolkit\n   * works, GTK's own GtkButton included. GtkGestureClick keeps an implicit\n   * grab for the whole press, so `released` arrives here wherever the\n   * pointer ended up and the check has to be ours.\n   */\n  const withinPressRect = (x: number, y: number): boolean => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return false\n    }\n    const slop = slopRef.current\n    const retention = retentionRef.current\n    return (\n      x >= -(slop.left + retention.left) &&\n      y >= -(slop.top + retention.top) &&\n      x < widget.getWidth() + slop.right + retention.right &&\n      y < widget.getHeight() + slop.bottom + retention.bottom\n    )\n  }\n\n  const handleReleased = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    clearLongPress()\n    setPressed(false)\n    const widget = widgetRef.current\n    // onPressOut fires either way — RN reports the end of the press whether\n    // it turned into an activation or not.\n    onPressOut?.(pressEvent(widget, x, y))\n    if (!longPressFired.current && withinPressRect(x, y)) {\n      onPress?.(pressEvent(widget, x, y))\n    }\n  }\n\n  const handleCancel = (): void => {\n    clearLongPress()\n    setPressed(false)\n  }\n\n  // Applies a hover transition: fires the RN callback, then either swaps\n  // the precomputed CSS class directly on the widget (fast path) or forces\n  // the ordinary render (slow path) — see the `canSwapHoverClass` block\n  // above for which one applies this render.\n  const applyHover = (next: boolean, fire: (() => void) | undefined): void => {\n    const t0 = perfEnabled ? perfNow() : 0\n    hoveredRef.current = next\n    fire?.()\n    if (!canSwapHoverClass) {\n      if (perfEnabled) {\n        hoverSignalAt.current = t0\n        perfCount(\"pressable.hoverEvent\")\n      }\n      forceRender()\n      return\n    }\n    const widget = widgetRef.current\n    const applyClass = next ? hoverOnClass : hoverOffClass\n    const removeClass = next ? hoverOffClass : hoverOnClass\n    if (widget && hoverOnClass !== hoverOffClass) {\n      if (removeClass) {\n        widget.removeCssClass(removeClass)\n      }\n      if (applyClass) {\n        widget.addCssClass(applyClass)\n      }\n    }\n    if (perfEnabled) {\n      perfAddTime(\"pressable.hoverApply\", perfNow() - t0)\n      perfCount(\"pressable.hoverEvent\")\n      perfCount(\"pressable.hoverFast\")\n    }\n  }\n\n  handlersRef.current = {\n    handlePressed,\n    handleReleased,\n    handleCancel,\n    handleEnter: () => applyHover(true, onHoverIn),\n    handleLeave: () => applyHover(false, onHoverOut),\n  }\n\n  // A pressable that can be clicked should be reachable from the keyboard;\n  // one that only hovers or lays out should not join the Tab order. That is\n  // react-native-web's rule, and it keeps every existing Pressable in this\n  // repo behaving as before unless it had an onPress to begin with.\n  useFocusable(widgetRef, focusable ?? onPress !== undefined)\n  useFocusController(\n    widgetRef,\n    () => {\n      setFocused(true)\n      onFocus?.()\n    },\n    () => {\n      setFocused(false)\n      onBlur?.()\n    },\n  )\n  // Enter and Space activate a focused control on web and on Android, so\n  // they do here. The press event is synthesised at the widget's own origin\n  // — a keyboard press has no coordinates, and RN's own handlers read\n  // locationX/Y unconditionally.\n  useActivateOnKey(\n    widgetRef,\n    disabled || !onPress\n      ? undefined\n      : () => onPress(pressEvent(widgetRef.current, 0, 0)),\n  )\n\n  // Read from the gesture handlers, which are installed once and must not\n  // close over a stale prop.\n  const slopRef = useRef(NO_SLOP)\n  const retentionRef = useRef(DEFAULT_PRESS_RECT)\n  slopRef.current = toRect(hitSlop, NO_SLOP)\n  retentionRef.current = toRect(pressRetentionOffset, DEFAULT_PRESS_RECT)\n\n  const slop = slopRef.current\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const empty =\n      slop.top === 0 && slop.right === 0 && slop.bottom === 0 && slop.left === 0\n    setHitSlop(widget, empty ? null : slop)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [slop.top, slop.right, slop.bottom, slop.left])\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const click = new Gtk.GestureClick()\n    click.on(\"pressed\", (n: number, x: number, y: number) =>\n      handlersRef.current.handlePressed(n, x, y),\n    )\n    click.on(\"released\", (n: number, x: number, y: number) =>\n      handlersRef.current.handleReleased(n, x, y),\n    )\n    click.on(\"cancel\", () => handlersRef.current.handleCancel())\n    widget.addController(click)\n\n    // Hover fires from touch as well as from a mouse, and that is left\n    // alone deliberately. react-native-web filters it — `useHover` drops\n    // any event whose pointerType is \"touch\", because on a phone every tap\n    // would otherwise leave a view looking hovered. Three measurements say\n    // not to copy it here. GTK gives a crossing event no device at all:\n    // inside `enter` and `leave` both `get_current_event()` and\n    // `get_current_event_device()` are null, because GTK routes crossings\n    // through a path that never sets the controller's current event, so the\n    // filter would have to come from somewhere else entirely — a raw event\n    // tap on the toplevel recording the last input source, which is\n    // per-event JS work on every window for a filter nobody can check.\n    // GTK also sends a matching leave when a touch sequence ends, so the\n    // stuck phantom hover that motivates RNW's filter does not arise, and\n    // GTK's own CSS `:hover` lights up on touch — filtering would make this\n    // platform's Pressable behave unlike every widget beside it. And it\n    // cannot be verified either way here: there is no way to inject a touch\n    // on this rig (docs/research/gestures.md). Revisit with a touchscreen\n    // and a reason, not before.\n    const motion = new Gtk.EventControllerMotion()\n    motion.on(\"enter\", () => handlersRef.current.handleEnter())\n    motion.on(\"leave\", () => handlersRef.current.handleLeave())\n    widget.addController(motion)\n\n    return () => {\n      widget.removeController(click)\n      widget.removeController(motion)\n    }\n  }, [])\n\n  // The same GtkBox subclass a View renders, for its contains() override:\n  // hitSlop is a picking change and nothing in JS can substitute for one,\n  // because a press outside the widget is never delivered to it at all.\n  const PressableBox = getViewBoxComponent() as typeof GtkBox\n  return (\n    <PressableBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {resolvedChildren}\n      </HostNodeContext.Provider>\n    </PressableBox>\n  )\n}\n\nexport type TouchableOpacityProps = Omit<PressableProps, \"style\"> & {\n  style?: StyleProp\n  activeOpacity?: number\n}\n\n// Classic RN touchable: dims itself while pressed via widget opacity.\nexport const TouchableOpacity = ({\n  style,\n  activeOpacity = 0.5,\n  ...rest\n}: TouchableOpacityProps) => (\n  <Pressable\n    {...rest}\n    style={({ pressed }) => [style, pressed && { opacity: activeOpacity }]}\n  />\n)\n\nexport type TouchableHighlightProps = Omit<PressableProps, \"style\"> & {\n  style?: StyleProp\n  /**\n   * RN's default is `\"black\"`, and its default `activeOpacity` is `0.85` — the\n   * underlay shows through the dimmed child rather than replacing it. Here the\n   * underlay IS the background, because there is no separate underlay view to\n   * put behind a child that may be opaque, so an app that wants RN's exact\n   * blend gives the child a translucent background itself.\n   */\n  underlayColor?: string\n  activeOpacity?: number\n  onShowUnderlay?: () => void\n  onHideUnderlay?: () => void\n}\n\n/**\n * RN's `TouchableHighlight`: a background colour while held.\n *\n * Here because `@gorhom/bottom-sheet` re-exports it from its own public entry\n * as `BottomSheetTouchable` on every platform except iOS — it is upstream's\n * export, not an app's choice, so an app cannot avoid it. It is also an\n * ordinary `react-native` component that this surface was simply missing.\n *\n * One structural difference, stated rather than papered over: RN renders a\n * separate underlay VIEW behind the child and lowers the child's opacity onto\n * it. Reproducing that needs a second box, and an extra box changes flex\n * layout and what `measureLayout` is relative to — the same reason\n * `GestureDetector` and `createAnimatedComponent` add none. So the highlight\n * is this view's own `backgroundColor` while pressed.\n */\nexport const TouchableHighlight = ({\n  style,\n  underlayColor = \"black\",\n  activeOpacity,\n  onShowUnderlay,\n  onHideUnderlay,\n  onPressIn,\n  onPressOut,\n  ...rest\n}: TouchableHighlightProps) => (\n  <Pressable\n    {...rest}\n    onPressIn={(event) => {\n      onShowUnderlay?.()\n      onPressIn?.(event)\n    }}\n    onPressOut={(event) => {\n      onHideUnderlay?.()\n      onPressOut?.(event)\n    }}\n    style={({ pressed }) => [\n      style,\n      pressed && {\n        backgroundColor: underlayColor,\n        ...(activeOpacity === undefined ? null : { opacity: activeOpacity }),\n      },\n    ]}\n  />\n)\n\nexport type TouchableWithoutFeedbackProps = PressableProps\n\n/**\n * RN's `TouchableWithoutFeedback`: the press callbacks and nothing visual.\n *\n * RN's own version clones its single child rather than rendering a box, and\n * its documentation calls that a mistake it kept for compatibility. This one\n * renders the `Pressable` box, which is what `Pressable` already is with no\n * `style` callback — the difference is invisible unless the child was relying\n * on being laid out by ITS parent, and RN's own docs tell you to use\n * `Pressable` instead for exactly that reason.\n */\nexport const TouchableWithoutFeedback = (props: PressableProps) => (\n  <Pressable {...props} />\n)\n"]}

package/dist/components/rect-store.d.ts

@@ -9,10 +9,68 @@ export type StoredOffset = {
     dx: number;
     dy: number;
     matrix: Transform2D | null;
+    /**
+     * The box an animated SIZE is currently driving this child to, or null when
+     * nothing is. Composed here rather than written over the committed rect for
+     * the reason the `dx`/`dy` above are: the committed rect belongs to the
+     * engine and is rewritten by any flush, and an animation must not lose a
+     * frame to one that had nothing to do with it.
+     */
+    driven: DrivenBox | null;
 };
+/**
+ * A partial rect: every field the animation is NOT driving stays null and the
+ * engine's committed value is used instead.
+ *
+ * Partial rather than whole so that nothing can go stale. The animated node
+ * overrides only the axis being driven — its origin and its other axis keep
+ * following the engine, so a window resize mid-animation moves it exactly as
+ * it moves everything else. Its descendants override the whole rect, which is
+ * safe for the same reason: those are relative to the node, and re-laying its
+ * subtree out is precisely what decides them.
+ */
+export type DrivenBox = {
+    x: number | null;
+    y: number | null;
+    width: number | null;
+    height: number | null;
+};
+/**
+ * Told when a child's committed rect changes, which is the only moment a
+ * layout transition can know it has something to animate: a moved child is
+ * exactly a child whose engine rect is not the one it had.
+ *
+ * A WeakMap plus a counter rather than a Map, because the key is a widget and
+ * an observer must never be the reason one stays alive; the counter is what
+ * keeps `setStoredRect` free (one integer compare) for the overwhelming
+ * majority of children, which have no observer.
+ */
+export type RectObserver = (next: StoredRect, previous: StoredRect | undefined) => void;
+/** Subscribes to `widget`'s committed rect. Returns the unsubscribe. */
+export declare const observeStoredRect: (widget: object, observer: RectObserver) => (() => void);
 export declare const setStoredRect: (widget: object, rect: StoredRect) => void;
 export declare const getStoredRect: (widget: object) => StoredRect | undefined;
 export declare const setStoredOffset: (widget: object, dx: number, dy: number, matrix?: Transform2D | null) => void;
+export declare const setStoredDrivenBox: (widget: object, box: DrivenBox) => void;
+export declare const clearStoredDrivenBox: (widget: object) => void;
+/**
+ * The box an animation is currently driving this widget to, if any. Read by
+ * the container's own `measure` as well as by its parent's `allocate`, so the
+ * widget's size request agrees with the size it is being given.
+ */
+export declare const getStoredDrivenBox: (widget: object) => DrivenBox | undefined;
+export declare const setStoredLayoutOffset: (widget: object, dx: number, dy: number) => void;
+export declare const clearStoredLayoutOffset: (widget: object) => void;
+/**
+ * Where a layout transition currently has this child, relative to the rect
+ * the engine gave it. Read when a transition is INTERRUPTED by another one:
+ * the new run has to start from where the child is being drawn, not from
+ * where it was before the first run began.
+ */
+export declare const getStoredLayoutOffset: (widget: object) => {
+    dx: number;
+    dy: number;
+};
 export declare const getStoredOffset: (widget: object) => StoredOffset;
 /**
  * Stores a child's whole RN `transform` array, split the way the allocate