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

package/dist/common/icon.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { StyleProp } from "../contracts";
+export type IconProps = {
+    /** Icon-theme name, e.g. `"starred-symbolic"`. Symbolic icons take their
+     *  colour from the surrounding label colour. */
+    name: string;
+    /** Square size in RN units. Defaults to 16, the size Adwaita uses for icons
+     *  inside list rows and flat buttons. */
+    size?: number;
+    /** React Native style. Sizing here wins over `size`. */
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * ```tsx
+ * <Icon name="starred-symbolic" size={16} />
+ * ```
+ *
+ * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick
+ * the nearest theme size and paint at that, so a 16-unit box could hold a
+ * 24px icon scaled down.
+ */
+export declare const Icon: ({ name, size, style, testID, }: IconProps) => ReactNode;

package/dist/common/icon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GtkImage } from "../gtkx/bridge/index";
+import { Widget } from "./widget";
+/**
+ * ```tsx
+ * <Icon name="starred-symbolic" size={16} />
+ * ```
+ *
+ * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick
+ * the nearest theme size and paint at that, so a 16-unit box could hold a
+ * 24px icon scaled down.
+ */
+export const Icon = ({ name, size = 16, style, testID, }) => (_jsx(Widget, { testID: testID, style: [{ width: size, height: size }, style], children: _jsx(GtkImage, { iconName: name, pixelSize: size }) }));
+//# sourceMappingURL=icon.js.map

package/dist/common/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/common/icon.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,KAAK,EACL,MAAM,GACI,EAAa,EAAE,CAAC,CAC1B,KAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,YAE7C,KAAC,QAAQ,IACP,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,IAAI,GACf,GACK,CACV,CAAA","sourcesContent":["// A named icon from the desktop icon theme, in React Native layout.\n//\n// WHY this is not `Image`. RN's `Image` takes a file path or a URI, because on\n// iOS and Android an icon is an asset the app ships. On the Linux desktop an\n// icon is a NAME resolved against the current icon theme at paint time —\n// `user-trash-symbolic` recolours itself with the label colour, follows the\n// user's theme, and has no file the app could point at. There is nothing in\n// RN's `Image` contract that can express that, and pretending a name is a URI\n// would break `onError`, `resizeMode` and the loading states along with it.\n//\n// So this is the same shape RN apps already reach for on every platform —\n// react-native-vector-icons' `<Icon name size color />` — with the desktop\n// icon theme behind it instead of a bundled font.\nimport type { ReactNode } from \"react\"\nimport type { StyleProp } from \"../contracts\"\nimport { GtkImage } from \"../gtkx/bridge/index\"\nimport { Widget } from \"./widget\"\n\nexport type IconProps = {\n  /** Icon-theme name, e.g. `\"starred-symbolic\"`. Symbolic icons take their\n   *  colour from the surrounding label colour. */\n  name: string\n  /** Square size in RN units. Defaults to 16, the size Adwaita uses for icons\n   *  inside list rows and flat buttons. */\n  size?: number\n  /** React Native style. Sizing here wins over `size`. */\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * ```tsx\n * <Icon name=\"starred-symbolic\" size={16} />\n * ```\n *\n * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick\n * the nearest theme size and paint at that, so a 16-unit box could hold a\n * 24px icon scaled down.\n */\nexport const Icon = ({\n  name,\n  size = 16,\n  style,\n  testID,\n}: IconProps): ReactNode => (\n  <Widget\n    testID={testID}\n    style={[{ width: size, height: size }, style]}\n  >\n    <GtkImage\n      iconName={name}\n      pixelSize={size}\n    />\n  </Widget>\n)\n"]}

package/dist/common/index.d.ts

@@ -1,3 +1,5 @@
 export { NavigationStack, NavigationStackPage, type NavigationStackPageProps, type NavigationStackProps, } from "./navigation-stack";
 export { HeaderSlotContent, IntrinsicContent, SlotContent, WidgetContent, type IntrinsicContentProps, type SlotContentProps, } from "./content";
 export { useWidgetLayout, Widget, wrapReactNative, type ReactNativeLayoutProps, type UseWidgetLayoutOptions, type WidgetProps, } from "./widget";
+export { Icon, type IconProps } from "./icon";
+export { List, ListRow, ListSeparator, rowPosition, type ListProps, type ListRowPosition, type ListRowProps, } from "./list";

package/dist/common/index.js

@@ -16,4 +16,6 @@
 export { NavigationStack, NavigationStackPage, } from "./navigation-stack";
 export { HeaderSlotContent, IntrinsicContent, SlotContent, WidgetContent, } from "./content";
 export { useWidgetLayout, Widget, wrapReactNative, } from "./widget";
+export { Icon } from "./icon";
+export { List, ListRow, ListSeparator, rowPosition, } from "./list";
 //# sourceMappingURL=index.js.map

package/dist/common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,wEAAwE;AACxE,mCAAmC;AACnC,EAAE;AACF,mEAAmE;AACnE,uEAAuE;AACvE,iEAAiE;AACjE,uEAAuE;AACvE,kEAAkE;AAClE,wEAAwE;AACxE,EAAE;AACF,yCAAyC;AAEzC,OAAO,EACL,eAAe,EACf,mBAAmB,GAGpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,aAAa,GAGd,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,eAAe,EACf,MAAM,EACN,eAAe,GAIhB,MAAM,UAAU,CAAA","sourcesContent":["// react-native-gtkx/common — the parts of the platform layer we wrote.\n//\n// The other two subpaths are widget bindings: react-native-gtkx/gtk and\n// react-native-gtkx/adw re-export what gtkx generates, name for name. This\n// one holds what has no upstream counterpart, which is why nothing here\n// carries a `Gtk` or `Adw` prefix.\n//\n// Two jobs live here. Getting React Native content INTO a GTK slot\n// (SlotContent, IntrinsicContent), and getting a GTK widget INTO React\n// Native layout (Widget, wrapReactNative, useWidgetLayout). Plus\n// NavigationStack, which is a declarative component over an imperative\n// widget rather than a binding of one — a different contract from\n// Adw.NavigationView, which is why it has its own name and lives apart.\n//\n// Nothing here imports react-navigation.\n\nexport {\n  NavigationStack,\n  NavigationStackPage,\n  type NavigationStackPageProps,\n  type NavigationStackProps,\n} from \"./navigation-stack\"\n\nexport {\n  HeaderSlotContent,\n  IntrinsicContent,\n  SlotContent,\n  WidgetContent,\n  type IntrinsicContentProps,\n  type SlotContentProps,\n} from \"./content\"\n\nexport {\n  useWidgetLayout,\n  Widget,\n  wrapReactNative,\n  type ReactNativeLayoutProps,\n  type UseWidgetLayoutOptions,\n  type WidgetProps,\n} from \"./widget\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,wEAAwE;AACxE,mCAAmC;AACnC,EAAE;AACF,mEAAmE;AACnE,uEAAuE;AACvE,iEAAiE;AACjE,uEAAuE;AACvE,kEAAkE;AAClE,wEAAwE;AACxE,EAAE;AACF,yCAAyC;AAEzC,OAAO,EACL,eAAe,EACf,mBAAmB,GAGpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,aAAa,GAGd,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,eAAe,EACf,MAAM,EACN,eAAe,GAIhB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAE7C,OAAO,EACL,IAAI,EACJ,OAAO,EACP,aAAa,EACb,WAAW,GAIZ,MAAM,QAAQ,CAAA","sourcesContent":["// react-native-gtkx/common — the parts of the platform layer we wrote.\n//\n// The other two subpaths are widget bindings: react-native-gtkx/gtk and\n// react-native-gtkx/adw re-export what gtkx generates, name for name. This\n// one holds what has no upstream counterpart, which is why nothing here\n// carries a `Gtk` or `Adw` prefix.\n//\n// Two jobs live here. Getting React Native content INTO a GTK slot\n// (SlotContent, IntrinsicContent), and getting a GTK widget INTO React\n// Native layout (Widget, wrapReactNative, useWidgetLayout). Plus\n// NavigationStack, which is a declarative component over an imperative\n// widget rather than a binding of one — a different contract from\n// Adw.NavigationView, which is why it has its own name and lives apart.\n//\n// Nothing here imports react-navigation.\n\nexport {\n  NavigationStack,\n  NavigationStackPage,\n  type NavigationStackPageProps,\n  type NavigationStackProps,\n} from \"./navigation-stack\"\n\nexport {\n  HeaderSlotContent,\n  IntrinsicContent,\n  SlotContent,\n  WidgetContent,\n  type IntrinsicContentProps,\n  type SlotContentProps,\n} from \"./content\"\n\nexport {\n  useWidgetLayout,\n  Widget,\n  wrapReactNative,\n  type ReactNativeLayoutProps,\n  type UseWidgetLayoutOptions,\n  type WidgetProps,\n} from \"./widget\"\n\nexport { Icon, type IconProps } from \"./icon\"\n\nexport {\n  List,\n  ListRow,\n  ListSeparator,\n  rowPosition,\n  type ListProps,\n  type ListRowPosition,\n  type ListRowProps,\n} from \"./list\"\n"]}

package/dist/common/list.d.ts

@@ -0,0 +1,82 @@
+import { type ReactNode } from "react";
+import type { StyleProp } from "../contracts";
+/**
+ * Where a row sits in its list, which is what decides its corner radii and
+ * whether it draws a separator under itself.
+ *
+ * RN has no `:first-child`, so this is explicit. From a `FlatList` it is
+ * `rowPosition(index, data.length)`; from a static list it is the same
+ * expression over the array.
+ */
+export type ListRowPosition = "first" | "middle" | "last" | "only";
+/** The usual derivation, so no call site has to get the one-row case wrong. */
+export declare const rowPosition: (index: number, count: number) => ListRowPosition;
+export type ListProps = {
+    children?: ReactNode;
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it
+ * directly, or a `FlatList` whose `renderItem` returns them.
+ *
+ * ```tsx
+ * <List>
+ *   {tasks.map((task, index) => (
+ *     <ListRow
+ *       key={task.id}
+ *       title={task.title}
+ *       position={rowPosition(index, tasks.length)}
+ *       onPress={() => open(task)}
+ *     />
+ *   ))}
+ * </List>
+ * ```
+ */
+export declare const List: ({ children, style, testID }: ListProps) => ReactNode;
+export type ListRowProps = {
+    /** Primary line. A string renders with the row's own typography; a node is
+     *  rendered as given, for a title that needs its own styling. */
+    title?: ReactNode;
+    /** Second, dimmed line. Omitted rows are single-line, as `AdwActionRow`'s
+     *  are. */
+    subtitle?: ReactNode;
+    /** Leading content — a checkbox, an icon, a colour swatch. */
+    prefix?: ReactNode;
+    /** Trailing content — buttons, a value, a chevron. */
+    suffix?: ReactNode;
+    /** Makes the row activatable: it gains the hover and press tints and calls
+     *  this. Without it the row is inert, like a non-`activatable`
+     *  `AdwActionRow`. */
+    onPress?: () => void;
+    /** Position in the list, for the corner radii and the separator. Defaults
+     *  to `"middle"`, which is right for a row that is neither. */
+    position?: ListRowPosition;
+    /** Draw the hairline under this row. Default true for every position except
+     *  the last — set it false when the list supplies its own separators (a
+     *  `FlatList`'s `ItemSeparatorComponent`, say). */
+    separator?: boolean;
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * One row of a {@link List} — `AdwActionRow`'s layout and states, built from
+ * `Pressable`, `View` and `Text`.
+ *
+ * Hover and press come from `Pressable`'s state callback, so they cost what
+ * they cost anywhere else in this platform: the hover path swaps a CSS class
+ * on the widget without a React render (see components/pressable.tsx).
+ *
+ * **Not yet:** keyboard navigation between rows and a focus ring.
+ * `GtkListBox` implements those as widget behaviour and RN has no focus model
+ * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`
+ * with no `focused`. The ring itself is now drawable (`outlineWidth` and
+ * friends), so what is missing is the state, not the paint.
+ */
+export declare const ListRow: ({ title, subtitle, prefix, suffix, onPress, position, separator, style, testID, }: ListRowProps) => ReactNode;
+/**
+ * The hairline between two rows, for lists that draw their own separators —
+ * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means
+ * the rows themselves stay position-agnostic apart from their corners.
+ */
+export declare const ListSeparator: () => ReactNode;

package/dist/common/list.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useColorScheme } from "../apis/index";
+import { Pressable } from "../components/pressable";
+import { Text } from "../components/text";
+import { View } from "../components/view";
+import { PlatformColor, StyleSheet } from "../style/index";
+/** The usual derivation, so no call site has to get the one-row case wrong. */
+export const rowPosition = (index, count) => {
+    const first = index === 0;
+    const last = index === count - 1;
+    if (first && last) {
+        return "only";
+    }
+    return first ? "first" : last ? "last" : "middle";
+};
+// libadwaita 1.9, /org/gnome/Adwaita/styles/gtk.css:
+//   list.boxed-list { background-color: var(--card-bg-color); border-radius: 12px;
+//                     box-shadow: 0 0 0 1px RGB(0 0 6/3%),
+//                                 0 1px 3px 1px RGB(0 0 6/7%),
+//                                 0 2px 6px 2px RGB(0 0 6/3%); }
+const RADIUS = 12;
+const styles = StyleSheet.create({
+    list: {
+        backgroundColor: PlatformColor("card-bg-color"),
+        borderRadius: RADIUS,
+        // The frame is a shadow, not a border, and that distinction is load
+        // bearing: a border would consume the box and inset every row by a pixel,
+        // and no border draws the two soft drops underneath.
+        boxShadow: [
+            {
+                offsetX: 0,
+                offsetY: 0,
+                spreadDistance: 1,
+                color: "rgba(0, 0, 6, 0.03)",
+            },
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 3,
+                spreadDistance: 1,
+                color: "rgba(0, 0, 6, 0.07)",
+            },
+            {
+                offsetX: 0,
+                offsetY: 2,
+                blurRadius: 6,
+                spreadDistance: 2,
+                color: "rgba(0, 0, 6, 0.03)",
+            },
+        ],
+    },
+    // `list > row { padding: 2px }` plus
+    // `row > box.header { margin: 0 12px; border-spacing: 6px; min-height: 50px }`
+    // — 2 + 50 + 2 + the 1px separator is the 55px row pitch measured off the
+    // widget's own screenshot.
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: 54,
+        paddingVertical: 2,
+        paddingHorizontal: 14,
+        gap: 6,
+    },
+    separatorUnder: {
+        borderBottomWidth: 1,
+        borderBottomColor: PlatformColor("card-shade-color"),
+    },
+    firstRow: { borderTopLeftRadius: RADIUS, borderTopRightRadius: RADIUS },
+    lastRow: {
+        borderBottomLeftRadius: RADIUS,
+        borderBottomRightRadius: RADIUS,
+    },
+    // `row > box.header > box.title { margin: 6px 0; border-spacing: 3px }`
+    titleBox: { flex: 1, marginVertical: 6, gap: 3 },
+    // The theme font is `Adwaita Sans 11`, i.e. 11pt = 14.67px, and Adwaita sets
+    // the subtitle to `font-size: smaller` — Pango's one-step-down, 1/1.2. RN's
+    // fontSize is numeric only (there is no `smaller`, no em, no inherited
+    // percentage), so the computed value is what an app can write. Documented
+    // in docs/api.md rather than hidden here.
+    title: { fontSize: 14.7 },
+    // `row label.subtitle { opacity: var(--dim-opacity) }`, 55% in the light
+    // Adwaita palette.
+    subtitle: { fontSize: 12.2, opacity: 0.55 },
+    separator: {
+        height: 1,
+        backgroundColor: PlatformColor("card-shade-color"),
+    },
+});
+// Adwaita tints the hover and press states with a fraction of the FOREGROUND
+// colour (`color-mix(in srgb, currentColor 4%, transparent)`), so one literal
+// cannot serve both themes and CSS colour functions are not part of RN's
+// colour contract. Two literals plus the scheme is what an RN app writes on
+// every platform, and it is what this does.
+const TINTS = {
+    light: { hover: "rgba(0, 0, 0, 0.04)", press: "rgba(0, 0, 0, 0.08)" },
+    dark: {
+        hover: "rgba(255, 255, 255, 0.04)",
+        press: "rgba(255, 255, 255, 0.08)",
+    },
+};
+/**
+ * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it
+ * directly, or a `FlatList` whose `renderItem` returns them.
+ *
+ * ```tsx
+ * <List>
+ *   {tasks.map((task, index) => (
+ *     <ListRow
+ *       key={task.id}
+ *       title={task.title}
+ *       position={rowPosition(index, tasks.length)}
+ *       onPress={() => open(task)}
+ *     />
+ *   ))}
+ * </List>
+ * ```
+ */
+export const List = ({ children, style, testID }) => (_jsx(View, { testID: testID, style: [styles.list, style], children: children }));
+/**
+ * One row of a {@link List} — `AdwActionRow`'s layout and states, built from
+ * `Pressable`, `View` and `Text`.
+ *
+ * Hover and press come from `Pressable`'s state callback, so they cost what
+ * they cost anywhere else in this platform: the hover path swaps a CSS class
+ * on the widget without a React render (see components/pressable.tsx).
+ *
+ * **Not yet:** keyboard navigation between rows and a focus ring.
+ * `GtkListBox` implements those as widget behaviour and RN has no focus model
+ * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`
+ * with no `focused`. The ring itself is now drawable (`outlineWidth` and
+ * friends), so what is missing is the state, not the paint.
+ */
+export const ListRow = ({ title, subtitle, prefix, suffix, onPress, position = "middle", separator, style, testID, }) => {
+    const scheme = useColorScheme() === "dark" ? "dark" : "light";
+    const tints = TINTS[scheme];
+    const isFirst = position === "first" || position === "only";
+    const isLast = position === "last" || position === "only";
+    const drawSeparator = separator ?? !isLast;
+    const body = (_jsxs(_Fragment, { children: [prefix, _jsxs(View, { style: styles.titleBox, children: [typeof title === "string" ? (_jsx(Text, { style: styles.title, children: title })) : (title), typeof subtitle === "string" ? (_jsx(Text, { style: styles.subtitle, children: subtitle })) : (subtitle)] }), suffix] }));
+    const base = [
+        styles.row,
+        isFirst && styles.firstRow,
+        isLast && styles.lastRow,
+        drawSeparator && styles.separatorUnder,
+        style,
+    ];
+    if (!onPress) {
+        return (_jsx(View, { testID: testID, style: base, children: body }));
+    }
+    return (_jsx(Pressable, { testID: testID, onPress: onPress, 
+        // The tint goes on the ROW, which is why the corner radii above have to
+        // be on the row too: a hovered first row must round its own top corners
+        // or the highlight paints square over the card's rounded ones.
+        style: ({ hovered, pressed }) => [
+            ...base,
+            hovered && { backgroundColor: tints.hover },
+            pressed && { backgroundColor: tints.press },
+        ], children: body }));
+};
+/**
+ * The hairline between two rows, for lists that draw their own separators —
+ * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means
+ * the rows themselves stay position-agnostic apart from their corners.
+ */
+export const ListSeparator = () => _jsx(View, { style: styles.separator });
+//# sourceMappingURL=list.js.map

package/dist/common/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/common/list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Adwaita's boxed list, for code written in React Native.\n//\n// WHY this is here rather than in an app. `.boxed-list` is the single most\n// recognisable piece of GNOME chrome, and docs/research/react-native-first-showcase.md\n// measured what it actually is: a rounded, shadowed card whose rows carry\n// hairline separators, a hover tint and a press tint. Every one of those is a\n// style — there is no widget BEHAVIOUR in the look at all. So an app can build\n// it from `View` and `Pressable`, and `examples/tasks-nav` proves it.\n//\n// What an app should not have to do is rediscover the numbers. They come from\n// libadwaita's own compiled stylesheet, they are not obvious (the frame is a\n// three-part `box-shadow`, not a border; the first and last rows carry the\n// corner radii, not the container), and they move when libadwaita moves. That\n// is a platform's job, which is what this subpath is.\n//\n// Everything below is portable React Native underneath — no widget is created\n// that an app could not have created itself. Compare `Widget`/`SlotContent`\n// next door, which exist precisely because they CANNOT be written in RN.\nimport { type ReactNode } from \"react\"\nimport { useColorScheme } from \"../apis/index\"\nimport { Pressable } from \"../components/pressable\"\nimport { Text } from \"../components/text\"\nimport { View } from \"../components/view\"\nimport { PlatformColor, StyleSheet } from \"../style/index\"\nimport type { StyleProp } from \"../contracts\"\n\n/**\n * Where a row sits in its list, which is what decides its corner radii and\n * whether it draws a separator under itself.\n *\n * RN has no `:first-child`, so this is explicit. From a `FlatList` it is\n * `rowPosition(index, data.length)`; from a static list it is the same\n * expression over the array.\n */\nexport type ListRowPosition = \"first\" | \"middle\" | \"last\" | \"only\"\n\n/** The usual derivation, so no call site has to get the one-row case wrong. */\nexport const rowPosition = (index: number, count: number): ListRowPosition => {\n  const first = index === 0\n  const last = index === count - 1\n  if (first && last) {\n    return \"only\"\n  }\n  return first ? \"first\" : last ? \"last\" : \"middle\"\n}\n\n// libadwaita 1.9, /org/gnome/Adwaita/styles/gtk.css:\n//   list.boxed-list { background-color: var(--card-bg-color); border-radius: 12px;\n//                     box-shadow: 0 0 0 1px RGB(0 0 6/3%),\n//                                 0 1px 3px 1px RGB(0 0 6/7%),\n//                                 0 2px 6px 2px RGB(0 0 6/3%); }\nconst RADIUS = 12\n\nconst styles = StyleSheet.create({\n  list: {\n    backgroundColor: PlatformColor(\"card-bg-color\"),\n    borderRadius: RADIUS,\n    // The frame is a shadow, not a border, and that distinction is load\n    // bearing: a border would consume the box and inset every row by a pixel,\n    // and no border draws the two soft drops underneath.\n    boxShadow: [\n      {\n        offsetX: 0,\n        offsetY: 0,\n        spreadDistance: 1,\n        color: \"rgba(0, 0, 6, 0.03)\",\n      },\n      {\n        offsetX: 0,\n        offsetY: 1,\n        blurRadius: 3,\n        spreadDistance: 1,\n        color: \"rgba(0, 0, 6, 0.07)\",\n      },\n      {\n        offsetX: 0,\n        offsetY: 2,\n        blurRadius: 6,\n        spreadDistance: 2,\n        color: \"rgba(0, 0, 6, 0.03)\",\n      },\n    ],\n  },\n  // `list > row { padding: 2px }` plus\n  // `row > box.header { margin: 0 12px; border-spacing: 6px; min-height: 50px }`\n  // — 2 + 50 + 2 + the 1px separator is the 55px row pitch measured off the\n  // widget's own screenshot.\n  row: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    minHeight: 54,\n    paddingVertical: 2,\n    paddingHorizontal: 14,\n    gap: 6,\n  },\n  separatorUnder: {\n    borderBottomWidth: 1,\n    borderBottomColor: PlatformColor(\"card-shade-color\"),\n  },\n  firstRow: { borderTopLeftRadius: RADIUS, borderTopRightRadius: RADIUS },\n  lastRow: {\n    borderBottomLeftRadius: RADIUS,\n    borderBottomRightRadius: RADIUS,\n  },\n  // `row > box.header > box.title { margin: 6px 0; border-spacing: 3px }`\n  titleBox: { flex: 1, marginVertical: 6, gap: 3 },\n  // The theme font is `Adwaita Sans 11`, i.e. 11pt = 14.67px, and Adwaita sets\n  // the subtitle to `font-size: smaller` — Pango's one-step-down, 1/1.2. RN's\n  // fontSize is numeric only (there is no `smaller`, no em, no inherited\n  // percentage), so the computed value is what an app can write. Documented\n  // in docs/api.md rather than hidden here.\n  title: { fontSize: 14.7 },\n  // `row label.subtitle { opacity: var(--dim-opacity) }`, 55% in the light\n  // Adwaita palette.\n  subtitle: { fontSize: 12.2, opacity: 0.55 },\n  separator: {\n    height: 1,\n    backgroundColor: PlatformColor(\"card-shade-color\"),\n  },\n})\n\n// Adwaita tints the hover and press states with a fraction of the FOREGROUND\n// colour (`color-mix(in srgb, currentColor 4%, transparent)`), so one literal\n// cannot serve both themes and CSS colour functions are not part of RN's\n// colour contract. Two literals plus the scheme is what an RN app writes on\n// every platform, and it is what this does.\nconst TINTS = {\n  light: { hover: \"rgba(0, 0, 0, 0.04)\", press: \"rgba(0, 0, 0, 0.08)\" },\n  dark: {\n    hover: \"rgba(255, 255, 255, 0.04)\",\n    press: \"rgba(255, 255, 255, 0.08)\",\n  },\n} as const\n\nexport type ListProps = {\n  children?: ReactNode\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it\n * directly, or a `FlatList` whose `renderItem` returns them.\n *\n * ```tsx\n * <List>\n *   {tasks.map((task, index) => (\n *     <ListRow\n *       key={task.id}\n *       title={task.title}\n *       position={rowPosition(index, tasks.length)}\n *       onPress={() => open(task)}\n *     />\n *   ))}\n * </List>\n * ```\n */\nexport const List = ({ children, style, testID }: ListProps): ReactNode => (\n  <View\n    testID={testID}\n    style={[styles.list, style]}\n  >\n    {children}\n  </View>\n)\n\nexport type ListRowProps = {\n  /** Primary line. A string renders with the row's own typography; a node is\n   *  rendered as given, for a title that needs its own styling. */\n  title?: ReactNode\n  /** Second, dimmed line. Omitted rows are single-line, as `AdwActionRow`'s\n   *  are. */\n  subtitle?: ReactNode\n  /** Leading content — a checkbox, an icon, a colour swatch. */\n  prefix?: ReactNode\n  /** Trailing content — buttons, a value, a chevron. */\n  suffix?: ReactNode\n  /** Makes the row activatable: it gains the hover and press tints and calls\n   *  this. Without it the row is inert, like a non-`activatable`\n   *  `AdwActionRow`. */\n  onPress?: () => void\n  /** Position in the list, for the corner radii and the separator. Defaults\n   *  to `\"middle\"`, which is right for a row that is neither. */\n  position?: ListRowPosition\n  /** Draw the hairline under this row. Default true for every position except\n   *  the last — set it false when the list supplies its own separators (a\n   *  `FlatList`'s `ItemSeparatorComponent`, say). */\n  separator?: boolean\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * One row of a {@link List} — `AdwActionRow`'s layout and states, built from\n * `Pressable`, `View` and `Text`.\n *\n * Hover and press come from `Pressable`'s state callback, so they cost what\n * they cost anywhere else in this platform: the hover path swaps a CSS class\n * on the widget without a React render (see components/pressable.tsx).\n *\n * **Not yet:** keyboard navigation between rows and a focus ring.\n * `GtkListBox` implements those as widget behaviour and RN has no focus model\n * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`\n * with no `focused`. The ring itself is now drawable (`outlineWidth` and\n * friends), so what is missing is the state, not the paint.\n */\nexport const ListRow = ({\n  title,\n  subtitle,\n  prefix,\n  suffix,\n  onPress,\n  position = \"middle\",\n  separator,\n  style,\n  testID,\n}: ListRowProps): ReactNode => {\n  const scheme = useColorScheme() === \"dark\" ? \"dark\" : \"light\"\n  const tints = TINTS[scheme]\n  const isFirst = position === \"first\" || position === \"only\"\n  const isLast = position === \"last\" || position === \"only\"\n  const drawSeparator = separator ?? !isLast\n\n  const body = (\n    <>\n      {prefix}\n      <View style={styles.titleBox}>\n        {typeof title === \"string\" ? (\n          <Text style={styles.title}>{title}</Text>\n        ) : (\n          title\n        )}\n        {typeof subtitle === \"string\" ? (\n          <Text style={styles.subtitle}>{subtitle}</Text>\n        ) : (\n          subtitle\n        )}\n      </View>\n      {suffix}\n    </>\n  )\n\n  const base = [\n    styles.row,\n    isFirst && styles.firstRow,\n    isLast && styles.lastRow,\n    drawSeparator && styles.separatorUnder,\n    style,\n  ]\n\n  if (!onPress) {\n    return (\n      <View\n        testID={testID}\n        style={base}\n      >\n        {body}\n      </View>\n    )\n  }\n\n  return (\n    <Pressable\n      testID={testID}\n      onPress={onPress}\n      // The tint goes on the ROW, which is why the corner radii above have to\n      // be on the row too: a hovered first row must round its own top corners\n      // or the highlight paints square over the card's rounded ones.\n      style={({ hovered, pressed }) => [\n        ...base,\n        hovered && { backgroundColor: tints.hover },\n        pressed && { backgroundColor: tints.press },\n      ]}\n    >\n      {body}\n    </Pressable>\n  )\n}\n\n/**\n * The hairline between two rows, for lists that draw their own separators —\n * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means\n * the rows themselves stay position-agnostic apart from their corners.\n */\nexport const ListSeparator = (): ReactNode => <View style={styles.separator} />\n"]}

package/dist/common/widget.d.ts

@@ -59,25 +59,4 @@ export type ReactNativeLayoutProps = {
     style?: StyleProp;
     onLayout?: (event: LayoutEvent) => void;
 };
-/**
- * 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.
- */
-export declare const wrapReactNative: <P extends object>(Component: ComponentType<P>) => ComponentType<P & ReactNativeLayoutProps>;
+export declare const wrapReactNative: <P extends object>(Component: ComponentType<P>, widgetName?: string) => ComponentType<P & ReactNativeLayoutProps>;

package/dist/common/widget.js

@@ -11,8 +11,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //
 // The visual half of the style (background, border, radius) is applied as a
 // GTK CSS class, the same mechanism View uses.
-import { useContext, useRef } from "react";
-import { HostNodeContext } from "../components/host-node";
+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";
 /**
@@ -92,7 +92,73 @@ export const useWidgetLayout = (ref, options = {}) => {
  * 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.
  */
-export const wrapReactNative = (Component) => {
+// 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);
@@ -117,6 +183,10 @@ export const wrapReactNative = (Component) => {
                 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
@@ -125,16 +195,13 @@ export const wrapReactNative = (Component) => {
         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 = { ...props };
+            const rest = { ...withSlots };
             delete rest.style;
             delete rest.onLayout;
             return _jsx(Component, { ...rest });
         }
-        return _jsx(InLayout, { ...props });
+        return _jsx(InLayout, { ...withSlots });
     };
-    const name = Component.displayName ??
-        Component.name ??
-        "Widget";
     InLayout.displayName = `wrapReactNative(${name}).InLayout`;
     Wrapped.displayName = `wrapReactNative(${name})`;
     return Wrapped;

package/dist/common/widget.js.map

@@ -1 +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 { useContext, useRef, type ComponentType, type ReactNode } from \"react\"\nimport { HostNodeContext } 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 */\nexport const wrapReactNative = <P extends object>(\n  Component: ComponentType<P>,\n): ComponentType<P & ReactNativeLayoutProps> => {\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    // 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 = { ...props } as Partial<ReactNativeLayoutProps>\n      delete rest.style\n      delete rest.onLayout\n      return <Component {...(rest as P)} />\n    }\n    return <InLayout {...props} />\n  }\n\n  const name =\n    (Component as { displayName?: string; name?: string }).displayName ??\n    (Component as { name?: string }).name ??\n    \"Widget\"\n  InLayout.displayName = `wrapReactNative(${name}).InLayout`\n  Wrapped.displayName = `wrapReactNative(${name})`\n  return Wrapped\n}\n"]}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../../src/common/widget.tsx"],"names":[],"mappings":";AAAA,wEAAwE;AACxE,EAAE;AACF,4EAA4E;AAC5E,2EAA2E;AAC3E,2EAA2E;AAC3E,8EAA8E;AAC9E,6EAA6E;AAC7E,8EAA8E;AAC9E,gDAAgD;AAChD,EAAE;AACF,4EAA4E;AAC5E,+CAA+C;AAC/C,OAAO,EACL,cAAc,EACd,UAAU,EACV,MAAM,GAGP,MAAM,OAAO,CAAA;AACd,OAAO,EACL,eAAe,EACf,WAAW,GAEZ,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAY,MAAM,sBAAsB,CAAA;AAYvD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAe,EAAE,EAAE;IAC3E,2EAA2E;IAC3E,0EAA0E;IAC1E,yDAAyD;IACzD,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,MAAM,EAAE;QAC1C,KAAK;QACL,QAAQ;QACR,sEAAsE;QACtE,6DAA6D;QAC7D,iBAAiB,EAAE,IAAI;KACxB,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,MAAM,IACL,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,YAE5C,QAAQ,GACF,CACV,CAAA;AACH,CAAC,CAAA;AAOD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAmC,EACnC,UAAkC,EAAE,EACrB,EAAE;IACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,GAAG,EAAE;QACvC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,iBAAiB,EAAE,IAAI;KACxB,CAAC,CAAA;IACF,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AASD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,oEAAoE;AACpE,gDAAgD;AAChD,EAAE;AACF,2EAA2E;AAC3E,0EAA0E;AAC1E,uEAAuE;AACvE,2EAA2E;AAC3E,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,wEAAwE;AACxE,2EAA2E;AAC3E,yEAAyE;AACzE,kBAAkB;AAClB,EAAE;AACF,2EAA2E;AAC3E,yEAAyE;AACzE,6EAA6E;AAC7E,2EAA2E;AAC3E,6EAA6E;AAC7E,6EAA6E;AAC7E,0EAA0E;AAC1E,2EAA2E;AAC3E,2EAA2E;AAC3E,wEAAwE;AACxE,2EAA2E;AAC3E,MAAM,YAAY,GAAG,CAAC,EACpB,QAAQ,EACR,QAAQ,GAIT,EAAE,EAAE,CAAC;AACJ,wEAAwE;AACxE,wEAAwE;AACxE,wEAAwE;AACxE,0EAA0E;AAC1E,2CAA2C;AAC3C,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACnC,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAA4B,GACvD,CACxB,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,KAAc,EAAW,EAAE,CAC/C,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;AAE7E,uEAAuE;AACvE,4EAA4E;AAC5E,4EAA4E;AAC5E,8BAA8B;AAC9B,MAAM,kBAAkB,GAAG,CAAmB,KAAQ,EAAE,MAAc,EAAK,EAAE;IAC3E,IAAI,OAA4C,CAAA;IAChD,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;YAClB,SAAQ;QACV,CAAC;QACD,MAAM,KAAK,GAAI,KAAiC,CAAC,GAAG,CAAC,CAAA;QACrD,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,SAAQ;QACV,CAAC;QACD,OAAO,KAAK,EAAE,CAAA;QACd,OAAO,CAAC,GAAG,CAAC,GAAG;QACb,wEAAwE;QACxE,qDAAqD;QACrD,KAAC,YAAY,IACX,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,YAE1D,KAAkB,GACN,CAChB,CAAA;IACH,CAAC;IACD,6EAA6E;IAC7E,iEAAiE;IACjE,OAAO,OAAO,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,GAAG,OAAO,EAAQ,CAAC,CAAC,CAAC,KAAK,CAAA;AAC1D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,SAA2B;AAC3B,4EAA4E;AAC5E,sEAAsE;AACtE,mEAAmE;AACnE,UAAmB,EACwB,EAAE;IAC7C,MAAM,IAAI,GACR,UAAU;QACT,SAAqD,CAAC,WAAW;QACjE,SAA+B,CAAC,IAAI;QACrC,QAAQ,CAAA;IAEV,MAAM,QAAQ,GAAG,CAAC,KAAiC,EAAE,EAAE;QACrD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;QAC1C,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;QAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,MAAM,EAAE;YAC1C,KAAK;YACL,QAAQ;YACR,qEAAqE;YACrE,yDAAyD;YACzD,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,IAGb,CAAA;QACD,OAAO,CACL,KAAC,MAAM,IAAC,GAAG,EAAE,MAAM,YACjB,KAAC,SAAS,OACJ,KAAK;gBACT,mEAAmE;gBACnE,mEAAmE;gBACnE,yDAAyD;gBACzD,UAAU,EACR,QAAQ;oBACN,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC;oBACzC,CAAC,CAAC,KAAK,CAAC,UAAU;gBAEtB,oEAAoE;gBACpE,8DAA8D;gBAC9D,8CAA8C;gBAC9C,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI,GAC9B,GACK,CACV,CAAA;IACH,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,CAAC,KAAiC,EAAE,EAAE;QACpD,0EAA0E;QAC1E,0EAA0E;QAC1E,kCAAkC;QAClC,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QACjD,0EAA0E;QAC1E,sEAAsE;QACtE,yEAAyE;QACzE,+DAA+D;QAC/D,MAAM,IAAI,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;QACxC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,wEAAwE;YACxE,gEAAgE;YAChE,MAAM,IAAI,GAAG,EAAE,GAAG,SAAS,EAAqC,CAAA;YAChE,OAAO,IAAI,CAAC,KAAK,CAAA;YACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;YACpB,OAAO,KAAC,SAAS,OAAM,IAAU,GAAI,CAAA;QACvC,CAAC;QACD,OAAO,KAAC,QAAQ,OAAK,SAAS,GAAI,CAAA;IACpC,CAAC,CAAA;IAED,QAAQ,CAAC,WAAW,GAAG,mBAAmB,IAAI,YAAY,CAAA;IAC1D,OAAO,CAAC,WAAW,GAAG,mBAAmB,IAAI,GAAG,CAAA;IAChD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","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,5 +1,6 @@
 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 = {
@@ -16,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,6 +2,7 @@ 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 { setStoredTransform } from "./rect-store";
 import { useLayoutChild, useRnContainer, } from "./use-layout-child";
@@ -84,7 +85,7 @@ const splitAnimated = (style) => {
 // 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, slots } = splitAnimated(style);
     const { host, node, cssClass } = useLayoutChild(widgetRef, {
@@ -92,6 +93,7 @@ const AnimatedView = ({ style, children, onLayout, testID, }) => {
         onLayout,
     });
     useRnContainer(widgetRef, node);
+    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);