@gtkx/react 0.13.3 → 0.15.0

package/dist/nodes/stack-page.js

@@ -1,4 +1,4 @@
-import { isObjectEqual } from "@gtkx/ffi";
+import { batch, isObjectEqual } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
 import { SlotNode } from "./slot.js";
@@ -13,11 +13,15 @@ class StackPageNode extends SlotNode {
         if (!this.page) {
             return;
         }
-        if (newProps.title && (!oldProps || oldProps.title !== newProps.title)) {
-            this.page.setTitle(newProps.title);
+        if (!oldProps || oldProps.title !== newProps.title) {
+            if (newProps.title !== undefined) {
+                this.page.setTitle(newProps.title);
+            }
         }
-        if (newProps.iconName && (!oldProps || oldProps.iconName !== newProps.iconName)) {
-            this.page.setIconName(newProps.iconName);
+        if (!oldProps || oldProps.iconName !== newProps.iconName) {
+            if (newProps.iconName !== undefined) {
+                this.page.setIconName(newProps.iconName);
+            }
         }
         if (!oldProps || oldProps.needsAttention !== newProps.needsAttention) {
             this.page.setNeedsAttention(newProps.needsAttention ?? false);
@@ -75,10 +79,12 @@ class StackPageNode extends SlotNode {
         }
     }
     onChildChange(oldChild) {
-        this.removePage(oldChild);
-        if (this.child) {
-            this.addPage();
-        }
+        batch(() => {
+            this.removePage(oldChild);
+            if (this.child) {
+                this.addPage();
+            }
+        });
     }
 }
 registerNodeClass(StackPageNode);

package/dist/nodes/text-buffer.d.ts

@@ -0,0 +1,43 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the TextBuffer virtual element.
+ *
+ * Used to declaratively configure the text buffer for a GtkTextView.
+ * For GtkSourceView with syntax highlighting, use {@link SourceBufferProps} instead.
+ *
+ * @example
+ * ```tsx
+ * <GtkTextView>
+ *     <x.TextBuffer
+ *         text="Hello, World!"
+ *         enableUndo
+ *         onTextChanged={(text) => console.log("Text:", text)}
+ *     />
+ * </GtkTextView>
+ * ```
+ */
+export type TextBufferProps = {
+    /** Text content */
+    text?: string;
+    /** Whether to enable undo/redo */
+    enableUndo?: boolean;
+    /** Callback when the text content changes */
+    onTextChanged?: (text: string) => void;
+    /** Callback when can-undo state changes */
+    onCanUndoChanged?: (canUndo: boolean) => void;
+    /** Callback when can-redo state changes */
+    onCanRedoChanged?: (canRedo: boolean) => void;
+};
+export declare class TextBufferNode extends VirtualNode<TextBufferProps> {
+    static priority: number;
+    private textView?;
+    private buffer?;
+    static matches(type: string): boolean;
+    setTextView(textView: Gtk.TextView): void;
+    private setupBuffer;
+    private getBufferText;
+    private updateSignalHandlers;
+    updateProps(oldProps: TextBufferProps | null, newProps: TextBufferProps): void;
+    unmount(): void;
+}

package/dist/nodes/text-buffer.js

@@ -0,0 +1,81 @@
+import { batch } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { signalStore } from "./internal/signal-store.js";
+import { VirtualNode } from "./virtual.js";
+export class TextBufferNode extends VirtualNode {
+    static priority = 1;
+    textView;
+    buffer;
+    static matches(type) {
+        return type === "TextBuffer";
+    }
+    setTextView(textView) {
+        this.textView = textView;
+        this.setupBuffer();
+    }
+    setupBuffer() {
+        if (!this.textView)
+            return;
+        this.buffer = new Gtk.TextBuffer();
+        this.textView.setBuffer(this.buffer);
+        if (this.props.enableUndo !== undefined) {
+            this.buffer.setEnableUndo(this.props.enableUndo);
+        }
+        if (this.props.text !== undefined) {
+            this.buffer.setText(this.props.text, -1);
+        }
+        this.updateSignalHandlers();
+    }
+    getBufferText() {
+        const buffer = this.buffer;
+        if (!buffer)
+            return "";
+        const startIter = new Gtk.TextIter();
+        const endIter = new Gtk.TextIter();
+        batch(() => {
+            buffer.getStartIter(startIter);
+            buffer.getEndIter(endIter);
+        });
+        return buffer.getText(startIter, endIter, true);
+    }
+    updateSignalHandlers() {
+        if (!this.buffer)
+            return;
+        const buffer = this.buffer;
+        const { onTextChanged, onCanUndoChanged, onCanRedoChanged } = this.props;
+        signalStore.set(this, buffer, "changed", onTextChanged ? () => onTextChanged(this.getBufferText()) : null);
+        signalStore.set(this, buffer, "notify::can-undo", onCanUndoChanged ? () => onCanUndoChanged(buffer.getCanUndo()) : null);
+        signalStore.set(this, buffer, "notify::can-redo", onCanRedoChanged ? () => onCanRedoChanged(buffer.getCanRedo()) : null);
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.buffer)
+            return;
+        if (!oldProps || oldProps.enableUndo !== newProps.enableUndo) {
+            if (newProps.enableUndo !== undefined) {
+                this.buffer.setEnableUndo(newProps.enableUndo);
+            }
+        }
+        if (!oldProps || oldProps.text !== newProps.text) {
+            if (newProps.text !== undefined) {
+                const currentText = this.getBufferText();
+                if (currentText !== newProps.text) {
+                    this.buffer.setText(newProps.text, -1);
+                }
+            }
+        }
+        if (!oldProps ||
+            oldProps.onTextChanged !== newProps.onTextChanged ||
+            oldProps.onCanUndoChanged !== newProps.onCanUndoChanged ||
+            oldProps.onCanRedoChanged !== newProps.onCanRedoChanged) {
+            this.updateSignalHandlers();
+        }
+    }
+    unmount() {
+        this.buffer = undefined;
+        this.textView = undefined;
+        super.unmount();
+    }
+}
+registerNodeClass(TextBufferNode);

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

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

package/dist/nodes/text-view.js

@@ -0,0 +1,45 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import * as GtkSource from "@gtkx/ffi/gtksource";
+import { registerNodeClass } from "../registry.js";
+import { isContainerType } from "./internal/utils.js";
+import { TextBufferNode } from "./text-buffer.js";
+import { WidgetNode } from "./widget.js";
+class TextViewNode extends WidgetNode {
+    static priority = 1;
+    bufferChild;
+    static matches(_type, containerOrClass) {
+        if (isContainerType(GtkSource.View, containerOrClass))
+            return false;
+        return isContainerType(Gtk.TextView, containerOrClass);
+    }
+    appendChild(child) {
+        if (this.tryAttachTextBuffer(child))
+            return;
+        super.appendChild(child);
+    }
+    insertBefore(child, before) {
+        if (this.tryAttachTextBuffer(child))
+            return;
+        super.insertBefore(child, before);
+    }
+    removeChild(child) {
+        if (child instanceof TextBufferNode) {
+            if (this.bufferChild === child) {
+                this.bufferChild = undefined;
+            }
+            return;
+        }
+        super.removeChild(child);
+    }
+    tryAttachTextBuffer(child) {
+        if (!(child instanceof TextBufferNode))
+            return false;
+        if (this.bufferChild) {
+            throw new Error("TextView can only have one TextBuffer child");
+        }
+        this.bufferChild = child;
+        child.setTextView(this.container);
+        return true;
+    }
+}
+registerNodeClass(TextViewNode);

package/dist/nodes/tree-list-view.js

@@ -34,6 +34,10 @@ class TreeListViewNode extends WidgetNode {
         super.mount();
         this.container.setModel(this.treeList.getSelectionModel());
     }
+    unmount() {
+        this.itemRenderer.dispose();
+        super.unmount();
+    }
     appendChild(child) {
         if (!(child instanceof TreeListItemNode)) {
             throw new Error(`Cannot append '${child.typeName}' to 'TreeListView': expected x.TreeListItem`);
@@ -59,8 +63,13 @@ class TreeListViewNode extends WidgetNode {
         if (!oldProps || oldProps.estimatedItemHeight !== newProps.estimatedItemHeight) {
             this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight);
         }
-        this.treeList.updateProps(oldProps ? filterProps(oldProps, RENDERER_PROP_NAMES) : null, filterProps(newProps, RENDERER_PROP_NAMES));
-        super.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
+        const previousModel = this.treeList.getSelectionModel();
+        this.treeList.updateProps(filterProps(oldProps ?? {}, RENDERER_PROP_NAMES), filterProps(newProps, RENDERER_PROP_NAMES));
+        const currentModel = this.treeList.getSelectionModel();
+        if (previousModel !== currentModel) {
+            this.container.setModel(currentModel);
+        }
+        super.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
     }
 }
 registerNodeClass(TreeListViewNode);

package/dist/nodes/widget.d.ts

@@ -7,6 +7,10 @@ export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Pro
     private clickController?;
     private keyController?;
     private scrollController?;
+    private dragSourceController?;
+    private dropTargetController?;
+    private gestureDragController?;
+    private adjustmentChild?;
     static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
     static createContainer(props: Props, containerClass: typeof Gtk.Widget): Container | null;
     appendChild(child: Node): void;
@@ -15,7 +19,12 @@ export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Pro
     private insertBeforeReorderable;
     private insertBeforeInsertable;
     updateProps(oldProps: P | null, newProps: P): void;
+    private updateSizeRequest;
+    private updateGrabFocus;
     private updateEventControllerProp;
+    private ensureDragSource;
+    private ensureDropTarget;
+    private ensureGestureDrag;
     private updateNotifyHandler;
     private propNameToSignalName;
     private getProperty;

package/dist/nodes/widget.js

@@ -1,19 +1,27 @@
 import { batch, isObjectEqual, NativeObject } from "@gtkx/ffi";
+import * as Gdk from "@gtkx/ffi/gdk";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { CONSTRUCTOR_PROPS } from "../generated/internal.js";
 import { Node } from "../node.js";
 import { registerNodeClass } from "../registry.js";
+import { AdjustmentNode } from "./adjustment.js";
 import { EVENT_CONTROLLER_PROPS } from "./internal/constants.js";
-import { hasSingleContent, isAddable, isAppendable, isEditable, isInsertable, isRemovable, isReorderable, isSingleChild, } from "./internal/predicates.js";
+import { hasSingleContent, isAddable, isAdjustable, isAppendable, isEditable, isInsertable, isRemovable, isReorderable, isSingleChild, } from "./internal/predicates.js";
 import { signalStore } from "./internal/signal-store.js";
 import { filterProps, isContainerType, resolvePropMeta, resolveSignal } from "./internal/utils.js";
+import { ShortcutControllerNode } from "./shortcut-controller.js";
 import { SlotNode } from "./slot.js";
+const PROPS = ["children", "widthRequest", "heightRequest", "grabFocus"];
 export class WidgetNode extends Node {
     static priority = 3;
     motionController;
     clickController;
     keyController;
     scrollController;
+    dragSourceController;
+    dropTargetController;
+    gestureDragController;
+    adjustmentChild;
     static matches(_type, containerOrClass) {
         return isContainerType(Gtk.Widget, containerOrClass);
     }
@@ -24,10 +32,25 @@ export class WidgetNode extends Node {
         return new WidgetClass(...args);
     }
     appendChild(child) {
+        if (child instanceof ShortcutControllerNode) {
+            child.setParent(this.container);
+            return;
+        }
         if (child instanceof SlotNode) {
             child.setParent(this.container);
             return;
         }
+        if (child instanceof AdjustmentNode) {
+            if (!isAdjustable(this.container)) {
+                throw new Error(`Cannot add Adjustment to '${this.typeName}': widget does not support adjustments`);
+            }
+            if (this.adjustmentChild) {
+                throw new Error(`${this.typeName} can only have one Adjustment child`);
+            }
+            this.adjustmentChild = child;
+            child.setWidget(this.container);
+            return;
+        }
         if (!(child instanceof WidgetNode)) {
             throw new Error(`Cannot append '${child.typeName}' to 'Widget': expected WidgetNode child`);
         }
@@ -37,9 +60,19 @@ export class WidgetNode extends Node {
         batch(() => this.attachChild(child));
     }
     removeChild(child) {
+        if (child instanceof ShortcutControllerNode) {
+            child.setParent(undefined);
+            return;
+        }
         if (child instanceof SlotNode) {
             return;
         }
+        if (child instanceof AdjustmentNode) {
+            if (this.adjustmentChild === child) {
+                this.adjustmentChild = undefined;
+            }
+            return;
+        }
         if (!(child instanceof WidgetNode)) {
             throw new Error(`Cannot remove '${child.typeName}' from 'Widget': expected WidgetNode child`);
         }
@@ -49,10 +82,25 @@ export class WidgetNode extends Node {
         batch(() => this.detachChild(child));
     }
     insertBefore(child, before) {
+        if (child instanceof ShortcutControllerNode) {
+            child.setParent(this.container);
+            return;
+        }
         if (child instanceof SlotNode) {
             child.setParent(this.container);
             return;
         }
+        if (child instanceof AdjustmentNode) {
+            if (!isAdjustable(this.container)) {
+                throw new Error(`Cannot add Adjustment to '${this.typeName}': widget does not support adjustments`);
+            }
+            if (this.adjustmentChild) {
+                throw new Error(`${this.typeName} can only have one Adjustment child`);
+            }
+            this.adjustmentChild = child;
+            child.setWidget(this.container);
+            return;
+        }
         if (!(child instanceof WidgetNode) || !(before instanceof WidgetNode)) {
             throw new Error(`Cannot insert '${child.typeName}' before '${before.typeName}': expected WidgetNode children`);
         }
@@ -89,11 +137,14 @@ export class WidgetNode extends Node {
         container.insert(child.container, position);
     }
     updateProps(oldProps, newProps) {
+        this.updateSizeRequest(oldProps, newProps);
+        this.updateGrabFocus(oldProps, newProps);
         const propNames = new Set([
-            ...Object.keys(filterProps(oldProps ?? {}, ["children"])),
-            ...Object.keys(filterProps(newProps ?? {}, ["children"])),
+            ...Object.keys(filterProps(oldProps ?? {}, PROPS)),
+            ...Object.keys(filterProps(newProps ?? {}, PROPS)),
         ]);
         const pendingSignals = [];
+        const pendingProperties = [];
         for (const name of propNames) {
             const oldValue = oldProps?.[name];
             const newValue = newProps[name];
@@ -112,14 +163,7 @@ export class WidgetNode extends Node {
                 pendingSignals.push({ name, newValue });
             }
             else if (newValue !== undefined) {
-                const isEditableText = name === "text" && isEditable(this.container);
-                if (isEditableText && oldValue !== undefined) {
-                    const currentValue = this.getProperty(name);
-                    if (oldValue !== currentValue) {
-                        continue;
-                    }
-                }
-                this.setProperty(name, newValue);
+                pendingProperties.push({ name, oldValue, newValue });
             }
         }
         for (const { name, newValue } of pendingSignals) {
@@ -135,9 +179,37 @@ export class WidgetNode extends Node {
                 signalStore.set(this, this.container, signalName, handler);
             }
         }
+        for (const { name, oldValue, newValue } of pendingProperties) {
+            const isEditableText = name === "text" && isEditable(this.container);
+            if (isEditableText && oldValue !== undefined) {
+                const currentValue = this.getProperty(name);
+                if (oldValue !== currentValue) {
+                    continue;
+                }
+            }
+            this.setProperty(name, newValue);
+        }
     }
-    updateEventControllerProp(propName, handler) {
-        const wrappedHandler = handler ? (_self, ...args) => handler(...args) : undefined;
+    updateSizeRequest(oldProps, newProps) {
+        const oldWidth = oldProps?.widthRequest;
+        const oldHeight = oldProps?.heightRequest;
+        const newWidth = newProps.widthRequest;
+        const newHeight = newProps.heightRequest;
+        if (oldWidth !== newWidth || oldHeight !== newHeight) {
+            this.container.setSizeRequest(newWidth ?? -1, newHeight ?? -1);
+        }
+    }
+    updateGrabFocus(oldProps, newProps) {
+        const oldGrabFocus = oldProps?.grabFocus;
+        const newGrabFocus = newProps.grabFocus;
+        if (!oldGrabFocus && newGrabFocus) {
+            this.container.grabFocus();
+        }
+    }
+    updateEventControllerProp(propName, handlerOrValue) {
+        const wrappedHandler = typeof handlerOrValue === "function"
+            ? (_self, ...args) => handlerOrValue(...args)
+            : undefined;
         switch (propName) {
             case "onEnter":
             case "onLeave":
@@ -178,7 +250,88 @@ export class WidgetNode extends Node {
                 signalStore.set(this, this.scrollController, "scroll", wrappedHandler);
                 break;
             }
+            case "onDragPrepare":
+            case "onDragBegin":
+            case "onDragEnd":
+            case "onDragCancel":
+            case "dragActions": {
+                const dragSource = this.ensureDragSource();
+                if (propName === "dragActions") {
+                    dragSource.setActions(handlerOrValue ?? Gdk.DragAction.COPY);
+                }
+                else {
+                    const signalName = propName === "onDragPrepare"
+                        ? "prepare"
+                        : propName === "onDragBegin"
+                            ? "drag-begin"
+                            : propName === "onDragEnd"
+                                ? "drag-end"
+                                : "drag-cancel";
+                    signalStore.set(this, dragSource, signalName, wrappedHandler);
+                }
+                break;
+            }
+            case "onDrop":
+            case "onDropEnter":
+            case "onDropLeave":
+            case "onDropMotion":
+            case "dropActions":
+            case "dropTypes": {
+                const dropTarget = this.ensureDropTarget();
+                if (propName === "dropActions") {
+                    dropTarget.setActions(handlerOrValue ?? Gdk.DragAction.COPY);
+                }
+                else if (propName === "dropTypes") {
+                    const types = handlerOrValue ?? [];
+                    dropTarget.setGtypes(types.length, types);
+                }
+                else {
+                    const signalName = propName === "onDrop"
+                        ? "drop"
+                        : propName === "onDropEnter"
+                            ? "enter"
+                            : propName === "onDropLeave"
+                                ? "leave"
+                                : "motion";
+                    signalStore.set(this, dropTarget, signalName, wrappedHandler);
+                }
+                break;
+            }
+            case "onGestureDragBegin":
+            case "onGestureDragUpdate":
+            case "onGestureDragEnd": {
+                const gestureDrag = this.ensureGestureDrag();
+                const signalName = propName === "onGestureDragBegin"
+                    ? "drag-begin"
+                    : propName === "onGestureDragUpdate"
+                        ? "drag-update"
+                        : "drag-end";
+                signalStore.set(this, gestureDrag, signalName, wrappedHandler);
+                break;
+            }
+        }
+    }
+    ensureDragSource() {
+        if (!this.dragSourceController) {
+            this.dragSourceController = new Gtk.DragSource();
+            this.dragSourceController.setActions(Gdk.DragAction.COPY);
+            this.container.addController(this.dragSourceController);
+        }
+        return this.dragSourceController;
+    }
+    ensureDropTarget() {
+        if (!this.dropTargetController) {
+            this.dropTargetController = new Gtk.DropTarget(0, Gdk.DragAction.COPY);
+            this.container.addController(this.dropTargetController);
+        }
+        return this.dropTargetController;
+    }
+    ensureGestureDrag() {
+        if (!this.gestureDragController) {
+            this.gestureDragController = new Gtk.GestureDrag();
+            this.container.addController(this.gestureDragController);
         }
+        return this.gestureDragController;
     }
     updateNotifyHandler(handler) {
         const wrappedHandler = handler

package/dist/nodes/window.js

@@ -68,12 +68,14 @@ export class WindowNode extends WidgetNode {
             const height = newProps.defaultHeight ?? -1;
             this.container.setDefaultSize(width, height);
         }
-        if (oldProps?.onClose !== newProps.onClose) {
+        if (!oldProps || oldProps.onClose !== newProps.onClose) {
             const userHandler = newProps.onClose;
-            const wrappedHandler = () => {
-                userHandler?.();
-                return true;
-            };
+            const wrappedHandler = userHandler
+                ? () => {
+                    userHandler();
+                    return true;
+                }
+                : undefined;
             signalStore.set(this, this.container, "close-request", wrappedHandler);
         }
         super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));

package/dist/render.d.ts

@@ -9,9 +9,9 @@ import { type ReactNode } from "react";
  * @example
  * ```tsx
  * const App = () => {
- *   const app = useApplication();
- *   console.log(app.applicationId);
- *   return <GtkLabel label="Hello" />;
+ * const app = useApplication();
+ * console.log(app.applicationId);
+ * return <GtkLabel label="Hello" />;
  * };
  * ```
  */
@@ -27,8 +27,8 @@ export declare const ApplicationContext: React.Context<Gtk.Application | null>;
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const app = useApplication();
- *   return <GtkLabel label={app.applicationId} />;
+ * const app = useApplication();
+ * return <GtkLabel label={app.applicationId} />;
  * };
  * ```
  *
@@ -69,9 +69,9 @@ export declare const setHotReloading: (value: boolean) => void;
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkLabel label="Hello, GTKX!" />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkLabel label="Hello, GTKX!" />
+ * </GtkApplicationWindow>
  * );
  *
  * render(<App />, "com.example.myapp");
@@ -94,9 +94,9 @@ export declare const render: (element: ReactNode, appId: string, flags?: Gio.App
  * ```tsx
  * // In HMR handler
  * if (import.meta.hot) {
- *   import.meta.hot.accept(() => {
- *     update(<App />);
- *   });
+ * import.meta.hot.accept(() => {
+ * update(<App />);
+ * });
  * }
  * ```
  *
@@ -114,9 +114,9 @@ export declare const update: (element: ReactNode) => Promise<void>;
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkButton label="Quit" onClicked={quit} />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkButton label="Quit" onClicked={quit} />
+ * </GtkApplicationWindow>
  * );
  * ```
  *

package/dist/render.js

@@ -11,9 +11,9 @@ import { reconciler } from "./reconciler.js";
  * @example
  * ```tsx
  * const App = () => {
- *   const app = useApplication();
- *   console.log(app.applicationId);
- *   return <GtkLabel label="Hello" />;
+ * const app = useApplication();
+ * console.log(app.applicationId);
+ * return <GtkLabel label="Hello" />;
  * };
  * ```
  */
@@ -29,8 +29,8 @@ export const ApplicationContext = createContext(null);
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const app = useApplication();
- *   return <GtkLabel label={app.applicationId} />;
+ * const app = useApplication();
+ * return <GtkLabel label={app.applicationId} />;
  * };
  * ```
  *
@@ -84,9 +84,9 @@ export const setHotReloading = (value) => {
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkLabel label="Hello, GTKX!" />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkLabel label="Hello, GTKX!" />
+ * </GtkApplicationWindow>
  * );
  *
  * render(<App />, "com.example.myapp");
@@ -121,9 +121,9 @@ export const render = (element, appId, flags) => {
  * ```tsx
  * // In HMR handler
  * if (import.meta.hot) {
- *   import.meta.hot.accept(() => {
- *     update(<App />);
- *   });
+ * import.meta.hot.accept(() => {
+ * update(<App />);
+ * });
  * }
  * ```
  *
@@ -147,9 +147,9 @@ export const update = (element) => {
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkButton label="Quit" onClicked={quit} />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkButton label="Quit" onClicked={quit} />
+ * </GtkApplicationWindow>
  * );
  * ```
  *