react-native-gtkx 0.1.0-alpha.1

package/dist/components/text-input.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Gtk, GtkEntry, GtkLabel, GtkScrolledWindow, GtkTextView, } from "../gtkx/bridge/index";
+import { useLayoutChild } from "./use-layout-child";
+import { View } from "./view";
+const INPUT_PURPOSE = {
+    default: Gtk.InputPurpose.FREE_FORM,
+    numeric: Gtk.InputPurpose.NUMBER,
+    "email-address": Gtk.InputPurpose.EMAIL,
+    "phone-pad": Gtk.InputPurpose.PHONE,
+    url: Gtk.InputPurpose.URL,
+};
+// RC1-WORKAROUND(controllers-as-children): see docs/gtkx-rc1-vs-main.md
+// rc.1: controllers attach imperatively (JSX children work on main only).
+const useFocusController = (widgetRef, onFocus, onBlur) => {
+    const handlers = useRef({ onFocus, onBlur });
+    handlers.current = { onFocus, onBlur };
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const focus = new Gtk.EventControllerFocus();
+        const enter = () => handlers.current.onFocus?.();
+        const leave = () => handlers.current.onBlur?.();
+        focus.on("enter", enter);
+        focus.on("leave", leave);
+        widget.addController(focus);
+        return () => {
+            widget.removeController(focus);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+// Single-line input over GtkEntry. gtkx's controlled-text behavior keeps the
+// widget in sync with the `text` prop (RN controlled semantics); uncontrolled
+// usage passes defaultValue once.
+const SingleLineTextInput = ({ value, defaultValue, onChangeText, onSubmitEditing, onFocus, onBlur, placeholder, secureTextEntry = false, editable = true, keyboardType = "default", style, onLayout, testID, }) => {
+    const widgetRef = useRef(null);
+    useLayoutChild(widgetRef, {
+        style,
+        onLayout,
+        // The entry measures itself (theme-accurate height); width is driven by
+        // the style (flex/width), with a small floor for usability.
+        measureFromWidget: true,
+        extraLayout: { minWidth: 60 },
+    });
+    const controlled = value !== undefined;
+    useFocusController(widgetRef, onFocus, onBlur);
+    return (_jsx(GtkEntry, { ref: widgetRef, name: testID, text: controlled ? value : (defaultValue ?? ""), placeholderText: placeholder ?? "", visibility: !secureTextEntry, editable: editable, sensitive: editable, inputPurpose: INPUT_PURPOSE[keyboardType], onChanged: () => {
+            const widget = widgetRef.current;
+            if (widget) {
+                onChangeText?.(widget.getText());
+            }
+        }, onActivate: () => {
+            const widget = widgetRef.current;
+            if (widget) {
+                onSubmitEditing?.({ nativeEvent: { text: widget.getText() } });
+            }
+        } }));
+};
+const readBuffer = (buffer) => buffer.getText(buffer.getStartIter(), buffer.getEndIter(), true);
+// GtkTextView has no native placeholder — a dim, click-transparent label
+// sits over the empty view (RN shows the placeholder while empty, focused
+// or not).
+const MultilinePlaceholder = ({ text }) => {
+    const labelRef = useRef(null);
+    useLayoutChild(labelRef, {
+        style: { position: "absolute", left: 12, top: 8 },
+        onLayout: undefined,
+    });
+    useLayoutEffect(() => {
+        labelRef.current?.setCanTarget(false);
+        labelRef.current?.addCssClass("dim-label");
+    }, []);
+    return (_jsx(GtkLabel, { ref: labelRef, label: text }));
+};
+// Multiline input over GtkTextView in a GtkScrolledWindow: word wrap, the
+// style sets the box (RN requires a height for multiline), overflowing
+// content scrolls inside. The buffer syncs with `value` under RN controlled
+// semantics; Enter inserts a newline (onSubmitEditing never fires — RN
+// multiline behavior).
+const MultilineTextInput = ({ value, defaultValue, onChangeText, onFocus, onBlur, placeholder, editable = true, style, onLayout, testID, }) => {
+    const scrolledRef = useRef(null);
+    const viewRef = useRef(null);
+    const controlled = value !== undefined;
+    const [empty, setEmpty] = useState((controlled ? (value ?? "") : (defaultValue ?? "")) === "");
+    const suppressEcho = useRef(false);
+    const latest = useRef({ onChangeText });
+    latest.current = { onChangeText };
+    useLayoutEffect(() => {
+        const view = viewRef.current;
+        if (!view) {
+            return;
+        }
+        // Breathing room akin to GtkEntry's built-in padding.
+        view.setLeftMargin(10);
+        view.setRightMargin(10);
+        view.setTopMargin(8);
+        view.setBottomMargin(8);
+        const buffer = view.getBuffer();
+        const initial = controlled ? (value ?? "") : (defaultValue ?? "");
+        if (initial !== "") {
+            suppressEcho.current = true;
+            buffer.setText(initial, -1);
+            suppressEcho.current = false;
+        }
+        const changed = () => {
+            const text = readBuffer(buffer);
+            setEmpty(text === "");
+            if (!suppressEcho.current) {
+                latest.current.onChangeText?.(text);
+            }
+        };
+        buffer.on("changed", changed);
+        return () => {
+            buffer.off("changed", changed);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // RN controlled semantics: the prop wins over whatever was typed.
+    useLayoutEffect(() => {
+        if (!controlled) {
+            return;
+        }
+        const view = viewRef.current;
+        if (!view) {
+            return;
+        }
+        const buffer = view.getBuffer();
+        const next = value ?? "";
+        if (readBuffer(buffer) !== next) {
+            suppressEcho.current = true;
+            buffer.setText(next, -1);
+            suppressEcho.current = false;
+            setEmpty(next === "");
+        }
+    }, [controlled, value]);
+    useFocusController(viewRef, onFocus, onBlur);
+    return (_jsxs(View, { style: [style, { minHeight: 36, minWidth: 60 }], onLayout: onLayout, children: [_jsx(ScrolledFill, { scrolledRef: scrolledRef, children: _jsx(GtkTextView, { ref: viewRef, name: testID, editable: editable, sensitive: editable, wrapMode: Gtk.WrapMode.WORD_CHAR }) }), empty && placeholder ? (_jsx(MultilinePlaceholder, { text: placeholder })) : null] }));
+};
+// The scrolled window fills the styled box exactly (its own layout child).
+const ScrolledFill = ({ scrolledRef, children, }) => {
+    useLayoutChild(scrolledRef, {
+        style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+        onLayout: undefined,
+    });
+    return _jsx(GtkScrolledWindow, { ref: scrolledRef, children: children });
+};
+export const TextInput = (props) => props.multiline ? (_jsx(MultilineTextInput, { ...props })) : (_jsx(SingleLineTextInput, { ...props }));
+//# sourceMappingURL=text-input.js.map

package/dist/components/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../src/components/text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\"\nimport type { StyleProp } from \"../contracts\"\nimport {\n  Gtk,\n  GtkEntry,\n  GtkLabel,\n  GtkScrolledWindow,\n  GtkTextView,\n  type Gtk as GtkNs,\n} from \"../gtkx/bridge/index\"\nimport { useLayoutChild, type LayoutEvent } from \"./use-layout-child\"\nimport { View } from \"./view\"\n\nexport type TextInputProps = {\n  value?: string\n  defaultValue?: string\n  onChangeText?: (text: string) => void\n  onSubmitEditing?: (event: { nativeEvent: { text: string } }) => void\n  onFocus?: () => void\n  onBlur?: () => void\n  placeholder?: string\n  secureTextEntry?: boolean\n  editable?: boolean\n  keyboardType?: \"default\" | \"numeric\" | \"email-address\" | \"phone-pad\" | \"url\"\n  // RN: a multiline input needs a height in the style; Enter inserts a\n  // newline and never fires onSubmitEditing.\n  multiline?: boolean\n  style?: StyleProp\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst INPUT_PURPOSE: Record<\n  NonNullable<TextInputProps[\"keyboardType\"]>,\n  Gtk.InputPurpose\n> = {\n  default: Gtk.InputPurpose.FREE_FORM,\n  numeric: Gtk.InputPurpose.NUMBER,\n  \"email-address\": Gtk.InputPurpose.EMAIL,\n  \"phone-pad\": Gtk.InputPurpose.PHONE,\n  url: Gtk.InputPurpose.URL,\n}\n\n// RC1-WORKAROUND(controllers-as-children): see docs/gtkx-rc1-vs-main.md\n// rc.1: controllers attach imperatively (JSX children work on main only).\nconst useFocusController = (\n  widgetRef: React.RefObject<GtkNs.Widget | null>,\n  onFocus?: () => void,\n  onBlur?: () => void,\n): void => {\n  const handlers = useRef({ onFocus, onBlur })\n  handlers.current = { onFocus, onBlur }\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const focus = new Gtk.EventControllerFocus()\n    const enter = (): void => handlers.current.onFocus?.()\n    const leave = (): void => handlers.current.onBlur?.()\n    focus.on(\"enter\", enter)\n    focus.on(\"leave\", leave)\n    widget.addController(focus)\n    return () => {\n      widget.removeController(focus)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n\n// Single-line input over GtkEntry. gtkx's controlled-text behavior keeps the\n// widget in sync with the `text` prop (RN controlled semantics); uncontrolled\n// usage passes defaultValue once.\nconst SingleLineTextInput = ({\n  value,\n  defaultValue,\n  onChangeText,\n  onSubmitEditing,\n  onFocus,\n  onBlur,\n  placeholder,\n  secureTextEntry = false,\n  editable = true,\n  keyboardType = \"default\",\n  style,\n  onLayout,\n  testID,\n}: TextInputProps) => {\n  const widgetRef = useRef<GtkNs.Entry | null>(null)\n\n  useLayoutChild(widgetRef, {\n    style,\n    onLayout,\n    // The entry measures itself (theme-accurate height); width is driven by\n    // the style (flex/width), with a small floor for usability.\n    measureFromWidget: true,\n    extraLayout: { minWidth: 60 },\n  })\n\n  const controlled = value !== undefined\n\n  useFocusController(widgetRef, onFocus, onBlur)\n\n  return (\n    <GtkEntry\n      ref={widgetRef}\n      name={testID}\n      text={controlled ? value : (defaultValue ?? \"\")}\n      placeholderText={placeholder ?? \"\"}\n      visibility={!secureTextEntry}\n      editable={editable}\n      sensitive={editable}\n      inputPurpose={INPUT_PURPOSE[keyboardType]}\n      onChanged={() => {\n        const widget = widgetRef.current\n        if (widget) {\n          onChangeText?.(widget.getText())\n        }\n      }}\n      onActivate={() => {\n        const widget = widgetRef.current\n        if (widget) {\n          onSubmitEditing?.({ nativeEvent: { text: widget.getText() } })\n        }\n      }}\n    />\n  )\n}\n\nconst readBuffer = (buffer: GtkNs.TextBuffer): string =>\n  buffer.getText(buffer.getStartIter(), buffer.getEndIter(), true)\n\n// GtkTextView has no native placeholder — a dim, click-transparent label\n// sits over the empty view (RN shows the placeholder while empty, focused\n// or not).\nconst MultilinePlaceholder = ({ text }: { text: string }) => {\n  const labelRef = useRef<GtkNs.Label | null>(null)\n  useLayoutChild(labelRef, {\n    style: { position: \"absolute\", left: 12, top: 8 },\n    onLayout: undefined,\n  })\n  useLayoutEffect(() => {\n    labelRef.current?.setCanTarget(false)\n    labelRef.current?.addCssClass(\"dim-label\")\n  }, [])\n  return (\n    <GtkLabel\n      ref={labelRef}\n      label={text}\n    />\n  )\n}\n\n// Multiline input over GtkTextView in a GtkScrolledWindow: word wrap, the\n// style sets the box (RN requires a height for multiline), overflowing\n// content scrolls inside. The buffer syncs with `value` under RN controlled\n// semantics; Enter inserts a newline (onSubmitEditing never fires — RN\n// multiline behavior).\nconst MultilineTextInput = ({\n  value,\n  defaultValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  editable = true,\n  style,\n  onLayout,\n  testID,\n}: TextInputProps) => {\n  const scrolledRef = useRef<GtkNs.ScrolledWindow | null>(null)\n  const viewRef = useRef<GtkNs.TextView | null>(null)\n  const controlled = value !== undefined\n  const [empty, setEmpty] = useState(\n    (controlled ? (value ?? \"\") : (defaultValue ?? \"\")) === \"\",\n  )\n\n  const suppressEcho = useRef(false)\n  const latest = useRef({ onChangeText })\n  latest.current = { onChangeText }\n\n  useLayoutEffect(() => {\n    const view = viewRef.current\n    if (!view) {\n      return\n    }\n    // Breathing room akin to GtkEntry's built-in padding.\n    view.setLeftMargin(10)\n    view.setRightMargin(10)\n    view.setTopMargin(8)\n    view.setBottomMargin(8)\n    const buffer = view.getBuffer()\n    const initial = controlled ? (value ?? \"\") : (defaultValue ?? \"\")\n    if (initial !== \"\") {\n      suppressEcho.current = true\n      buffer.setText(initial, -1)\n      suppressEcho.current = false\n    }\n    const changed = (): void => {\n      const text = readBuffer(buffer)\n      setEmpty(text === \"\")\n      if (!suppressEcho.current) {\n        latest.current.onChangeText?.(text)\n      }\n    }\n    buffer.on(\"changed\", changed)\n    return () => {\n      buffer.off(\"changed\", changed)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // RN controlled semantics: the prop wins over whatever was typed.\n  useLayoutEffect(() => {\n    if (!controlled) {\n      return\n    }\n    const view = viewRef.current\n    if (!view) {\n      return\n    }\n    const buffer = view.getBuffer()\n    const next = value ?? \"\"\n    if (readBuffer(buffer) !== next) {\n      suppressEcho.current = true\n      buffer.setText(next, -1)\n      suppressEcho.current = false\n      setEmpty(next === \"\")\n    }\n  }, [controlled, value])\n\n  useFocusController(viewRef, onFocus, onBlur)\n\n  return (\n    <View\n      style={[style, { minHeight: 36, minWidth: 60 }]}\n      onLayout={onLayout}\n    >\n      <ScrolledFill scrolledRef={scrolledRef}>\n        <GtkTextView\n          ref={viewRef}\n          name={testID}\n          editable={editable}\n          sensitive={editable}\n          wrapMode={Gtk.WrapMode.WORD_CHAR}\n        />\n      </ScrolledFill>\n      {empty && placeholder ? (\n        <MultilinePlaceholder text={placeholder} />\n      ) : null}\n    </View>\n  )\n}\n\n// The scrolled window fills the styled box exactly (its own layout child).\nconst ScrolledFill = ({\n  scrolledRef,\n  children,\n}: {\n  scrolledRef: React.RefObject<GtkNs.ScrolledWindow | null>\n  children: React.ReactNode\n}) => {\n  useLayoutChild(scrolledRef, {\n    style: { position: \"absolute\", left: 0, right: 0, top: 0, bottom: 0 },\n    onLayout: undefined,\n  })\n  return <GtkScrolledWindow ref={scrolledRef}>{children}</GtkScrolledWindow>\n}\n\nexport const TextInput = (props: TextInputProps) =>\n  props.multiline ? (\n    <MultilineTextInput {...props} />\n  ) : (\n    <SingleLineTextInput {...props} />\n  )\n"]}

package/dist/components/text.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { StyleProp } from "../contracts";
+import { type LayoutEvent } from "./use-layout-child";
+export type TextProps = {
+    style?: StyleProp;
+    onLayout?: (event: LayoutEvent) => void;
+    numberOfLines?: number;
+    children?: ReactNode;
+    testID?: string;
+};
+export declare const Text: ({ style, onLayout, numberOfLines, children, testID, }: TextProps) => React.JSX.Element;

package/dist/components/text.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { textAlignToLabelProps } from "../style/index";
+import { createTextProbe, Gtk, GtkLabel, measureWidget, Pango, } from "../gtkx/bridge/index";
+import { useLayoutChild } from "./use-layout-child";
+const flattenToString = (children) => {
+    if (children === null || children === undefined || children === false) {
+        return "";
+    }
+    if (Array.isArray(children)) {
+        return children.map(flattenToString).join("");
+    }
+    return String(children);
+};
+const JUSTIFICATION = {
+    left: Gtk.Justification.LEFT,
+    right: Gtk.Justification.RIGHT,
+    center: Gtk.Justification.CENTER,
+    fill: Gtk.Justification.FILL,
+};
+// Text is a measured Yoga leaf: an offscreen probe label (with the same CSS
+// class, so fonts match) feeds Pango metrics into the layout engine; the
+// visible GtkLabel is positioned by the commit hook like any other widget.
+export const Text = ({ style, onLayout, numberOfLines, children, testID, }) => {
+    const widgetRef = useRef(null);
+    const text = flattenToString(children);
+    // useState lazy init — see the note in use-layout-child.ts (React Compiler).
+    const [probe] = useState(() => createTextProbe());
+    const lastProbeClass = useRef(null);
+    // GTK collapses wrap+ellipsize labels to a single line unless `lines` is
+    // set explicitly — remember how many lines the probe wrapped into, the
+    // layout callback pushes it onto the visible label.
+    const measuredLines = useRef(1);
+    const measure = useMemo(() => {
+        return (width, widthMode) => {
+            const natural = measureWidget(probe, "horizontal").natural;
+            const used = widthMode === "undefined"
+                ? natural
+                : Math.min(natural, Math.max(1, Math.floor(width)));
+            const height = measureWidget(probe, "vertical", used).natural;
+            const singleLine = measureWidget(probe, "vertical", natural).natural;
+            measuredLines.current =
+                singleLine > 0 ? Math.max(1, Math.round(height / singleLine)) : 1;
+            return { width: used, height };
+        };
+        // The probe is stable; re-measure is triggered via markDirty below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const layoutWithLines = useMemo(() => (event) => {
+        const label = widgetRef.current;
+        if (label) {
+            label.setLines(numberOfLines ?? measuredLines.current);
+        }
+        onLayout?.(event);
+    }, [numberOfLines, onLayout]);
+    const { node, cssClass, flat } = useLayoutChild(widgetRef, {
+        style,
+        onLayout: layoutWithLines,
+        measure,
+    });
+    // RN text clips to its box: an under-allocated GtkLabel would otherwise
+    // paint its full text past the allocation (spike finding). Containers keep
+    // overflow VISIBLE (paint-overflow); the text leaf clips.
+    useLayoutEffect(() => {
+        widgetRef.current?.setOverflow(Gtk.Overflow.HIDDEN);
+    }, []);
+    // Keep the probe in sync with everything that affects metrics, then
+    // invalidate the Yoga leaf so the next pass re-measures.
+    useLayoutEffect(() => {
+        probe.setText(text);
+        if (numberOfLines !== undefined) {
+            probe.setLines(numberOfLines);
+            probe.setEllipsize(Pango.EllipsizeMode.END);
+        }
+        else {
+            probe.setLines(-1);
+            probe.setEllipsize(Pango.EllipsizeMode.NONE);
+        }
+        if (lastProbeClass.current !== cssClass) {
+            if (lastProbeClass.current) {
+                probe.removeCssClass(lastProbeClass.current);
+            }
+            if (cssClass) {
+                probe.addCssClass(cssClass);
+            }
+            lastProbeClass.current = cssClass;
+        }
+        node.markDirty();
+    }, [probe, node, text, numberOfLines, cssClass]);
+    const align = textAlignToLabelProps(flat.textAlign);
+    return (_jsx(GtkLabel, { ref: widgetRef, name: testID, label: text, wrap: true, xalign: align.xalign, yalign: 0, justify: JUSTIFICATION[align.justification], lines: numberOfLines, 
+        // RN semantics: the ellipsis is opt-in via numberOfLines. Plain text
+        // wraps naturally; an unbreakable word wider than the rect just clips
+        // (overflow HIDDEN above) — the layout manager allocates the rect
+        // regardless of the label's own minimum, so nothing pushes siblings.
+        ellipsize: numberOfLines !== undefined
+            ? Pango.EllipsizeMode.END
+            : Pango.EllipsizeMode.NONE, cssClasses: cssClass ? [cssClass] : [] }));
+};
+//# sourceMappingURL=text.js.map

package/dist/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { textAlignToLabelProps } from \"../style/index\"\nimport type { MeasureFn, StyleProp } from \"../contracts\"\nimport {\n  createTextProbe,\n  Gtk,\n  GtkLabel,\n  measureWidget,\n  Pango,\n} from \"../gtkx/bridge/index\"\nimport { useLayoutChild, type LayoutEvent } from \"./use-layout-child\"\n\nexport type TextProps = {\n  style?: StyleProp\n  onLayout?: (event: LayoutEvent) => void\n  numberOfLines?: number\n  children?: ReactNode\n  testID?: string\n}\n\nconst flattenToString = (children: ReactNode): string => {\n  if (children === null || children === undefined || children === false) {\n    return \"\"\n  }\n  if (Array.isArray(children)) {\n    return children.map(flattenToString).join(\"\")\n  }\n  return String(children)\n}\n\nconst JUSTIFICATION = {\n  left: Gtk.Justification.LEFT,\n  right: Gtk.Justification.RIGHT,\n  center: Gtk.Justification.CENTER,\n  fill: Gtk.Justification.FILL,\n} as const\n\n// Text is a measured Yoga leaf: an offscreen probe label (with the same CSS\n// class, so fonts match) feeds Pango metrics into the layout engine; the\n// visible GtkLabel is positioned by the commit hook like any other widget.\nexport const Text = ({\n  style,\n  onLayout,\n  numberOfLines,\n  children,\n  testID,\n}: TextProps) => {\n  const widgetRef = useRef<Gtk.Label | null>(null)\n  const text = flattenToString(children)\n\n  // useState lazy init — see the note in use-layout-child.ts (React Compiler).\n  const [probe] = useState<Gtk.Label>(() => createTextProbe())\n\n  const lastProbeClass = useRef<string | null>(null)\n\n  // GTK collapses wrap+ellipsize labels to a single line unless `lines` is\n  // set explicitly — remember how many lines the probe wrapped into, the\n  // layout callback pushes it onto the visible label.\n  const measuredLines = useRef(1)\n\n  const measure = useMemo<MeasureFn>(() => {\n    return (width, widthMode) => {\n      const natural = measureWidget(probe, \"horizontal\").natural\n      const used =\n        widthMode === \"undefined\"\n          ? natural\n          : Math.min(natural, Math.max(1, Math.floor(width)))\n      const height = measureWidget(probe, \"vertical\", used).natural\n      const singleLine = measureWidget(probe, \"vertical\", natural).natural\n      measuredLines.current =\n        singleLine > 0 ? Math.max(1, Math.round(height / singleLine)) : 1\n      return { width: used, height }\n    }\n    // The probe is stable; re-measure is triggered via markDirty below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const layoutWithLines = useMemo(\n    () => (event: LayoutEvent) => {\n      const label = widgetRef.current\n      if (label) {\n        label.setLines(numberOfLines ?? measuredLines.current)\n      }\n      onLayout?.(event)\n    },\n    [numberOfLines, onLayout],\n  )\n\n  const { node, cssClass, flat } = useLayoutChild(widgetRef, {\n    style,\n    onLayout: layoutWithLines,\n    measure,\n  })\n\n  // RN text clips to its box: an under-allocated GtkLabel would otherwise\n  // paint its full text past the allocation (spike finding). Containers keep\n  // overflow VISIBLE (paint-overflow); the text leaf clips.\n  useLayoutEffect(() => {\n    widgetRef.current?.setOverflow(Gtk.Overflow.HIDDEN)\n  }, [])\n\n  // Keep the probe in sync with everything that affects metrics, then\n  // invalidate the Yoga leaf so the next pass re-measures.\n  useLayoutEffect(() => {\n    probe.setText(text)\n    if (numberOfLines !== undefined) {\n      probe.setLines(numberOfLines)\n      probe.setEllipsize(Pango.EllipsizeMode.END)\n    } else {\n      probe.setLines(-1)\n      probe.setEllipsize(Pango.EllipsizeMode.NONE)\n    }\n    if (lastProbeClass.current !== cssClass) {\n      if (lastProbeClass.current) {\n        probe.removeCssClass(lastProbeClass.current)\n      }\n      if (cssClass) {\n        probe.addCssClass(cssClass)\n      }\n      lastProbeClass.current = cssClass\n    }\n    node.markDirty()\n  }, [probe, node, text, numberOfLines, cssClass])\n\n  const align = textAlignToLabelProps(flat.textAlign)\n\n  return (\n    <GtkLabel\n      ref={widgetRef}\n      name={testID}\n      label={text}\n      wrap\n      xalign={align.xalign}\n      yalign={0}\n      justify={JUSTIFICATION[align.justification]}\n      lines={numberOfLines}\n      // RN semantics: the ellipsis is opt-in via numberOfLines. Plain text\n      // wraps naturally; an unbreakable word wider than the rect just clips\n      // (overflow HIDDEN above) — the layout manager allocates the rect\n      // regardless of the label's own minimum, so nothing pushes siblings.\n      ellipsize={\n        numberOfLines !== undefined\n          ? Pango.EllipsizeMode.END\n          : Pango.EllipsizeMode.NONE\n      }\n      cssClasses={cssClass ? [cssClass] : []}\n    />\n  )\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { type RefObject } from "react";
+import type { LayoutNode } from "../layout/index";
+import { StyleSheet } from "../style/index";
+import type { LayoutStyle, MeasureFn, StyleProp, VisualStyle } from "../contracts";
+import { type Gtk } from "../gtkx/bridge/index";
+import { type HostNode } from "./host-node";
+export type LayoutEvent = {
+    nativeEvent: {
+        layout: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    };
+};
+export type LayoutChildOptions = {
+    style: StyleProp | undefined;
+    onLayout: ((event: LayoutEvent) => void) | undefined;
+    measure?: MeasureFn;
+    measureFromWidget?: boolean;
+    extraLayout?: LayoutStyle;
+};
+export type LayoutChild = {
+    host: HostNode;
+    node: LayoutNode;
+    flat: ReturnType<typeof StyleSheet.flatten>;
+    visual: VisualStyle;
+    cssClass: string | null;
+};
+export declare const useLayoutChild: (widgetRef: RefObject<Gtk.Widget | null>, options: LayoutChildOptions) => LayoutChild;
+export type RnContainerOptions = {
+    measure?: (orientation: "horizontal" | "vertical") => number;
+    beforeAllocate?: (width: number, height: number) => void;
+};
+export declare const useRnContainer: (widgetRef: RefObject<Gtk.Widget | null>, node: LayoutNode, options?: RnContainerOptions) => void;

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

@@ -0,0 +1,177 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { splitStyle, StyleSheet } from "../style/index";
+import { defaultCssRegistry } from "../style/registry.gtkx";
+import { allocateChild, attachRnLayout, detachRnLayout, measureWidget, queueAllocate, queueResize, } from "../gtkx/bridge/index";
+import { useHostNode } from "./host-node";
+import { deferDuringAllocate, getStoredOffset, getStoredRect, setStoredRect, } from "./rect-store";
+// Shared plumbing for every leaf/container component: owns one LayoutNode,
+// keeps it in the parent's shadow tree for the component lifetime, applies
+// the layout half of the style and commits Yoga rects into the rect store,
+// where the parent container's RnGtkxLayout allocate() picks them up.
+export const useLayoutChild = (widgetRef, options) => {
+    const host = useHostNode();
+    // useState's lazy initializer is guaranteed once-per-instance even under
+    // the React Compiler — a lazy ref here got its creation memoized ACROSS
+    // component instances, sharing one Yoga node and double-freeing it.
+    const [node] = useState(() => host.engine.createNode());
+    const flat = StyleSheet.flatten(options.style);
+    const { layout, visual } = splitStyle(flat);
+    const effectiveLayout = options.extraLayout
+        ? { ...layout, ...options.extraLayout }
+        : layout;
+    // Re-apply layout style only when it actually changed (keyed effect) —
+    // setStyle dirties the whole tree.
+    const layoutKey = JSON.stringify(effectiveLayout);
+    useLayoutEffect(() => {
+        node.setStyle(JSON.parse(layoutKey));
+    }, [node, layoutKey]);
+    const cssClass = defaultCssRegistry.getClassName(visual);
+    useLayoutEffect(() => {
+        const parent = host.node;
+        // The reconciler has already attached our widget in JSX order, so its
+        // sibling position is the correct Yoga index — this keeps the shadow tree
+        // ordered even for mid-list mounts (conditional children, list inserts).
+        const widget = widgetRef.current;
+        const parentWidget = host.widgetRef.current;
+        let index = parent.children.length;
+        if (widget && parentWidget) {
+            let position = 0;
+            let sibling = parentWidget.getFirstChild();
+            while (sibling !== null && sibling !== widget) {
+                position += 1;
+                sibling = sibling.getNextSibling();
+            }
+            if (sibling === widget) {
+                index = Math.min(position, parent.children.length);
+            }
+        }
+        parent.insertChild(node, index);
+        node.setCommit((rect) => {
+            const widget = widgetRef.current;
+            const parentWidget = host.widgetRef.current;
+            if (!widget || !parentWidget) {
+                return;
+            }
+            const previous = getStoredRect(widget);
+            setStoredRect(widget, rect);
+            const sizeChanged = !previous ||
+                previous.width !== rect.width ||
+                previous.height !== rect.height;
+            const queue = () => {
+                if (sizeChanged) {
+                    // A size change invalidates this widget's cached measure (nested
+                    // managers, ScrolledWindow ranges) and re-allocates the ancestors.
+                    queueResize(widget);
+                }
+                else {
+                    // Pure move: the parent just needs another allocation pass. GTK
+                    // dedupes queued allocates, so per-child calls batch into one.
+                    queueAllocate(parentWidget);
+                }
+            };
+            if (!deferDuringAllocate(widget, queue)) {
+                queue();
+            }
+        });
+        return () => {
+            node.setCommit(null);
+            parent.removeChild(node);
+            node.free();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onLayout = options.onLayout;
+    useLayoutEffect(() => {
+        node.setOnLayout(onLayout
+            ? (rect) => {
+                onLayout({ nativeEvent: { layout: rect } });
+            }
+            : null);
+    }, [node, onLayout]);
+    // The explicit return type keeps the inner params contextually typed: with a
+    // bare lazy initializer TS may match the outer arrow against MeasureFn
+    // itself (useState accepts S | () => S) and drop the context.
+    const [widgetMeasure] = useState(() => (width, widthMode) => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return { width: 0, height: 0 };
+        }
+        const natural = measureWidget(widget, "horizontal").natural;
+        const used = widthMode === "undefined"
+            ? natural
+            : Math.min(natural, Math.max(1, Math.floor(width)));
+        return {
+            width: used,
+            height: measureWidget(widget, "vertical", used).natural,
+        };
+    });
+    const measure = options.measure ?? (options.measureFromWidget ? widgetMeasure : undefined);
+    useLayoutEffect(() => {
+        if (!measure) {
+            return;
+        }
+        node.setMeasureFn(measure);
+        // Widgets measured before their window is mapped report zero (no realized
+        // theme context yet, unlike offscreen probes) and Yoga caches it —
+        // invalidate once the widget actually maps.
+        const widget = widgetRef.current;
+        const remeasure = () => {
+            node.markDirty();
+        };
+        if (options.measureFromWidget && widget) {
+            widget.on("map", remeasure);
+        }
+        return () => {
+            if (options.measureFromWidget && widget) {
+                widget.off("map", remeasure);
+            }
+            // Cleared by free() on unmount; explicit unset only when measure is
+            // removed while mounted.
+            node.setMeasureFn(null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [node, measure]);
+    return { host, node, flat, visual, cssClass };
+};
+// Containers (Root, View, Animated.View, ScrollView content) drive their GTK
+// side with an RnGtkxLayout: measure() reports the engine rect of `node`
+// (minimum == natural — GTK minimums of children never leak upward), and
+// allocate() places every child widget at exactly its stored engine rect
+// plus the Animated offset.
+export const useRnContainer = (widgetRef, node, options) => {
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        attachRnLayout(widget, {
+            measure: (orientation) => {
+                const custom = optionsRef.current?.measure;
+                if (custom) {
+                    return custom(orientation);
+                }
+                const rect = node.getRect();
+                return Math.round((orientation === "horizontal" ? rect?.width : rect?.height) ?? 0);
+            },
+            allocate: (width, height) => {
+                optionsRef.current?.beforeAllocate?.(width, height);
+                let child = widget.getFirstChild();
+                while (child) {
+                    const rect = getStoredRect(child);
+                    if (rect) {
+                        const offset = getStoredOffset(child);
+                        allocateChild(child, rect.x + offset.dx, rect.y + offset.dy, rect.width, rect.height);
+                    }
+                    child = child.getNextSibling();
+                }
+            },
+        });
+        return () => {
+            detachRnLayout(widget);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+//# sourceMappingURL=use-layout-child.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-layout-child.js","sourceRoot":"","sources":["../../src/components/use-layout-child.ts"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState, type RefObject } from \"react\"\nimport type { LayoutNode } from \"../layout/index\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type {\n  LayoutStyle,\n  MeasureFn,\n  Rect,\n  StyleProp,\n  VisualStyle,\n} from \"../contracts\"\nimport {\n  allocateChild,\n  attachRnLayout,\n  detachRnLayout,\n  measureWidget,\n  queueAllocate,\n  queueResize,\n  type Gtk,\n} from \"../gtkx/bridge/index\"\nimport { useHostNode, type HostNode } from \"./host-node\"\nimport {\n  deferDuringAllocate,\n  getStoredOffset,\n  getStoredRect,\n  setStoredRect,\n} from \"./rect-store\"\n\nexport type LayoutEvent = {\n  nativeEvent: {\n    layout: { x: number; y: number; width: number; height: number }\n  }\n}\n\nexport type LayoutChildOptions = {\n  style: StyleProp | undefined\n  onLayout: ((event: LayoutEvent) => void) | undefined\n  measure?: MeasureFn\n  // Leaves with intrinsic GTK sizes (Entry, Switch, Spinner) measure their\n  // own widget so Yoga reserves exactly what the theme will draw.\n  measureFromWidget?: boolean\n  extraLayout?: LayoutStyle\n}\n\nexport type LayoutChild = {\n  host: HostNode\n  node: LayoutNode\n  flat: ReturnType<typeof StyleSheet.flatten>\n  visual: VisualStyle\n  cssClass: string | null\n}\n\n// Shared plumbing for every leaf/container component: owns one LayoutNode,\n// keeps it in the parent's shadow tree for the component lifetime, applies\n// the layout half of the style and commits Yoga rects into the rect store,\n// where the parent container's RnGtkxLayout allocate() picks them up.\nexport const useLayoutChild = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  options: LayoutChildOptions,\n): LayoutChild => {\n  const host = useHostNode()\n\n  // useState's lazy initializer is guaranteed once-per-instance even under\n  // the React Compiler — a lazy ref here got its creation memoized ACROSS\n  // component instances, sharing one Yoga node and double-freeing it.\n  const [node] = useState<LayoutNode>(() => host.engine.createNode())\n\n  const flat = StyleSheet.flatten(options.style)\n  const { layout, visual } = splitStyle(flat)\n  const effectiveLayout = options.extraLayout\n    ? { ...layout, ...options.extraLayout }\n    : layout\n\n  // Re-apply layout style only when it actually changed (keyed effect) —\n  // setStyle dirties the whole tree.\n  const layoutKey = JSON.stringify(effectiveLayout)\n  useLayoutEffect(() => {\n    node.setStyle(JSON.parse(layoutKey) as LayoutStyle)\n  }, [node, layoutKey])\n\n  const cssClass = defaultCssRegistry.getClassName(visual)\n\n  useLayoutEffect(() => {\n    const parent = host.node\n    // The reconciler has already attached our widget in JSX order, so its\n    // sibling position is the correct Yoga index — this keeps the shadow tree\n    // ordered even for mid-list mounts (conditional children, list inserts).\n    const widget = widgetRef.current\n    const parentWidget = host.widgetRef.current\n    let index = parent.children.length\n    if (widget && parentWidget) {\n      let position = 0\n      let sibling = parentWidget.getFirstChild()\n      while (sibling !== null && sibling !== widget) {\n        position += 1\n        sibling = sibling.getNextSibling()\n      }\n      if (sibling === widget) {\n        index = Math.min(position, parent.children.length)\n      }\n    }\n    parent.insertChild(node, index)\n    node.setCommit((rect: Rect) => {\n      const widget = widgetRef.current\n      const parentWidget = host.widgetRef.current\n      if (!widget || !parentWidget) {\n        return\n      }\n      const previous = getStoredRect(widget)\n      setStoredRect(widget, rect)\n      const sizeChanged =\n        !previous ||\n        previous.width !== rect.width ||\n        previous.height !== rect.height\n      const queue = (): void => {\n        if (sizeChanged) {\n          // A size change invalidates this widget's cached measure (nested\n          // managers, ScrolledWindow ranges) and re-allocates the ancestors.\n          queueResize(widget)\n        } else {\n          // Pure move: the parent just needs another allocation pass. GTK\n          // dedupes queued allocates, so per-child calls batch into one.\n          queueAllocate(parentWidget)\n        }\n      }\n      if (!deferDuringAllocate(widget, queue)) {\n        queue()\n      }\n    })\n    return () => {\n      node.setCommit(null)\n      parent.removeChild(node)\n      node.free()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const onLayout = options.onLayout\n  useLayoutEffect(() => {\n    node.setOnLayout(\n      onLayout\n        ? (rect: Rect) => {\n            onLayout({ nativeEvent: { layout: rect } })\n          }\n        : null,\n    )\n  }, [node, onLayout])\n\n  // The explicit return type keeps the inner params contextually typed: with a\n  // bare lazy initializer TS may match the outer arrow against MeasureFn\n  // itself (useState accepts S | () => S) and drop the context.\n  const [widgetMeasure] = useState<MeasureFn>(\n    (): MeasureFn => (width, widthMode) => {\n      const widget = widgetRef.current\n      if (!widget) {\n        return { width: 0, height: 0 }\n      }\n      const natural = measureWidget(widget, \"horizontal\").natural\n      const used =\n        widthMode === \"undefined\"\n          ? natural\n          : Math.min(natural, Math.max(1, Math.floor(width)))\n      return {\n        width: used,\n        height: measureWidget(widget, \"vertical\", used).natural,\n      }\n    },\n  )\n  const measure =\n    options.measure ?? (options.measureFromWidget ? widgetMeasure : undefined)\n  useLayoutEffect(() => {\n    if (!measure) {\n      return\n    }\n    node.setMeasureFn(measure)\n    // Widgets measured before their window is mapped report zero (no realized\n    // theme context yet, unlike offscreen probes) and Yoga caches it —\n    // invalidate once the widget actually maps.\n    const widget = widgetRef.current\n    const remeasure = (): void => {\n      node.markDirty()\n    }\n    if (options.measureFromWidget && widget) {\n      widget.on(\"map\", remeasure)\n    }\n    return () => {\n      if (options.measureFromWidget && widget) {\n        widget.off(\"map\", remeasure)\n      }\n      // Cleared by free() on unmount; explicit unset only when measure is\n      // removed while mounted.\n      node.setMeasureFn(null)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [node, measure])\n\n  return { host, node, flat, visual, cssClass }\n}\n\nexport type RnContainerOptions = {\n  // Overrides the default engine-rect measure (the window root reports 0 so\n  // the window can shrink freely below the current content size).\n  measure?: (orientation: \"horizontal\" | \"vertical\") => number\n  // Runs before children are placed — the window root syncs the engine\n  // viewport to the actual allocation here.\n  beforeAllocate?: (width: number, height: number) => void\n}\n\n// Containers (Root, View, Animated.View, ScrollView content) drive their GTK\n// side with an RnGtkxLayout: measure() reports the engine rect of `node`\n// (minimum == natural — GTK minimums of children never leak upward), and\n// allocate() places every child widget at exactly its stored engine rect\n// plus the Animated offset.\nexport const useRnContainer = (\n  widgetRef: RefObject<Gtk.Widget | null>,\n  node: LayoutNode,\n  options?: RnContainerOptions,\n): void => {\n  const optionsRef = useRef<RnContainerOptions | undefined>(options)\n  optionsRef.current = options\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    attachRnLayout(widget, {\n      measure: (orientation) => {\n        const custom = optionsRef.current?.measure\n        if (custom) {\n          return custom(orientation)\n        }\n        const rect = node.getRect()\n        return Math.round(\n          (orientation === \"horizontal\" ? rect?.width : rect?.height) ?? 0,\n        )\n      },\n      allocate: (width, height) => {\n        optionsRef.current?.beforeAllocate?.(width, height)\n        let child = widget.getFirstChild()\n        while (child) {\n          const rect = getStoredRect(child)\n          if (rect) {\n            const offset = getStoredOffset(child)\n            allocateChild(\n              child,\n              rect.x + offset.dx,\n              rect.y + offset.dy,\n              rect.width,\n              rect.height,\n            )\n          }\n          child = child.getNextSibling()\n        }\n      },\n    })\n    return () => {\n      detachRnLayout(widget)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n"]}

package/dist/components/view.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { PointerEventsValue, StyleProp } from "../contracts";
+import { type LayoutEvent } from "./use-layout-child";
+export type ViewProps = {
+    style?: StyleProp;
+    pointerEvents?: PointerEventsValue;
+    onLayout?: (event: LayoutEvent) => void;
+    children?: ReactNode;
+    testID?: string;
+};
+export declare const View: ({ style, pointerEvents, onLayout, children, testID, }: ViewProps) => React.JSX.Element;
+export declare const SafeAreaView: ({ style, pointerEvents, onLayout, children, testID, }: ViewProps) => React.JSX.Element;
+export declare const StatusBar: () => null;

package/dist/components/view.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { StyleSheet } from "../style/index";
+import { getViewBoxComponent, setBoxPassthrough, } from "../gtkx/bridge/index";
+import { HostNodeContext } from "./host-node";
+import { useLayoutChild, useRnContainer, } from "./use-layout-child";
+// Every View is a GtkBox subclass (RnGtkxViewBox) driven by RnGtkxLayout:
+// Yoga computes the children's rects, the manager's allocate() applies
+// them. Visual styles arrive as a GTK CSS class produced by the style
+// system. pointerEvents maps onto GTK picking:
+// - none: can-target=false — GTK skips the widget WITHOUT descending, the
+//   whole subtree is transparent (exact RN semantics);
+// - box-none: the subclass' contains() fails for this widget (see
+//   view-box.ts) — the box is never the pick target while children stay
+//   pickable, and toggling never remounts the subtree;
+// - box-only: direct children (and thus their subtrees) get
+//   can-target=false; restored when the mode changes. Nesting another
+//   pointerEvents INSIDE a box-only view is not supported (the restore
+//   pass cannot know about it).
+export const View = ({ style, pointerEvents, onLayout, children, testID, }) => {
+    const widgetRef = useRef(null);
+    const { host, node, cssClass } = useLayoutChild(widgetRef, {
+        style,
+        onLayout,
+    });
+    useRnContainer(widgetRef, node);
+    const mode = pointerEvents ?? StyleSheet.flatten(style)?.pointerEvents ?? "auto";
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        widget.setCanTarget(mode !== "none");
+        setBoxPassthrough(widget, mode === "box-none");
+    }, [mode]);
+    // box-only walks the current children every commit (the set changes with
+    // renders) and restores once when the mode moves away.
+    const wasBoxOnly = useRef(false);
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const boxOnly = mode === "box-only";
+        if (boxOnly || wasBoxOnly.current) {
+            let child = widget.getFirstChild();
+            while (child) {
+                child.setCanTarget(!boxOnly);
+                child = child.getNextSibling();
+            }
+        }
+        wasBoxOnly.current = boxOnly;
+    });
+    const ViewBox = getViewBoxComponent();
+    return (_jsx(ViewBox, { ref: widgetRef, name: testID, cssClasses: cssClass ? [cssClass] : [], children: _jsx(HostNodeContext.Provider, { value: { engine: host.engine, node, widgetRef }, children: children }) }));
+};
+// RN parity aliases (no notches or status bars on the Linux desktop).
+export const SafeAreaView = View;
+export const StatusBar = () => null;
+//# sourceMappingURL=view.js.map