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

package/dist/components/use-focus.js

@@ -0,0 +1,116 @@
+// Focus, in the shape React Native already has for it.
+//
+// `docs/research/react-native-first-showcase.md` listed focus STATE as one
+// of the three things no style closes: `outlineWidth` and friends made the
+// ring drawable, but nothing told a `View` it was focused, so the ring could
+// never be asked for. Nothing here is invented to fix that — RN has all of
+// the surface already, on the platforms that have a focus model:
+//
+// - `focusable` is on RN's own `View` (Android, Windows);
+// - `onFocus`/`onBlur` are on `View` in react-native-web and
+//   react-native-windows (RN core has them on TextInput and the touchables);
+// - react-native-web's `Pressable` state callback is
+//   `{focused, hovered, pressed}` — this platform already added `hovered`
+//   to that callback for the same reason, so `focused` is the same move.
+//
+// The second half of the finding — "RN has no focus-traversal model on the
+// desktop at all" — needs no model of ours either. `gtk_widget_set_focusable`
+// puts the widget into GTK's focus chain, and GTK's directional keynav then
+// moves focus between focusable siblings with Tab and the arrow keys. That
+// is precisely the behaviour `GtkListBox` was supplying to `AdwActionRow`s,
+// obtained by making the boxes focusable rather than by reimplementing it.
+import { useLayoutEffect, useRef } from "react";
+import { Gtk } from "../gtkx/bridge/index";
+/**
+ * Reports GTK focus enter/leave as RN's `onFocus`/`onBlur`.
+ *
+ * Attached imperatively even though rc.3 has a declarative `controllers`
+ * slot: one wiring per widget, handlers read from a ref, so changing
+ * `onFocus`/`onBlur` never re-creates the controller mid-interaction — the
+ * same reasoning as `Pressable`'s gestures.
+ */
+export const useFocusController = (widgetRef, onFocus, onBlur) => {
+    // Written during render on purpose: the effect below runs once and must
+    // see the latest handlers, and there is no commit between this render and
+    // a focus signal that could deliver them any other way.
+    const handlers = useRef({ onFocus, onBlur });
+    handlers.current = { onFocus, onBlur };
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const focus = new Gtk.EventControllerFocus();
+        focus.on("enter", () => handlers.current.onFocus?.());
+        focus.on("leave", () => handlers.current.onBlur?.());
+        widget.addController(focus);
+        return () => {
+            widget.removeController(focus);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+/**
+ * RN's `focusable`: puts the widget into GTK's focus chain (or takes it
+ * out), which is what makes Tab and the arrow keys reach it.
+ */
+export const useFocusable = (widgetRef, focusable) => {
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        // `focusable`, NOT `can-focus`. The two read alike and are not: GTK4's
+        // `can-focus` governs the whole SUBTREE (it defaults to true, and
+        // clearing it would make every descendant unreachable too), while
+        // `focusable` is about this widget alone — which is what RN's prop
+        // means.
+        widget.setFocusable(focusable);
+    }, [widgetRef, focusable]);
+};
+// GDK keyvals for the two keys that activate a focused control everywhere
+// RN runs (gdk/gdkkeysyms.h). Spelled out rather than imported: gtkx binds
+// no keysym table, and three constants do not justify one.
+const KEY_RETURN = 0xff_0d;
+const KEY_KP_ENTER = 0xff_8d;
+const KEY_SPACE = 0x20;
+/**
+ * Enter/Space on a focused widget, reported through `onActivate`.
+ *
+ * Without this `focusable` would be decorative: a control you can Tab to
+ * and not operate is worse than one you cannot reach. Web and Android both
+ * fire a press for these two keys, so a `Pressable` here does too.
+ *
+ * Returns `true` from the GTK handler when it acted, so the key does not
+ * also travel on to a parent's own bindings.
+ */
+export const useActivateOnKey = (widgetRef, onActivate) => {
+    const handler = useRef(onActivate);
+    handler.current = onActivate;
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const keys = new Gtk.EventControllerKey();
+        keys.on("key-pressed", (keyval) => {
+            if (keyval !== KEY_RETURN &&
+                keyval !== KEY_KP_ENTER &&
+                keyval !== KEY_SPACE) {
+                return false;
+            }
+            const activate = handler.current;
+            if (!activate) {
+                return false;
+            }
+            activate();
+            return true;
+        });
+        widget.addController(keys);
+        return () => {
+            widget.removeController(keys);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+//# sourceMappingURL=use-focus.js.map

package/dist/components/use-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus.js","sourceRoot":"","sources":["../../src/components/use-focus.ts"],"names":[],"mappings":"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","sourcesContent":["// Focus, in the shape React Native already has for it.\n//\n// `docs/research/react-native-first-showcase.md` listed focus STATE as one\n// of the three things no style closes: `outlineWidth` and friends made the\n// ring drawable, but nothing told a `View` it was focused, so the ring could\n// never be asked for. Nothing here is invented to fix that — RN has all of\n// the surface already, on the platforms that have a focus model:\n//\n// - `focusable` is on RN's own `View` (Android, Windows);\n// - `onFocus`/`onBlur` are on `View` in react-native-web and\n//   react-native-windows (RN core has them on TextInput and the touchables);\n// - react-native-web's `Pressable` state callback is\n//   `{focused, hovered, pressed}` — this platform already added `hovered`\n//   to that callback for the same reason, so `focused` is the same move.\n//\n// The second half of the finding — \"RN has no focus-traversal model on the\n// desktop at all\" — needs no model of ours either. `gtk_widget_set_focusable`\n// puts the widget into GTK's focus chain, and GTK's directional keynav then\n// moves focus between focusable siblings with Tab and the arrow keys. That\n// is precisely the behaviour `GtkListBox` was supplying to `AdwActionRow`s,\n// obtained by making the boxes focusable rather than by reimplementing it.\nimport { useLayoutEffect, useRef, type RefObject } from \"react\"\nimport { Gtk } from \"../gtkx/bridge/index\"\n\n/**\n * Reports GTK focus enter/leave as RN's `onFocus`/`onBlur`.\n *\n * Attached imperatively even though rc.3 has a declarative `controllers`\n * slot: one wiring per widget, handlers read from a ref, so changing\n * `onFocus`/`onBlur` never re-creates the controller mid-interaction — the\n * same reasoning as `Pressable`'s gestures.\n */\nexport const useFocusController = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  onFocus?: () => void,\n  onBlur?: () => void,\n): void => {\n  // Written during render on purpose: the effect below runs once and must\n  // see the latest handlers, and there is no commit between this render and\n  // a focus signal that could deliver them any other way.\n  const handlers = useRef({ onFocus, onBlur })\n  handlers.current = { onFocus, onBlur }\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const focus = new Gtk.EventControllerFocus()\n    focus.on(\"enter\", () => handlers.current.onFocus?.())\n    focus.on(\"leave\", () => handlers.current.onBlur?.())\n    widget.addController(focus)\n    return () => {\n      widget.removeController(focus)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n\n/**\n * RN's `focusable`: puts the widget into GTK's focus chain (or takes it\n * out), which is what makes Tab and the arrow keys reach it.\n */\nexport const useFocusable = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  focusable: boolean,\n): void => {\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    // `focusable`, NOT `can-focus`. The two read alike and are not: GTK4's\n    // `can-focus` governs the whole SUBTREE (it defaults to true, and\n    // clearing it would make every descendant unreachable too), while\n    // `focusable` is about this widget alone — which is what RN's prop\n    // means.\n    widget.setFocusable(focusable)\n  }, [widgetRef, focusable])\n}\n\n// GDK keyvals for the two keys that activate a focused control everywhere\n// RN runs (gdk/gdkkeysyms.h). Spelled out rather than imported: gtkx binds\n// no keysym table, and three constants do not justify one.\nconst KEY_RETURN = 0xff_0d\nconst KEY_KP_ENTER = 0xff_8d\nconst KEY_SPACE = 0x20\n\n/**\n * Enter/Space on a focused widget, reported through `onActivate`.\n *\n * Without this `focusable` would be decorative: a control you can Tab to\n * and not operate is worse than one you cannot reach. Web and Android both\n * fire a press for these two keys, so a `Pressable` here does too.\n *\n * Returns `true` from the GTK handler when it acted, so the key does not\n * also travel on to a parent's own bindings.\n */\nexport const useActivateOnKey = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  onActivate?: () => void,\n): void => {\n  const handler = useRef(onActivate)\n  handler.current = onActivate\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const keys = new Gtk.EventControllerKey()\n    keys.on(\"key-pressed\", (keyval: number) => {\n      if (\n        keyval !== KEY_RETURN &&\n        keyval !== KEY_KP_ENTER &&\n        keyval !== KEY_SPACE\n      ) {\n        return false\n      }\n      const activate = handler.current\n      if (!activate) {\n        return false\n      }\n      activate()\n      return true\n    })\n    widget.addController(keys)\n    return () => {\n      widget.removeController(keys)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n"]}

package/dist/components/use-layout-child.d.ts

@@ -2,7 +2,7 @@ import { type RefObject } from "react";
 import type { LayoutNode } from "../layout/index";
 import { StyleSheet } from "../style/index";
 import type { LayoutStyle, MeasureFn, StyleProp, VisualStyle } from "../contracts";
-import { type Gtk } from "../gtkx/bridge/index";
+import { Gtk } from "../gtkx/bridge/index";
 import { type HostNode } from "./host-node";
 export type LayoutEvent = {
     nativeEvent: {
@@ -20,6 +20,7 @@ export type LayoutChildOptions = {
     measure?: MeasureFn;
     measureFromWidget?: boolean;
     extraLayout?: LayoutStyle;
+    alwaysClips?: boolean;
 };
 export type LayoutChild = {
     host: HostNode;
@@ -28,6 +29,17 @@ export type LayoutChild = {
     visual: VisualStyle;
     cssClass: string | null;
 };
+/**
+ * The shadow-tree node laying out this widget, or undefined for a widget that
+ * is not a layout child of any container (a nested layout root, a raw GTK
+ * widget in a slot).
+ *
+ * The reverse of what `syncChildOrder` uses it for, and the same map: an
+ * animated size has to walk the driven node's DESCENDANTS, which it can only
+ * reach through the widget tree, and pairing each widget back to its node is
+ * what keeps that walk honest about which children belong to which container.
+ */
+export declare const nodeForWidget: (widget: Gtk.Widget) => LayoutNode | undefined;
 export declare const useLayoutChild: (widgetRef: RefObject<Gtk.Widget | null>, options: LayoutChildOptions) => LayoutChild;
 export type RnContainerOptions = {
     measure?: (orientation: "horizontal" | "vertical", forSize: number) => number;

package/dist/components/use-layout-child.js

@@ -1,15 +1,96 @@
 import { useLayoutEffect, useRef, useState } from "react";
 import { splitStyle, StyleSheet } from "../style/index";
 import { defaultCssRegistry } from "../style/registry.gtkx";
-import { allocateChild, attachRnLayout, detachRnLayout, measureWidget, queueAllocate, queueResize, } from "../gtkx/bridge/index";
+import { allocateChild, attachRnLayout, cacheChildOrder, detachRnLayout, Gtk, invalidateZOrder, measureWidget, queueAllocate, queueResize, setZIndex, } from "../gtkx/bridge/index";
 import { perfAddTime, perfBurst, perfCount, perfEnabled, perfNow, } from "../perf";
 import { useHostNode } from "./host-node";
-import { deferDuringAllocate, getStoredOffset, getStoredRect, setStoredRect, setStoredTransform, } from "./rect-store";
+import { deferDuringAllocate, getStoredDrivenBox, getStoredOffset, getStoredRect, setStoredRect, setStoredTransform, } from "./rect-store";
+import { deferUntilReleased } from "./widget-retention";
 // Perf: sizeAllocate recurses synchronously into child containers, so a
 // naive per-pass timer double-counts nested passes. Track depth and time
 // only the outermost (top-level) allocate — that is the real wall time GTK
 // spends in OUR layout code for the frame.
 let perfAllocDepth = 0;
+// RN's `overflow` onto GTK's. It is the one style that has to reach BOTH
+// halves of the pipeline: Yoga reads it while measuring (see
+// layout/apply-style.ts, which keeps setting it on the node), and the widget
+// needs it to clip paint and picking — GTK4 CSS has no `overflow` property,
+// so unlike every other visual style this one is a widget call rather than a
+// declaration.
+//
+// `scroll` clips exactly like `hidden`, which is what RN itself does: a
+// `View` is not made scrollable by a style on either platform (iOS sets
+// `clipsToBounds` for any non-visible overflow, Android's ReactViewGroup
+// clips for SCROLL and HIDDEN alike) — only a `ScrollView` scrolls. Mapping
+// it to VISIBLE instead would be the silent lie this replaces.
+const WIDGET_OVERFLOW = {
+    visible: Gtk.Overflow.VISIBLE,
+    hidden: Gtk.Overflow.HIDDEN,
+    scroll: Gtk.Overflow.HIDDEN,
+};
+// Which Yoga node lays out which widget. The reconciler talks in widgets and
+// the shadow tree talks in nodes, and syncChildOrder below is the one place
+// that has to translate between them.
+const nodesByWidget = new WeakMap();
+/**
+ * The shadow-tree node laying out this widget, or undefined for a widget that
+ * is not a layout child of any container (a nested layout root, a raw GTK
+ * widget in a slot).
+ *
+ * The reverse of what `syncChildOrder` uses it for, and the same map: an
+ * animated size has to walk the driven node's DESCENDANTS, which it can only
+ * reach through the widget tree, and pairing each widget back to its node is
+ * what keeps that walk honest about which children belong to which container.
+ */
+export const nodeForWidget = (widget) => nodesByWidget.get(widget);
+/**
+ * Puts a container's shadow tree back into its widgets' order.
+ *
+ * WHY this is needed, and why insertion order alone was not enough. A child
+ * picks its Yoga index once, on mount, from where the reconciler put its
+ * widget — which is right for a child that APPEARS mid-list, and blind to a
+ * child that MOVES. React reorders keyed siblings by moving the existing
+ * fibers, so nothing mounts and nothing unmounts: the widgets end up in the
+ * new order and the Yoga nodes stay in the old one, and since the rects come
+ * from the nodes, the rows redraw exactly where they were. Every list that
+ * can be sorted, filtered into a different order, or dragged into one was
+ * silently affected — found by dragging a row in `examples/tasks-nav` after
+ * its rows were rewritten in React Native (a `GtkListBox` was doing its own
+ * layout before, so nothing had ever exercised this).
+ *
+ * Runs after every commit of the container, and does nothing at all unless
+ * the two orders actually disagree — one pointer comparison per child.
+ */
+const syncChildOrder = (parentWidget, parent) => {
+    const ordered = [];
+    let moved = false;
+    let child = parentWidget.getFirstChild();
+    while (child !== null) {
+        const node = nodesByWidget.get(child);
+        // Widgets that are not layout children of THIS container are skipped in
+        // both orders: a nested layout root, or a raw GTK widget a slot holds.
+        if (node !== undefined && node.parent === parent) {
+            if (parent.children[ordered.length] !== node) {
+                moved = true;
+            }
+            ordered.push(node);
+        }
+        child = child.getNextSibling();
+    }
+    // A disagreement in COUNT is not a reorder — it means a child is
+    // mid-mount, or something in this container lays itself out. Re-sorting
+    // against a partial view would be worse than leaving it alone.
+    if (!moved || ordered.length !== parent.children.length) {
+        return;
+    }
+    for (let index = 0; index < ordered.length; index += 1) {
+        const node = ordered[index];
+        if (parent.children[index] !== node) {
+            parent.removeChild(node);
+            parent.insertChild(node, index);
+        }
+    }
+};
 // Shared plumbing for every leaf/container component: owns one LayoutNode,
 // keeps it in the parent's shadow tree for the component lifetime, applies
 // the layout half of the style and commits Yoga rects into the rect store,
@@ -32,6 +113,43 @@ export const useLayoutChild = (widgetRef, options) => {
         node.setStyle(JSON.parse(layoutKey));
     }, [node, layoutKey]);
     const cssClass = defaultCssRegistry.getClassName(visual);
+    // The GTK half of `overflow`. Yoga has had it since the beginning and
+    // nothing reached the widget, so the style was accepted and painted
+    // nothing — `overflow: "hidden"` on a container was a no-op. GTK clips to
+    // the CSS padding box, so `borderRadius` shapes the clip for free (a
+    // rounded-clip node rather than a rectangular one) and both paint and
+    // `gtk_widget_pick()` follow it.
+    const overflow = options.alwaysClips
+        ? "hidden"
+        : (flat?.overflow ?? "visible");
+    useLayoutEffect(() => {
+        widgetRef.current?.setOverflow(WIDGET_OVERFLOW[overflow]);
+    }, [widgetRef, overflow]);
+    // RN's `zIndex`, which is neither a Yoga input nor a CSS declaration: the
+    // PARENT container sorts its snapshot and its picking by it
+    // (gtkx/bridge/view-box.ts). Applied unconditionally, as RN does — CSS
+    // needs a non-static `position` for `z-index` to take effect and RN does
+    // not, so nothing here consults `position`. `undefined` is 0, and negative
+    // values are legal (they paint below unraised siblings).
+    const zIndex = flat?.zIndex ?? 0;
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        setZIndex(widget, zIndex);
+        return () => {
+            // Cleared before the widget leaves the tree, so the container that is
+            // losing it drops its cached order and the process-wide "anything
+            // raised at all" counter comes back down to zero.
+            setZIndex(widget, 0);
+            const parentWidget = host.widgetRef.current;
+            if (parentWidget) {
+                invalidateZOrder(parentWidget);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [zIndex]);
     // RN transforms are visual only: the widget keeps the box Yoga gave it, so
     // a transform never touches the shadow tree — it only asks the parent
     // container to run its allocate hook again. Keyed on the serialized array
@@ -59,6 +177,16 @@ export const useLayoutChild = (widgetRef, options) => {
         const widget = widgetRef.current;
         const parentWidget = host.widgetRef.current;
         let index = parent.children.length;
+        if (widget) {
+            // Published so the container can put the shadow tree back into widget
+            // order after React has MOVED an existing child — see syncChildOrder.
+            // Outside the `parentWidget` guard below on purpose: on a first mount
+            // the PARENT's ref is not attached yet (React attaches host refs
+            // bottom-up, so a child's layout effect runs before its container's
+            // widget exists), and a registration skipped there would never happen
+            // again — the effect runs once.
+            nodesByWidget.set(widget, node);
+        }
         if (widget && parentWidget) {
             let position = 0;
             let sibling = parentWidget.getFirstChild();
@@ -122,7 +250,19 @@ export const useLayoutChild = (widgetRef, options) => {
             }
         });
         return () => {
+            // `widget`, not `widgetRef.current`: by cleanup time the ref may
+            // already have been detached, and the entry to drop is the one this
+            // effect registered.
+            if (widget) {
+                nodesByWidget.delete(widget);
+            }
             node.setCommit(null);
+            // Removed from the shadow tree and freed even when the widget is being
+            // RETAINED for an exit animation (see ./widget-retention): the siblings
+            // must close the gap immediately — an exiting widget does not hold its
+            // space, it draws over the space closing behind it — and the rect its
+            // container keeps reporting afterwards is `lastRect`, a plain JS value
+            // that outlives the Yoga node it came from.
             parent.removeChild(node);
             node.free();
         };
@@ -193,6 +333,22 @@ export const useLayoutChild = (widgetRef, options) => {
 export const useRnContainer = (widgetRef, node, options) => {
     const optionsRef = useRef(options);
     optionsRef.current = options;
+    // Deliberately no dependency array: a MOVE mounts nothing and unmounts
+    // nothing, so there is no other commit this could key off. Children's
+    // layout effects run before their container's, so by the time this fires
+    // every child of this commit has registered its node. See syncChildOrder.
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (widget) {
+            syncChildOrder(widget, node);
+            // The paint order caches a child list, and a commit is the only thing
+            // that can change one without any zIndex being written — a mount, an
+            // unmount, or a MOVE. Dropping it here is a WeakMap delete on a
+            // container that has a raised child and nothing at all on one that does
+            // not (`invalidateZOrder` only redraws when there was a cache to drop).
+            invalidateZOrder(widget);
+        }
+    });
     useLayoutEffect(() => {
         const widget = widgetRef.current;
         if (!widget) {
@@ -204,8 +360,16 @@ export const useRnContainer = (widgetRef, node, options) => {
                 if (custom) {
                     return custom(orientation, forSize);
                 }
+                // A driven size wins over the committed one here as well as in the
+                // parent's allocate, so the container asks GTK for the box it is
+                // actually being given. Otherwise a size animated DOWNWARD would
+                // under-allocate a widget against its own stated minimum every frame.
                 const rect = node.getRect();
-                return Math.round((orientation === "horizontal" ? rect?.width : rect?.height) ?? 0);
+                const driven = getStoredDrivenBox(widget);
+                const size = orientation === "horizontal"
+                    ? (driven?.width ?? rect?.width)
+                    : (driven?.height ?? rect?.height);
+                return Math.round(size ?? 0);
             },
             allocate: (width, height) => {
                 const start = perfEnabled ? perfNow() : 0;
@@ -213,15 +377,28 @@ export const useRnContainer = (widgetRef, node, options) => {
                 optionsRef.current?.beforeAllocate?.(width, height);
                 let child = widget.getFirstChild();
                 let children = 0;
+                // Collected while this loop walks the sibling chain anyway, and handed
+                // to the paint pass, which would otherwise have to walk it again: each
+                // getNextSibling() mints a native wrapper and is the single most
+                // expensive thing a JS snapshot vfunc does (docs/research/z-index.md).
+                const order = [];
                 while (child) {
+                    order.push(child);
                     const rect = getStoredRect(child);
                     if (rect) {
                         const offset = getStoredOffset(child);
-                        allocateChild(child, rect.x + offset.dx, rect.y + offset.dy, rect.width, rect.height, offset.matrix);
+                        // The engine's rect, with whatever an animation is currently
+                        // driving laid over it field by field: the animated node
+                        // overrides only the axis being driven, its descendants override
+                        // the whole rect because re-laying the subtree out is what
+                        // decides them. The transform composes on top either way.
+                        const driven = offset.driven;
+                        allocateChild(child, (driven?.x ?? rect.x) + offset.dx, (driven?.y ?? rect.y) + offset.dy, driven?.width ?? rect.width, driven?.height ?? rect.height, offset.matrix);
                         children += 1;
                     }
                     child = child.getNextSibling();
                 }
+                cacheChildOrder(widget, order);
                 perfAllocDepth -= 1;
                 if (perfEnabled) {
                     perfCount("gtk.allocPass");
@@ -235,7 +412,13 @@ export const useRnContainer = (widgetRef, node, options) => {
             },
         });
         return () => {
-            detachRnLayout(widget);
+            // Deferred inside a retained subtree for the same reason the Yoga node
+            // is: without its RnGtkxLayout the container falls back to GtkBox's own
+            // layout and the children of a widget that is still visible re-stack
+            // themselves mid-animation.
+            if (!deferUntilReleased(widget, () => detachRnLayout(widget))) {
+                detachRnLayout(widget);
+            }
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/dist/components/use-layout-child.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-layout-child.js","sourceRoot":"","sources":["../../src/components/use-layout-child.ts"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState, type RefObject } from \"react\"\nimport type { LayoutNode } from \"../layout/index\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type {\n  LayoutStyle,\n  MeasureFn,\n  Rect,\n  StyleProp,\n  TransformPart,\n  VisualStyle,\n} from \"../contracts\"\nimport {\n  allocateChild,\n  attachRnLayout,\n  detachRnLayout,\n  measureWidget,\n  queueAllocate,\n  queueResize,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\nimport {\n  perfAddTime,\n  perfBurst,\n  perfCount,\n  perfEnabled,\n  perfNow,\n} from \"../perf\"\nimport { useHostNode, type HostNode } from \"./host-node\"\nimport {\n  deferDuringAllocate,\n  getStoredOffset,\n  getStoredRect,\n  setStoredRect,\n  setStoredTransform,\n} from \"./rect-store\"\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: { x: number; y: number; width: number; height: number }\n  }\n}\n\n// Perf: sizeAllocate recurses synchronously into child containers, so a\n// naive per-pass timer double-counts nested passes. Track depth and time\n// only the outermost (top-level) allocate — that is the real wall time GTK\n// spends in OUR layout code for the frame.\nlet perfAllocDepth = 0\n\nexport type LayoutChildOptions = {\n  style: StyleProp | undefined\n  onLayout: ((event: LayoutEvent) => void) | undefined\n  measure?: MeasureFn\n  // Leaves with intrinsic GTK sizes (Entry, Switch, Spinner) measure their\n  // own widget so Yoga reserves exactly what the theme will draw.\n  measureFromWidget?: boolean\n  extraLayout?: LayoutStyle\n}\n\nexport type LayoutChild = {\n  host: HostNode\n  node: LayoutNode\n  flat: ReturnType<typeof StyleSheet.flatten>\n  visual: VisualStyle\n  cssClass: string | null\n}\n\n// Shared plumbing for every leaf/container component: owns one LayoutNode,\n// keeps it in the parent's shadow tree for the component lifetime, applies\n// the layout half of the style and commits Yoga rects into the rect store,\n// where the parent container's RnGtkxLayout allocate() picks them up.\nexport const useLayoutChild = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  options: LayoutChildOptions,\n): LayoutChild => {\n  const host = useHostNode()\n\n  // useState's lazy initializer is guaranteed once-per-instance even under\n  // the React Compiler — a lazy ref here got its creation memoized ACROSS\n  // component instances, sharing one Yoga node and double-freeing it.\n  const [node] = useState<LayoutNode>(() => host.engine.createNode())\n\n  const flat = StyleSheet.flatten(options.style)\n  const { layout, visual } = splitStyle(flat)\n  const effectiveLayout = options.extraLayout\n    ? { ...layout, ...options.extraLayout }\n    : layout\n\n  // Re-apply layout style only when it actually changed (keyed effect) —\n  // setStyle dirties the whole tree.\n  const layoutKey = JSON.stringify(effectiveLayout)\n  useLayoutEffect(() => {\n    node.setStyle(JSON.parse(layoutKey) as LayoutStyle)\n  }, [node, layoutKey])\n\n  const cssClass = defaultCssRegistry.getClassName(visual)\n\n  // RN transforms are visual only: the widget keeps the box Yoga gave it, so\n  // a transform never touches the shadow tree — it only asks the parent\n  // container to run its allocate hook again. Keyed on the serialized array\n  // so a re-render with the same transform costs nothing.\n  // (Animated.View owns its own transform and strips it from the static\n  // style before it gets here, so the two writers never race.)\n  const transformKey = JSON.stringify(visual.transform ?? null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    setStoredTransform(widget, JSON.parse(transformKey) as TransformPart[])\n    const parentWidget = host.widgetRef.current\n    if (parentWidget) {\n      queueAllocate(parentWidget)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [transformKey])\n\n  useLayoutEffect(() => {\n    const parent = host.node\n    // The reconciler has already attached our widget in JSX order, so its\n    // sibling position is the correct Yoga index — this keeps the shadow tree\n    // ordered even for mid-list mounts (conditional children, list inserts).\n    const widget = widgetRef.current\n    const parentWidget = host.widgetRef.current\n    let index = parent.children.length\n    if (widget && parentWidget) {\n      let position = 0\n      let sibling = parentWidget.getFirstChild()\n      while (sibling !== null && sibling !== widget) {\n        position += 1\n        sibling = sibling.getNextSibling()\n      }\n      if (sibling === widget) {\n        index = Math.min(position, parent.children.length)\n      }\n    }\n    parent.insertChild(node, index)\n    node.setCommit((rect: Rect) => {\n      const widget = widgetRef.current\n      const parentWidget = host.widgetRef.current\n      if (!widget || !parentWidget) {\n        return\n      }\n      const previous = getStoredRect(widget)\n      // A commit does not imply a change. The engine may hand us the rect a\n      // widget already has — nodes carrying a measure function are visited\n      // even when Yoga did not move them — and queueing an allocation for\n      // those makes GTK re-allocate and re-snapshot the container for nothing.\n      //\n      // `rect.skip` counts how often this guard actually fires and\n      // `rect.change` how often it does not, because a guard nobody can see\n      // firing is a guard nobody can attribute a measurement to: this one was\n      // once credited with a large maximized-window win that a later, properly\n      // geometry-controlled run could not reproduce (docs/research/\n      // scroll-performance.md, round six). Keep it — it is correct and free —\n      // but read the counter before crediting it with anything.\n      const unchanged =\n        previous !== undefined &&\n        previous.x === rect.x &&\n        previous.y === rect.y &&\n        previous.width === rect.width &&\n        previous.height === rect.height\n      if (perfEnabled) {\n        perfCount(unchanged ? \"rect.skip\" : \"rect.change\")\n      }\n      if (unchanged) {\n        return\n      }\n      setStoredRect(widget, rect)\n      const sizeChanged =\n        !previous ||\n        previous.width !== rect.width ||\n        previous.height !== rect.height\n      const queue = (): void => {\n        if (sizeChanged) {\n          // A size change invalidates this widget's cached measure (nested\n          // managers, ScrolledWindow ranges) and re-allocates the ancestors.\n          queueResize(widget)\n        } else {\n          // Pure move: the parent just needs another allocation pass. GTK\n          // dedupes queued allocates, so per-child calls batch into one.\n          queueAllocate(parentWidget)\n        }\n      }\n      if (!deferDuringAllocate(widget, queue)) {\n        queue()\n      }\n    })\n    return () => {\n      node.setCommit(null)\n      parent.removeChild(node)\n      node.free()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onLayout = options.onLayout\n  useLayoutEffect(() => {\n    node.setOnLayout(\n      onLayout\n        ? (rect: Rect) => {\n            onLayout({ nativeEvent: { layout: rect } })\n          }\n        : null,\n    )\n  }, [node, onLayout])\n\n  // The explicit return type keeps the inner params contextually typed: with a\n  // bare lazy initializer TS may match the outer arrow against MeasureFn\n  // itself (useState accepts S | () => S) and drop the context.\n  const [widgetMeasure] = useState<MeasureFn>(\n    (): MeasureFn => (width, widthMode) => {\n      const widget = widgetRef.current\n      if (!widget) {\n        return { width: 0, height: 0 }\n      }\n      const { minimum, natural } = measureWidget(widget, \"horizontal\")\n      // Floor at the widget's own minimum width, not at 1 — see the same\n      // clamp in text.tsx's measure for why: gtk_widget_measure() enforces\n      // this floor internally regardless of what we request (warning while\n      // it does), so anything below `minimum` was never actually honored.\n      const used =\n        widthMode === \"undefined\"\n          ? natural\n          : Math.min(natural, Math.max(minimum, Math.floor(width)))\n      return {\n        width: used,\n        height: measureWidget(widget, \"vertical\", used).natural,\n      }\n    },\n  )\n  const measure =\n    options.measure ?? (options.measureFromWidget ? widgetMeasure : undefined)\n  useLayoutEffect(() => {\n    if (!measure) {\n      return\n    }\n    node.setMeasureFn(measure)\n    // Widgets measured before their window is mapped report zero (no realized\n    // theme context yet, unlike offscreen probes) and Yoga caches it —\n    // invalidate once the widget actually maps.\n    const widget = widgetRef.current\n    const remeasure = (): void => {\n      node.markDirty()\n    }\n    if (options.measureFromWidget && widget) {\n      widget.on(\"map\", remeasure)\n    }\n    return () => {\n      if (options.measureFromWidget && widget) {\n        widget.off(\"map\", remeasure)\n      }\n      // Cleared by free() on unmount; explicit unset only when measure is\n      // removed while mounted.\n      node.setMeasureFn(null)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node, measure])\n\n  return { host, node, flat, visual, cssClass }\n}\n\nexport type RnContainerOptions = {\n  // Overrides the default engine-rect measure (the window root reports 0 so\n  // the window can shrink freely below the current content size; the\n  // intrinsic root measures its content through Yoga, honoring forSize for\n  // height-for-width).\n  measure?: (orientation: \"horizontal\" | \"vertical\", forSize: number) => number\n  // Runs before children are placed — the window root syncs the engine\n  // viewport to the actual allocation here.\n  beforeAllocate?: (width: number, height: number) => void\n}\n\n// Containers (Root, View, Animated.View, ScrollView content) drive their GTK\n// side with an RnGtkxLayout: measure() reports the engine rect of `node`\n// (minimum == natural — GTK minimums of children never leak upward), and\n// allocate() places every child widget at exactly its stored engine rect\n// plus the Animated offset.\nexport const useRnContainer = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  node: LayoutNode,\n  options?: RnContainerOptions,\n): void => {\n  const optionsRef = useRef<RnContainerOptions | undefined>(options)\n  optionsRef.current = options\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    attachRnLayout(widget, {\n      measure: (orientation, forSize) => {\n        const custom = optionsRef.current?.measure\n        if (custom) {\n          return custom(orientation, forSize)\n        }\n        const rect = node.getRect()\n        return Math.round(\n          (orientation === \"horizontal\" ? rect?.width : rect?.height) ?? 0,\n        )\n      },\n      allocate: (width, height) => {\n        const start = perfEnabled ? perfNow() : 0\n        perfAllocDepth += 1\n        optionsRef.current?.beforeAllocate?.(width, height)\n        let child = widget.getFirstChild()\n        let children = 0\n        while (child) {\n          const rect = getStoredRect(child)\n          if (rect) {\n            const offset = getStoredOffset(child)\n            allocateChild(\n              child,\n              rect.x + offset.dx,\n              rect.y + offset.dy,\n              rect.width,\n              rect.height,\n              offset.matrix,\n            )\n            children += 1\n          }\n          child = child.getNextSibling()\n        }\n        perfAllocDepth -= 1\n        if (perfEnabled) {\n          perfCount(\"gtk.allocPass\")\n          perfCount(\"gtk.allocChild\", children)\n          if (perfAllocDepth === 0) {\n            const elapsed = perfNow() - start\n            perfAddTime(\"gtk.allocTop\", elapsed)\n            perfBurst(\"gtk.allocMsPerFrame\", elapsed)\n          }\n        }\n      },\n    })\n    return () => {\n      detachRnLayout(widget)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n"]}
+{"version":3,"file":"use-layout-child.js","sourceRoot":"","sources":["../../src/components/use-layout-child.ts"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState, type RefObject } from \"react\"\nimport type { LayoutNode } from \"../layout/index\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type {\n  LayoutStyle,\n  MeasureFn,\n  Rect,\n  StyleProp,\n  TransformPart,\n  VisualStyle,\n} from \"../contracts\"\nimport {\n  allocateChild,\n  attachRnLayout,\n  cacheChildOrder,\n  detachRnLayout,\n  Gtk,\n  invalidateZOrder,\n  measureWidget,\n  queueAllocate,\n  queueResize,\n  setZIndex,\n} from \"../gtkx/bridge/index\"\nimport {\n  perfAddTime,\n  perfBurst,\n  perfCount,\n  perfEnabled,\n  perfNow,\n} from \"../perf\"\nimport { useHostNode, type HostNode } from \"./host-node\"\nimport {\n  deferDuringAllocate,\n  getStoredDrivenBox,\n  getStoredOffset,\n  getStoredRect,\n  setStoredRect,\n  setStoredTransform,\n} from \"./rect-store\"\nimport { deferUntilReleased } from \"./widget-retention\"\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: { x: number; y: number; width: number; height: number }\n  }\n}\n\n// Perf: sizeAllocate recurses synchronously into child containers, so a\n// naive per-pass timer double-counts nested passes. Track depth and time\n// only the outermost (top-level) allocate — that is the real wall time GTK\n// spends in OUR layout code for the frame.\nlet perfAllocDepth = 0\n\n// RN's `overflow` onto GTK's. It is the one style that has to reach BOTH\n// halves of the pipeline: Yoga reads it while measuring (see\n// layout/apply-style.ts, which keeps setting it on the node), and the widget\n// needs it to clip paint and picking — GTK4 CSS has no `overflow` property,\n// so unlike every other visual style this one is a widget call rather than a\n// declaration.\n//\n// `scroll` clips exactly like `hidden`, which is what RN itself does: a\n// `View` is not made scrollable by a style on either platform (iOS sets\n// `clipsToBounds` for any non-visible overflow, Android's ReactViewGroup\n// clips for SCROLL and HIDDEN alike) — only a `ScrollView` scrolls. Mapping\n// it to VISIBLE instead would be the silent lie this replaces.\nconst WIDGET_OVERFLOW: Record<\n  NonNullable<LayoutStyle[\"overflow\"]>,\n  Gtk.Overflow\n> = {\n  visible: Gtk.Overflow.VISIBLE,\n  hidden: Gtk.Overflow.HIDDEN,\n  scroll: Gtk.Overflow.HIDDEN,\n}\n\nexport type LayoutChildOptions = {\n  style: StyleProp | undefined\n  onLayout: ((event: LayoutEvent) => void) | undefined\n  measure?: MeasureFn\n  // Leaves with intrinsic GTK sizes (Entry, Switch, Spinner) measure their\n  // own widget so Yoga reserves exactly what the theme will draw.\n  measureFromWidget?: boolean\n  extraLayout?: LayoutStyle\n  // Widgets that clip whatever the style says: an under-allocated GtkLabel\n  // paints its full text past its box (Text), and a scroll viewport clips by\n  // contract (ScrollView). Both used to write the widget's overflow\n  // themselves; one writer avoids the ordering bug where a style change\n  // re-runs the generic effect and un-clips them.\n  alwaysClips?: boolean\n}\n\nexport type LayoutChild = {\n  host: HostNode\n  node: LayoutNode\n  flat: ReturnType<typeof StyleSheet.flatten>\n  visual: VisualStyle\n  cssClass: string | null\n}\n\n// Which Yoga node lays out which widget. The reconciler talks in widgets and\n// the shadow tree talks in nodes, and syncChildOrder below is the one place\n// that has to translate between them.\nconst nodesByWidget = new WeakMap<Gtk.Widget, LayoutNode>()\n\n/**\n * The shadow-tree node laying out this widget, or undefined for a widget that\n * is not a layout child of any container (a nested layout root, a raw GTK\n * widget in a slot).\n *\n * The reverse of what `syncChildOrder` uses it for, and the same map: an\n * animated size has to walk the driven node's DESCENDANTS, which it can only\n * reach through the widget tree, and pairing each widget back to its node is\n * what keeps that walk honest about which children belong to which container.\n */\nexport const nodeForWidget = (widget: Gtk.Widget): LayoutNode | undefined =>\n  nodesByWidget.get(widget)\n\n/**\n * Puts a container's shadow tree back into its widgets' order.\n *\n * WHY this is needed, and why insertion order alone was not enough. A child\n * picks its Yoga index once, on mount, from where the reconciler put its\n * widget — which is right for a child that APPEARS mid-list, and blind to a\n * child that MOVES. React reorders keyed siblings by moving the existing\n * fibers, so nothing mounts and nothing unmounts: the widgets end up in the\n * new order and the Yoga nodes stay in the old one, and since the rects come\n * from the nodes, the rows redraw exactly where they were. Every list that\n * can be sorted, filtered into a different order, or dragged into one was\n * silently affected — found by dragging a row in `examples/tasks-nav` after\n * its rows were rewritten in React Native (a `GtkListBox` was doing its own\n * layout before, so nothing had ever exercised this).\n *\n * Runs after every commit of the container, and does nothing at all unless\n * the two orders actually disagree — one pointer comparison per child.\n */\nconst syncChildOrder = (parentWidget: Gtk.Widget, parent: LayoutNode): void => {\n  const ordered: LayoutNode[] = []\n  let moved = false\n  let child = parentWidget.getFirstChild()\n  while (child !== null) {\n    const node = nodesByWidget.get(child)\n    // Widgets that are not layout children of THIS container are skipped in\n    // both orders: a nested layout root, or a raw GTK widget a slot holds.\n    if (node !== undefined && node.parent === parent) {\n      if (parent.children[ordered.length] !== node) {\n        moved = true\n      }\n      ordered.push(node)\n    }\n    child = child.getNextSibling()\n  }\n  // A disagreement in COUNT is not a reorder — it means a child is\n  // mid-mount, or something in this container lays itself out. Re-sorting\n  // against a partial view would be worse than leaving it alone.\n  if (!moved || ordered.length !== parent.children.length) {\n    return\n  }\n  for (let index = 0; index < ordered.length; index += 1) {\n    const node = ordered[index]!\n    if (parent.children[index] !== node) {\n      parent.removeChild(node)\n      parent.insertChild(node, index)\n    }\n  }\n}\n\n// Shared plumbing for every leaf/container component: owns one LayoutNode,\n// keeps it in the parent's shadow tree for the component lifetime, applies\n// the layout half of the style and commits Yoga rects into the rect store,\n// where the parent container's RnGtkxLayout allocate() picks them up.\nexport const useLayoutChild = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  options: LayoutChildOptions,\n): LayoutChild => {\n  const host = useHostNode()\n\n  // useState's lazy initializer is guaranteed once-per-instance even under\n  // the React Compiler — a lazy ref here got its creation memoized ACROSS\n  // component instances, sharing one Yoga node and double-freeing it.\n  const [node] = useState<LayoutNode>(() => host.engine.createNode())\n\n  const flat = StyleSheet.flatten(options.style)\n  const { layout, visual } = splitStyle(flat)\n  const effectiveLayout = options.extraLayout\n    ? { ...layout, ...options.extraLayout }\n    : layout\n\n  // Re-apply layout style only when it actually changed (keyed effect) —\n  // setStyle dirties the whole tree.\n  const layoutKey = JSON.stringify(effectiveLayout)\n  useLayoutEffect(() => {\n    node.setStyle(JSON.parse(layoutKey) as LayoutStyle)\n  }, [node, layoutKey])\n\n  const cssClass = defaultCssRegistry.getClassName(visual)\n\n  // The GTK half of `overflow`. Yoga has had it since the beginning and\n  // nothing reached the widget, so the style was accepted and painted\n  // nothing — `overflow: \"hidden\"` on a container was a no-op. GTK clips to\n  // the CSS padding box, so `borderRadius` shapes the clip for free (a\n  // rounded-clip node rather than a rectangular one) and both paint and\n  // `gtk_widget_pick()` follow it.\n  const overflow = options.alwaysClips\n    ? \"hidden\"\n    : (flat?.overflow ?? \"visible\")\n  useLayoutEffect(() => {\n    widgetRef.current?.setOverflow(WIDGET_OVERFLOW[overflow])\n  }, [widgetRef, overflow])\n\n  // RN's `zIndex`, which is neither a Yoga input nor a CSS declaration: the\n  // PARENT container sorts its snapshot and its picking by it\n  // (gtkx/bridge/view-box.ts). Applied unconditionally, as RN does — CSS\n  // needs a non-static `position` for `z-index` to take effect and RN does\n  // not, so nothing here consults `position`. `undefined` is 0, and negative\n  // values are legal (they paint below unraised siblings).\n  const zIndex = flat?.zIndex ?? 0\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    setZIndex(widget, zIndex)\n    return () => {\n      // Cleared before the widget leaves the tree, so the container that is\n      // losing it drops its cached order and the process-wide \"anything\n      // raised at all\" counter comes back down to zero.\n      setZIndex(widget, 0)\n      const parentWidget = host.widgetRef.current\n      if (parentWidget) {\n        invalidateZOrder(parentWidget)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [zIndex])\n\n  // RN transforms are visual only: the widget keeps the box Yoga gave it, so\n  // a transform never touches the shadow tree — it only asks the parent\n  // container to run its allocate hook again. Keyed on the serialized array\n  // so a re-render with the same transform costs nothing.\n  // (Animated.View owns its own transform and strips it from the static\n  // style before it gets here, so the two writers never race.)\n  const transformKey = JSON.stringify(visual.transform ?? null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    setStoredTransform(widget, JSON.parse(transformKey) as TransformPart[])\n    const parentWidget = host.widgetRef.current\n    if (parentWidget) {\n      queueAllocate(parentWidget)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [transformKey])\n\n  useLayoutEffect(() => {\n    const parent = host.node\n    // The reconciler has already attached our widget in JSX order, so its\n    // sibling position is the correct Yoga index — this keeps the shadow tree\n    // ordered even for mid-list mounts (conditional children, list inserts).\n    const widget = widgetRef.current\n    const parentWidget = host.widgetRef.current\n    let index = parent.children.length\n    if (widget) {\n      // Published so the container can put the shadow tree back into widget\n      // order after React has MOVED an existing child — see syncChildOrder.\n      // Outside the `parentWidget` guard below on purpose: on a first mount\n      // the PARENT's ref is not attached yet (React attaches host refs\n      // bottom-up, so a child's layout effect runs before its container's\n      // widget exists), and a registration skipped there would never happen\n      // again — the effect runs once.\n      nodesByWidget.set(widget, node)\n    }\n    if (widget && parentWidget) {\n      let position = 0\n      let sibling = parentWidget.getFirstChild()\n      while (sibling !== null && sibling !== widget) {\n        position += 1\n        sibling = sibling.getNextSibling()\n      }\n      if (sibling === widget) {\n        index = Math.min(position, parent.children.length)\n      }\n    }\n    parent.insertChild(node, index)\n    node.setCommit((rect: Rect) => {\n      const widget = widgetRef.current\n      const parentWidget = host.widgetRef.current\n      if (!widget || !parentWidget) {\n        return\n      }\n      const previous = getStoredRect(widget)\n      // A commit does not imply a change. The engine may hand us the rect a\n      // widget already has — nodes carrying a measure function are visited\n      // even when Yoga did not move them — and queueing an allocation for\n      // those makes GTK re-allocate and re-snapshot the container for nothing.\n      //\n      // `rect.skip` counts how often this guard actually fires and\n      // `rect.change` how often it does not, because a guard nobody can see\n      // firing is a guard nobody can attribute a measurement to: this one was\n      // once credited with a large maximized-window win that a later, properly\n      // geometry-controlled run could not reproduce (docs/research/\n      // scroll-performance.md, round six). Keep it — it is correct and free —\n      // but read the counter before crediting it with anything.\n      const unchanged =\n        previous !== undefined &&\n        previous.x === rect.x &&\n        previous.y === rect.y &&\n        previous.width === rect.width &&\n        previous.height === rect.height\n      if (perfEnabled) {\n        perfCount(unchanged ? \"rect.skip\" : \"rect.change\")\n      }\n      if (unchanged) {\n        return\n      }\n      setStoredRect(widget, rect)\n      const sizeChanged =\n        !previous ||\n        previous.width !== rect.width ||\n        previous.height !== rect.height\n      const queue = (): void => {\n        if (sizeChanged) {\n          // A size change invalidates this widget's cached measure (nested\n          // managers, ScrolledWindow ranges) and re-allocates the ancestors.\n          queueResize(widget)\n        } else {\n          // Pure move: the parent just needs another allocation pass. GTK\n          // dedupes queued allocates, so per-child calls batch into one.\n          queueAllocate(parentWidget)\n        }\n      }\n      if (!deferDuringAllocate(widget, queue)) {\n        queue()\n      }\n    })\n    return () => {\n      // `widget`, not `widgetRef.current`: by cleanup time the ref may\n      // already have been detached, and the entry to drop is the one this\n      // effect registered.\n      if (widget) {\n        nodesByWidget.delete(widget)\n      }\n      node.setCommit(null)\n      // Removed from the shadow tree and freed even when the widget is being\n      // RETAINED for an exit animation (see ./widget-retention): the siblings\n      // must close the gap immediately — an exiting widget does not hold its\n      // space, it draws over the space closing behind it — and the rect its\n      // container keeps reporting afterwards is `lastRect`, a plain JS value\n      // that outlives the Yoga node it came from.\n      parent.removeChild(node)\n      node.free()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onLayout = options.onLayout\n  useLayoutEffect(() => {\n    node.setOnLayout(\n      onLayout\n        ? (rect: Rect) => {\n            onLayout({ nativeEvent: { layout: rect } })\n          }\n        : null,\n    )\n  }, [node, onLayout])\n\n  // The explicit return type keeps the inner params contextually typed: with a\n  // bare lazy initializer TS may match the outer arrow against MeasureFn\n  // itself (useState accepts S | () => S) and drop the context.\n  const [widgetMeasure] = useState<MeasureFn>(\n    (): MeasureFn => (width, widthMode) => {\n      const widget = widgetRef.current\n      if (!widget) {\n        return { width: 0, height: 0 }\n      }\n      const { minimum, natural } = measureWidget(widget, \"horizontal\")\n      // Floor at the widget's own minimum width, not at 1 — see the same\n      // clamp in text.tsx's measure for why: gtk_widget_measure() enforces\n      // this floor internally regardless of what we request (warning while\n      // it does), so anything below `minimum` was never actually honored.\n      const used =\n        widthMode === \"undefined\"\n          ? natural\n          : Math.min(natural, Math.max(minimum, Math.floor(width)))\n      return {\n        width: used,\n        height: measureWidget(widget, \"vertical\", used).natural,\n      }\n    },\n  )\n  const measure =\n    options.measure ?? (options.measureFromWidget ? widgetMeasure : undefined)\n  useLayoutEffect(() => {\n    if (!measure) {\n      return\n    }\n    node.setMeasureFn(measure)\n    // Widgets measured before their window is mapped report zero (no realized\n    // theme context yet, unlike offscreen probes) and Yoga caches it —\n    // invalidate once the widget actually maps.\n    const widget = widgetRef.current\n    const remeasure = (): void => {\n      node.markDirty()\n    }\n    if (options.measureFromWidget && widget) {\n      widget.on(\"map\", remeasure)\n    }\n    return () => {\n      if (options.measureFromWidget && widget) {\n        widget.off(\"map\", remeasure)\n      }\n      // Cleared by free() on unmount; explicit unset only when measure is\n      // removed while mounted.\n      node.setMeasureFn(null)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node, measure])\n\n  return { host, node, flat, visual, cssClass }\n}\n\nexport type RnContainerOptions = {\n  // Overrides the default engine-rect measure (the window root reports 0 so\n  // the window can shrink freely below the current content size; the\n  // intrinsic root measures its content through Yoga, honoring forSize for\n  // height-for-width).\n  measure?: (orientation: \"horizontal\" | \"vertical\", forSize: number) => number\n  // Runs before children are placed — the window root syncs the engine\n  // viewport to the actual allocation here.\n  beforeAllocate?: (width: number, height: number) => void\n}\n\n// Containers (Root, View, Animated.View, ScrollView content) drive their GTK\n// side with an RnGtkxLayout: measure() reports the engine rect of `node`\n// (minimum == natural — GTK minimums of children never leak upward), and\n// allocate() places every child widget at exactly its stored engine rect\n// plus the Animated offset.\nexport const useRnContainer = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  node: LayoutNode,\n  options?: RnContainerOptions,\n): void => {\n  const optionsRef = useRef<RnContainerOptions | undefined>(options)\n  optionsRef.current = options\n\n  // Deliberately no dependency array: a MOVE mounts nothing and unmounts\n  // nothing, so there is no other commit this could key off. Children's\n  // layout effects run before their container's, so by the time this fires\n  // every child of this commit has registered its node. See syncChildOrder.\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (widget) {\n      syncChildOrder(widget, node)\n      // The paint order caches a child list, and a commit is the only thing\n      // that can change one without any zIndex being written — a mount, an\n      // unmount, or a MOVE. Dropping it here is a WeakMap delete on a\n      // container that has a raised child and nothing at all on one that does\n      // not (`invalidateZOrder` only redraws when there was a cache to drop).\n      invalidateZOrder(widget)\n    }\n  })\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    attachRnLayout(widget, {\n      measure: (orientation, forSize) => {\n        const custom = optionsRef.current?.measure\n        if (custom) {\n          return custom(orientation, forSize)\n        }\n        // A driven size wins over the committed one here as well as in the\n        // parent's allocate, so the container asks GTK for the box it is\n        // actually being given. Otherwise a size animated DOWNWARD would\n        // under-allocate a widget against its own stated minimum every frame.\n        const rect = node.getRect()\n        const driven = getStoredDrivenBox(widget)\n        const size =\n          orientation === \"horizontal\"\n            ? (driven?.width ?? rect?.width)\n            : (driven?.height ?? rect?.height)\n        return Math.round(size ?? 0)\n      },\n      allocate: (width, height) => {\n        const start = perfEnabled ? perfNow() : 0\n        perfAllocDepth += 1\n        optionsRef.current?.beforeAllocate?.(width, height)\n        let child = widget.getFirstChild()\n        let children = 0\n        // Collected while this loop walks the sibling chain anyway, and handed\n        // to the paint pass, which would otherwise have to walk it again: each\n        // getNextSibling() mints a native wrapper and is the single most\n        // expensive thing a JS snapshot vfunc does (docs/research/z-index.md).\n        const order: Gtk.Widget[] = []\n        while (child) {\n          order.push(child)\n          const rect = getStoredRect(child)\n          if (rect) {\n            const offset = getStoredOffset(child)\n            // The engine's rect, with whatever an animation is currently\n            // driving laid over it field by field: the animated node\n            // overrides only the axis being driven, its descendants override\n            // the whole rect because re-laying the subtree out is what\n            // decides them. The transform composes on top either way.\n            const driven = offset.driven\n            allocateChild(\n              child,\n              (driven?.x ?? rect.x) + offset.dx,\n              (driven?.y ?? rect.y) + offset.dy,\n              driven?.width ?? rect.width,\n              driven?.height ?? rect.height,\n              offset.matrix,\n            )\n            children += 1\n          }\n          child = child.getNextSibling()\n        }\n        cacheChildOrder(widget, order)\n        perfAllocDepth -= 1\n        if (perfEnabled) {\n          perfCount(\"gtk.allocPass\")\n          perfCount(\"gtk.allocChild\", children)\n          if (perfAllocDepth === 0) {\n            const elapsed = perfNow() - start\n            perfAddTime(\"gtk.allocTop\", elapsed)\n            perfBurst(\"gtk.allocMsPerFrame\", elapsed)\n          }\n        }\n      },\n    })\n    return () => {\n      // Deferred inside a retained subtree for the same reason the Yoga node\n      // is: without its RnGtkxLayout the container falls back to GtkBox's own\n      // layout and the children of a widget that is still visible re-stack\n      // themselves mid-animation.\n      if (!deferUntilReleased(widget, () => detachRnLayout(widget))) {\n        detachRnLayout(widget)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n"]}

package/dist/components/view.d.ts

@@ -9,10 +9,13 @@ export type ViewProps = ResponderProps & {
     style?: StyleProp;
     pointerEvents?: PointerEventsValue;
     onLayout?: (event: LayoutEvent) => void;
+    focusable?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
     children?: ReactNode;
     testID?: string;
     ref?: Ref<ViewHandle>;
 };
-export declare const View: ({ style, pointerEvents, onLayout, children, testID, ref, ...responderProps }: ViewProps) => React.JSX.Element;
-export declare const SafeAreaView: ({ style, pointerEvents, onLayout, children, testID, ref, ...responderProps }: ViewProps) => React.JSX.Element;
+export declare const View: ({ style, pointerEvents, onLayout, focusable, onFocus, onBlur, children, testID, ref, ...responderProps }: ViewProps) => React.JSX.Element;
+export declare const SafeAreaView: ({ style, pointerEvents, onLayout, focusable, onFocus, onBlur, children, testID, ref, ...responderProps }: ViewProps) => React.JSX.Element;
 export declare const StatusBar: () => null;