@gtkx/react 0.1.35 → 0.1.36

package/dist/codegen/jsx-generator.js

@@ -1,8 +1,10 @@
 import { toCamelCase, toPascalCase } from "@gtkx/gir";
 import { format } from "prettier";
-const LIST_WIDGETS = new Set(["ListView", "ColumnView", "GridView"]);
+const LIST_WIDGETS = new Set(["ListView", "GridView"]);
+const COLUMN_VIEW_WIDGET = "ColumnView";
 const DROPDOWN_WIDGETS = new Set(["DropDown"]);
 const GRID_WIDGETS = new Set(["Grid"]);
+const NOTEBOOK_WIDGET = "Notebook";
 const INTERNALLY_PROVIDED_PARAMS = {
     ApplicationWindow: new Set(["application"]),
 };
@@ -27,8 +29,10 @@ const toJsxPropertyType = (tsType) => {
     return `Gtk.${result}`;
 };
 const isListWidget = (widgetName) => LIST_WIDGETS.has(widgetName);
+const isColumnViewWidget = (widgetName) => widgetName === COLUMN_VIEW_WIDGET;
 const isDropDownWidget = (widgetName) => DROPDOWN_WIDGETS.has(widgetName);
 const isGridWidget = (widgetName) => GRID_WIDGETS.has(widgetName);
+const isNotebookWidget = (widgetName) => widgetName === NOTEBOOK_WIDGET;
 const sanitizeDoc = (doc) => {
     let result = doc;
     result = result.replace(/<picture>[\s\S]*?<\/picture>/gi, "");
@@ -113,14 +117,14 @@ export class JsxGenerator {
             `import type { ReactNode, Ref } from "react";`,
             ...externalImports,
             `import type * as Gtk from "@gtkx/ffi/gtk";`,
-            `import type { GridChildProps, ListItemProps, SlotProps } from "../types.js";`,
+            `import type { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";`,
             "",
         ].join("\n");
     }
     generateCommonTypes(widgetClass) {
         const widgetPropsContent = this.generateWidgetPropsContent(widgetClass);
         return `
-export { SlotProps, GridChildProps, ListItemProps };
+export { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps };
 
 ${widgetPropsContent}
 `;
@@ -309,8 +313,13 @@ ${widgetPropsContent}
         }
         if (isListWidget(widget.name)) {
             lines.push("");
-            lines.push(`\t/** Function to render each item as a GTK widget */`);
-            lines.push(`\trenderItem?: (item: any) => Gtk.Widget;`);
+            lines.push(`\t/**`);
+            lines.push(`\t * Render function for list items.`);
+            lines.push(`\t * Called with null during setup/unbind and with the actual item during bind.`);
+            lines.push(`\t * The ref callback must be attached to the root widget to set it as the list item's child.`);
+            lines.push(`\t */`);
+            lines.push(`\t// biome-ignore lint/suspicious/noExplicitAny: allows typed renderItem callbacks`);
+            lines.push(`\trenderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;`);
         }
         if (isDropDownWidget(widget.name)) {
             lines.push("");
@@ -523,16 +532,22 @@ ${widgetPropsContent}
             const nonChildSlots = metadata.namedChildSlots.filter((slot) => slot.slotName !== "Child");
             const hasMeaningfulSlots = nonChildSlots.length > 0 ||
                 isListWidget(widget.name) ||
+                isColumnViewWidget(widget.name) ||
                 isDropDownWidget(widget.name) ||
-                isGridWidget(widget.name);
+                isGridWidget(widget.name) ||
+                isNotebookWidget(widget.name);
             const docComment = widget.doc ? formatDoc(widget.doc).trimEnd() : "";
             if (hasMeaningfulSlots) {
                 const valueMembers = [
                     `Root: "${widgetName}.Root" as const`,
                     ...metadata.namedChildSlots.map((slot) => `${slot.slotName}: "${widgetName}.${slot.slotName}" as const`),
                     ...(isListWidget(widget.name) ? [`Item: "${widgetName}.Item" as const`] : []),
+                    ...(isColumnViewWidget(widget.name)
+                        ? [`Column: "${widgetName}.Column" as const`, `Item: "${widgetName}.Item" as const`]
+                        : []),
                     ...(isDropDownWidget(widget.name) ? [`Item: "${widgetName}.Item" as const`] : []),
                     ...(isGridWidget(widget.name) ? [`Child: "${widgetName}.Child" as const`] : []),
+                    ...(isNotebookWidget(widget.name) ? [`Page: "${widgetName}.Page" as const`] : []),
                 ];
                 if (docComment) {
                     lines.push(`${docComment}\nexport const ${widgetName} = {\n\t${valueMembers.join(",\n\t")},\n};`);
@@ -565,8 +580,10 @@ ${widgetPropsContent}
             const nonChildSlots = metadata.namedChildSlots.filter((slot) => slot.slotName !== "Child");
             const hasMeaningfulSlots = nonChildSlots.length > 0 ||
                 isListWidget(widget.name) ||
+                isColumnViewWidget(widget.name) ||
                 isDropDownWidget(widget.name) ||
-                isGridWidget(widget.name);
+                isGridWidget(widget.name) ||
+                isNotebookWidget(widget.name);
             if (hasMeaningfulSlots) {
                 elements.push(`"${widgetName}.Root": ${propsName};`);
             }
@@ -579,12 +596,19 @@ ${widgetPropsContent}
             if (isListWidget(widget.name)) {
                 elements.push(`"${widgetName}.Item": ListItemProps;`);
             }
+            if (isColumnViewWidget(widget.name)) {
+                elements.push(`"${widgetName}.Column": ColumnViewColumnProps;`);
+                elements.push(`"${widgetName}.Item": ListItemProps;`);
+            }
             if (isDropDownWidget(widget.name)) {
                 elements.push(`"${widgetName}.Item": ListItemProps;`);
             }
             if (isGridWidget(widget.name)) {
                 elements.push(`"${widgetName}.Child": GridChildProps;`);
             }
+            if (isNotebookWidget(widget.name)) {
+                elements.push(`"${widgetName}.Page": NotebookPageProps;`);
+            }
         }
         return `
 declare global {

package/dist/factory.d.ts

@@ -1,4 +1,6 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "./node.js";
+import { type ROOT_NODE_CONTAINER } from "./nodes/root.js";
 export type Props = Record<string, unknown>;
-export declare const createNode: (type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget) => Node;
+export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
+export declare const createNode: (type: string, props: Props, app: Gtk.Application, existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;

package/dist/factory.js

@@ -1,23 +1,33 @@
+import { ColumnViewColumnNode, ColumnViewItemNode, ColumnViewNode } from "./nodes/column-view.js";
 import { DropDownItemNode, DropDownNode } from "./nodes/dropdown.js";
 import { GridChildNode, GridNode } from "./nodes/grid.js";
 import { ListItemNode, ListViewNode } from "./nodes/list.js";
+import { NotebookNode, NotebookPageNode } from "./nodes/notebook.js";
 import { OverlayNode } from "./nodes/overlay.js";
+import { RootNode } from "./nodes/root.js";
 import { SlotNode } from "./nodes/slot.js";
 import { WidgetNode } from "./nodes/widget.js";
+export { ROOT_NODE_CONTAINER } from "./nodes/root.js";
 const NODE_CLASSES = [
+    RootNode,
+    ColumnViewColumnNode,
+    ColumnViewItemNode,
     ListItemNode,
     DropDownItemNode,
     GridChildNode,
+    NotebookPageNode,
     SlotNode,
     DropDownNode,
     GridNode,
     OverlayNode,
+    ColumnViewNode,
     ListViewNode,
+    NotebookNode,
     WidgetNode,
 ];
 export const createNode = (type, props, app, existingWidget) => {
     for (const NodeClass of NODE_CLASSES) {
-        if (NodeClass.matches(type)) {
+        if (NodeClass.matches(type, props, existingWidget)) {
             return new NodeClass(type, props, app, existingWidget);
         }
     }

package/dist/flush-sync.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+import type Reconciler from "react-reconciler";
+export declare const updateSync: (element: ReactNode, fiberRoot: Reconciler.FiberRoot) => void;
+export declare const createFiberRoot: () => Reconciler.FiberRoot;

package/dist/flush-sync.js

@@ -0,0 +1,27 @@
+import { ROOT_NODE_CONTAINER } from "./factory.js";
+import { reconciler } from "./reconciler.js";
+export const updateSync = (element, fiberRoot) => {
+    const instance = reconciler.getInstance();
+    const instanceAny = instance;
+    if (typeof instanceAny.flushSync === "function") {
+        instanceAny.flushSync(() => {
+            instance.updateContainer(element, fiberRoot, null, () => { });
+        });
+    }
+    else {
+        if (typeof instanceAny.updateContainerSync === "function") {
+            instanceAny.updateContainerSync(element, fiberRoot, null, () => { });
+        }
+        else {
+            instance.updateContainer(element, fiberRoot, null, () => { });
+        }
+        if (typeof instanceAny.flushSyncWork === "function") {
+            instanceAny.flushSyncWork();
+        }
+    }
+    instance.flushPassiveEffects();
+};
+export const createFiberRoot = () => {
+    const instance = reconciler.getInstance();
+    return instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error) => console.error("List item render error:", error), () => { }, () => { }, () => { }, null);
+};

package/dist/generated/jsx.d.ts

@@ -3,8 +3,8 @@ import type { ReactNode, Ref } from "react";
 import type * as Gdk from "@gtkx/ffi/gdk";
 import type * as Gio from "@gtkx/ffi/gio";
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { GridChildProps, ListItemProps, SlotProps } from "../types.js";
-export { SlotProps, GridChildProps, ListItemProps };
+import type { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps } from "../types.js";
+export { ColumnViewColumnProps, GridChildProps, ListItemProps, ListViewRenderProps, NotebookPageProps, SlotProps, };
 export interface WidgetProps {
     canFocus?: boolean;
     canTarget?: boolean;
@@ -268,7 +268,6 @@ export interface ColumnViewProps extends WidgetProps {
     vadjustment?: Gtk.Adjustment;
     vscrollPolicy?: Gtk.ScrollablePolicy;
     onActivate?: (self: Gtk.ColumnView, position: number) => void;
-    renderItem?: (item: any) => Gtk.Widget;
     ref?: Ref<Gtk.ColumnView>;
 }
 export interface ComboBoxProps extends WidgetProps {
@@ -567,7 +566,7 @@ export interface GridViewProps extends ListBaseProps {
     singleClickActivate?: boolean;
     tabBehavior?: Gtk.ListTabBehavior;
     onActivate?: (self: Gtk.GridView, position: number) => void;
-    renderItem?: (item: any) => Gtk.Widget;
+    renderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;
     ref?: Ref<Gtk.GridView>;
 }
 export interface HeaderBarProps extends WidgetProps {
@@ -725,7 +724,7 @@ export interface ListViewProps extends ListBaseProps {
     singleClickActivate?: boolean;
     tabBehavior?: Gtk.ListTabBehavior;
     onActivate?: (self: Gtk.ListView, position: number) => void;
-    renderItem?: (item: any) => Gtk.Widget;
+    renderItem: (item: any, ref: import("react").RefCallback<Gtk.Widget>) => import("react").ReactElement;
     ref?: Ref<Gtk.ListView>;
 }
 export interface LockButtonProps extends ButtonProps {
@@ -1305,6 +1304,7 @@ export declare const ColorChooserWidget: "ColorChooserWidget";
 export declare const ColorDialogButton: "ColorDialogButton";
 export declare const ColumnView: {
     Root: "ColumnView.Root";
+    Column: "ColumnView.Column";
     Item: "ColumnView.Item";
 };
 export declare const ComboBox: "ComboBox";
@@ -1377,7 +1377,10 @@ export declare const MenuButton: {
     Popover: "MenuButton.Popover";
 };
 export declare const MessageDialog: "MessageDialog";
-export declare const Notebook: "Notebook";
+export declare const Notebook: {
+    Root: "Notebook.Root";
+    Page: "Notebook.Page";
+};
 export declare const Overlay: "Overlay";
 export declare const PageSetupUnixDialog: "PageSetupUnixDialog";
 export declare const Paned: {
@@ -1479,6 +1482,7 @@ declare global {
                 ColorChooserWidget: ColorChooserWidgetProps;
                 ColorDialogButton: ColorDialogButtonProps;
                 "ColumnView.Root": ColumnViewProps;
+                "ColumnView.Column": ColumnViewColumnProps;
                 "ColumnView.Item": ListItemProps;
                 ComboBox: ComboBoxProps;
                 "ComboBox.Child": SlotProps;
@@ -1537,7 +1541,8 @@ declare global {
                 "MenuButton.Child": SlotProps;
                 "MenuButton.Popover": SlotProps;
                 MessageDialog: MessageDialogProps;
-                Notebook: NotebookProps;
+                "Notebook.Root": NotebookProps;
+                "Notebook.Page": NotebookPageProps;
                 Overlay: OverlayProps;
                 "Overlay.Child": SlotProps;
                 PageSetupUnixDialog: PageSetupUnixDialogProps;

package/dist/generated/jsx.js

@@ -3969,6 +3969,7 @@ export const ColorChooserWidget = "ColorChooserWidget";
 export const ColorDialogButton = "ColorDialogButton";
 export const ColumnView = {
     Root: "ColumnView.Root",
+    Column: "ColumnView.Column",
     Item: "ColumnView.Item",
 };
 export const ComboBox = "ComboBox";
@@ -4041,7 +4042,10 @@ export const MenuButton = {
     Popover: "MenuButton.Popover",
 };
 export const MessageDialog = "MessageDialog";
-export const Notebook = "Notebook";
+export const Notebook = {
+    Root: "Notebook.Root",
+    Page: "Notebook.Page",
+};
 export const Overlay = "Overlay";
 export const PageSetupUnixDialog = "PageSetupUnixDialog";
 export const Paned = {

package/dist/index.js

@@ -9,7 +9,9 @@ import { container } from "./render.js";
 export const quit = () => {
     if (container) {
         reconciler.getInstance().updateContainer(null, container, null, () => {
-            stop();
+            setTimeout(() => {
+                stop();
+            }, 0);
         });
     }
     return true;

package/dist/node.d.ts

@@ -1,7 +1,7 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import type { Props } from "./factory.js";
+import type { Props, ROOT_NODE_CONTAINER } from "./factory.js";
 export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget | undefined> {
-    static matches(_type: string): boolean;
+    static matches(_type: string, _props: Props, _existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
     protected signalHandlers: Map<string, number>;
     protected widget: T;
     protected widgetType: string;
@@ -22,5 +22,4 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     protected connectSignal(widget: Gtk.Widget, eventName: string, handler: (...args: unknown[]) => unknown): void;
     protected setProperty(widget: Gtk.Widget, key: string, value: unknown): void;
     mount(_app: Gtk.Application): void;
-    dispose(_app: Gtk.Application): void;
 }

package/dist/node.js

@@ -9,7 +9,7 @@ const extractConstructorArgs = (type, props) => {
     return params.map((p) => props[p.name]);
 };
 export class Node {
-    static matches(_type) {
+    static matches(_type, _props, _existingWidget) {
         return false;
     }
     signalHandlers = new Map();
@@ -162,5 +162,4 @@ export class Node {
         setter.call(widget, value);
     }
     mount(_app) { }
-    dispose(_app) { }
 }

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

@@ -0,0 +1,45 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../factory.js";
+import { Node } from "../node.js";
+export declare class ColumnViewNode extends Node<Gtk.ColumnView> {
+    static matches(type: string): boolean;
+    private stringList;
+    private selectionModel;
+    private items;
+    private columns;
+    constructor(type: string, props: Props, app: Gtk.Application);
+    getItems(): unknown[];
+    addColumn(column: ColumnViewColumnNode): void;
+    removeColumn(column: ColumnViewColumnNode): void;
+    insertColumnBefore(column: ColumnViewColumnNode, before: ColumnViewColumnNode): void;
+    addItem(item: unknown): void;
+    insertItemBefore(item: unknown, beforeItem: unknown): void;
+    removeItem(item: unknown): void;
+}
+export declare class ColumnViewColumnNode extends Node {
+    static matches(type: string): boolean;
+    protected isVirtual(): boolean;
+    private gtkColumn;
+    private factory;
+    private renderCell;
+    private columnView;
+    private fiberRoots;
+    constructor(type: string, props: Props, app: Gtk.Application);
+    getGtkColumn(): Gtk.ColumnViewColumn;
+    setColumnView(columnView: ColumnViewNode | null): void;
+    attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
+    detachFromParent(parent: Node): void;
+    protected consumedProps(): Set<string>;
+    updateProps(oldProps: Props, newProps: Props): void;
+}
+export declare class ColumnViewItemNode extends Node {
+    static matches(type: string): boolean;
+    protected isVirtual(): boolean;
+    private item;
+    constructor(type: string, props: Props, app: Gtk.Application);
+    getItem(): unknown;
+    attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
+    detachFromParent(parent: Node): void;
+}

package/dist/nodes/column-view.js

@@ -0,0 +1,227 @@
+import { getObject, getObjectId } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot, updateSync } from "../flush-sync.js";
+import { Node } from "../node.js";
+export class ColumnViewNode extends Node {
+    static matches(type) {
+        return type === "ColumnView.Root";
+    }
+    stringList;
+    selectionModel;
+    items = [];
+    columns = [];
+    constructor(type, props, app) {
+        super(type, props, app);
+        this.stringList = new Gtk.StringList([]);
+        this.selectionModel = new Gtk.SingleSelection(this.stringList);
+        this.widget.setModel(this.selectionModel);
+    }
+    getItems() {
+        return this.items;
+    }
+    addColumn(column) {
+        this.columns.push(column);
+        const gtkColumn = column.getGtkColumn();
+        this.widget.appendColumn(gtkColumn);
+        column.setColumnView(this);
+    }
+    removeColumn(column) {
+        const index = this.columns.indexOf(column);
+        if (index !== -1) {
+            this.columns.splice(index, 1);
+            this.widget.removeColumn(column.getGtkColumn());
+            column.setColumnView(null);
+        }
+    }
+    insertColumnBefore(column, before) {
+        const beforeIndex = this.columns.indexOf(before);
+        if (beforeIndex === -1) {
+            this.addColumn(column);
+            return;
+        }
+        this.columns.splice(beforeIndex, 0, column);
+        this.widget.insertColumn(beforeIndex, column.getGtkColumn());
+        column.setColumnView(this);
+    }
+    addItem(item) {
+        this.items.push(item);
+        this.stringList.append("");
+    }
+    insertItemBefore(item, beforeItem) {
+        const beforeIndex = this.items.indexOf(beforeItem);
+        if (beforeIndex === -1) {
+            this.addItem(item);
+            return;
+        }
+        this.items.splice(beforeIndex, 0, item);
+        this.stringList.splice(beforeIndex, 0, [""]);
+    }
+    removeItem(item) {
+        const index = this.items.indexOf(item);
+        if (index !== -1) {
+            this.items.splice(index, 1);
+            this.stringList.remove(index);
+        }
+    }
+}
+export class ColumnViewColumnNode extends Node {
+    static matches(type) {
+        return type === "ColumnView.Column";
+    }
+    isVirtual() {
+        return true;
+    }
+    gtkColumn;
+    factory;
+    renderCell;
+    columnView = null;
+    fiberRoots = new Map();
+    constructor(type, props, app) {
+        super(type, props, app);
+        this.factory = new Gtk.SignalListItemFactory();
+        this.gtkColumn = new Gtk.ColumnViewColumn(props.title, this.factory);
+        this.renderCell = props.renderCell;
+        if (props.expand !== undefined) {
+            this.gtkColumn.setExpand(props.expand);
+        }
+        if (props.resizable !== undefined) {
+            this.gtkColumn.setResizable(props.resizable);
+        }
+        if (props.fixedWidth !== undefined) {
+            this.gtkColumn.setFixedWidth(props.fixedWidth);
+        }
+        this.factory.connect("setup", (_self, listItemObj) => {
+            const listItem = getObject(listItemObj, Gtk.ListItem);
+            const id = getObjectId(listItemObj);
+            const fiberRoot = createFiberRoot();
+            this.fiberRoots.set(id, fiberRoot);
+            let rootWidget = null;
+            const ref = (widget) => {
+                if (widget && !rootWidget) {
+                    rootWidget = widget;
+                    listItem.setChild(widget);
+                }
+            };
+            const element = this.renderCell(null, ref);
+            updateSync(element, fiberRoot);
+        });
+        this.factory.connect("bind", (_self, listItemObj) => {
+            const listItem = getObject(listItemObj, Gtk.ListItem);
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
+            const position = listItem.getPosition();
+            if (this.columnView) {
+                const items = this.columnView.getItems();
+                const item = items[position];
+                const ref = () => { };
+                const element = this.renderCell(item ?? null, ref);
+                updateSync(element, fiberRoot);
+            }
+        });
+        this.factory.connect("unbind", (_self, listItemObj) => {
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
+            const ref = () => { };
+            const element = this.renderCell(null, ref);
+            updateSync(element, fiberRoot);
+        });
+        this.factory.connect("teardown", (_self, listItemObj) => {
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
+            updateSync(null, fiberRoot);
+            this.fiberRoots.delete(id);
+        });
+    }
+    getGtkColumn() {
+        return this.gtkColumn;
+    }
+    setColumnView(columnView) {
+        this.columnView = columnView;
+    }
+    attachToParent(parent) {
+        if (parent instanceof ColumnViewNode) {
+            parent.addColumn(this);
+        }
+    }
+    attachToParentBefore(parent, before) {
+        if (parent instanceof ColumnViewNode && before instanceof ColumnViewColumnNode) {
+            parent.insertColumnBefore(this, before);
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
+    detachFromParent(parent) {
+        if (parent instanceof ColumnViewNode) {
+            parent.removeColumn(this);
+        }
+    }
+    consumedProps() {
+        const consumed = super.consumedProps();
+        consumed.add("renderCell");
+        consumed.add("title");
+        consumed.add("expand");
+        consumed.add("resizable");
+        consumed.add("fixedWidth");
+        return consumed;
+    }
+    updateProps(oldProps, newProps) {
+        if (oldProps.renderCell !== newProps.renderCell) {
+            this.renderCell = newProps.renderCell;
+        }
+        if (!this.gtkColumn)
+            return;
+        if (oldProps.title !== newProps.title) {
+            this.gtkColumn.setTitle(newProps.title);
+        }
+        if (oldProps.expand !== newProps.expand) {
+            this.gtkColumn.setExpand(newProps.expand);
+        }
+        if (oldProps.resizable !== newProps.resizable) {
+            this.gtkColumn.setResizable(newProps.resizable);
+        }
+        if (oldProps.fixedWidth !== newProps.fixedWidth) {
+            this.gtkColumn.setFixedWidth(newProps.fixedWidth);
+        }
+    }
+}
+export class ColumnViewItemNode extends Node {
+    static matches(type) {
+        return type === "ColumnView.Item";
+    }
+    isVirtual() {
+        return true;
+    }
+    item;
+    constructor(type, props, app) {
+        super(type, props, app);
+        this.item = props.item;
+    }
+    getItem() {
+        return this.item;
+    }
+    attachToParent(parent) {
+        if (parent instanceof ColumnViewNode) {
+            parent.addItem(this.item);
+        }
+    }
+    attachToParentBefore(parent, before) {
+        if (parent instanceof ColumnViewNode && before instanceof ColumnViewItemNode) {
+            parent.insertItemBefore(this.item, before.getItem());
+        }
+        else {
+            this.attachToParent(parent);
+        }
+    }
+    detachFromParent(parent) {
+        if (parent instanceof ColumnViewNode) {
+            parent.removeItem(this.item);
+        }
+    }
+}

package/dist/nodes/list.d.ts

@@ -1,21 +1,20 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class ListViewNode extends Node<Gtk.ListView> {
+export declare class ListViewNode extends Node<Gtk.ListView | Gtk.GridView> {
     static matches(type: string): boolean;
     private stringList;
     private selectionModel;
     private factory;
     private items;
     private renderItem;
-    private factorySignalHandlers;
+    private fiberRoots;
     constructor(type: string, props: Props, app: Gtk.Application);
     addItem(item: unknown): void;
     insertItemBefore(item: unknown, beforeItem: unknown): void;
     removeItem(item: unknown): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
-    dispose(app: Gtk.Application): void;
 }
 export declare class ListItemNode extends Node {
     static matches(type: string): boolean;

package/dist/nodes/list.js

@@ -1,41 +1,67 @@
-import { wrapPtr } from "@gtkx/ffi";
+import { getObject, getObjectId } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot, updateSync } from "../flush-sync.js";
 import { Node } from "../node.js";
-const LIST_WIDGETS = ["ListView", "ColumnView", "GridView"];
 export class ListViewNode extends Node {
     static matches(type) {
-        return LIST_WIDGETS.map((w) => `${w}.Root`).includes(type);
+        return type === "ListView.Root" || type === "GridView.Root";
     }
     stringList;
     selectionModel;
     factory;
     items = [];
-    renderItem = null;
-    factorySignalHandlers = new Map();
+    renderItem;
+    fiberRoots = new Map();
     constructor(type, props, app) {
         super(type, props, app);
         this.stringList = new Gtk.StringList([]);
         this.selectionModel = new Gtk.SingleSelection(this.stringList);
         this.factory = new Gtk.SignalListItemFactory();
         this.renderItem = props.renderItem;
-        const setupHandlerId = this.factory.connect("setup", (_self, listItemObj) => {
-            const listItem = wrapPtr(listItemObj, Gtk.ListItem);
-            if (this.renderItem) {
-                const widget = this.renderItem(null);
-                listItem.setChild(widget);
-            }
+        this.factory.connect("setup", (_self, listItemObj) => {
+            const listItem = getObject(listItemObj, Gtk.ListItem);
+            const id = getObjectId(listItemObj);
+            const fiberRoot = createFiberRoot();
+            this.fiberRoots.set(id, fiberRoot);
+            let rootWidget = null;
+            const ref = (widget) => {
+                if (widget && !rootWidget) {
+                    rootWidget = widget;
+                    listItem.setChild(widget);
+                }
+            };
+            const element = this.renderItem(null, ref);
+            updateSync(element, fiberRoot);
         });
-        this.factorySignalHandlers.set("setup", setupHandlerId);
-        const bindHandlerId = this.factory.connect("bind", (_self, listItemObj) => {
-            const listItem = wrapPtr(listItemObj, Gtk.ListItem);
+        this.factory.connect("bind", (_self, listItemObj) => {
+            const listItem = getObject(listItemObj, Gtk.ListItem);
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
             const position = listItem.getPosition();
             const item = this.items[position];
-            if (this.renderItem && item !== undefined) {
-                const widget = this.renderItem(item);
-                listItem.setChild(widget);
-            }
+            const ref = () => { };
+            const element = this.renderItem(item ?? null, ref);
+            updateSync(element, fiberRoot);
+        });
+        this.factory.connect("unbind", (_self, listItemObj) => {
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
+            const ref = () => { };
+            const element = this.renderItem(null, ref);
+            updateSync(element, fiberRoot);
+        });
+        this.factory.connect("teardown", (_self, listItemObj) => {
+            const id = getObjectId(listItemObj);
+            const fiberRoot = this.fiberRoots.get(id);
+            if (!fiberRoot)
+                return;
+            updateSync(null, fiberRoot);
+            this.fiberRoots.delete(id);
         });
-        this.factorySignalHandlers.set("bind", bindHandlerId);
         this.widget.setModel(this.selectionModel);
         this.widget.setFactory(this.factory);
     }
@@ -70,20 +96,10 @@ export class ListViewNode extends Node {
         }
         super.updateProps(oldProps, newProps);
     }
-    dispose(app) {
-        super.dispose(app);
-        this.widget.setModel(undefined);
-        this.widget.setFactory(undefined);
-    }
 }
 export class ListItemNode extends Node {
     static matches(type) {
-        const dotIndex = type.indexOf(".");
-        if (dotIndex === -1)
-            return false;
-        const widgetType = type.slice(0, dotIndex);
-        const suffix = type.slice(dotIndex + 1);
-        return suffix === "Item" && LIST_WIDGETS.includes(widgetType);
+        return type === "ListView.Item" || type === "GridView.Item";
     }
     isVirtual() {
         return true;

package/dist/nodes/notebook.d.ts

@@ -0,0 +1,27 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../factory.js";
+import { Node } from "../node.js";
+export declare class NotebookNode extends Node<Gtk.Notebook> {
+    static matches(type: string): boolean;
+    addPage(child: Gtk.Widget, label: string): void;
+    insertPageBefore(child: Gtk.Widget, label: string, beforeChild: Gtk.Widget): void;
+    removePage(child: Gtk.Widget): void;
+    updatePageLabel(child: Gtk.Widget, label: string): void;
+}
+export declare class NotebookPageNode extends Node {
+    static matches(type: string): boolean;
+    protected isVirtual(): boolean;
+    private label;
+    private childWidget;
+    private parentNotebook;
+    constructor(type: string, props: Props, app: Gtk.Application);
+    getLabel(): string;
+    setChildWidget(widget: Gtk.Widget): void;
+    getChildWidget(): Gtk.Widget | null;
+    appendChild(child: Node): void;
+    attachToParent(parent: Node): void;
+    attachToParentBefore(parent: Node, before: Node): void;
+    detachFromParent(parent: Node): void;
+    protected consumedProps(): Set<string>;
+    updateProps(oldProps: Props, newProps: Props): void;
+}

package/dist/nodes/notebook.js

@@ -0,0 +1,102 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { Node } from "../node.js";
+export class NotebookNode extends Node {
+    static matches(type) {
+        return type === "Notebook.Root";
+    }
+    addPage(child, label) {
+        const tabLabel = new Gtk.Label();
+        tabLabel.setLabel(label);
+        this.widget.appendPage(child, tabLabel);
+    }
+    insertPageBefore(child, label, beforeChild) {
+        const beforePageNum = this.widget.pageNum(beforeChild);
+        const tabLabel = new Gtk.Label();
+        tabLabel.setLabel(label);
+        if (beforePageNum >= 0) {
+            this.widget.insertPage(child, beforePageNum, tabLabel);
+        }
+        else {
+            this.widget.appendPage(child, tabLabel);
+        }
+    }
+    removePage(child) {
+        const pageNum = this.widget.pageNum(child);
+        if (pageNum >= 0) {
+            this.widget.removePage(pageNum);
+        }
+    }
+    updatePageLabel(child, label) {
+        const tabLabel = new Gtk.Label();
+        tabLabel.setLabel(label);
+        this.widget.setTabLabel(child, tabLabel);
+    }
+}
+export class NotebookPageNode extends Node {
+    static matches(type) {
+        return type === "Notebook.Page";
+    }
+    isVirtual() {
+        return true;
+    }
+    label;
+    childWidget = null;
+    parentNotebook = null;
+    constructor(type, props, app) {
+        super(type, props, app);
+        this.label = props.label ?? "";
+    }
+    getLabel() {
+        return this.label;
+    }
+    setChildWidget(widget) {
+        this.childWidget = widget;
+    }
+    getChildWidget() {
+        return this.childWidget;
+    }
+    appendChild(child) {
+        const childWidget = child.getWidget();
+        if (childWidget) {
+            this.childWidget = childWidget;
+        }
+    }
+    attachToParent(parent) {
+        if (parent instanceof NotebookNode && this.childWidget) {
+            this.parentNotebook = parent;
+            parent.addPage(this.childWidget, this.label);
+        }
+    }
+    attachToParentBefore(parent, before) {
+        if (parent instanceof NotebookNode && this.childWidget) {
+            this.parentNotebook = parent;
+            const beforePage = before instanceof NotebookPageNode ? before.getChildWidget() : before.getWidget();
+            if (beforePage) {
+                parent.insertPageBefore(this.childWidget, this.label, beforePage);
+            }
+            else {
+                parent.addPage(this.childWidget, this.label);
+            }
+        }
+    }
+    detachFromParent(parent) {
+        if (parent instanceof NotebookNode && this.childWidget) {
+            parent.removePage(this.childWidget);
+            this.parentNotebook = null;
+        }
+    }
+    consumedProps() {
+        const consumed = super.consumedProps();
+        consumed.add("label");
+        return consumed;
+    }
+    updateProps(oldProps, newProps) {
+        if (oldProps.label !== newProps.label) {
+            this.label = newProps.label ?? "";
+            if (this.parentNotebook && this.childWidget) {
+                this.parentNotebook.updatePageLabel(this.childWidget, this.label);
+            }
+        }
+        super.updateProps(oldProps, newProps);
+    }
+}

package/dist/nodes/root.d.ts

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../factory.js";
+import { Node } from "../node.js";
+export declare const ROOT_NODE_CONTAINER: unique symbol;
+export declare class RootNode extends Node<never> {
+    static matches(_type: string, _props: Props, existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
+    protected isVirtual(): boolean;
+    constructor(app: Gtk.Application);
+}

package/dist/nodes/root.js

@@ -0,0 +1,13 @@
+import { Node } from "../node.js";
+export const ROOT_NODE_CONTAINER = Symbol.for("ROOT_NODE_CONTAINER");
+export class RootNode extends Node {
+    static matches(_type, _props, existingWidget) {
+        return existingWidget === ROOT_NODE_CONTAINER;
+    }
+    isVirtual() {
+        return true;
+    }
+    constructor(app) {
+        super("", {}, app);
+    }
+}

package/dist/nodes/widget.d.ts

@@ -9,5 +9,4 @@ export declare class WidgetNode extends Node<Gtk.Widget> {
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
     mount(_app: Gtk.Application): void;
-    dispose(_app: Gtk.Application): void;
 }

package/dist/nodes/widget.js

@@ -1,6 +1,12 @@
+import { getObjectId } from "@gtkx/ffi";
+import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import { OverlayNode } from "./overlay.js";
+const isFlowBox = (widget) => widget instanceof Gtk.FlowBox;
+const isFlowBoxChild = (widget) => GObject.typeNameFromInstance(getObjectId(widget.ptr)) === "GtkFlowBoxChild";
+const isListBox = (widget) => widget instanceof Gtk.ListBox;
+const isListBoxRow = (widget) => GObject.typeNameFromInstance(getObjectId(widget.ptr)) === "GtkListBoxRow";
 const COMBINED_PROPS = [
     {
         props: ["defaultWidth", "defaultHeight"],
@@ -36,6 +42,14 @@ export class WidgetNode extends Node {
             parentWidget.appendPage(this.widget);
             return;
         }
+        if (isFlowBox(parentWidget)) {
+            parentWidget.append(this.widget);
+            return;
+        }
+        if (isListBox(parentWidget)) {
+            parentWidget.append(this.widget);
+            return;
+        }
         super.attachToParent(parent);
     }
     attachToParentBefore(parent, before) {
@@ -70,9 +84,37 @@ export class WidgetNode extends Node {
             }
             return;
         }
+        if (isFlowBox(parentWidget)) {
+            if (beforeWidget) {
+                const beforeChild = beforeWidget.getParent();
+                if (beforeChild && isFlowBoxChild(beforeChild)) {
+                    parentWidget.insert(this.widget, beforeChild.getIndex());
+                }
+                else {
+                    parentWidget.append(this.widget);
+                }
+            }
+            else {
+                parentWidget.append(this.widget);
+            }
+            return;
+        }
+        if (isListBox(parentWidget)) {
+            if (beforeWidget && isListBoxRow(beforeWidget)) {
+                parentWidget.insert(this.widget, beforeWidget.getIndex());
+            }
+            else {
+                parentWidget.append(this.widget);
+            }
+            return;
+        }
         super.attachToParentBefore(parent, before);
     }
     detachFromParent(parent) {
+        if (this.widget instanceof Gtk.Window) {
+            this.widget.destroy();
+            return;
+        }
         if (this.widget instanceof Gtk.AboutDialog) {
             return;
         }
@@ -94,6 +136,17 @@ export class WidgetNode extends Node {
             }
             return;
         }
+        if (isFlowBox(parentWidget)) {
+            const flowBoxChild = this.widget.getParent();
+            if (flowBoxChild) {
+                parentWidget.remove(flowBoxChild);
+            }
+            return;
+        }
+        if (isListBox(parentWidget)) {
+            parentWidget.remove(this.widget);
+            return;
+        }
         super.detachFromParent(parent);
     }
     consumedProps() {
@@ -123,9 +176,4 @@ export class WidgetNode extends Node {
             this.widget.present();
         }
     }
-    dispose(_app) {
-        if (this.widget instanceof Gtk.Window) {
-            this.widget.destroy();
-        }
-    }
 }

package/dist/portal.js

@@ -1,10 +1,10 @@
-import * as Gtk from "@gtkx/ffi/gtk";
+import { ROOT_NODE_CONTAINER } from "./factory.js";
 export const createPortal = (children, container, key) => {
     return {
         $$typeof: Symbol.for("react.portal"),
         key: key ?? null,
         children,
-        containerInfo: container ?? Gtk.Application.getDefault(),
+        containerInfo: container ?? ROOT_NODE_CONTAINER,
         implementation: null,
     };
 };

package/dist/reconciler.d.ts

@@ -1,7 +1,8 @@
-import * as Gtk from "@gtkx/ffi/gtk";
+import type * as Gtk from "@gtkx/ffi/gtk";
 import ReactReconciler from "react-reconciler";
+import { type ROOT_NODE_CONTAINER } from "./factory.js";
 import type { Node } from "./node.js";
-type Container = Gtk.Application | Gtk.Widget;
+type Container = Gtk.Widget | typeof ROOT_NODE_CONTAINER;
 type TextInstance = Node;
 type SuspenseInstance = never;
 type PublicInstance = Gtk.Widget;

package/dist/reconciler.js

@@ -1,5 +1,4 @@
 import { getCurrentApp } from "@gtkx/ffi";
-import * as Gtk from "@gtkx/ffi/gtk";
 import React from "react";
 import ReactReconciler from "react-reconciler";
 import { createNode } from "./factory.js";
@@ -71,9 +70,7 @@ class Reconciler {
             afterActiveInstanceBlur: () => { },
             prepareScopeUpdate: () => { },
             getInstanceFromScope: () => null,
-            detachDeletedInstance: (instance) => {
-                instance.dispose(getCurrentApp());
-            },
+            detachDeletedInstance: () => { },
             resetFormInstance: () => { },
             requestPostPaintCallback: () => { },
             shouldAttemptEagerTransition: () => false,
@@ -92,10 +89,7 @@ class Reconciler {
         return context;
     }
     createNodeFromContainer(container) {
-        if (container instanceof Gtk.Widget) {
-            return createNode(container.constructor.name, {}, getCurrentApp(), container);
-        }
-        return createNode("Application", {}, getCurrentApp(), container);
+        return createNode(container.constructor.name, {}, getCurrentApp(), container);
     }
 }
 export const reconciler = new Reconciler();

package/dist/render.js

@@ -1,10 +1,11 @@
 import { start } from "@gtkx/ffi";
+import { ROOT_NODE_CONTAINER } from "./factory.js";
 import { reconciler } from "./reconciler.js";
 export let container = null;
 export const render = (element, appId, flags) => {
-    const app = start(appId, flags);
+    start(appId, flags);
     const instance = reconciler.getInstance();
-    container = instance.createContainer(app, 0, null, false, null, "", (error, info) => {
+    container = instance.createContainer(ROOT_NODE_CONTAINER, 0, null, false, null, "", (error, info) => {
         console.error("Uncaught error in GTKX application:", error, info);
     }, (_error, _info) => { }, (_error, _info) => { }, () => { }, null);
     instance.updateContainer(element, container, null, () => { });

package/dist/types.d.ts

@@ -1,9 +1,10 @@
-import type { ReactNode } from "react";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactElement, ReactNode, RefCallback } from "react";
 export interface SlotProps {
     children?: ReactNode;
 }
-export interface ListItemProps {
-    item: any;
+export interface ListItemProps<I = unknown> {
+    item: I;
 }
 export interface GridChildProps extends SlotProps {
     column?: number;
@@ -11,3 +12,18 @@ export interface GridChildProps extends SlotProps {
     columnSpan?: number;
     rowSpan?: number;
 }
+export type RenderItemFn<T> = (item: T | null, ref: RefCallback<Gtk.Widget>) => ReactElement;
+export interface ListViewRenderProps<T = unknown> {
+    renderItem: RenderItemFn<T>;
+}
+export type RenderCellFn<T> = (item: T | null, ref: RefCallback<Gtk.Widget>) => ReactElement;
+export interface ColumnViewColumnProps {
+    title?: string;
+    expand?: boolean;
+    resizable?: boolean;
+    fixedWidth?: number;
+    renderCell: (item: any, ref: RefCallback<Gtk.Widget>) => ReactElement;
+}
+export interface NotebookPageProps extends SlotProps {
+    label: string;
+}

package/package.json

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