@gtkx/react 0.15.0 → 0.16.0

package/dist/jsx.d.ts

@@ -1,16 +1,28 @@
+import type * as Adw from "@gtkx/ffi/adw";
+import type * as Gsk from "@gtkx/ffi/gsk";
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { ReactElement, ReactNode } from "react";
-import type { AdjustmentProps } from "./nodes/adjustment.js";
+import type { GtkGridViewProps as GeneratedGtkGridViewProps, GtkListViewProps as GeneratedGtkListViewProps, WidgetSlotNames } from "./generated/jsx.js";
+import type { AnimationProps as AnimationNodeProps } from "./nodes/animation/index.js";
 import type { RenderItemFn } from "./nodes/internal/list-item-renderer.js";
 import type { TreeRenderItemFn } from "./nodes/internal/tree-list-item-renderer.js";
 import type { ShortcutProps as ShortcutNodeProps } from "./nodes/shortcut.js";
-import type { ShortcutControllerProps as ShortcutControllerNodeProps } from "./nodes/shortcut-controller.js";
-import type { SourceBufferProps } from "./nodes/source-buffer.js";
-import type { TextBufferProps } from "./nodes/text-buffer.js";
-export type { AdjustmentProps } from "./nodes/adjustment.js";
-export type { SourceBufferProps } from "./nodes/source-buffer.js";
-export type { TextBufferProps } from "./nodes/text-buffer.js";
-export type { DragSourceProps, DropTargetProps, EventControllerProps, GestureDragProps } from "./types.js";
+import type { TextAnchorProps } from "./nodes/text-anchor.js";
+import type { TextPaintableProps } from "./nodes/text-paintable.js";
+import type { TextTagProps } from "./nodes/text-tag.js";
+export type { AnimatableProperties, SpringTransition, TimedTransition, Transition } from "./nodes/animation/index.js";
+export type { TextAnchorProps } from "./nodes/text-anchor.js";
+export type { TextPaintableProps } from "./nodes/text-paintable.js";
+export type { TextTagProps } from "./nodes/text-tag.js";
+export type ScaleMark = {
+    value: number;
+    position?: Gtk.PositionType;
+    label?: string | null;
+};
+export type LevelBarOffset = {
+    id: string;
+    value: number;
+};
 /**
  * Props for slot-based child positioning.
  *
@@ -95,6 +107,8 @@ export type FixedChildProps = VirtualSlotProps & {
     x?: number;
     /** Y coordinate in pixels */
     y?: number;
+    /** 3D transform to apply to the child (perspective, rotation, etc.) */
+    transform?: Gsk.Transform;
 };
 /**
  * Props for custom list view rendering.
@@ -149,6 +163,10 @@ export type ColumnViewRootProps<C extends string = string> = {
 export type NotebookPageProps = VirtualSlotProps & {
     /** Tab label text (optional when using Notebook.PageTab) */
     label?: string;
+    /** Whether the tab should expand to fill available space */
+    tabExpand?: boolean;
+    /** Whether the tab should fill its allocated space */
+    tabFill?: boolean;
 };
 /**
  * Props for custom notebook page tab widgets.
@@ -226,67 +244,6 @@ export type OverlayChildProps = VirtualSlotProps & {
     /** Whether to clip this overlay child to the main child bounds */
     clipOverlay?: boolean;
 };
-/**
- * Props for the ScaleMark virtual element.
- *
- * Used to declaratively add marks to a GtkScale slider.
- *
- * @example
- * ```tsx
- * <GtkScale>
- *     <x.ScaleMark value={0} label="Min" />
- *     <x.ScaleMark value={50} label="Mid" />
- *     <x.ScaleMark value={100} label="Max" />
- * </GtkScale>
- * ```
- */
-export type ScaleMarkProps = {
-    /** The value at which to place the mark */
-    value: number;
-    /** Position of the mark (TOP or BOTTOM for horizontal, LEFT or RIGHT for vertical) */
-    position?: Gtk.PositionType;
-    /** Optional label text (supports Pango markup) */
-    label?: string | null;
-};
-/**
- * Props for the CalendarMark virtual element.
- *
- * Used to declaratively mark days on a GtkCalendar.
- *
- * @example
- * ```tsx
- * <GtkCalendar>
- *     <x.CalendarMark day={15} />
- *     <x.CalendarMark day={20} />
- *     <x.CalendarMark day={25} />
- * </GtkCalendar>
- * ```
- */
-export type CalendarMarkProps = {
-    /** The day of the month to mark (1-31) */
-    day: number;
-};
-/**
- * Props for the LevelBarOffset virtual element.
- *
- * Used to declaratively add offset thresholds to a GtkLevelBar.
- * Each offset defines a named threshold that triggers visual style changes.
- *
- * @example
- * ```tsx
- * <GtkLevelBar>
- *     <x.LevelBarOffset id="low" value={0.25} />
- *     <x.LevelBarOffset id="high" value={0.75} />
- *     <x.LevelBarOffset id="full" value={1.0} />
- * </GtkLevelBar>
- * ```
- */
-export type LevelBarOffsetProps = {
-    /** Unique identifier for this offset (used for CSS styling) */
-    id: string;
-    /** The threshold value (0.0 to 1.0 for continuous mode, or integer for discrete) */
-    value: number;
-};
 /**
  * Props for the Toggle virtual element.
  *
@@ -315,6 +272,16 @@ export type ToggleProps = {
     /** Whether underline in label indicates mnemonic */
     useUnderline?: boolean;
 };
+export type AlertDialogResponseProps = {
+    /** Unique response ID (used in response signal and for default/close response) */
+    id: string;
+    /** Button label text */
+    label: string;
+    /** Visual appearance of the response button */
+    appearance?: Adw.ResponseAppearance;
+    /** Whether the response button is enabled */
+    enabled?: boolean;
+};
 /**
  * Props for ExpanderRow child slots (Row and Action).
  */
@@ -327,17 +294,7 @@ type NavigationPageBaseProps = {
     canPop?: boolean;
     children?: ReactNode;
 };
-/**
- * Props for the ShortcutController element in JSX.
- *
- * Extends the base ShortcutControllerProps with support for children.
- *
- * @see {@link x.ShortcutController} for usage examples
- */
-export type ShortcutControllerProps = ShortcutControllerNodeProps & {
-    /** Shortcut children to add to this controller */
-    children?: ReactNode;
-};
+export type { GtkShortcutControllerProps as ShortcutControllerProps } from "./generated/jsx.js";
 /**
  * Props for the Shortcut element in JSX.
  *
@@ -376,18 +333,15 @@ export type NavigationPageProps = (NavigationPageBaseProps & {
     id: string;
 }) | (NavigationPageBaseProps & {
     for: "AdwNavigationSplitView";
-    id: import("./generated/jsx.js").WidgetSlotNames["AdwNavigationSplitView"];
+    id: WidgetSlotNames["AdwNavigationSplitView"];
 });
-/**
- * Type mapping widget names to their available slot IDs.
- */
-export type { WidgetSlotNames } from "./generated/jsx.js";
+export type { WidgetSlotNames };
 /**
  * Props for the ListView component.
  *
  * @typeParam T - The type of items in the list
  */
-export type ListViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkListViewProps, "renderItem"> & {
+export type ListViewProps<T = unknown> = Omit<GeneratedGtkListViewProps, "renderItem"> & {
     /** Function to render each list item */
     renderItem: (item: T | null) => ReactNode;
     /** Estimated item height in pixels for proper virtualization before content loads */
@@ -398,7 +352,7 @@ export type ListViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkLi
  *
  * @typeParam T - The type of items in the grid
  */
-export type GridViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkGridViewProps, "renderItem"> & {
+export type GridViewProps<T = unknown> = Omit<GeneratedGtkGridViewProps, "renderItem"> & {
     /** Function to render each grid item */
     renderItem: (item: T | null) => ReactNode;
     /** Estimated item height in pixels for proper virtualization before content loads */
@@ -409,7 +363,7 @@ export type GridViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkGr
  *
  * @typeParam T - The type of items in the tree
  */
-export type TreeListViewProps<T = unknown> = Omit<import("./generated/jsx.js").GtkListViewProps, "renderItem"> & {
+export type TreeListViewProps<T = unknown> = Omit<GeneratedGtkListViewProps, "renderItem"> & {
     /** Function to render each tree item */
     renderItem: TreeRenderItemFn<T>;
     /** Estimated item height in pixels for proper virtualization before content loads */
@@ -461,9 +415,9 @@ export declare const x: {
      * </GtkHeaderBar>
      * ```
      */
-    Slot<W extends keyof import("./generated/jsx.js").WidgetSlotNames>(props: {
+    Slot<W extends keyof WidgetSlotNames>(props: {
         for: W;
-        id: import("./generated/jsx.js").WidgetSlotNames[W];
+        id: WidgetSlotNames[W];
         children?: ReactNode;
     }): ReactElement;
     /**
@@ -738,94 +692,48 @@ export declare const x: {
      */
     MenuSubmenu: "MenuSubmenu";
     /**
-     * Declarative adjustment configuration for adjustable widgets.
+     * Declarative text tag for styling text content.
      *
-     * Works with Scale, Scrollbar, ScaleButton, SpinButton, and ListBox.
+     * Wrap text content with a TextTag to apply styling. Tags can be nested.
      *
      * @example
      * ```tsx
-     * <GtkScale>
-     *   <x.Adjustment
-     *     value={50}
-     *     lower={0}
-     *     upper={100}
-     *     onValueChanged={(v) => console.log(v)}
-     *   />
-     * </GtkScale>
+     * <GtkTextView>
+     *     Normal <x.TextTag id="bold" weight={Pango.Weight.BOLD}>
+     *       bold <x.TextTag id="red" foreground="red">and red</x.TextTag>
+     *     </x.TextTag> text.
+     * </GtkTextView>
      * ```
      */
-    Adjustment: "Adjustment";
+    TextTag: "TextTag";
     /**
-     * A mark to display on a GtkScale slider.
+     * Declarative anchor for embedding widgets in text flow.
      *
-     * @example
-     * ```tsx
-     * <GtkScale>
-     *   <x.ScaleMark value={0} label="Min" />
-     *   <x.ScaleMark value={50} />
-     *   <x.ScaleMark value={100} label="Max" />
-     * </GtkScale>
-     * ```
-     */
-    ScaleMark: "ScaleMark";
-    /**
-     * Declarative text buffer for a GtkTextView.
+     * The anchor is placed at the current position in the text.
      *
      * @example
      * ```tsx
      * <GtkTextView>
-     *   <x.TextBuffer
-     *     text="Hello!"
-     *     enableUndo
-     *     onTextChanged={(text) => console.log(text)}
-     *   />
+     *     Click here: <x.TextAnchor>
+     *       <GtkButton label="Click me" />
+     *     </x.TextAnchor> to continue.
      * </GtkTextView>
      * ```
      */
-    TextBuffer: "TextBuffer";
-    /**
-     * Declarative source buffer for a GtkSourceView with syntax highlighting.
-     *
-     * @example
-     * ```tsx
-     * <GtkSourceView>
-     *   <x.SourceBuffer
-     *     text={code}
-     *     language="typescript"
-     *     styleScheme="Adwaita-dark"
-     *     highlightMatchingBrackets
-     *     onTextChanged={(text) => console.log(text)}
-     *   />
-     * </GtkSourceView>
-     * ```
-     */
-    SourceBuffer: "SourceBuffer";
+    TextAnchor: "TextAnchor";
     /**
-     * A day mark on a GtkCalendar.
+     * Declarative inline paintable for embedding images/icons in text flow.
      *
-     * @example
-     * ```tsx
-     * <GtkCalendar>
-     *   <x.CalendarMark day={15} />
-     *   <x.CalendarMark day={20} />
-     *   <x.CalendarMark day={25} />
-     * </GtkCalendar>
-     * ```
-     */
-    CalendarMark: "CalendarMark";
-    /**
-     * An offset threshold for a GtkLevelBar.
+     * The paintable is placed at the current position in the text.
      *
      * @example
      * ```tsx
-     * <GtkLevelBar>
-     *   <x.LevelBarOffset id="low" value={0.25} />
-     *   <x.LevelBarOffset id="high" value={0.75} />
-     *   <x.LevelBarOffset id="full" value={1.0} />
-     * </GtkLevelBar>
+     * <GtkTextView>
+     *     Click the icon <x.TextPaintable paintable={iconPaintable} /> to continue.
+     * </GtkTextView>
      * ```
      */
-    LevelBarOffset: "LevelBarOffset";
+    TextPaintable: "TextPaintable";
     /**
      * A toggle button for an AdwToggleGroup.
      *
@@ -838,6 +746,23 @@ export declare const x: {
      * ```
      */
     Toggle: "Toggle";
+    /**
+     * A response button for an AdwAlertDialog.
+     *
+     * @example
+     * ```tsx
+     * <AdwAlertDialog
+     *   heading="Delete File?"
+     *   body="This cannot be undone."
+     *   defaultResponse="cancel"
+     *   closeResponse="cancel"
+     * >
+     *   <x.AlertDialogResponse id="cancel" label="Cancel" />
+     *   <x.AlertDialogResponse id="delete" label="Delete" appearance={Adw.ResponseAppearance.DESTRUCTIVE} />
+     * </AdwAlertDialog>
+     * ```
+     */
+    AlertDialogResponse: "AlertDialogResponse";
     /**
      * Nested rows container for AdwExpanderRow.
      *
@@ -901,14 +826,14 @@ export declare const x: {
      * @example
      * ```tsx
      * <GtkBox>
-     *   <x.ShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
+     *   <GtkShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
      *     <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} />
      *     <x.Shortcut trigger="<Control>q" onActivate={quit} />
-     *   </x.ShortcutController>
+     *   </GtkShortcutController>
      * </GtkBox>
      * ```
      */
-    ShortcutController: "ShortcutController";
+    ShortcutController: "GtkShortcutController";
     /**
      * A keyboard shortcut definition.
      *
@@ -922,6 +847,24 @@ export declare const x: {
      * ```
      */
     Shortcut: "Shortcut";
+    /**
+     * Declarative animation wrapper using libadwaita's animation primitives.
+     *
+     * Provides Framer Motion-like API for animating GTK widgets with spring
+     * or timed animations.
+     *
+     * @example
+     * ```tsx
+     * <x.Animation
+     *   initial={{ opacity: 0, y: -20 }}
+     *   animate={{ opacity: 1, y: 0 }}
+     *   transition={{ type: "spring", stiffness: 300, damping: 20 }}
+     * >
+     *   <GtkLabel label="Hello World" />
+     * </x.Animation>
+     * ```
+     */
+    Animation: "Animation";
 };
 declare global {
     namespace React {
@@ -929,13 +872,12 @@ declare global {
             interface IntrinsicElements {
                 ActionRowPrefix: VirtualSlotProps;
                 ActionRowSuffix: VirtualSlotProps;
-                CalendarMark: CalendarMarkProps;
+                AlertDialogResponse: AlertDialogResponseProps;
                 ColumnViewColumn: ColumnViewColumnProps<any>;
                 ExpanderRowAction: ExpanderRowChildProps;
                 ExpanderRowRow: ExpanderRowChildProps;
                 FixedChild: FixedChildProps;
                 GridChild: GridChildProps;
-                LevelBarOffset: LevelBarOffsetProps;
                 ListItem: ListItemProps;
                 MenuItem: MenuItemProps;
                 MenuSection: MenuSectionProps;
@@ -945,10 +887,9 @@ declare global {
                 OverlayChild: OverlayChildProps;
                 PackEnd: VirtualSlotProps;
                 PackStart: VirtualSlotProps;
-                Adjustment: AdjustmentProps;
-                ScaleMark: ScaleMarkProps;
-                SourceBuffer: SourceBufferProps;
-                TextBuffer: TextBufferProps;
+                TextAnchor: TextAnchorProps;
+                TextPaintable: TextPaintableProps;
+                TextTag: TextTagProps;
                 SimpleListItem: StringListItemProps;
                 StackPage: StackPageProps;
                 Toggle: ToggleProps;
@@ -956,8 +897,8 @@ declare global {
                 ToolbarTop: VirtualSlotProps;
                 TreeListItem: TreeListItemProps<any>;
                 NavigationPage: NavigationPageProps;
-                ShortcutController: ShortcutControllerProps;
                 Shortcut: ShortcutProps;
+                Animation: AnimationNodeProps;
             }
         }
     }

package/dist/jsx.js

@@ -320,94 +320,48 @@ export const x = {
      */
     MenuSubmenu: "MenuSubmenu",
     /**
-     * Declarative adjustment configuration for adjustable widgets.
+     * Declarative text tag for styling text content.
      *
-     * Works with Scale, Scrollbar, ScaleButton, SpinButton, and ListBox.
+     * Wrap text content with a TextTag to apply styling. Tags can be nested.
      *
      * @example
      * ```tsx
-     * <GtkScale>
-     *   <x.Adjustment
-     *     value={50}
-     *     lower={0}
-     *     upper={100}
-     *     onValueChanged={(v) => console.log(v)}
-     *   />
-     * </GtkScale>
+     * <GtkTextView>
+     *     Normal <x.TextTag id="bold" weight={Pango.Weight.BOLD}>
+     *       bold <x.TextTag id="red" foreground="red">and red</x.TextTag>
+     *     </x.TextTag> text.
+     * </GtkTextView>
      * ```
      */
-    Adjustment: "Adjustment",
+    TextTag: "TextTag",
     /**
-     * A mark to display on a GtkScale slider.
+     * Declarative anchor for embedding widgets in text flow.
      *
-     * @example
-     * ```tsx
-     * <GtkScale>
-     *   <x.ScaleMark value={0} label="Min" />
-     *   <x.ScaleMark value={50} />
-     *   <x.ScaleMark value={100} label="Max" />
-     * </GtkScale>
-     * ```
-     */
-    ScaleMark: "ScaleMark",
-    /**
-     * Declarative text buffer for a GtkTextView.
+     * The anchor is placed at the current position in the text.
      *
      * @example
      * ```tsx
      * <GtkTextView>
-     *   <x.TextBuffer
-     *     text="Hello!"
-     *     enableUndo
-     *     onTextChanged={(text) => console.log(text)}
-     *   />
+     *     Click here: <x.TextAnchor>
+     *       <GtkButton label="Click me" />
+     *     </x.TextAnchor> to continue.
      * </GtkTextView>
      * ```
      */
-    TextBuffer: "TextBuffer",
+    TextAnchor: "TextAnchor",
     /**
-     * Declarative source buffer for a GtkSourceView with syntax highlighting.
+     * Declarative inline paintable for embedding images/icons in text flow.
      *
-     * @example
-     * ```tsx
-     * <GtkSourceView>
-     *   <x.SourceBuffer
-     *     text={code}
-     *     language="typescript"
-     *     styleScheme="Adwaita-dark"
-     *     highlightMatchingBrackets
-     *     onTextChanged={(text) => console.log(text)}
-     *   />
-     * </GtkSourceView>
-     * ```
-     */
-    SourceBuffer: "SourceBuffer",
-    /**
-     * A day mark on a GtkCalendar.
-     *
-     * @example
-     * ```tsx
-     * <GtkCalendar>
-     *   <x.CalendarMark day={15} />
-     *   <x.CalendarMark day={20} />
-     *   <x.CalendarMark day={25} />
-     * </GtkCalendar>
-     * ```
-     */
-    CalendarMark: "CalendarMark",
-    /**
-     * An offset threshold for a GtkLevelBar.
+     * The paintable is placed at the current position in the text.
      *
      * @example
      * ```tsx
-     * <GtkLevelBar>
-     *   <x.LevelBarOffset id="low" value={0.25} />
-     *   <x.LevelBarOffset id="high" value={0.75} />
-     *   <x.LevelBarOffset id="full" value={1.0} />
-     * </GtkLevelBar>
+     * <GtkTextView>
+     *     Click the icon <x.TextPaintable paintable={iconPaintable} /> to continue.
+     * </GtkTextView>
      * ```
      */
-    LevelBarOffset: "LevelBarOffset",
+    TextPaintable: "TextPaintable",
     /**
      * A toggle button for an AdwToggleGroup.
      *
@@ -420,6 +374,23 @@ export const x = {
      * ```
      */
     Toggle: "Toggle",
+    /**
+     * A response button for an AdwAlertDialog.
+     *
+     * @example
+     * ```tsx
+     * <AdwAlertDialog
+     *   heading="Delete File?"
+     *   body="This cannot be undone."
+     *   defaultResponse="cancel"
+     *   closeResponse="cancel"
+     * >
+     *   <x.AlertDialogResponse id="cancel" label="Cancel" />
+     *   <x.AlertDialogResponse id="delete" label="Delete" appearance={Adw.ResponseAppearance.DESTRUCTIVE} />
+     * </AdwAlertDialog>
+     * ```
+     */
+    AlertDialogResponse: "AlertDialogResponse",
     /**
      * Nested rows container for AdwExpanderRow.
      *
@@ -483,14 +454,14 @@ export const x = {
      * @example
      * ```tsx
      * <GtkBox>
-     *   <x.ShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
+     *   <GtkShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
      *     <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} />
      *     <x.Shortcut trigger="<Control>q" onActivate={quit} />
-     *   </x.ShortcutController>
+     *   </GtkShortcutController>
      * </GtkBox>
      * ```
      */
-    ShortcutController: "ShortcutController",
+    ShortcutController: "GtkShortcutController",
     /**
      * A keyboard shortcut definition.
      *
@@ -504,5 +475,23 @@ export const x = {
      * ```
      */
     Shortcut: "Shortcut",
+    /**
+     * Declarative animation wrapper using libadwaita's animation primitives.
+     *
+     * Provides Framer Motion-like API for animating GTK widgets with spring
+     * or timed animations.
+     *
+     * @example
+     * ```tsx
+     * <x.Animation
+     *   initial={{ opacity: 0, y: -20 }}
+     *   animate={{ opacity: 1, y: 0 }}
+     *   transition={{ type: "spring", stiffness: 300, damping: 20 }}
+     * >
+     *   <GtkLabel label="Hello World" />
+     * </x.Animation>
+     * ```
+     */
+    Animation: "Animation",
 };
 export * from "./generated/jsx.js";

package/dist/node.d.ts

@@ -1,3 +1,4 @@
+import { type SignalStore } from "./nodes/internal/signal-store.js";
 import type { Container, ContainerClass, Props } from "./types.js";
 export declare class Node<T = unknown, P = Props> {
     static priority: number;
@@ -5,7 +6,8 @@ export declare class Node<T = unknown, P = Props> {
     static createContainer(_props: Props, _containerClass: ContainerClass, _rootContainer?: Container): unknown;
     container: T;
     typeName: string;
-    constructor(typeName: string, _props: P | undefined, container: T, _rootContainer?: Container);
+    signalStore: SignalStore;
+    constructor(typeName: string, _props: P | undefined, container: T, rootContainer: Container);
     appendChild(_child: Node): void;
     removeChild(_child: Node): void;
     insertBefore(_child: Node, _before: Node): void;

package/dist/node.js

@@ -1,4 +1,4 @@
-import { signalStore } from "./nodes/internal/signal-store.js";
+import { getSignalStore } from "./nodes/internal/signal-store.js";
 export class Node {
     static priority = 0;
     static matches(_type, _containerOrClass) {
@@ -9,9 +9,11 @@ export class Node {
     }
     container;
     typeName;
-    constructor(typeName, _props = {}, container, _rootContainer) {
+    signalStore;
+    constructor(typeName, _props = {}, container, rootContainer) {
         this.typeName = typeName;
         this.container = container;
+        this.signalStore = getSignalStore(rootContainer);
     }
     appendChild(_child) { }
     removeChild(_child) { }
@@ -19,6 +21,6 @@ export class Node {
     updateProps(_oldProps, _newProps) { }
     mount() { }
     unmount() {
-        signalStore.clear(this);
+        this.signalStore.clear(this);
     }
 }

package/dist/nodes/abstract/positional-child.d.ts

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Props } from "../../types.js";
+import { VirtualSingleChildNode } from "./virtual-single-child.js";
+export declare abstract class PositionalChildNode<P extends Props = Props> extends VirtualSingleChildNode<P> {
+    protected abstract attachToParent(parent: Gtk.Widget, child: Gtk.Widget): void;
+    protected abstract detachFromParent(parent: Gtk.Widget, child: Gtk.Widget): void;
+    unmount(): void;
+    protected onChildChange(oldChild: Gtk.Widget | null): void;
+}