@gtkx/react 0.3.1 → 0.3.3

package/README.md

@@ -5,242 +5,138 @@
 <h1 align="center">GTKX</h1>
 
 <p align="center">
-  <strong>Build native GTK4 desktop applications with React and TypeScript</strong>
+  <strong>Build native GTK4 desktop apps with React</strong>
 </p>
 
 <p align="center">
   <a href="https://eugeniodepalo.github.io/gtkx">Documentation</a> ·
   <a href="#quick-start">Quick Start</a> ·
-  <a href="#examples">Examples</a>
+  <a href="#examples">Examples</a> ·
+  <a href="#contributing">Contributing</a>
 </p>
 
 ---
 
-GTKX bridges React's component model with GTK4's native widget system. Write familiar React code and render it as native Linux desktop applications with full access to GTK4 widgets, signals, and styling.
+GTKX lets you build native Linux desktop applications using React and TypeScript. Write familiar React code that renders as native GTK4 widgets—no Electron, no web views.
 
 ## Features
 
-- **React Components** — Use React hooks, state, and component patterns you already know
-- **Hot Module Replacement** — Edit your code and see changes instantly, powered by Vite
-- **Native Performance** — Direct FFI bindings to GTK4 via Rust and libffi
-- **CLI & Scaffolding** — Get started in seconds with `npx @gtkx/cli@latest create`
-- **CSS-in-JS Styling** — Emotion-style `css` template literals for GTK widgets
-- **Testing Library** — Familiar `screen`, `userEvent`, and query APIs for testing components
+- **React** — Hooks, state, props, and components you already know
+- **Hot Reload** — Edit code and see changes instantly via Vite
+- **Native** — Direct FFI bindings to GTK4 via Rust and libffi
+- **CLI** — `npx @gtkx/cli@latest create` scaffolds a ready-to-go project
+- **CSS-in-JS** — Emotion-style `css` template literals for GTK styling
+- **Testing** — Testing Library-style `screen`, `userEvent`, and queries
 
 ## Quick Start
 
-Create a new GTKX app with a single command:
-
-```bash
-npx @gtkx/cli@latest create
-```
-
-This launches an interactive wizard that sets up your project with TypeScript, your preferred package manager, and optional testing support.
-
-You can also pass options directly:
-
-```bash
-npx @gtkx/cli@latest create my-app --app-id com.example.myapp --pm pnpm --testing vitest
-```
-
-Then start developing with HMR:
-
 ```bash
+npx @gtkx/cli@latest create my-app
 cd my-app
 npm run dev
 ```
 
-Edit your code and see changes instantly without restarting the app!
-
-### Manual Setup
+Edit your code and see changes instantly—no restart needed.
 
-Alternatively, install packages directly:
-
-```bash
-npm install @gtkx/cli @gtkx/react @gtkx/ffi react
-npm install -D @types/react typescript
-```
-
-Create your first app:
+### Example
 
 ```tsx
-// src/app.tsx
+import { render, ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
+import { Orientation } from "@gtkx/ffi/gtk";
 import { useState } from "react";
-import * as Gtk from "@gtkx/ffi/gtk";
-import { ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";
 
-export default function App() {
+const App = () => {
   const [count, setCount] = useState(0);
 
   return (
-    <ApplicationWindow
-      title="My App"
-      defaultWidth={400}
-      defaultHeight={300}
-      onCloseRequest={quit}
-    >
-      <Box
-        orientation={Gtk.Orientation.VERTICAL}
-        spacing={12}
-        marginStart={20}
-        marginEnd={20}
-        marginTop={20}
-        marginBottom={20}
-      >
+    <ApplicationWindow title="Counter" onCloseRequest={quit}>
+      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>
         <Label.Root label={`Count: ${count}`} />
         <Button label="Increment" onClicked={() => setCount((c) => c + 1)} />
       </Box>
     </ApplicationWindow>
   );
-}
-
-export const appId = "org.example.MyApp";
-```
-
-```tsx
-// src/index.tsx
-import { render } from "@gtkx/react";
-import App, { appId } from "./app.js";
-
-render(<App />, appId);
-```
+};
 
-Run with HMR:
-
-```bash
-npx gtkx dev src/app.tsx
-```
-
-Or without HMR (production):
-
-```bash
-npx tsc -b && node dist/index.js
+render(<App />, "org.example.Counter");
 ```
 
 ## Styling
 
-Use `@gtkx/css` for CSS-in-JS styling:
-
 ```tsx
 import { css } from "@gtkx/css";
 import { Button } from "@gtkx/react";
 
-const primaryButton = css`
+const primary = css`
   padding: 16px 32px;
   border-radius: 24px;
   background: linear-gradient(135deg, #3584e4, #9141ac);
   color: white;
-  font-weight: bold;
 `;
 
-const MyButton = () => <Button label="Click me" cssClasses={[primaryButton]} />;
+<Button label="Click me" cssClasses={[primary]} />
 ```
 
-GTK also provides built-in CSS classes like `suggested-action`, `destructive-action`, `card`, and `heading`.
+GTK also provides built-in classes like `suggested-action`, `destructive-action`, `card`, and `heading`.
 
 ## Testing
 
-Use `@gtkx/testing` for Testing Library-style component tests:
-
 ```tsx
-import { cleanup, render, screen, userEvent, fireEvent } from "@gtkx/testing";
+import { cleanup, render, screen, userEvent } from "@gtkx/testing";
 import { AccessibleRole } from "@gtkx/ffi/gtk";
-import { App } from "./app.js";
 
-// Clean up after each test
-afterEach(async () => {
-  await cleanup();
-});
+afterEach(() => cleanup());
 
-test("increments count when clicking button", async () => {
+test("increments count", async () => {
   await render(<App />);
 
-  const button = await screen.findByRole(AccessibleRole.BUTTON, {
-    name: "Increment",
-  });
+  const button = await screen.findByRole(AccessibleRole.BUTTON, { name: "Increment" });
   await userEvent.click(button);
 
   await screen.findByText("Count: 1");
 });
-
-test("can also use fireEvent for low-level signals", async () => {
-  await render(<App />);
-
-  const button = await screen.findByRole(AccessibleRole.BUTTON, {
-    name: "Increment",
-  });
-  fireEvent(button, "clicked");
-
-  await screen.findByText("Count: 1");
-});
 ```
 
-### Available APIs
-
-**Queries** - Find elements in the rendered tree (all async):
-
-- `findBy*` / `findAllBy*` - Waits for element to appear
-
-Query types: `ByRole`, `ByText`, `ByLabelText`, `ByTestId`
-
-**User Interactions**:
+Queries: `findByRole`, `findByText`, `findByLabelText`, `findByTestId`
 
-- `userEvent.click(element)` - Simulate click
-- `userEvent.dblClick(element)` - Simulate double click
-- `userEvent.activate(element)` - Activate element (e.g., press Enter in input)
-- `userEvent.type(element, text)` - Type text into input
-- `userEvent.clear(element)` - Clear input text
-- `userEvent.tab(element, options?)` - Simulate Tab navigation
-- `userEvent.selectOptions(element, values)` - Select options in ComboBox/ListBox
-- `userEvent.deselectOptions(element, values)` - Deselect options in ListBox
-
-**Low-level Events**:
-
-- `fireEvent(element, signalName, ...args)` - Emit any GTK signal with optional arguments
-
-**Utilities**:
-
-- `waitFor(callback)` - Wait for condition
-- `waitForElementToBeRemoved(element)` - Wait for element removal
+User events: `click`, `dblClick`, `type`, `clear`, `tab`, `selectOptions`
 
 ## Examples
 
-### GTK4 Demo
-
-A comprehensive showcase of GTK4 widgets and features:
+| Example | Description |
+| ------- | ----------- |
+| [gtk4-demo](examples/gtk4-demo) | Widget showcase |
+| [todo](examples/todo) | Todo app with tests |
 
 ```bash
-cd examples/gtk4-demo
-pnpm dev
-```
-
-### Todo App
-
-A todo app demonstrating `@gtkx/testing` with realistic component tests:
-
-```bash
-cd examples/todo
-pnpm dev
-pnpm test
+cd examples/gtk4-demo && pnpm dev
 ```
 
 ## Packages
 
-| Package                           | Description                                        |
-| --------------------------------- | -------------------------------------------------- |
-| [@gtkx/cli](packages/cli)         | CLI for creating and developing GTKX apps with HMR |
-| [@gtkx/react](packages/react)     | React reconciler and JSX components                |
-| [@gtkx/ffi](packages/ffi)         | TypeScript FFI bindings for GTK4                   |
-| [@gtkx/native](packages/native)   | Rust native module for FFI bridge                  |
-| [@gtkx/css](packages/css)         | CSS-in-JS styling for GTK widgets                  |
-| [@gtkx/testing](packages/testing) | Testing utilities for GTKX components              |
-| [@gtkx/gir](packages/gir)         | GObject Introspection parser for codegen           |
+| Package | Description |
+| ------- | ----------- |
+| [@gtkx/cli](packages/cli) | CLI with HMR dev server |
+| [@gtkx/react](packages/react) | React reconciler and JSX components |
+| [@gtkx/ffi](packages/ffi) | TypeScript bindings for GTK4/GLib/GIO |
+| [@gtkx/native](packages/native) | Rust native module (libffi bridge) |
+| [@gtkx/css](packages/css) | CSS-in-JS styling |
+| [@gtkx/testing](packages/testing) | Testing utilities |
+| [@gtkx/gir](packages/gir) | GObject Introspection parser |
 
 ## Requirements
 
 - Node.js 20+
-- GTK4
-- Linux (GTK4 is Linux-native)
+- GTK4 (`gtk4-devel` on Fedora, `libgtk-4-dev` on Ubuntu)
+- Linux
+
+## Contributing
+
+We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+- [Report a bug](https://github.com/eugeniodepalo/gtkx/issues/new?template=bug_report.md)
+- [Request a feature](https://github.com/eugeniodepalo/gtkx/issues/new?template=feature_request.md)
+- [Read the Code of Conduct](CODE_OF_CONDUCT.md)
 
 ## License
 

package/dist/batch.d.ts

@@ -1,5 +1,17 @@
 type FlushCallback = () => void;
+/**
+ * Marks the beginning of a React reconciler commit phase.
+ * While in commit, flush callbacks are deferred until endCommit is called.
+ */
 export declare const beginCommit: () => void;
+/**
+ * Marks the end of a React reconciler commit phase.
+ * Executes all pending flush callbacks that were deferred during the commit.
+ */
 export declare const endCommit: () => void;
+/**
+ * Schedules a callback to be executed, deferring it if currently in a commit phase.
+ * This ensures GTK state updates happen after React has finished its batch of changes.
+ */
 export declare const scheduleFlush: (callback: FlushCallback) => void;
 export {};

package/dist/batch.js

@@ -1,8 +1,16 @@
 const pendingFlushes = new Set();
 let inCommit = false;
+/**
+ * Marks the beginning of a React reconciler commit phase.
+ * While in commit, flush callbacks are deferred until endCommit is called.
+ */
 export const beginCommit = () => {
     inCommit = true;
 };
+/**
+ * Marks the end of a React reconciler commit phase.
+ * Executes all pending flush callbacks that were deferred during the commit.
+ */
 export const endCommit = () => {
     inCommit = false;
     if (pendingFlushes.size > 0) {
@@ -15,6 +23,10 @@ export const endCommit = () => {
         });
     }
 };
+/**
+ * Schedules a callback to be executed, deferring it if currently in a commit phase.
+ * This ensures GTK state updates happen after React has finished its batch of changes.
+ */
 export const scheduleFlush = (callback) => {
     if (inCommit) {
         pendingFlushes.add(callback);

package/dist/factory.d.ts

@@ -1,6 +1,13 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "./node.js";
 import { type ROOT_NODE_CONTAINER } from "./nodes/root.js";
+/**
+ * Generic props type for React component properties passed to GTK nodes.
+ */
 export type Props = Record<string, unknown>;
 export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
+/**
+ * Creates a Node instance for the given JSX element type.
+ * Matches the type against registered node classes and initializes with props.
+ */
 export declare const createNode: (type: string, props: Props, existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;

package/dist/factory.js

@@ -16,9 +16,7 @@ import { TextViewNode } from "./nodes/text-view.js";
 import { WidgetNode } from "./nodes/widget.js";
 import { WindowNode } from "./nodes/window.js";
 export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
-const NODE_CLASSES = [
-    RootNode,
-    // Virtual nodes (no widget)
+const VIRTUAL_NODES = [
     ColumnViewColumnNode,
     ColumnViewItemNode,
     ListItemNode,
@@ -30,14 +28,16 @@ const NODE_CLASSES = [
     MenuSectionNode,
     MenuSubmenuNode,
     SlotNode,
-    // Specialized widget nodes
+];
+const SPECIALIZED_NODES = [
     WindowNode,
     AboutDialogNode,
     TextViewNode,
     ApplicationMenuNode,
     PopoverMenuRootNode,
     PopoverMenuBarNode,
-    // Container nodes
+];
+const CONTAINER_NODES = [
     ActionBarNode,
     FlowBoxNode,
     ListBoxNode,
@@ -48,9 +48,12 @@ const NODE_CLASSES = [
     ListViewNode,
     NotebookNode,
     StackNode,
-    // Catch-all (must be last)
-    WidgetNode,
 ];
+const NODE_CLASSES = [RootNode, ...VIRTUAL_NODES, ...SPECIALIZED_NODES, ...CONTAINER_NODES, WidgetNode];
+/**
+ * Creates a Node instance for the given JSX element type.
+ * Matches the type against registered node classes and initializes with props.
+ */
 export const createNode = (type, props, existingWidget) => {
     for (const NodeClass of NODE_CLASSES) {
         if (NodeClass.matches(type, existingWidget)) {

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 export { createRef } from "@gtkx/ffi";
+/**
+ * @private Internal symbol used to identify the root container node.
+ * This is an internal API used only by @gtkx/testing. Do not use directly.
+ */
+export { ROOT_NODE_CONTAINER } from "./factory.js";
 export * from "./generated/jsx.js";
 export { createPortal } from "./portal.js";
 export { reconciler } from "./reconciler.js";

package/dist/index.js

@@ -1,4 +1,9 @@
 export { createRef } from "@gtkx/ffi";
+/**
+ * @private Internal symbol used to identify the root container node.
+ * This is an internal API used only by @gtkx/testing. Do not use directly.
+ */
+export { ROOT_NODE_CONTAINER } from "./factory.js";
 export * from "./generated/jsx.js";
 export { createPortal } from "./portal.js";
 export { reconciler } from "./reconciler.js";

package/dist/nodes/column-view.js

@@ -1,4 +1,5 @@
-import { getObject, getObjectId } from "@gtkx/ffi";
+import { getInterface, getObject, getObjectId } from "@gtkx/ffi";
+import * as Gio from "@gtkx/ffi/gio";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { scheduleFlush } from "../batch.js";
@@ -11,7 +12,9 @@ export class ColumnViewNode extends Node {
         return type === "ColumnView.Root";
     }
     initialize(props) {
-        // Initialize state before super.initialize() since updateProps accesses this.state
+        // State must be initialized before super.initialize() since updateProps accesses this.state.
+        // GTK objects can't be created yet because this.widget doesn't exist until super.initialize().
+        // The null placeholders are immediately replaced after super.initialize() completes.
         this.state = {
             stringList: null,
             selectionModel: null,
@@ -30,9 +33,9 @@ export class ColumnViewNode extends Node {
         };
         super.initialize(props);
         const stringList = new Gtk.StringList([]);
-        const sortListModel = new Gtk.SortListModel(stringList, this.widget.getSorter());
+        const sortListModel = new Gtk.SortListModel(getInterface(stringList, Gio.ListModel), this.widget.getSorter());
         sortListModel.setIncremental(true);
-        const selectionModel = new Gtk.SingleSelection(sortListModel);
+        const selectionModel = new Gtk.SingleSelection(getInterface(sortListModel, Gio.ListModel));
         this.widget.setModel(selectionModel);
         this.state.stringList = stringList;
         this.state.sortListModel = sortListModel;
@@ -218,7 +221,8 @@ export class ColumnViewColumnNode extends Node {
     }
     columnView = null;
     initialize(props) {
-        // Initialize state before super.initialize() since updateProps accesses this.state
+        // Unlike ColumnViewNode, we can create GTK objects before super.initialize() here
+        // since this is a virtual node (no widget created by parent class).
         const factory = new Gtk.SignalListItemFactory();
         const column = new Gtk.ColumnViewColumn(props.title, factory);
         const columnId = props.id ?? null;

package/dist/nodes/dropdown.d.ts

@@ -2,10 +2,24 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import { type ItemContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class DropDownNode extends Node<Gtk.DropDown> implements ItemContainer<unknown> {
+type ItemLabelFn = (item: unknown) => string;
+interface DropDownState {
+    store: DropDownStore;
+    onSelectionChanged?: (item: unknown, index: number) => void;
+}
+declare class DropDownStore {
+    private stringList;
+    private items;
+    private labelFn;
+    constructor(labelFn: ItemLabelFn);
+    getModel(): Gtk.StringList;
+    append(item: unknown): void;
+    remove(item: unknown): void;
+    getItem(index: number): unknown;
+    get length(): number;
+}
+export declare class DropDownNode extends Node<Gtk.DropDown, DropDownState> implements ItemContainer<unknown> {
     static matches(type: string): boolean;
-    private store;
-    private onSelectionChanged?;
     initialize(props: Props): void;
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, _beforeItem: unknown): void;
@@ -22,3 +36,4 @@ export declare class DropDownItemNode extends Node<never> {
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
 }
+export {};

package/dist/nodes/dropdown.js

@@ -1,3 +1,5 @@
+import { getInterface } from "@gtkx/ffi";
+import * as Gio from "@gtkx/ffi/gio";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { isItemContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
@@ -35,31 +37,30 @@ export class DropDownNode extends Node {
     static matches(type) {
         return type === "DropDown.Root";
     }
-    store;
-    onSelectionChanged;
     initialize(props) {
-        super.initialize(props);
         const labelFn = props.itemLabel ?? ((item) => String(item));
-        this.onSelectionChanged = props.onSelectionChanged;
-        this.store = new DropDownStore(labelFn);
-        this.widget.setModel(this.store.getModel());
-        if (this.onSelectionChanged) {
+        const store = new DropDownStore(labelFn);
+        const onSelectionChanged = props.onSelectionChanged;
+        this.state = { store, onSelectionChanged };
+        super.initialize(props);
+        this.widget.setModel(getInterface(store.getModel(), Gio.ListModel));
+        if (onSelectionChanged) {
             const handler = () => {
                 const index = this.widget.getSelected();
-                const item = this.store.getItem(index);
-                this.onSelectionChanged?.(item, index);
+                const item = this.state.store.getItem(index);
+                this.state.onSelectionChanged?.(item, index);
             };
             this.connectSignal(this.widget, "notify::selected", handler);
         }
     }
     addItem(item) {
-        this.store.append(item);
+        this.state.store.append(item);
     }
     insertItemBefore(item, _beforeItem) {
         this.addItem(item);
     }
     removeItem(item) {
-        this.store.remove(item);
+        this.state.store.remove(item);
     }
     consumedProps() {
         const consumed = super.consumedProps();
@@ -69,7 +70,7 @@ export class DropDownNode extends Node {
     }
     updateProps(oldProps, newProps) {
         if (oldProps.onSelectionChanged !== newProps.onSelectionChanged) {
-            this.onSelectionChanged = newProps.onSelectionChanged;
+            this.state.onSelectionChanged = newProps.onSelectionChanged;
         }
         super.updateProps(oldProps, newProps);
     }

package/dist/nodes/list.js

@@ -1,4 +1,5 @@
-import { getObject, getObjectId } from "@gtkx/ffi";
+import { getInterface, getObject, getObjectId } from "@gtkx/ffi";
+import * as Gio from "@gtkx/ffi/gio";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { scheduleFlush } from "../batch.js";
 import { isItemContainer } from "../container-interfaces.js";
@@ -10,7 +11,9 @@ export class ListViewNode extends Node {
         return type === "ListView.Root" || type === "GridView.Root";
     }
     initialize(props) {
-        // Initialize state before super.initialize() since updateProps accesses this.state
+        // State must be initialized before super.initialize() since updateProps accesses this.state.
+        // GTK objects can't be created yet because this.widget doesn't exist until super.initialize().
+        // The null placeholders are immediately replaced after super.initialize() completes.
         this.state = {
             stringList: null,
             selectionModel: null,
@@ -22,7 +25,7 @@ export class ListViewNode extends Node {
         };
         super.initialize(props);
         const stringList = new Gtk.StringList([]);
-        const selectionModel = new Gtk.SingleSelection(stringList);
+        const selectionModel = new Gtk.SingleSelection(getInterface(stringList, Gio.ListModel));
         const factory = new Gtk.SignalListItemFactory();
         this.state.stringList = stringList;
         this.state.selectionModel = selectionModel;

package/dist/nodes/menu.js

@@ -1,4 +1,4 @@
-import { getCurrentApp } from "@gtkx/ffi";
+import { getCurrentApp, getInterface } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
@@ -177,7 +177,7 @@ export class MenuItemNode extends Node {
             this.onActivateCallback?.();
         });
         const app = getCurrentApp();
-        app.addAction(this.action);
+        app.addAction(getInterface(this.action, Gio.Action));
         this.entry.action = `app.${this.actionName}`;
         if (this.currentAccels) {
             this.updateAccels(this.currentAccels);

package/dist/portal.js

@@ -18,6 +18,8 @@ import { ROOT_NODE_CONTAINER } from "./factory.js";
  * ```
  */
 export const createPortal = (children, container, key) => {
+    // ReactPortal is an opaque type but we need to construct it manually for custom reconcilers.
+    // The shape matches React's internal portal representation.
     return {
         $$typeof: Symbol.for("react.portal"),
         key: key ?? null,

package/dist/predicates.d.ts

@@ -8,7 +8,16 @@ interface SingleChild extends Gtk.Widget {
 interface Removable extends Gtk.Widget {
     remove(child: unknown): void;
 }
+/**
+ * Type guard that checks if a GTK widget supports appending children via an append method.
+ */
 export declare const isAppendable: (widget: Gtk.Widget) => widget is Appendable;
+/**
+ * Type guard that checks if a GTK widget supports a single child via setChild method.
+ */
 export declare const isSingleChild: (widget: Gtk.Widget) => widget is SingleChild;
+/**
+ * Type guard that checks if a GTK widget supports removing children via a remove method.
+ */
 export declare const isRemovable: (widget: Gtk.Widget) => widget is Removable;
 export {};

package/dist/predicates.js

@@ -1,3 +1,12 @@
+/**
+ * Type guard that checks if a GTK widget supports appending children via an append method.
+ */
 export const isAppendable = (widget) => "append" in widget && typeof widget.append === "function";
+/**
+ * Type guard that checks if a GTK widget supports a single child via setChild method.
+ */
 export const isSingleChild = (widget) => "setChild" in widget && typeof widget.setChild === "function";
+/**
+ * Type guard that checks if a GTK widget supports removing children via a remove method.
+ */
 export const isRemovable = (widget) => "remove" in widget && typeof widget.remove === "function";

package/dist/reconciler.d.ts

@@ -21,6 +21,11 @@ declare class Reconciler {
      */
     getInstance(): ReconcilerInstance;
     private createHostConfig;
+    /**
+     * Creates a React context compatible with the reconciler's internal type.
+     * Cast is necessary because React.Context and ReactReconciler.ReactContext
+     * are structurally identical at runtime but declared as separate types.
+     */
     private createReconcilerContext;
     private createNodeFromContainer;
 }

package/dist/reconciler.js

@@ -99,6 +99,11 @@ class Reconciler {
             waitForCommitToBeReady: () => null,
         };
     }
+    /**
+     * Creates a React context compatible with the reconciler's internal type.
+     * Cast is necessary because React.Context and ReactReconciler.ReactContext
+     * are structurally identical at runtime but declared as separate types.
+     */
     createReconcilerContext(value) {
         const context = React.createContext(value);
         return context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.3.1"
+    "@gtkx/ffi": "0.3.3"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.3.1"
+    "@gtkx/gir": "0.3.3"
   },
   "peerDependencies": {
     "react": "^19"