@gtkx/react 0.7.0 → 0.8.0

package/dist/nodes/flow-box.d.ts

@@ -3,5 +3,8 @@ import { IndexedChildContainerNode } from "./indexed-child-container.js";
 export declare class FlowBoxNode extends IndexedChildContainerNode<Gtk.FlowBox> {
     static matches(type: string): boolean;
     protected getInsertionIndex(before: Gtk.Widget): number;
-    protected getWidgetToRemove(child: Gtk.Widget): Gtk.Widget;
+    private unparentFromChild;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
 }

package/dist/nodes/flow-box.js

@@ -1,3 +1,4 @@
+import { beginBatch, endBatch } from "@gtkx/ffi";
 import { isFlowBoxChild } from "../predicates.js";
 import { IndexedChildContainerNode } from "./indexed-child-container.js";
 export class FlowBoxNode extends IndexedChildContainerNode {
@@ -11,7 +12,30 @@ export class FlowBoxNode extends IndexedChildContainerNode {
         }
         return -1;
     }
-    getWidgetToRemove(child) {
-        return child.getParent() ?? child;
+    unparentFromChild(child) {
+        const parent = child.getParent();
+        if (parent && isFlowBoxChild(parent)) {
+            beginBatch();
+            parent.setChild(null);
+            this.widget.remove(parent);
+            endBatch();
+        }
+    }
+    attachChild(child) {
+        this.unparentFromChild(child);
+        this.widget.append(child);
+    }
+    insertChildBefore(child, before) {
+        this.unparentFromChild(child);
+        const index = this.getInsertionIndex(before);
+        if (index >= 0) {
+            this.widget.insert(child, index);
+        }
+        else {
+            this.widget.append(child);
+        }
+    }
+    detachChild(child) {
+        this.unparentFromChild(child);
     }
 }

package/dist/nodes/header-bar.js

@@ -24,6 +24,9 @@ export class PackContainerNode extends Node {
         if (childWidget) {
             this.removeFromPack(childWidget);
         }
+        else {
+            child.detachFromParent(this);
+        }
     }
 }
 export class AdwHeaderBarNode extends PackContainerNode {

package/dist/nodes/list-box.d.ts

@@ -3,4 +3,8 @@ import { IndexedChildContainerNode } from "./indexed-child-container.js";
 export declare class ListBoxNode extends IndexedChildContainerNode<Gtk.ListBox> {
     static matches(type: string): boolean;
     protected getInsertionIndex(before: Gtk.Widget): number;
+    private unparentFromRow;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
 }

package/dist/nodes/list-box.js

@@ -1,3 +1,4 @@
+import { beginBatch, endBatch } from "@gtkx/ffi";
 import { isListBoxRow } from "../predicates.js";
 import { IndexedChildContainerNode } from "./indexed-child-container.js";
 export class ListBoxNode extends IndexedChildContainerNode {
@@ -5,9 +6,43 @@ export class ListBoxNode extends IndexedChildContainerNode {
         return type === "ListBox";
     }
     getInsertionIndex(before) {
-        if (isListBoxRow(before)) {
-            return before.getIndex();
+        const beforeParent = before.getParent();
+        if (beforeParent && isListBoxRow(beforeParent)) {
+            return beforeParent.getIndex();
         }
         return -1;
     }
+    unparentFromRow(child) {
+        const parent = child.getParent();
+        if (parent && isListBoxRow(parent)) {
+            beginBatch();
+            parent.setChild(null);
+            this.widget.remove(parent);
+            endBatch();
+        }
+    }
+    attachChild(child) {
+        this.unparentFromRow(child);
+        this.widget.append(child);
+    }
+    insertChildBefore(child, before) {
+        this.unparentFromRow(child);
+        const index = this.getInsertionIndex(before);
+        if (index >= 0) {
+            this.widget.insert(child, index);
+        }
+        else {
+            this.widget.append(child);
+        }
+    }
+    detachChild(child) {
+        if (isListBoxRow(child)) {
+            beginBatch();
+            child.setChild(null);
+            this.widget.remove(child);
+            endBatch();
+            return;
+        }
+        this.unparentFromRow(child);
+    }
 }

package/dist/render.d.ts

@@ -1,4 +1,4 @@
-import type { ApplicationFlags } from "@gtkx/ffi/gio";
+import type * as Gio from "@gtkx/ffi/gio";
 import type { ReactNode } from "react";
 export declare const getContainer: () => unknown;
 /**
@@ -19,4 +19,4 @@ export declare const getContainer: () => unknown;
  * @param appId - The application ID (e.g., "com.example.myapp")
  * @param flags - Optional GIO application flags
  */
-export declare const render: (element: ReactNode, appId: string, flags?: ApplicationFlags) => void;
+export declare const render: (element: ReactNode, appId: string, flags?: Gio.ApplicationFlags) => void;

package/dist/render.js

@@ -4,15 +4,6 @@ import { ROOT_NODE_CONTAINER } from "./factory.js";
 import { reconciler } from "./reconciler.js";
 let container = null;
 export const getContainer = () => container;
-const APP_ID_PATTERN = /^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)+$/;
-function validateAppId(appId) {
-    if (!appId || typeof appId !== "string") {
-        throw new Error("appId must be a non-empty string");
-    }
-    if (!APP_ID_PATTERN.test(appId)) {
-        throw new Error(`Invalid appId "${appId}". App ID must be in reverse-DNS format (e.g., "com.example.myapp")`);
-    }
-}
 /**
  * Renders a React element tree as a GTK application.
  * This is the main entry point for GTKX applications.
@@ -32,7 +23,6 @@ function validateAppId(appId) {
  * @param flags - Optional GIO application flags
  */
 export const render = (element, appId, flags) => {
-    validateAppId(appId);
     start(appId, flags);
     const instance = reconciler.getInstance();
     container = instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => {

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { SortType } from "@gtkx/ffi/gtk";
+import type * as Gtk from "@gtkx/ffi/gtk";
 import type { ReactElement, ReactNode } from "react";
 /**
  * Props for slot components that accept children.
@@ -78,9 +78,9 @@ export type ColumnViewRootProps<C extends string = string> = {
     /** The ID of the currently sorted column, or null if unsorted. Controls the sort indicator UI. */
     sortColumn?: C | null;
     /** The current sort direction. Controls the sort indicator UI. */
-    sortOrder?: SortType;
+    sortOrder?: Gtk.SortType;
     /** Callback fired when the user clicks a column header to change sort. */
-    onSortChange?: (column: C | null, order: SortType) => void;
+    onSortChange?: (column: C | null, order: Gtk.SortType) => void;
 };
 export type NotebookPageProps = SlotProps & {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -35,11 +35,12 @@
     "dist"
   ],
   "dependencies": {
-    "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.7.0"
+    "react-reconciler": "^0.33.0",
+    "@gtkx/ffi": "0.8.0"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.7.0"
+    "@gtkx/gir": "0.8.0",
+    "@gtkx/native": "0.8.0"
   },
   "peerDependencies": {
     "react": "^19"