@gtkx/react 0.15.0 → 0.17.1

package/dist/jsx.d.ts

@@ -1,16 +1,50 @@
+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 { AnimationProps } from "./animation/types.js";
+import type { GtkGridViewProps as GeneratedGtkGridViewProps, GtkListViewProps as GeneratedGtkListViewProps, WidgetSlotNames } from "./generated/jsx.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, AnimationMode, AnimationProps, SpringTransition, TimedTransition, } from "./animation/types.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";
+/**
+ * Configuration for a mark on a GtkScale widget.
+ *
+ * Marks are visual indicators placed along the scale at specific values,
+ * optionally with text labels.
+ *
+ * @see {@link https://docs.gtk.org/gtk4/method.Scale.add_mark.html GtkScale.add_mark}
+ */
+export type ScaleMark = {
+    /** The value at which to place the mark */
+    value: number;
+    /** Position of the mark relative to the scale (default: BOTTOM) */
+    position?: Gtk.PositionType;
+    /** Optional text label to display at the mark */
+    label?: string | null;
+};
+/**
+ * Configuration for an offset threshold on a GtkLevelBar widget.
+ *
+ * Offsets define named value thresholds that change the bar's appearance
+ * (e.g., "low", "high", "full"). Built-in offsets include GTK_LEVEL_BAR_OFFSET_LOW,
+ * GTK_LEVEL_BAR_OFFSET_HIGH, and GTK_LEVEL_BAR_OFFSET_FULL.
+ *
+ * @see {@link https://docs.gtk.org/gtk4/method.LevelBar.add_offset_value.html GtkLevelBar.add_offset_value}
+ */
+export type LevelBarOffset = {
+    /** Unique identifier for this offset (e.g., "low", "high", "full") */
+    id: string;
+    /** The threshold value at which this offset applies */
+    value: number;
+};
 /**
  * Props for slot-based child positioning.
  *
@@ -95,6 +129,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 +185,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 +266,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 +294,23 @@ export type ToggleProps = {
     /** Whether underline in label indicates mnemonic */
     useUnderline?: boolean;
 };
+/**
+ * Props for response buttons in an AdwAlertDialog.
+ *
+ * Each response represents a button the user can click to dismiss the dialog.
+ *
+ * @see {@link x.AlertDialogResponse} for usage
+ */
+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 +323,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 +362,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 +381,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 +392,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 +444,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 +721,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";
+    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.
      *
@@ -838,6 +775,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 +855,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 +876,24 @@ export declare const x: {
      * ```
      */
     Shortcut: "Shortcut";
+    /**
+     * Declarative animation wrapper using Adw.TimedAnimation or Adw.SpringAnimation.
+     *
+     * Provides framer-motion-inspired API for animating child widgets.
+     *
+     * @example
+     * ```tsx
+     * <x.Animation
+     *   mode="spring"
+     *   initial={{ opacity: 0, scale: 0.9 }}
+     *   animate={{ opacity: 1, scale: 1 }}
+     *   animateOnMount
+     * >
+     *   <GtkButton label="Animated Button" />
+     * </x.Animation>
+     * ```
+     */
+    Animation: "Animation";
 };
 declare global {
     namespace React {
@@ -929,13 +901,13 @@ declare global {
             interface IntrinsicElements {
                 ActionRowPrefix: VirtualSlotProps;
                 ActionRowSuffix: VirtualSlotProps;
-                CalendarMark: CalendarMarkProps;
+                AlertDialogResponse: AlertDialogResponseProps;
+                Animation: AnimationProps;
                 ColumnViewColumn: ColumnViewColumnProps<any>;
                 ExpanderRowAction: ExpanderRowChildProps;
                 ExpanderRowRow: ExpanderRowChildProps;
                 FixedChild: FixedChildProps;
                 GridChild: GridChildProps;
-                LevelBarOffset: LevelBarOffsetProps;
                 ListItem: ListItemProps;
                 MenuItem: MenuItemProps;
                 MenuSection: MenuSectionProps;
@@ -945,10 +917,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,7 +927,6 @@ declare global {
                 ToolbarTop: VirtualSlotProps;
                 TreeListItem: TreeListItemProps<any>;
                 NavigationPage: NavigationPageProps;
-                ShortcutController: ShortcutControllerProps;
                 Shortcut: ShortcutProps;
             }
         }

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 Adw.TimedAnimation or Adw.SpringAnimation.
+     *
+     * Provides framer-motion-inspired API for animating child widgets.
+     *
+     * @example
+     * ```tsx
+     * <x.Animation
+     *   mode="spring"
+     *   initial={{ opacity: 0, scale: 0.9 }}
+     *   animate={{ opacity: 1, scale: 1 }}
+     *   animateOnMount
+     * >
+     *   <GtkButton label="Animated Button" />
+     * </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,11 +6,13 @@ 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;
     updateProps(_oldProps: P | null, _newProps: P): void;
     mount(): void;
+    commitProps(oldProps: P | null, newProps: P): void;
     unmount(): void;
 }