react-native-gtkx 0.1.0-alpha.4 → 0.2.0-alpha.2

package/dist/common/widget.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Making a raw GTK widget a first-class citizen of React Native layout.
+//
+// The widgets this subpath re-exports are real GTK widgets, and GTK widgets
+// know nothing about Yoga. Dropped into a <View> as-is they would never be
+// measured or positioned, which would make "we export everything" a hollow
+// promise. `Widget` closes that gap: it gives the widget a Yoga node, applies
+// the layout half of a React Native style to it, and — this is the part that
+// matters — measures the widget itself, so it lands at the size the GTK theme
+// actually wants instead of collapsing to zero.
+//
+// The visual half of the style (background, border, radius) is applied as a
+// GTK CSS class, the same mechanism View uses.
+import { isValidElement, useContext, useRef, } from "react";
+import { HostNodeContext, SlotContext, } from "../components/host-node";
+import { useLayoutChild, } from "../components/use-layout-child";
+import { GtkBox } from "../gtkx/bridge/index";
+/**
+ * Put any GTK widget into React Native layout.
+ *
+ * ```tsx
+ * <View style={{ flexDirection: "row", gap: 8, padding: 12 }}>
+ *   <Widget style={{ flex: 1 }}>
+ *     <GtkEntry placeholderText="Search" />
+ *   </Widget>
+ *   <Widget>
+ *     <GtkButton iconName="edit-find-symbolic" />
+ *   </Widget>
+ * </View>
+ * ```
+ *
+ * The entry flexes, the button takes its natural size, both sit in the row
+ * exactly like React Native children — because to Yoga they now are.
+ *
+ * For the reverse direction (React Native content inside a GTK slot) see
+ * `SlotContent` and `IntrinsicContent`.
+ */
+export const Widget = ({ style, onLayout, children, testID }) => {
+    // The wrapper box IS the Yoga leaf, and it is measured through GTK, so the
+    // widget inside reports its natural size up to Yoga. Wrapping rather than
+    // cloning keeps the child's own ref and props untouched.
+    const boxRef = useRef(null);
+    const { cssClass } = useLayoutChild(boxRef, {
+        style,
+        onLayout,
+        // Without this a widget with no explicit size would measure as zero —
+        // the whole reason a naked GtkButton in a View looks broken.
+        measureFromWidget: true,
+    });
+    return (_jsx(GtkBox, { ref: boxRef, name: testID, cssClasses: cssClass ? [cssClass] : undefined, children: children }));
+};
+/**
+ * The same thing as {@link Widget}, without the extra component — attach the
+ * ref yourself when you already hold one.
+ *
+ * ```tsx
+ * const ref = useRef<Gtk.Button | null>(null)
+ * useWidgetLayout(ref, { style: { width: 40, height: 40 } })
+ * return <GtkButton ref={ref} iconName="open-menu-symbolic" />
+ * ```
+ *
+ * Returns the GTK CSS class produced by the visual half of the style, or
+ * null — pass it to the widget's `cssClasses` if you want backgrounds and
+ * borders from the style to apply.
+ */
+export const useWidgetLayout = (ref, options = {}) => {
+    const { cssClass } = useLayoutChild(ref, {
+        style: options.style,
+        onLayout: options.onLayout,
+        measureFromWidget: true,
+    });
+    return cssClass;
+};
+/**
+ * Give a GTK component React Native layout, keeping every prop it already
+ * has.
+ *
+ * ```tsx
+ * const Button = wrapReactNative(GtkButton)
+ *
+ * <View style={{ flexDirection: "row", gap: 8 }}>
+ *   <Button style={{ flex: 1 }} label="Save" onClicked={save} />
+ * </View>
+ * ```
+ *
+ * The result is generic in the wrapped component's props, so `label`,
+ * `onClicked` and everything else gtkx binds keep their types; `style` and
+ * `onLayout` are added on top.
+ *
+ * **Outside React Native layout it steps aside.** The same widget is often
+ * used in a pure GTK slot — a HeaderBar's `start`, a ToolbarView's `topBar` —
+ * where there is no Yoga tree to join. The wrapper detects that and renders
+ * the bare component, so one exported symbol works in both worlds.
+ */
+// A wrapped widget is a Yoga LEAF, so everything INSIDE it is GTK's
+// territory — its children and its slots alike.
+//
+// A widget SLOT is a property that takes a widget (`titleWidget`, `sheet`,
+// `sidebar`, `startChild`); a widget's content area is an ordinary child.
+// The distinction is gtkx's, it moves between releases — rc.3 took the
+// `content`/`child` props off single-child widgets and made that content a
+// child — and it has never had anything to do with layout. Both keep
+// rendering where they were written, so both keep seeing the enclosing React
+// Native layout root even though GTK has parented them somewhere else
+// entirely. Content then joins a Yoga tree whose viewport is the WINDOW
+// while GTK gives it the widget's own rectangle: laid out against one box,
+// drawn in another, and silently stealing space from a tree it was never
+// meant to be in.
+//
+// So the boundary clears the layout root on the way in. The widgets a slot
+// or a child usually holds want exactly that (it is what `WidgetContent`
+// does by hand), and React Native content entering has to bring its own root
+// — `SlotContent` to fill the area, `IntrinsicContent` to size the area to
+// itself. Which of the two is right cannot be inferred, and measurement says
+// so louder than argument: `AdwBottomSheet` alone FILLS in its content child
+// but HUGS in both `sheet` (a bottom sheet rises to the height of its own
+// contents) and `bottomBar`. One widget, three content areas, two answers,
+// with nothing in the name or the GIR type to tell them apart — the answer
+// lives in the widget's own layout code. The boundary is what makes NOT
+// saying a readable error instead of a silent mislayout — see useHostNode.
+const SlotBoundary = ({ location, children, }) => (
+// Two providers, no widget: a context provider is invisible to the gtkx
+// reconciler, so this is safe even on slots whose value is NOT a widget
+// (`breakpoints`, `menuModel`, `buffer`, `adjustment` — the majority of
+// element-valued props, in fact) — wrapping those in a real box would put
+// a GtkBox where an AdwBreakpoint belongs.
+_jsx(SlotContext.Provider, { value: location, children: _jsx(HostNodeContext.Provider, { value: null, children: children }) }));
+const holdsElement = (value) => isValidElement(value) || (Array.isArray(value) && value.some(holdsElement));
+// Puts every element-valued prop, and the children, behind a boundary.
+// `ref` is never content; anything that holds no element (a string child, a
+// number, an already-constructed GObject) is left exactly as it was, so the
+// common widget pays nothing.
+const withSlotBoundaries = (props, widget) => {
+    let bounded;
+    for (const key in props) {
+        if (key === "ref") {
+            continue;
+        }
+        const value = props[key];
+        if (!holdsElement(value)) {
+            continue;
+        }
+        bounded ??= {};
+        bounded[key] = (
+        // Children are not a named slot: the error says "inside AdwBottomSheet"
+        // rather than naming a property that does not exist.
+        _jsx(SlotBoundary, { location: { widget, slot: key === "children" ? null : key }, children: value }));
+    }
+    // The common case is a widget with no element-valued prop at all: return the
+    // props object untouched rather than allocate a copy per render.
+    return bounded ? { ...props, ...bounded } : props;
+};
+export const wrapReactNative = (Component, 
+// The widget's name, for error messages and React devtools. gtkx builds its
+// components from a factory, so they carry no name of their own — the
+// generated widget surface passes the class name it already knows.
+widgetName) => {
+    const name = widgetName ||
+        Component.displayName ||
+        Component.name ||
+        "Widget";
+    const InLayout = (props) => {
+        const { style, onLayout, ...rest } = props;
+        const boxRef = useRef(null);
+        const { cssClass } = useLayoutChild(boxRef, {
+            style,
+            onLayout,
+            // Without this a widget with no explicit size measures as zero — the
+            // whole reason a naked GtkButton in a View looks broken.
+            measureFromWidget: true,
+        });
+        const inner = rest;
+        return (_jsx(GtkBox, { ref: boxRef, children: _jsx(Component, { ...inner, 
+                // The style's visual half lands on the WIDGET, not on the wrapper,
+                // so backgrounds and borders colour the button itself. This is the
+                // point: on this platform React Native style drives GTK.
+                cssClasses: cssClass
+                    ? [...(inner.cssClasses ?? []), cssClass]
+                    : inner.cssClasses, 
+                // Fill the rect Yoga computed, so `flex: 1` and explicit sizes mean
+                // what they mean everywhere else in React Native. An explicit
+                // hexpand/vexpand from the caller still wins.
+                hexpand: inner.hexpand ?? true, vexpand: inner.vexpand ?? true }) }));
+    };
+    const Wrapped = (props) => {
+        // Every slot this widget is given becomes GTK territory, in both branches
+        // below: whether the widget itself joined React Native layout has nothing
+        // to do with what its slots hold.
+        const withSlots = withSlotBoundaries(props, name);
+        // Read the context directly rather than through useHostNode, which throws
+        // by design: here its absence is a supported case, not a mistake. The
+        // same widget is often used in a pure GTK slot (a HeaderBar's `start`, a
+        // ToolbarView's `topBar`) where there is no Yoga tree to join.
+        const host = useContext(HostNodeContext);
+        if (!host) {
+            // style/onLayout are meaningless without a Yoga tree — drop them rather
+            // than forward them onto a GObject that has no such properties.
+            const rest = { ...withSlots };
+            delete rest.style;
+            delete rest.onLayout;
+            return _jsx(Component, { ...rest });
+        }
+        return _jsx(InLayout, { ...withSlots });
+    };
+    InLayout.displayName = `wrapReactNative(${name}).InLayout`;
+    Wrapped.displayName = `wrapReactNative(${name})`;
+    return Wrapped;
+};
+//# sourceMappingURL=widget.js.map

package/dist/common/widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../src/common/widget.tsx"],"names":[],"mappings":"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","sourcesContent":["// Making a raw GTK widget a first-class citizen of React Native layout.\n//\n// The widgets this subpath re-exports are real GTK widgets, and GTK widgets\n// know nothing about Yoga. Dropped into a <View> as-is they would never be\n// measured or positioned, which would make \"we export everything\" a hollow\n// promise. `Widget` closes that gap: it gives the widget a Yoga node, applies\n// the layout half of a React Native style to it, and — this is the part that\n// matters — measures the widget itself, so it lands at the size the GTK theme\n// actually wants instead of collapsing to zero.\n//\n// The visual half of the style (background, border, radius) is applied as a\n// GTK CSS class, the same mechanism View uses.\nimport {\n  isValidElement,\n  useContext,\n  useRef,\n  type ComponentType,\n  type ReactNode,\n} from \"react\"\nimport {\n  HostNodeContext,\n  SlotContext,\n  type SlotLocation,\n} from \"../components/host-node\"\nimport {\n  useLayoutChild,\n  type LayoutEvent,\n} from \"../components/use-layout-child\"\nimport type { StyleProp } from \"../contracts\"\nimport { GtkBox, type Gtk } from \"../gtkx/bridge/index\"\n\nexport type WidgetProps = {\n  /** React Native style. The layout half drives Yoga, the visual half becomes\n   *  a GTK CSS class. Omit sizing and the widget's own natural size wins. */\n  style?: StyleProp\n  onLayout?: (event: LayoutEvent) => void\n  /** The GTK widget(s) to lay out. Your own `ref` on them is untouched. */\n  children: ReactNode\n  testID?: string\n}\n\n/**\n * Put any GTK widget into React Native layout.\n *\n * ```tsx\n * <View style={{ flexDirection: \"row\", gap: 8, padding: 12 }}>\n *   <Widget style={{ flex: 1 }}>\n *     <GtkEntry placeholderText=\"Search\" />\n *   </Widget>\n *   <Widget>\n *     <GtkButton iconName=\"edit-find-symbolic\" />\n *   </Widget>\n * </View>\n * ```\n *\n * The entry flexes, the button takes its natural size, both sit in the row\n * exactly like React Native children — because to Yoga they now are.\n *\n * For the reverse direction (React Native content inside a GTK slot) see\n * `SlotContent` and `IntrinsicContent`.\n */\nexport const Widget = ({ style, onLayout, children, testID }: WidgetProps) => {\n  // The wrapper box IS the Yoga leaf, and it is measured through GTK, so the\n  // widget inside reports its natural size up to Yoga. Wrapping rather than\n  // cloning keeps the child's own ref and props untouched.\n  const boxRef = useRef<Gtk.Box | null>(null)\n  const { cssClass } = useLayoutChild(boxRef, {\n    style,\n    onLayout,\n    // Without this a widget with no explicit size would measure as zero —\n    // the whole reason a naked GtkButton in a View looks broken.\n    measureFromWidget: true,\n  })\n\n  return (\n    <GtkBox\n      ref={boxRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : undefined}\n    >\n      {children}\n    </GtkBox>\n  )\n}\n\nexport type UseWidgetLayoutOptions = {\n  style?: StyleProp\n  onLayout?: (event: LayoutEvent) => void\n}\n\n/**\n * The same thing as {@link Widget}, without the extra component — attach the\n * ref yourself when you already hold one.\n *\n * ```tsx\n * const ref = useRef<Gtk.Button | null>(null)\n * useWidgetLayout(ref, { style: { width: 40, height: 40 } })\n * return <GtkButton ref={ref} iconName=\"open-menu-symbolic\" />\n * ```\n *\n * Returns the GTK CSS class produced by the visual half of the style, or\n * null — pass it to the widget's `cssClasses` if you want backgrounds and\n * borders from the style to apply.\n */\nexport const useWidgetLayout = (\n  ref: { current: Gtk.Widget | null },\n  options: UseWidgetLayoutOptions = {},\n): string | null => {\n  const { cssClass } = useLayoutChild(ref, {\n    style: options.style,\n    onLayout: options.onLayout,\n    measureFromWidget: true,\n  })\n  return cssClass\n}\n\nexport type ReactNativeLayoutProps = {\n  /** React Native style. The layout half drives Yoga, the visual half becomes\n   *  a GTK CSS class. Omit sizing and the widget's natural size wins. */\n  style?: StyleProp\n  onLayout?: (event: LayoutEvent) => void\n}\n\n/**\n * Give a GTK component React Native layout, keeping every prop it already\n * has.\n *\n * ```tsx\n * const Button = wrapReactNative(GtkButton)\n *\n * <View style={{ flexDirection: \"row\", gap: 8 }}>\n *   <Button style={{ flex: 1 }} label=\"Save\" onClicked={save} />\n * </View>\n * ```\n *\n * The result is generic in the wrapped component's props, so `label`,\n * `onClicked` and everything else gtkx binds keep their types; `style` and\n * `onLayout` are added on top.\n *\n * **Outside React Native layout it steps aside.** The same widget is often\n * used in a pure GTK slot — a HeaderBar's `start`, a ToolbarView's `topBar` —\n * where there is no Yoga tree to join. The wrapper detects that and renders\n * the bare component, so one exported symbol works in both worlds.\n */\n// A wrapped widget is a Yoga LEAF, so everything INSIDE it is GTK's\n// territory — its children and its slots alike.\n//\n// A widget SLOT is a property that takes a widget (`titleWidget`, `sheet`,\n// `sidebar`, `startChild`); a widget's content area is an ordinary child.\n// The distinction is gtkx's, it moves between releases — rc.3 took the\n// `content`/`child` props off single-child widgets and made that content a\n// child — and it has never had anything to do with layout. Both keep\n// rendering where they were written, so both keep seeing the enclosing React\n// Native layout root even though GTK has parented them somewhere else\n// entirely. Content then joins a Yoga tree whose viewport is the WINDOW\n// while GTK gives it the widget's own rectangle: laid out against one box,\n// drawn in another, and silently stealing space from a tree it was never\n// meant to be in.\n//\n// So the boundary clears the layout root on the way in. The widgets a slot\n// or a child usually holds want exactly that (it is what `WidgetContent`\n// does by hand), and React Native content entering has to bring its own root\n// — `SlotContent` to fill the area, `IntrinsicContent` to size the area to\n// itself. Which of the two is right cannot be inferred, and measurement says\n// so louder than argument: `AdwBottomSheet` alone FILLS in its content child\n// but HUGS in both `sheet` (a bottom sheet rises to the height of its own\n// contents) and `bottomBar`. One widget, three content areas, two answers,\n// with nothing in the name or the GIR type to tell them apart — the answer\n// lives in the widget's own layout code. The boundary is what makes NOT\n// saying a readable error instead of a silent mislayout — see useHostNode.\nconst SlotBoundary = ({\n  location,\n  children,\n}: {\n  location: SlotLocation\n  children: ReactNode\n}) => (\n  // Two providers, no widget: a context provider is invisible to the gtkx\n  // reconciler, so this is safe even on slots whose value is NOT a widget\n  // (`breakpoints`, `menuModel`, `buffer`, `adjustment` — the majority of\n  // element-valued props, in fact) — wrapping those in a real box would put\n  // a GtkBox where an AdwBreakpoint belongs.\n  <SlotContext.Provider value={location}>\n    <HostNodeContext.Provider value={null}>{children}</HostNodeContext.Provider>\n  </SlotContext.Provider>\n)\n\nconst holdsElement = (value: unknown): boolean =>\n  isValidElement(value) || (Array.isArray(value) && value.some(holdsElement))\n\n// Puts every element-valued prop, and the children, behind a boundary.\n// `ref` is never content; anything that holds no element (a string child, a\n// number, an already-constructed GObject) is left exactly as it was, so the\n// common widget pays nothing.\nconst withSlotBoundaries = <P extends object>(props: P, widget: string): P => {\n  let bounded: Record<string, unknown> | undefined\n  for (const key in props) {\n    if (key === \"ref\") {\n      continue\n    }\n    const value = (props as Record<string, unknown>)[key]\n    if (!holdsElement(value)) {\n      continue\n    }\n    bounded ??= {}\n    bounded[key] = (\n      // Children are not a named slot: the error says \"inside AdwBottomSheet\"\n      // rather than naming a property that does not exist.\n      <SlotBoundary\n        location={{ widget, slot: key === \"children\" ? null : key }}\n      >\n        {value as ReactNode}\n      </SlotBoundary>\n    )\n  }\n  // The common case is a widget with no element-valued prop at all: return the\n  // props object untouched rather than allocate a copy per render.\n  return bounded ? ({ ...props, ...bounded } as P) : props\n}\n\nexport const wrapReactNative = <P extends object>(\n  Component: ComponentType<P>,\n  // The widget's name, for error messages and React devtools. gtkx builds its\n  // components from a factory, so they carry no name of their own — the\n  // generated widget surface passes the class name it already knows.\n  widgetName?: string,\n): ComponentType<P & ReactNativeLayoutProps> => {\n  const name =\n    widgetName ||\n    (Component as { displayName?: string; name?: string }).displayName ||\n    (Component as { name?: string }).name ||\n    \"Widget\"\n\n  const InLayout = (props: P & ReactNativeLayoutProps) => {\n    const { style, onLayout, ...rest } = props\n    const boxRef = useRef<Gtk.Box | null>(null)\n    const { cssClass } = useLayoutChild(boxRef, {\n      style,\n      onLayout,\n      // Without this a widget with no explicit size measures as zero — the\n      // whole reason a naked GtkButton in a View looks broken.\n      measureFromWidget: true,\n    })\n    const inner = rest as P & { cssClasses?: string[] } & {\n      hexpand?: boolean\n      vexpand?: boolean\n    }\n    return (\n      <GtkBox ref={boxRef}>\n        <Component\n          {...inner}\n          // The style's visual half lands on the WIDGET, not on the wrapper,\n          // so backgrounds and borders colour the button itself. This is the\n          // point: on this platform React Native style drives GTK.\n          cssClasses={\n            cssClass\n              ? [...(inner.cssClasses ?? []), cssClass]\n              : inner.cssClasses\n          }\n          // Fill the rect Yoga computed, so `flex: 1` and explicit sizes mean\n          // what they mean everywhere else in React Native. An explicit\n          // hexpand/vexpand from the caller still wins.\n          hexpand={inner.hexpand ?? true}\n          vexpand={inner.vexpand ?? true}\n        />\n      </GtkBox>\n    )\n  }\n\n  const Wrapped = (props: P & ReactNativeLayoutProps) => {\n    // Every slot this widget is given becomes GTK territory, in both branches\n    // below: whether the widget itself joined React Native layout has nothing\n    // to do with what its slots hold.\n    const withSlots = withSlotBoundaries(props, name)\n    // Read the context directly rather than through useHostNode, which throws\n    // by design: here its absence is a supported case, not a mistake. The\n    // same widget is often used in a pure GTK slot (a HeaderBar's `start`, a\n    // ToolbarView's `topBar`) where there is no Yoga tree to join.\n    const host = useContext(HostNodeContext)\n    if (!host) {\n      // style/onLayout are meaningless without a Yoga tree — drop them rather\n      // than forward them onto a GObject that has no such properties.\n      const rest = { ...withSlots } as Partial<ReactNativeLayoutProps>\n      delete rest.style\n      delete rest.onLayout\n      return <Component {...(rest as P)} />\n    }\n    return <InLayout {...withSlots} />\n  }\n\n  InLayout.displayName = `wrapReactNative(${name}).InLayout`\n  Wrapped.displayName = `wrapReactNative(${name})`\n  return Wrapped\n}\n"]}

package/dist/components/animated.d.ts

@@ -1,12 +1,14 @@
 import { type ReactNode } from "react";
 import type { FlatStyle, TransformPart } from "../contracts";
+import type { ResponderProps } from "../responder/types";
 import { type LayoutEvent } from "./use-layout-child";
+type AnimatedValue = number | string;
 type AnimatedNode = {
     addListener(callback: (state: {
-        value: number;
+        value: AnimatedValue;
     }) => void): string;
     removeListener(id: string): void;
-    __getValue(): number;
+    __getValue(): AnimatedValue;
 };
 type AnimatedTransformPart = {
     [key: string]: number | string | AnimatedNode;
@@ -15,15 +17,16 @@ export type AnimatedViewStyle = Omit<FlatStyle, "opacity" | "transform"> & {
     opacity?: number | AnimatedNode;
     transform?: (TransformPart | AnimatedTransformPart)[];
 };
-export type AnimatedViewProps = {
+export type AnimatedViewProps = ResponderProps & {
     style?: AnimatedViewStyle | AnimatedViewStyle[];
     children?: ReactNode;
     onLayout?: (event: LayoutEvent) => void;
     testID?: string;
 };
 export declare const Animated: {
-    View: ({ style, children, onLayout, testID, }: AnimatedViewProps) => React.JSX.Element;
+    View: ({ style, children, onLayout, testID, ...responderProps }: AnimatedViewProps) => React.JSX.Element;
     Value: typeof import("../animated/value").AnimatedValue;
+    ValueXY: typeof import("../animated/value-xy").AnimatedValueXY;
     timing(value: import("../animated/value").AnimatedValue, config: import("../animated/types").TimingConfig): import("../animated/types").CompositeAnimation;
     spring(value: import("../animated/value").AnimatedValue, config: import("../animated/types").SpringConfig): import("../animated/types").CompositeAnimation;
     sequence(animations: import("../animated/types").CompositeAnimation[]): import("../animated/types").CompositeAnimation;

package/dist/components/animated.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from "react";
 import { createAnimated } from "../animated/index";
 import { GLib, GtkBox, queueAllocate } from "../gtkx/bridge/index";
+import { useResponder } from "../responder/use-responder";
 import { HostNodeContext } from "./host-node";
-import { setStoredOffset } from "./rect-store";
+import { setStoredTransform } from "./rect-store";
 import { useLayoutChild, useRnContainer, } from "./use-layout-child";
 // ~60fps one-shot ticks off the GLib main loop. A frame-clock driver (per
 // window) is a later optimization; timeouts keep the driver widget-free.
@@ -29,6 +30,19 @@ const isAnimatedNode = (value) => typeof value === "object" &&
     value !== null &&
     typeof value.addListener === "function" &&
     typeof value.__getValue === "function";
+// Stable per-node identity for the effect's dependency key: Animated nodes
+// are objects, and the bindings must be rebuilt when the node behind a slot
+// changes — not on every render that rebuilds an equal-looking array.
+let nextNodeId = 1;
+const nodeIds = new WeakMap();
+const nodeId = (value) => {
+    let id = nodeIds.get(value);
+    if (id === undefined) {
+        id = nextNodeId++;
+        nodeIds.set(value, id);
+    }
+    return id;
+};
 const splitAnimated = (style) => {
     const flat = {};
     const collect = (entry) => {
@@ -43,105 +57,112 @@ const splitAnimated = (style) => {
     };
     collect(style);
     let opacity = null;
-    let translateX = null;
-    let translateY = null;
+    const slots = [];
     if (isAnimatedNode(flat.opacity)) {
         opacity = flat.opacity;
         delete flat.opacity;
     }
     if (Array.isArray(flat.transform)) {
-        const staticParts = [];
         for (const part of flat.transform) {
             const key = Object.keys(part)[0];
-            const value = part[key];
-            if (key === "translateX" && isAnimatedNode(value)) {
-                translateX = value;
-            }
-            else if (key === "translateY" && isAnimatedNode(value)) {
-                translateY = value;
-            }
-            else if (!isAnimatedNode(value)) {
-                staticParts.push(part);
+            if (key === undefined) {
+                continue;
             }
+            const value = part[key];
+            slots.push(isAnimatedNode(value)
+                ? { key, node: value, value: value.__getValue() }
+                : { key, node: null, value: value });
         }
-        if (staticParts.length > 0) {
-            flat.transform = staticParts;
-        }
-        else {
-            delete flat.transform;
-        }
+        // The whole array is owned here from now on, static entries included:
+        // leaving them in the style would make useLayoutChild write the same
+        // rect-store slot from the other side, and the two would overwrite
+        // each other every render.
+        delete flat.transform;
     }
-    return { staticStyle: flat, opacity, translateX, translateY };
+    return { staticStyle: flat, opacity, slots };
 };
 // Animated values bypass React entirely: listeners write straight to the
-// widget (opacity) and to the rect store (translate offsets applied by the
+// widget (opacity) and to the rect store (the transform applied by the
 // parent's allocate), on top of the engine-committed base rect — the fast
 // path measured in the spike. Animation frames never touch Yoga.
-const AnimatedView = ({ style, children, onLayout, testID, }) => {
+const AnimatedView = ({ style, children, onLayout, testID, ...responderProps }) => {
     const widgetRef = useRef(null);
-    const { staticStyle, opacity, translateX, translateY } = splitAnimated(style);
+    const { staticStyle, opacity, slots } = splitAnimated(style);
     const { host, node, cssClass } = useLayoutChild(widgetRef, {
         style: staticStyle,
         onLayout,
     });
     useRnContainer(widgetRef, node);
-    const offsets = useRef({ x: 0, y: 0 });
+    useResponder(widgetRef, responderProps);
+    // The effect reads the slots of the render that (re)armed it; the values
+    // inside are then owned by the listeners.
+    const slotsRef = useRef(slots);
+    slotsRef.current = slots;
+    // Rebind on a change of shape (which transforms, in which order), of the
+    // node behind an animated entry, or of a static entry's value — not on
+    // every render that rebuilds an equal-looking array.
+    const bindingKey = (opacity ? `opacity#${nodeId(opacity)}` : "") +
+        slots
+            .map((slot) => slot.node
+            ? `|${slot.key}#${nodeId(slot.node)}`
+            : `|${slot.key}=${String(slot.value)}`)
+            .join("");
     useLayoutEffect(() => {
-        // RN transform semantics: translate is paint-only. The offset goes to
-        // the rect store unclamped — the parent's measure ignores children, so an
-        // out-of-bounds child draws past the boundary over its neighbors without
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        // The live transform array, mutated in place: an Animated write must
+        // stay one numeric store plus one queued allocation — no React render,
+        // no Yoga pass, no allocation per frame beyond the composed matrix.
+        //
+        // RN transform semantics: this is paint-only. The result goes to the
+        // rect store unclamped — the parent's measure ignores children, so a
+        // transformed child draws past the boundary over its neighbors without
         // moving a single ancestor.
-        const applyTranslate = () => {
-            const widget = widgetRef.current;
+        const parts = slotsRef.current.map((slot) => ({ [slot.key]: slot.value }));
+        const flush = () => {
+            setStoredTransform(widget, parts);
             const parentWidget = host.widgetRef.current;
-            if (!widget || !parentWidget) {
-                return;
+            if (parentWidget) {
+                queueAllocate(parentWidget);
             }
-            setStoredOffset(widget, offsets.current.x, offsets.current.y);
-            queueAllocate(parentWidget);
         };
-        const bindings = [];
+        const subscriptions = [];
+        slotsRef.current.forEach((slot, index) => {
+            if (!slot.node) {
+                return;
+            }
+            const part = parts[index];
+            subscriptions.push({
+                node: slot.node,
+                id: slot.node.addListener(({ value }) => {
+                    part[slot.key] = value;
+                    flush();
+                }),
+            });
+        });
         if (opacity) {
-            bindings.push({
+            const applyOpacity = (value) => {
+                const numeric = typeof value === "number" ? value : parseFloat(value);
+                widgetRef.current?.setOpacity(Math.min(1, Math.max(0, numeric)));
+            };
+            subscriptions.push({
                 node: opacity,
-                apply: (value) => {
-                    widgetRef.current?.setOpacity(Math.min(1, Math.max(0, value)));
-                },
+                id: opacity.addListener(({ value }) => {
+                    applyOpacity(value);
+                }),
             });
+            applyOpacity(opacity.__getValue());
         }
-        if (translateX) {
-            bindings.push({
-                node: translateX,
-                apply: (value) => {
-                    offsets.current.x = value;
-                    applyTranslate();
-                },
-            });
-        }
-        if (translateY) {
-            bindings.push({
-                node: translateY,
-                apply: (value) => {
-                    offsets.current.y = value;
-                    applyTranslate();
-                },
-            });
-        }
-        const subscriptions = bindings.map((binding) => ({
-            binding,
-            id: binding.node.addListener(({ value }) => binding.apply(value)),
-        }));
-        for (const { binding } of subscriptions) {
-            binding.apply(binding.node.__getValue());
-        }
+        flush();
         return () => {
-            for (const { binding, id } of subscriptions) {
-                binding.node.removeListener(id);
+            for (const { node: animated, id } of subscriptions) {
+                animated.removeListener(id);
             }
         };
-        // Re-bind when the animated node identities change.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [opacity, translateX, translateY, node]);
+    }, [bindingKey, node]);
     return (_jsx(GtkBox, { ref: widgetRef, name: testID, cssClasses: cssClass ? [cssClass] : [], children: _jsx(HostNodeContext.Provider, { value: { engine: host.engine, node, widgetRef }, children: children }) }));
 };
 export const Animated = {

package/dist/components/animated.js.map

@@ -1 +1 @@
-{"version":3,"file":"animated.js","sourceRoot":"","sources":["../../src/components/animated.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, type ReactNode } from \"react\"\nimport { createAnimated, type FrameScheduler } from \"../animated/index\"\nimport type { FlatStyle, StyleProp, TransformPart } from \"../contracts\"\nimport { GLib, GtkBox, queueAllocate, type Gtk } from \"../gtkx/bridge/index\"\nimport { HostNodeContext } from \"./host-node\"\nimport { setStoredOffset } from \"./rect-store\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\n// ~60fps one-shot ticks off the GLib main loop. A frame-clock driver (per\n// window) is a later optimization; timeouts keep the driver widget-free.\nconst glibScheduler: FrameScheduler = {\n  schedule(callback) {\n    let cancelled = false\n    const id = GLib.timeoutAdd(GLib.PRIORITY_DEFAULT, 16, () => {\n      if (!cancelled) {\n        callback(Number(GLib.getMonotonicTime()) / 1000)\n      }\n      return false\n    })\n    return () => {\n      if (!cancelled) {\n        cancelled = true\n        GLib.Source.remove(id)\n      }\n    }\n  },\n}\n\nconst api = createAnimated(glibScheduler)\n\ntype AnimatedNode = {\n  addListener(callback: (state: { value: number }) => void): string\n  removeListener(id: string): void\n  __getValue(): number\n}\n\nconst isAnimatedNode = (value: unknown): value is AnimatedNode =>\n  typeof value === \"object\" &&\n  value !== null &&\n  typeof (value as AnimatedNode).addListener === \"function\" &&\n  typeof (value as AnimatedNode).__getValue === \"function\"\n\ntype AnimatedTransformPart = { [key: string]: number | string | AnimatedNode }\n\n// Omit, not plain intersection: intersecting would AND the animated transform\n// with FlatStyle's numeric one, rejecting Animated.Value entries.\nexport type AnimatedViewStyle = Omit<FlatStyle, \"opacity\" | \"transform\"> & {\n  opacity?: number | AnimatedNode\n  transform?: (TransformPart | AnimatedTransformPart)[]\n}\n\ntype Binding = {\n  node: AnimatedNode\n  apply: (value: number) => void\n}\n\nexport type AnimatedViewProps = {\n  style?: AnimatedViewStyle | AnimatedViewStyle[]\n  children?: ReactNode\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst splitAnimated = (\n  style: AnimatedViewProps[\"style\"],\n): {\n  staticStyle: StyleProp\n  opacity: AnimatedNode | null\n  translateX: AnimatedNode | null\n  translateY: AnimatedNode | null\n} => {\n  const flat: Record<string, unknown> = {}\n  const collect = (entry: AnimatedViewProps[\"style\"]): void => {\n    if (!entry) {\n      return\n    }\n    if (Array.isArray(entry)) {\n      entry.forEach(collect)\n      return\n    }\n    Object.assign(flat, entry)\n  }\n  collect(style)\n\n  let opacity: AnimatedNode | null = null\n  let translateX: AnimatedNode | null = null\n  let translateY: AnimatedNode | null = null\n\n  if (isAnimatedNode(flat.opacity)) {\n    opacity = flat.opacity\n    delete flat.opacity\n  }\n  if (Array.isArray(flat.transform)) {\n    const staticParts: TransformPart[] = []\n    for (const part of flat.transform as AnimatedTransformPart[]) {\n      const key = Object.keys(part)[0]\n      const value = part[key!]\n      if (key === \"translateX\" && isAnimatedNode(value)) {\n        translateX = value\n      } else if (key === \"translateY\" && isAnimatedNode(value)) {\n        translateY = value\n      } else if (!isAnimatedNode(value)) {\n        staticParts.push(part as TransformPart)\n      }\n    }\n    if (staticParts.length > 0) {\n      flat.transform = staticParts\n    } else {\n      delete flat.transform\n    }\n  }\n\n  return { staticStyle: flat as StyleProp, opacity, translateX, translateY }\n}\n\n// Animated values bypass React entirely: listeners write straight to the\n// widget (opacity) and to the rect store (translate offsets applied by the\n// parent's allocate), on top of the engine-committed base rect — the fast\n// path measured in the spike. Animation frames never touch Yoga.\nconst AnimatedView = ({\n  style,\n  children,\n  onLayout,\n  testID,\n}: AnimatedViewProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const { staticStyle, opacity, translateX, translateY } = splitAnimated(style)\n\n  const { host, node, cssClass } = useLayoutChild(widgetRef, {\n    style: staticStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  const offsets = useRef({ x: 0, y: 0 })\n\n  useLayoutEffect(() => {\n    // RN transform semantics: translate is paint-only. The offset goes to\n    // the rect store unclamped — the parent's measure ignores children, so an\n    // out-of-bounds child draws past the boundary over its neighbors without\n    // moving a single ancestor.\n    const applyTranslate = (): void => {\n      const widget = widgetRef.current\n      const parentWidget = host.widgetRef.current\n      if (!widget || !parentWidget) {\n        return\n      }\n      setStoredOffset(widget, offsets.current.x, offsets.current.y)\n      queueAllocate(parentWidget)\n    }\n\n    const bindings: Binding[] = []\n    if (opacity) {\n      bindings.push({\n        node: opacity,\n        apply: (value) => {\n          widgetRef.current?.setOpacity(Math.min(1, Math.max(0, value)))\n        },\n      })\n    }\n    if (translateX) {\n      bindings.push({\n        node: translateX,\n        apply: (value) => {\n          offsets.current.x = value\n          applyTranslate()\n        },\n      })\n    }\n    if (translateY) {\n      bindings.push({\n        node: translateY,\n        apply: (value) => {\n          offsets.current.y = value\n          applyTranslate()\n        },\n      })\n    }\n\n    const subscriptions = bindings.map((binding) => ({\n      binding,\n      id: binding.node.addListener(({ value }) => binding.apply(value)),\n    }))\n    for (const { binding } of subscriptions) {\n      binding.apply(binding.node.__getValue())\n    }\n    return () => {\n      for (const { binding, id } of subscriptions) {\n        binding.node.removeListener(id)\n      }\n    }\n    // Re-bind when the animated node identities change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [opacity, translateX, translateY, node])\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        {children}\n      </HostNodeContext.Provider>\n    </GtkBox>\n  )\n}\n\nexport const Animated = {\n  ...api,\n  View: AnimatedView,\n}\n\nexport { Easing } from \"../animated/index\"\n"]}
+{"version":3,"file":"animated.js","sourceRoot":"","sources":["../../src/components/animated.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, type ReactNode } from \"react\"\nimport { createAnimated, type FrameScheduler } from \"../animated/index\"\nimport type { FlatStyle, StyleProp, TransformPart } from \"../contracts\"\nimport { GLib, GtkBox, queueAllocate, type Gtk } from \"../gtkx/bridge/index\"\nimport type { ResponderProps } from \"../responder/types\"\nimport { useResponder } from \"../responder/use-responder\"\nimport { HostNodeContext } from \"./host-node\"\nimport { setStoredTransform } from \"./rect-store\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\n// ~60fps one-shot ticks off the GLib main loop. A frame-clock driver (per\n// window) is a later optimization; timeouts keep the driver widget-free.\nconst glibScheduler: FrameScheduler = {\n  schedule(callback) {\n    let cancelled = false\n    const id = GLib.timeoutAdd(GLib.PRIORITY_DEFAULT, 16, () => {\n      if (!cancelled) {\n        callback(Number(GLib.getMonotonicTime()) / 1000)\n      }\n      return false\n    })\n    return () => {\n      if (!cancelled) {\n        cancelled = true\n        GLib.Source.remove(id)\n      }\n    }\n  },\n}\n\nconst api = createAnimated(glibScheduler)\n\n// Interpolations produce suffixed strings (\"45deg\"), so a driven value is\n// not necessarily a number — `rotate` is normally an interpolate() with a\n// deg outputRange.\ntype AnimatedValue = number | string\n\ntype AnimatedNode = {\n  addListener(callback: (state: { value: AnimatedValue }) => void): string\n  removeListener(id: string): void\n  __getValue(): AnimatedValue\n}\n\nconst isAnimatedNode = (value: unknown): value is AnimatedNode =>\n  typeof value === \"object\" &&\n  value !== null &&\n  typeof (value as AnimatedNode).addListener === \"function\" &&\n  typeof (value as AnimatedNode).__getValue === \"function\"\n\ntype AnimatedTransformPart = { [key: string]: number | string | AnimatedNode }\n\n// One entry of the style's transform array, kept in source order. The array\n// order IS the composition order in RN, so an animated entry updates its own\n// slot in place instead of being lifted out of the list — that is what makes\n// [{rotate}, {translateX}] compose differently from the reverse, as in RN.\ntype TransformSlot = {\n  key: string\n  node: AnimatedNode | null\n  value: AnimatedValue\n}\n\n// Stable per-node identity for the effect's dependency key: Animated nodes\n// are objects, and the bindings must be rebuilt when the node behind a slot\n// changes — not on every render that rebuilds an equal-looking array.\nlet nextNodeId = 1\nconst nodeIds = new WeakMap<object, number>()\nconst nodeId = (value: object): number => {\n  let id = nodeIds.get(value)\n  if (id === undefined) {\n    id = nextNodeId++\n    nodeIds.set(value, id)\n  }\n  return id\n}\n\n// Omit, not plain intersection: intersecting would AND the animated transform\n// with FlatStyle's numeric one, rejecting Animated.Value entries.\nexport type AnimatedViewStyle = Omit<FlatStyle, \"opacity\" | \"transform\"> & {\n  opacity?: number | AnimatedNode\n  transform?: (TransformPart | AnimatedTransformPart)[]\n}\n\n// Animated.View is where a PanResponder drag lands in idiomatic RN — the\n// dragged box is animated by definition — so it takes the responder props\n// exactly as View does.\nexport type AnimatedViewProps = ResponderProps & {\n  style?: AnimatedViewStyle | AnimatedViewStyle[]\n  children?: ReactNode\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst splitAnimated = (\n  style: AnimatedViewProps[\"style\"],\n): {\n  staticStyle: StyleProp\n  opacity: AnimatedNode | null\n  slots: TransformSlot[]\n} => {\n  const flat: Record<string, unknown> = {}\n  const collect = (entry: AnimatedViewProps[\"style\"]): void => {\n    if (!entry) {\n      return\n    }\n    if (Array.isArray(entry)) {\n      entry.forEach(collect)\n      return\n    }\n    Object.assign(flat, entry)\n  }\n  collect(style)\n\n  let opacity: AnimatedNode | null = null\n  const slots: TransformSlot[] = []\n\n  if (isAnimatedNode(flat.opacity)) {\n    opacity = flat.opacity\n    delete flat.opacity\n  }\n  if (Array.isArray(flat.transform)) {\n    for (const part of flat.transform as AnimatedTransformPart[]) {\n      const key = Object.keys(part)[0]\n      if (key === undefined) {\n        continue\n      }\n      const value = part[key]\n      slots.push(\n        isAnimatedNode(value)\n          ? { key, node: value, value: value.__getValue() }\n          : { key, node: null, value: value as AnimatedValue },\n      )\n    }\n    // The whole array is owned here from now on, static entries included:\n    // leaving them in the style would make useLayoutChild write the same\n    // rect-store slot from the other side, and the two would overwrite\n    // each other every render.\n    delete flat.transform\n  }\n\n  return { staticStyle: flat as StyleProp, opacity, slots }\n}\n\n// Animated values bypass React entirely: listeners write straight to the\n// widget (opacity) and to the rect store (the transform applied by the\n// parent's allocate), on top of the engine-committed base rect — the fast\n// path measured in the spike. Animation frames never touch Yoga.\nconst AnimatedView = ({\n  style,\n  children,\n  onLayout,\n  testID,\n  ...responderProps\n}: AnimatedViewProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const { staticStyle, opacity, slots } = splitAnimated(style)\n\n  const { host, node, cssClass } = useLayoutChild(widgetRef, {\n    style: staticStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n  useResponder(widgetRef, responderProps)\n\n  // The effect reads the slots of the render that (re)armed it; the values\n  // inside are then owned by the listeners.\n  const slotsRef = useRef<TransformSlot[]>(slots)\n  slotsRef.current = slots\n\n  // Rebind on a change of shape (which transforms, in which order), of the\n  // node behind an animated entry, or of a static entry's value — not on\n  // every render that rebuilds an equal-looking array.\n  const bindingKey =\n    (opacity ? `opacity#${nodeId(opacity)}` : \"\") +\n    slots\n      .map((slot) =>\n        slot.node\n          ? `|${slot.key}#${nodeId(slot.node)}`\n          : `|${slot.key}=${String(slot.value)}`,\n      )\n      .join(\"\")\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n\n    // The live transform array, mutated in place: an Animated write must\n    // stay one numeric store plus one queued allocation — no React render,\n    // no Yoga pass, no allocation per frame beyond the composed matrix.\n    //\n    // RN transform semantics: this is paint-only. The result goes to the\n    // rect store unclamped — the parent's measure ignores children, so a\n    // transformed child draws past the boundary over its neighbors without\n    // moving a single ancestor.\n    const parts = slotsRef.current.map(\n      (slot) => ({ [slot.key]: slot.value }) as Record<string, AnimatedValue>,\n    )\n\n    const flush = (): void => {\n      setStoredTransform(widget, parts as unknown as TransformPart[])\n      const parentWidget = host.widgetRef.current\n      if (parentWidget) {\n        queueAllocate(parentWidget)\n      }\n    }\n\n    const subscriptions: { node: AnimatedNode; id: string }[] = []\n    slotsRef.current.forEach((slot, index) => {\n      if (!slot.node) {\n        return\n      }\n      const part = parts[index]!\n      subscriptions.push({\n        node: slot.node,\n        id: slot.node.addListener(({ value }) => {\n          part[slot.key] = value\n          flush()\n        }),\n      })\n    })\n\n    if (opacity) {\n      const applyOpacity = (value: AnimatedValue): void => {\n        const numeric = typeof value === \"number\" ? value : parseFloat(value)\n        widgetRef.current?.setOpacity(Math.min(1, Math.max(0, numeric)))\n      }\n      subscriptions.push({\n        node: opacity,\n        id: opacity.addListener(({ value }) => {\n          applyOpacity(value)\n        }),\n      })\n      applyOpacity(opacity.__getValue())\n    }\n\n    flush()\n\n    return () => {\n      for (const { node: animated, id } of subscriptions) {\n        animated.removeListener(id)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [bindingKey, node])\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        {children}\n      </HostNodeContext.Provider>\n    </GtkBox>\n  )\n}\n\nexport const Animated = {\n  ...api,\n  View: AnimatedView,\n}\n\nexport { Easing } from \"../animated/index\"\n"]}

package/dist/components/app-registry.d.ts

@@ -1,12 +1,47 @@
-import { type ComponentType } from "react";
+import { type ComponentType, type ReactNode } from "react";
 type ComponentProvider = () => ComponentType<Record<string, unknown>>;
 export declare const getActiveChrome: () => "system" | "content" | null;
+export type ActionAccel = {
+    detailedActionName: string;
+    accels: string[];
+};
 export type RunApplicationParams = {
     initialProps?: Record<string, unknown>;
     title?: string;
     width?: number;
     height?: number;
     chrome?: "system" | "content";
+    /**
+     * GSimpleAction elements registered on the GApplication itself
+     * ("app.<name>" — reachable from anywhere, including a Gio.Notification's
+     * action buttons, which can only ever target an app-level action).
+     *
+     * @deprecated Render `<ApplicationActions>` (react-native-gtkx/gtk) inside
+     * the app instead. Options render as SIBLINGS of the app tree, so no
+     * context of the app's can reach them and the set is fixed for the
+     * process's lifetime. Still supported; see docs/api.md.
+     */
+    applicationActions?: ReactNode;
+    actionAccels?: ActionAccel[];
+    /**
+     * GSimpleAction elements registered on the window ("win.<name>" — what a
+     * HeaderBar button's actionName or a GMenu item usually targets).
+     *
+     * @deprecated Render `<WindowActions>` (react-native-gtkx/gtk) inside the
+     * app instead — it can read the app's context and registers/unregisters
+     * with the component that declares it. Still supported; see docs/api.md.
+     */
+    windowActions?: ReactNode;
+    /**
+     * Event controllers attached to the window itself — a
+     * GtkShortcutController scoped to the whole window is the common case.
+     *
+     * @deprecated Render `<WindowControllers>` (react-native-gtkx/gtk) inside
+     * the app instead, for the same reasons as `windowActions`. Still
+     * supported; see docs/api.md.
+     */
+    windowControllers?: ReactNode;
+    breakpoints?: ReactNode;
 };
 export declare const AppRegistry: {
     registerComponent(appKey: string, provider: ComponentProvider): string;

package/dist/components/app-registry.js

@@ -70,9 +70,14 @@ export const AppRegistry = {
         const height = params.height ?? 600;
         const contentChrome = params.chrome === "content";
         activeChrome = contentChrome ? "content" : "system";
-        const Window = contentChrome ? AdwApplicationWindow : GtkApplicationWindow;
-        const AppWindow = () => (_jsx(Window, { title: params.title ?? appKey, defaultWidth: width, defaultHeight: height, onCloseRequest: quit, children: contentChrome ? (_jsx(ContentChrome, { App: App, initialProps: params.initialProps ?? {} })) : (_jsx(WindowContent, { App: App, initialProps: params.initialProps ?? {}, initialWidth: width, initialHeight: height })) }));
-        createRoot().render(_jsx(GtkApplication, { children: _jsx(AppWindow, {}) }));
+        if (process.env.NODE_ENV !== "production" &&
+            params.breakpoints &&
+            !contentChrome) {
+            console.warn('[react-native-gtkx] breakpoints was passed to runApplication without chrome: "content" — GtkApplicationWindow (the "system" chrome default) has no breakpoints concept, so it is ignored.');
+        }
+        const content = contentChrome ? (_jsx(ContentChrome, { App: App, initialProps: params.initialProps ?? {} })) : (_jsx(WindowContent, { App: App, initialProps: params.initialProps ?? {}, initialWidth: width, initialHeight: height }));
+        const AppWindow = () => contentChrome ? (_jsx(AdwApplicationWindow, { title: params.title ?? appKey, defaultWidth: width, defaultHeight: height, onCloseRequest: quit, actions: params.windowActions, controllers: params.windowControllers, breakpoints: params.breakpoints, children: content })) : (_jsx(GtkApplicationWindow, { title: params.title ?? appKey, defaultWidth: width, defaultHeight: height, onCloseRequest: quit, actions: params.windowActions, controllers: params.windowControllers, children: content }));
+        createRoot().render(_jsx(GtkApplication, { actions: params.applicationActions, actionAccels: params.actionAccels, children: _jsx(AppWindow, {}) }));
     },
 };
 //# sourceMappingURL=app-registry.js.map