@gtkx/react 0.5.1 → 0.6.0

package/dist/node.js

@@ -1,8 +1,27 @@
-import { getCurrentApp } from "@gtkx/ffi";
+import * as Adw from "@gtkx/ffi/adw";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
+import * as GtkSource from "@gtkx/ffi/gtksource";
+import * as Vte from "@gtkx/ffi/vte";
+import * as WebKit from "@gtkx/ffi/webkit";
 import { CONSTRUCTOR_PARAMS, PROP_SETTERS, SETTER_GETTERS } from "./generated/internal.js";
-import { isAppendable, isRemovable, isSingleChild } from "./predicates.js";
+import { isAddable, isAppendable, isRemovable, isSingleChild } from "./predicates.js";
+const NAMESPACE_REGISTRY = [
+    ["GtkSource", GtkSource],
+    ["WebKit", WebKit],
+    ["Adw", Adw],
+    ["Vte", Vte],
+];
+const resolveWidgetClass = (type) => {
+    for (const [prefix, namespace] of NAMESPACE_REGISTRY) {
+        if (type.startsWith(prefix)) {
+            const className = type.slice(prefix.length);
+            return namespace[className];
+        }
+    }
+    // biome-ignore lint/performance/noDynamicNamespaceImportAccess: dynamic widget resolution by name
+    return Gtk[type];
+};
 const extractConstructorArgs = (type, props) => {
     const params = CONSTRUCTOR_PARAMS[type];
     if (!params)
@@ -49,14 +68,10 @@ export class Node {
     }
     createWidget(type, props) {
         const normalizedType = type.split(".")[0] || type;
-        // biome-ignore lint/performance/noDynamicNamespaceImportAccess: dynamic widget creation
-        const WidgetClass = Gtk[normalizedType];
+        const WidgetClass = resolveWidgetClass(normalizedType);
         if (!WidgetClass) {
             throw new Error(`Unknown GTK widget type: ${normalizedType}`);
         }
-        if (WidgetClass === Gtk.ApplicationWindow) {
-            return new WidgetClass(getCurrentApp());
-        }
         return new WidgetClass(...extractConstructorArgs(normalizedType, props));
     }
     getWidget() {
@@ -79,6 +94,9 @@ export class Node {
         if (isAppendable(parentWidget)) {
             widget.insertBefore(parentWidget, null);
         }
+        else if (isAddable(parentWidget)) {
+            parentWidget.add(widget);
+        }
         else if (isSingleChild(parentWidget)) {
             parentWidget.setChild(widget);
         }

package/dist/nodes/header-bar.d.ts

@@ -0,0 +1,19 @@
+import type * as Adw from "@gtkx/ffi/adw";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { Node } from "../node.js";
+/**
+ * Node for AdwHeaderBar that uses packStart for non-slot children.
+ */
+export declare class AdwHeaderBarNode extends Node<Adw.HeaderBar> {
+    static matches(type: string): boolean;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+}
+/**
+ * Node for Gtk.HeaderBar that uses packStart for children.
+ */
+export declare class HeaderBarNode extends Node<Gtk.HeaderBar> {
+    static matches(type: string): boolean;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+}

package/dist/nodes/header-bar.js

@@ -0,0 +1,45 @@
+import { Node } from "../node.js";
+/**
+ * Node for AdwHeaderBar that uses packStart for non-slot children.
+ */
+export class AdwHeaderBarNode extends Node {
+    static matches(type) {
+        return type === "AdwHeaderBar" || type === "AdwHeaderBar.Root";
+    }
+    appendChild(child) {
+        const childWidget = child.getWidget();
+        if (!childWidget) {
+            child.attachToParent(this);
+            return;
+        }
+        this.widget.packStart(childWidget);
+    }
+    removeChild(child) {
+        const childWidget = child.getWidget();
+        if (childWidget) {
+            this.widget.remove(childWidget);
+        }
+    }
+}
+/**
+ * Node for Gtk.HeaderBar that uses packStart for children.
+ */
+export class HeaderBarNode extends Node {
+    static matches(type) {
+        return type === "HeaderBar";
+    }
+    appendChild(child) {
+        const childWidget = child.getWidget();
+        if (!childWidget) {
+            child.attachToParent(this);
+            return;
+        }
+        this.widget.packStart(childWidget);
+    }
+    removeChild(child) {
+        const childWidget = child.getWidget();
+        if (childWidget) {
+            this.widget.remove(childWidget);
+        }
+    }
+}

package/dist/nodes/toolbar-view.d.ts

@@ -0,0 +1,19 @@
+import { Node } from "../node.js";
+/**
+ * Virtual node for AdwToolbarView Top and Bottom slots.
+ * These slots use addTopBar/addBottomBar instead of setChild.
+ */
+export declare class ToolbarViewSlotNode extends Node<never> {
+    static matches(type: string): boolean;
+    protected isVirtual(): boolean;
+    private slotType;
+    private parentNode;
+    private children;
+    constructor(type: string);
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    attachToParent(parent: Node): void;
+    detachFromParent(_parent: Node): void;
+    private addBarToParent;
+    private removeBarFromParent;
+}

package/dist/nodes/toolbar-view.js

@@ -0,0 +1,81 @@
+import { Node } from "../node.js";
+/**
+ * Virtual node for AdwToolbarView Top and Bottom slots.
+ * These slots use addTopBar/addBottomBar instead of setChild.
+ */
+export class ToolbarViewSlotNode extends Node {
+    static matches(type) {
+        if (!type.startsWith("AdwToolbarView."))
+            return false;
+        const slot = type.split(".")[1];
+        return slot === "Top" || slot === "Bottom";
+    }
+    isVirtual() {
+        return true;
+    }
+    slotType;
+    parentNode = null;
+    children = [];
+    constructor(type) {
+        super(type);
+        const slot = type.split(".")[1];
+        if (slot !== "Top" && slot !== "Bottom") {
+            throw new Error(`Invalid toolbar view slot type: ${type}`);
+        }
+        this.slotType = slot;
+    }
+    appendChild(child) {
+        const childWidget = child.getWidget();
+        if (!childWidget)
+            return;
+        this.children.push(child);
+        if (this.parentNode) {
+            this.addBarToParent(childWidget);
+        }
+    }
+    removeChild(child) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+        }
+        const childWidget = child.getWidget();
+        if (this.parentNode && childWidget) {
+            this.removeBarFromParent(childWidget);
+        }
+    }
+    attachToParent(parent) {
+        this.parentNode = parent;
+        for (const child of this.children) {
+            const childWidget = child.getWidget();
+            if (childWidget) {
+                this.addBarToParent(childWidget);
+            }
+        }
+    }
+    detachFromParent(_parent) {
+        for (const child of this.children) {
+            const childWidget = child.getWidget();
+            if (childWidget) {
+                this.removeBarFromParent(childWidget);
+            }
+        }
+        this.parentNode = null;
+    }
+    addBarToParent(childWidget) {
+        const parentWidget = this.parentNode?.getWidget();
+        if (!parentWidget)
+            return;
+        if (this.slotType === "Top") {
+            parentWidget.addTopBar(childWidget);
+        }
+        else {
+            parentWidget.addBottomBar(childWidget);
+        }
+    }
+    removeBarFromParent(childWidget) {
+        const parentWidget = this.parentNode?.getWidget();
+        if (!parentWidget)
+            return;
+        parentWidget.remove(childWidget);
+    }
+}

package/dist/nodes/window.js

@@ -1,15 +1,24 @@
 import { getCurrentApp } from "@gtkx/ffi";
+import * as Adw from "@gtkx/ffi/adw";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import { getNumberProp } from "../props.js";
+const WINDOW_TYPES = new Set(["Window", "ApplicationWindow", "AdwWindow", "AdwApplicationWindow"]);
 export class WindowNode extends Node {
     static matches(type) {
-        return type === "Window" || type === "ApplicationWindow";
+        return WINDOW_TYPES.has(type.split(".")[0] || type);
     }
     createWidget(type, _props) {
-        if (type === "ApplicationWindow") {
+        const normalizedType = type.split(".")[0] || type;
+        if (normalizedType === "ApplicationWindow") {
             return new Gtk.ApplicationWindow(getCurrentApp());
         }
+        if (normalizedType === "AdwApplicationWindow") {
+            return new Adw.ApplicationWindow(getCurrentApp());
+        }
+        if (normalizedType === "AdwWindow") {
+            return new Adw.Window();
+        }
         return new Gtk.Window();
     }
     detachFromParent(_parent) {

package/dist/portal.d.ts

@@ -17,7 +17,7 @@ import type { ReactNode, ReactPortal } from "react";
  * {createPortal(<AboutDialog programName="My App" />)}
  *
  * // Render into a specific container
- * {createPortal(<Label.Root label="This is in the Box" />, boxRef.current)}
+ * {createPortal(<Label label="This is in the Box" />, boxRef.current)}
  * ```
  */
 export declare const createPortal: (children: ReactNode, container?: unknown, key?: string | null) => ReactPortal;

package/dist/portal.js

@@ -17,7 +17,7 @@ import { ROOT_NODE_CONTAINER } from "./factory.js";
  * {createPortal(<AboutDialog programName="My App" />)}
  *
  * // Render into a specific container
- * {createPortal(<Label.Root label="This is in the Box" />, boxRef.current)}
+ * {createPortal(<Label label="This is in the Box" />, boxRef.current)}
  * ```
  */
 export const createPortal = (children, container, key) => {

package/dist/predicates.d.ts

@@ -2,6 +2,9 @@ import type * as Gtk from "@gtkx/ffi/gtk";
 interface Appendable extends Gtk.Widget {
     append(child: unknown): void;
 }
+interface Addable extends Gtk.Widget {
+    add(child: unknown): void;
+}
 interface SingleChild extends Gtk.Widget {
     setChild(child: unknown): void;
 }
@@ -12,6 +15,10 @@ interface Removable extends Gtk.Widget {
  * 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 adding children via an add method.
+ */
+export declare const isAddable: (widget: Gtk.Widget) => widget is Addable;
 /**
  * Type guard that checks if a GTK widget supports a single child via setChild method.
  */

package/dist/predicates.js

@@ -2,6 +2,10 @@
  * 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 adding children via an add method.
+ */
+export const isAddable = (widget) => "add" in widget && typeof widget.add === "function";
 /**
  * Type guard that checks if a GTK widget supports a single child via setChild method.
  */

package/dist/reconciler.js

@@ -32,7 +32,7 @@ class Reconciler {
             createInstance: (type, props) => {
                 return createNode(type, props);
             },
-            createTextInstance: (text) => createNode("Label.Root", { label: text }),
+            createTextInstance: (text) => createNode("Label", { label: text }),
             appendInitialChild: (parent, child) => parent.appendChild(child),
             finalizeInitialChildren: () => true,
             commitUpdate: (instance, _type, oldProps, newProps) => {

package/package.json

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