@gtkx/react 0.8.0 → 0.9.1

package/dist/{container-interfaces.d.ts → containers.d.ts}

@@ -1,27 +1,15 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { Node } from "./node.js";
-/**
- * Type for containers that manage child widgets with attach/detach semantics.
- * Used by ActionBar, FlowBox, ListBox, Overlay.
- */
 export type ChildContainer = {
     attachChild(child: Gtk.Widget): void;
     insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
     detachChild(child: Gtk.Widget): void;
 };
-/**
- * Type for page-based containers like Notebook.
- */
 export type PageContainer = {
     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;
 };
-/**
- * Props for Stack pages.
- * Used by Gtk.Stack and Adw.ViewStack.
- */
 export type StackPageProps = {
     name?: string;
     title?: string;
@@ -31,55 +19,40 @@ export type StackPageProps = {
     useUnderline?: boolean;
     badgeNumber?: number;
 };
-/**
- * Type for Stack containers.
- */
 export type StackPageContainer = {
     addStackPage(child: Gtk.Widget, props: StackPageProps): void;
     insertStackPageBefore(child: Gtk.Widget, props: StackPageProps, beforeChild: Gtk.Widget): void;
     removeStackPage(child: Gtk.Widget): void;
     updateStackPageProps(child: Gtk.Widget, props: StackPageProps): void;
 };
-/**
- * Type for grid-based containers.
- */
 export type GridContainer = {
     attachToGrid(child: Gtk.Widget, column: number, row: number, colSpan: number, rowSpan: number): void;
     removeFromGrid(child: Gtk.Widget): void;
 };
-/**
- * Type for item-based containers like ListView, GridView, ColumnView.
- * Items are identified by string IDs for selection support.
- */
 export type ItemContainer<T> = {
     addItem(id: string, item: T): void;
     insertItemBefore(id: string, item: T, beforeId: string): void;
     removeItem(id: string): void;
     updateItem(id: string, item: T): void;
 };
-/**
- * Type for column-based containers like ColumnView.
- * Note: Column type is generic to support both raw Gtk.ColumnViewColumn and wrapper nodes.
- */
 export type ColumnContainer = {
     addColumn(column: unknown): void;
     insertColumnBefore(column: unknown, beforeColumn: unknown): void;
     removeColumn(column: unknown): void;
     getItems(): unknown[];
 };
-export declare const isChildContainer: (node: Node) => node is Node & ChildContainer;
-export declare const isPageContainer: (node: Node) => node is Node & PageContainer;
-export declare const isStackPageContainer: (node: Node) => node is Node & StackPageContainer;
-export declare const isGridContainer: (node: Node) => node is Node & GridContainer;
-export declare const isItemContainer: (node: Node) => node is Node & ItemContainer<unknown>;
-export declare const isColumnContainer: (node: Node) => node is Node & ColumnContainer;
-/**
- * Type for containers that support packStart/packEnd semantics.
- * Used by HeaderBar, ActionBar.
- */
 export type PackContainer = {
     packStart(child: Gtk.Widget): void;
     packEnd(child: Gtk.Widget): void;
     removeFromPack(child: Gtk.Widget): void;
 };
-export declare const isPackContainer: (node: Node) => node is Node & PackContainer;
+export type StringListItem = {
+    id: string;
+    label: string;
+};
+export type StringListContainer = {
+    addStringListItem(id: string, label: string): void;
+    insertStringListItemBefore(id: string, label: string, beforeId: string): void;
+    removeStringListItem(id: string): void;
+    updateStringListItem(oldId: string, newId: string, newLabel: string): void;
+};

package/dist/containers.js

@@ -0,0 +1 @@
+export {};

package/dist/factory.d.ts

@@ -10,4 +10,4 @@ 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;
+export declare const createNode: (type: string, props: Props, widget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER) => Node;

package/dist/factory.js

@@ -67,10 +67,10 @@ const NODE_CLASSES = [RootNode, ...VIRTUAL_NODES, ...SPECIALIZED_NODES, ...CONTA
  * 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) => {
+export const createNode = (type, props, widget) => {
     for (const NodeClass of NODE_CLASSES) {
-        if (NodeClass.matches(type, existingWidget)) {
-            const node = new NodeClass(type, existingWidget);
+        if (NodeClass.matches(type, widget)) {
+            const node = new NodeClass(type, widget);
             node.initialize(props);
             return node;
         }

package/dist/{reconciler/host-config.d.ts → host-config.d.ts}

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

package/dist/{reconciler/host-config.js → host-config.js}

@@ -1,7 +1,7 @@
 import { beginBatch, endBatch } from "@gtkx/ffi";
 import React from "react";
-import { beginCommit, endCommit } from "../batch.js";
-import { createNode } from "../factory.js";
+import { beginCommit, endCommit } from "./batch.js";
+import { createNode } from "./factory.js";
 export function createHostConfig(createNodeFromContainer) {
     return {
         supportsMutation: true,

package/dist/node.d.ts

@@ -2,18 +2,19 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import type { Props, ROOT_NODE_CONTAINER } from "./factory.js";
 export declare const normalizeWidgetType: (type: string) => string;
 export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget | undefined, S extends object | undefined = object | undefined> {
-    static matches(_type: string, _existingWidget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
+    static matches(_type: string, _widget?: Gtk.Widget | typeof ROOT_NODE_CONTAINER): boolean;
     static consumedPropNames: string[];
     protected signalHandlers: Map<string, number>;
     protected widget: T;
     protected widgetType: string;
     protected nodeType: string;
-    protected parent: Node | null;
+    parent: Node | null;
     private _state;
     protected get state(): S;
     protected set state(value: S);
     protected isVirtual(): boolean;
-    constructor(type: string, existingWidget?: Gtk.Widget);
+    protected isStandalone(): boolean;
+    constructor(type: string, widget?: Gtk.Widget);
     /**
      * Initializes the node with props. Called by the reconciler after construction.
      * Subclasses can override to perform custom initialization.
@@ -24,11 +25,9 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     appendChild(child: Node): void;
     removeChild(child: Node): void;
     insertBefore(child: Node, before: Node): void;
-    attachToParent(parent: Node): void;
-    detachFromParent(parent: Node): void;
+    unmount(): void;
     protected disconnectAllSignals(): void;
     hasParent(): boolean;
-    attachToParentBefore(parent: Node, before: Node): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
     protected propKeyToEventName(key: string): string;

package/dist/node.js

@@ -4,9 +4,8 @@ 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 { isChildContainer } from "./container-interfaces.js";
 import { CONSTRUCTOR_PARAMS, PROP_SETTERS, SETTER_GETTERS } from "./generated/internal.js";
-import { isAddable, isAppendable, isRemovable, isSingleChild } from "./predicates.js";
+import { isAddable, isAppendable, isChildContainer, isRemovable, isSingleChild } from "./predicates.js";
 export const normalizeWidgetType = (type) => type.split(".")[0] || type;
 const NAMESPACE_REGISTRY = [
     ["GtkSource", GtkSource],
@@ -31,7 +30,7 @@ const extractConstructorArgs = (type, props) => {
     return params.map((p) => props[p.name]);
 };
 export class Node {
-    static matches(_type, _existingWidget) {
+    static matches(_type, _widget) {
         return false;
     }
     static consumedPropNames = [];
@@ -53,11 +52,14 @@ export class Node {
     isVirtual() {
         return false;
     }
-    constructor(type, existingWidget) {
+    isStandalone() {
+        return false;
+    }
+    constructor(type, widget) {
         this.nodeType = type;
         this.widgetType = normalizeWidgetType(type);
-        if (existingWidget) {
-            this.widget = existingWidget;
+        if (widget) {
+            this.widget = widget;
         }
     }
     /**
@@ -82,55 +84,62 @@ export class Node {
         return this.widget;
     }
     appendChild(child) {
-        child.attachToParent(this);
-    }
-    removeChild(child) {
-        child.detachFromParent(this);
-    }
-    insertBefore(child, before) {
-        child.attachToParentBefore(this, before);
-    }
-    attachToParent(parent) {
-        this.parent = parent;
-        if (isChildContainer(parent)) {
-            const widget = this.getWidget();
-            if (widget)
-                parent.attachChild(widget);
+        child.parent = this;
+        const childWidget = child.getWidget();
+        if (!childWidget || child.isStandalone())
             return;
+        if (isChildContainer(this)) {
+            this.attachChild(childWidget);
         }
-        const parentWidget = parent.getWidget();
-        const widget = this.getWidget();
-        if (!parentWidget || !widget)
-            return;
-        if (isAppendable(parentWidget)) {
-            widget.insertBefore(parentWidget, null);
+        else if (this.widget && isAppendable(this.widget)) {
+            childWidget.insertBefore(this.widget);
         }
-        else if (isAddable(parentWidget)) {
-            parentWidget.add(widget);
+        else if (this.widget && isAddable(this.widget)) {
+            this.widget.add(childWidget);
         }
-        else if (isSingleChild(parentWidget)) {
-            parentWidget.setChild(widget);
+        else if (this.widget && isSingleChild(this.widget)) {
+            this.widget.setChild(childWidget);
         }
     }
-    detachFromParent(parent) {
-        this.parent = null;
-        this.disconnectAllSignals();
-        if (isChildContainer(parent)) {
-            const widget = this.getWidget();
-            if (widget)
-                parent.detachChild(widget);
-            return;
+    removeChild(child) {
+        child.unmount();
+        const childWidget = child.getWidget();
+        if (childWidget) {
+            if (isChildContainer(this)) {
+                this.detachChild(childWidget);
+            }
+            else if (this.widget && isRemovable(this.widget)) {
+                this.widget.remove(childWidget);
+            }
+            else if (this.widget && isSingleChild(this.widget)) {
+                this.widget.setChild(null);
+            }
         }
-        const parentWidget = parent.getWidget();
-        const widget = this.getWidget();
-        if (!parentWidget || !widget)
+        child.parent = null;
+    }
+    insertBefore(child, before) {
+        child.parent = this;
+        const childWidget = child.getWidget();
+        const beforeWidget = before.getWidget();
+        if (!childWidget || child.isStandalone())
             return;
-        if (isRemovable(parentWidget)) {
-            parentWidget.remove(widget);
+        if (isChildContainer(this)) {
+            if (beforeWidget) {
+                this.insertChildBefore(childWidget, beforeWidget);
+            }
+            else {
+                this.attachChild(childWidget);
+            }
         }
-        else if (isSingleChild(parentWidget)) {
-            parentWidget.setChild(null);
+        else if (this.widget && isAppendable(this.widget) && beforeWidget) {
+            childWidget.insertBefore(this.widget, beforeWidget);
         }
+        else {
+            this.appendChild(child);
+        }
+    }
+    unmount() {
+        this.disconnectAllSignals();
     }
     disconnectAllSignals() {
         const widget = this.getWidget();
@@ -144,33 +153,6 @@ export class Node {
     hasParent() {
         return this.parent !== null;
     }
-    attachToParentBefore(parent, before) {
-        this.parent = parent;
-        if (isChildContainer(parent)) {
-            const widget = this.getWidget();
-            const beforeWidget = before.getWidget();
-            if (widget) {
-                if (beforeWidget) {
-                    parent.insertChildBefore(widget, beforeWidget);
-                }
-                else {
-                    parent.attachChild(widget);
-                }
-            }
-            return;
-        }
-        const parentWidget = parent.getWidget();
-        const widget = this.getWidget();
-        const beforeWidget = before.getWidget();
-        if (!parentWidget || !widget)
-            return;
-        if (isAppendable(parentWidget) && beforeWidget) {
-            widget.insertBefore(parentWidget, beforeWidget);
-        }
-        else {
-            this.attachToParent(parent);
-        }
-    }
     consumedProps() {
         const consumed = new Set(["children"]);
         let proto = Object.getPrototypeOf(this);

package/dist/nodes/about-dialog.d.ts

@@ -2,8 +2,7 @@ import type * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 export declare class AboutDialogNode extends Node<Gtk.AboutDialog> {
     static matches(type: string): boolean;
-    attachToParent(_parent: Node): void;
-    attachToParentBefore(_parent: Node, _before: Node): void;
-    detachFromParent(_parent: Node): void;
+    protected isStandalone(): boolean;
     mount(): void;
+    unmount(): void;
 }

package/dist/nodes/about-dialog.js

@@ -3,12 +3,14 @@ export class AboutDialogNode extends Node {
     static matches(type) {
         return type === "AboutDialog";
     }
-    attachToParent(_parent) { }
-    attachToParentBefore(_parent, _before) { }
-    detachFromParent(_parent) {
-        this.widget.destroy();
+    isStandalone() {
+        return true;
     }
     mount() {
         this.widget.present();
     }
+    unmount() {
+        this.widget.destroy();
+        super.unmount();
+    }
 }

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

@@ -1,5 +1,6 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { type ColumnContainer } from "../container-interfaces.js";
+import { StringSorter } from "@gtkx/ffi/gtk";
+import type { ColumnContainer } from "../containers.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
 import type { RenderItemFn } from "../types.js";
@@ -22,7 +23,10 @@ export declare class ColumnViewNode extends SelectableListNode<Gtk.ColumnView, C
     private connectSorterChangedSignal;
     private disconnectSorterChangedSignal;
     private notifySortChange;
-    detachFromParent(parent: Node): void;
+    unmount(): void;
+    appendChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    removeChild(child: Node): void;
     updateProps(oldProps: Props, newProps: Props): void;
     private applySortIndicator;
     addColumn(columnNode: ColumnViewColumnNode): void;
@@ -34,9 +38,9 @@ type ColumnViewColumnState = {
     factory: Gtk.SignalListItemFactory;
     factoryHandlers: ListItemFactoryHandlers | null;
     renderCell: RenderItemFn<unknown>;
-    columnId: string | null;
-    sorter: Gtk.CustomSorter | null;
+    columnId?: string;
     listItemCache: Map<number, ListItemInfo>;
+    sorter?: StringSorter;
 };
 export declare class ColumnViewColumnNode extends Node<never, ColumnViewColumnState> {
     static consumedPropNames: string[];
@@ -45,12 +49,9 @@ export declare class ColumnViewColumnNode extends Node<never, ColumnViewColumnSt
     private columnView;
     initialize(props: Props): void;
     getColumn(): Gtk.ColumnViewColumn;
-    getId(): string | null;
+    getId(): string | undefined;
     setColumnView(columnView: ColumnViewNode | null): void;
-    updateSorter(): void;
-    attachToParent(parent: Node): void;
-    attachToParentBefore(parent: Node, before: Node): void;
-    detachFromParent(parent: Node): void;
+    unmount(): void;
     updateProps(oldProps: Props, newProps: Props): void;
 }
 export declare class ColumnViewItemNode extends VirtualItemNode {

package/dist/nodes/column-view.js

@@ -1,7 +1,6 @@
-import { getObject } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { isColumnContainer } from "../container-interfaces.js";
+import { StringSorter } from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import { connectListItemFactorySignals } from "./list-item-factory.js";
 import { SelectableListNode } from "./selectable-list.js";
@@ -54,10 +53,9 @@ export class ColumnViewNode extends SelectableListNode {
     notifySortChange() {
         if (!this.state.onSortChange)
             return;
-        const baseSorter = this.widget.getSorter();
-        if (!baseSorter)
+        const sorter = this.widget.getSorter();
+        if (!sorter)
             return;
-        const sorter = getObject(baseSorter.id);
         const column = sorter.getPrimarySortColumn();
         const order = sorter.getPrimarySortOrder();
         const columnId = column?.getId() ?? null;
@@ -68,10 +66,35 @@ export class ColumnViewNode extends SelectableListNode {
         this.state.lastNotifiedOrder = order;
         this.state.onSortChange(columnId, order);
     }
-    detachFromParent(parent) {
+    unmount() {
         this.disconnectSorterChangedSignal();
         this.cleanupSelection();
-        super.detachFromParent(parent);
+        super.unmount();
+    }
+    appendChild(child) {
+        if (child instanceof ColumnViewColumnNode) {
+            child.parent = this;
+            this.addColumn(child);
+            return;
+        }
+        super.appendChild(child);
+    }
+    insertBefore(child, before) {
+        if (child instanceof ColumnViewColumnNode && before instanceof ColumnViewColumnNode) {
+            child.parent = this;
+            this.insertColumnBefore(child, before);
+            return;
+        }
+        super.insertBefore(child, before);
+    }
+    removeChild(child) {
+        if (child instanceof ColumnViewColumnNode) {
+            this.removeColumn(child);
+            child.unmount();
+            child.parent = null;
+            return;
+        }
+        super.removeChild(child);
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
@@ -98,7 +121,7 @@ export class ColumnViewNode extends SelectableListNode {
     }
     applySortIndicator() {
         if (this.state.sortColumn === null) {
-            this.widget.sortByColumn(this.state.sortOrder, null);
+            this.widget.sortByColumn(this.state.sortOrder);
             return;
         }
         const column = this.state.columns.find((c) => c.getId() === this.state.sortColumn);
@@ -134,7 +157,7 @@ export class ColumnViewNode extends SelectableListNode {
     }
 }
 export class ColumnViewColumnNode extends Node {
-    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id"];
+    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id", "sortable"];
     static matches(type) {
         return type === "ColumnView.Column";
     }
@@ -145,16 +168,21 @@ export class ColumnViewColumnNode extends Node {
     initialize(props) {
         const factory = new Gtk.SignalListItemFactory();
         const column = new Gtk.ColumnViewColumn(props.title, factory);
-        const columnId = props.id ?? null;
+        const columnId = props.id ?? undefined;
+        const sortable = props.sortable;
+        const sorter = sortable ? new StringSorter() : undefined;
         this.state = {
             column,
             factory,
             factoryHandlers: null,
             renderCell: props.renderCell,
             columnId,
-            sorter: null,
             listItemCache: new Map(),
+            sorter,
         };
+        if (sorter) {
+            column.setSorter(sorter);
+        }
         super.initialize(props);
         if (columnId !== null) {
             column.setId(columnId);
@@ -183,36 +211,10 @@ export class ColumnViewColumnNode extends Node {
     }
     setColumnView(columnView) {
         this.columnView = columnView;
-        this.updateSorter();
     }
-    updateSorter() {
-        if (!this.columnView || this.state.columnId === null) {
-            this.state.column.setSorter(null);
-            this.state.sorter = null;
-            return;
-        }
-        const noOpSortFn = () => 0;
-        this.state.sorter = new Gtk.CustomSorter(noOpSortFn);
-        this.state.column.setSorter(this.state.sorter);
-    }
-    attachToParent(parent) {
-        if (isColumnContainer(parent)) {
-            parent.addColumn(this);
-        }
-    }
-    attachToParentBefore(parent, before) {
-        if (isColumnContainer(parent) && before instanceof ColumnViewColumnNode) {
-            parent.insertColumnBefore(this, before);
-        }
-        else {
-            this.attachToParent(parent);
-        }
-    }
-    detachFromParent(parent) {
+    unmount() {
         this.state.factoryHandlers?.disconnect();
-        if (isColumnContainer(parent)) {
-            parent.removeColumn(this);
-        }
+        super.unmount();
     }
     updateProps(oldProps, newProps) {
         if (oldProps.renderCell !== newProps.renderCell) {
@@ -231,9 +233,20 @@ export class ColumnViewColumnNode extends Node {
             this.state.column.setFixedWidth(newProps.fixedWidth);
         }
         if (oldProps.id !== newProps.id) {
-            this.state.columnId = newProps.id ?? null;
+            this.state.columnId = newProps.id ?? undefined;
             this.state.column.setId(this.state.columnId);
         }
+        if (oldProps.sortable !== newProps.sortable) {
+            const sortable = newProps.sortable;
+            if (sortable && !this.state.sorter) {
+                this.state.sorter = new StringSorter();
+                this.state.column.setSorter(this.state.sorter);
+            }
+            else if (!sortable && this.state.sorter) {
+                this.state.column.setSorter(undefined);
+                this.state.sorter = undefined;
+            }
+        }
     }
 }
 export class ColumnViewItemNode extends VirtualItemNode {

package/dist/nodes/flow-box.js

@@ -16,7 +16,7 @@ export class FlowBoxNode extends IndexedChildContainerNode {
         const parent = child.getParent();
         if (parent && isFlowBoxChild(parent)) {
             beginBatch();
-            parent.setChild(null);
+            parent.setChild(undefined);
             this.widget.remove(parent);
             endBatch();
         }

package/dist/nodes/grid.d.ts

@@ -1,5 +1,5 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
-import { type GridContainer } from "../container-interfaces.js";
+import type { GridContainer } from "../containers.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
 import { VirtualSlotNode } from "./virtual-slot.js";
@@ -7,6 +7,9 @@ export declare class GridNode extends Node<Gtk.Grid> implements GridContainer {
     static matches(type: string): boolean;
     attachToGrid(child: Gtk.Widget, column: number, row: number, colSpan: number, rowSpan: number): void;
     removeFromGrid(child: Gtk.Widget): void;
+    appendChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    removeChild(child: Node): void;
 }
 type GridChildProps = {
     column: number;

package/dist/nodes/grid.js

@@ -1,5 +1,5 @@
-import { isGridContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
+import { isGridContainer } from "../predicates.js";
 import { VirtualSlotNode } from "./virtual-slot.js";
 export class GridNode extends Node {
     static matches(type) {
@@ -11,6 +11,44 @@ export class GridNode extends Node {
     removeFromGrid(child) {
         this.widget.remove(child);
     }
+    appendChild(child) {
+        if (child instanceof GridChildNode) {
+            child.parent = this;
+            const childWidget = child.getChildWidget();
+            const props = child.getSlotProps();
+            if (childWidget) {
+                this.attachToGrid(childWidget, props.column, props.row, props.columnSpan, props.rowSpan);
+                child.setParentContainer(this);
+            }
+            return;
+        }
+        super.appendChild(child);
+    }
+    insertBefore(child, before) {
+        if (child instanceof GridChildNode) {
+            child.parent = this;
+            const childWidget = child.getChildWidget();
+            const props = child.getSlotProps();
+            if (childWidget) {
+                this.attachToGrid(childWidget, props.column, props.row, props.columnSpan, props.rowSpan);
+                child.setParentContainer(this);
+            }
+            return;
+        }
+        super.insertBefore(child, before);
+    }
+    removeChild(child) {
+        if (child instanceof GridChildNode) {
+            const childWidget = child.getChildWidget();
+            if (childWidget) {
+                this.removeFromGrid(childWidget);
+            }
+            child.unmount();
+            child.parent = null;
+            return;
+        }
+        super.removeChild(child);
+    }
 }
 export class GridChildNode extends VirtualSlotNode {
     static matches(type) {