@gtkx/react 0.13.3 → 0.15.0

package/dist/host-config.js

@@ -1,4 +1,4 @@
-import { batch, beginBatch, endBatch, getNativeId } from "@gtkx/ffi";
+import { beginBatch, endBatch, getNativeId } from "@gtkx/ffi";
 import React from "react";
 import { createNode } from "./factory.js";
 import { signalStore } from "./nodes/internal/signal-store.js";
@@ -71,11 +71,11 @@ export function createHostConfig() {
             parent.insertBefore(child, beforeChild);
         },
         prepareForCommit: () => {
+            signalStore.blockAll();
             beginBatch();
             return null;
         },
         resetAfterCommit: () => {
-            batch(() => signalStore.blockAll());
             endBatch();
             flushAfterCommit();
             signalStore.unblockAll();

package/dist/jsx.d.ts

@@ -1,8 +1,16 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import type { ReactElement, ReactNode } from "react";
+import type { AdjustmentProps } from "./nodes/adjustment.js";
 import type { RenderItemFn } from "./nodes/internal/list-item-renderer.js";
 import type { TreeRenderItemFn } from "./nodes/internal/tree-list-item-renderer.js";
-export type { EventControllerProps } from "./types.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";
 /**
  * Props for slot-based child positioning.
  *
@@ -14,6 +22,13 @@ export type SlotProps = {
     /** Content to place in the slot */
     children?: ReactNode;
 };
+/**
+ * Props for virtual child containers that don't expose slot id.
+ */
+export type VirtualSlotProps = {
+    /** Content to place in the slot */
+    children?: ReactNode;
+};
 /**
  * Props for items in a {@link ListView} or {@link GridView}.
  *
@@ -60,7 +75,7 @@ export type StringListItemProps = {
  *
  * @see {@link GridChild} for usage
  */
-export type GridChildProps = Omit<SlotProps, "id"> & {
+export type GridChildProps = VirtualSlotProps & {
     /** Column index (0-based) */
     column?: number;
     /** Row index (0-based) */
@@ -75,7 +90,7 @@ export type GridChildProps = Omit<SlotProps, "id"> & {
  *
  * @see {@link FixedChild} for usage
  */
-export type FixedChildProps = Omit<SlotProps, "id"> & {
+export type FixedChildProps = VirtualSlotProps & {
     /** X coordinate in pixels */
     x?: number;
     /** Y coordinate in pixels */
@@ -124,25 +139,25 @@ export type ColumnViewRootProps<C extends string = string> = {
     /** Sort direction (ascending or descending) */
     sortOrder?: Gtk.SortType;
     /** Callback when sort changes */
-    onSortChange?: (column: C | null, order: Gtk.SortType) => void;
+    onSortChanged?: (column: C | null, order: Gtk.SortType) => void;
     /** Estimated row height in pixels for proper virtualization before content loads */
     estimatedRowHeight?: number;
 };
 /**
  * Props for notebook (tabbed) pages.
  */
-export type NotebookPageProps = Omit<SlotProps, "id"> & {
+export type NotebookPageProps = VirtualSlotProps & {
     /** Tab label text (optional when using Notebook.PageTab) */
     label?: string;
 };
 /**
  * Props for custom notebook page tab widgets.
  */
-export type NotebookPageTabProps = SlotProps;
+export type NotebookPageTabProps = VirtualSlotProps;
 /**
  * Props for the root Stack component.
  */
-export type StackRootProps = Omit<SlotProps, "id"> & {
+export type StackRootProps = VirtualSlotProps & {
     /** ID of the currently visible page */
     page?: string;
 };
@@ -151,7 +166,7 @@ export type StackRootProps = Omit<SlotProps, "id"> & {
  *
  * @see {@link StackPage} for usage
  */
-export type StackPageProps = Omit<SlotProps, "id"> & {
+export type StackPageProps = VirtualSlotProps & {
     /** Unique identifier for this page (used with page prop) */
     id?: string;
     /** Display title shown in stack switchers */
@@ -205,7 +220,7 @@ export type MenuSubmenuProps = {
 /**
  * Props for children within an Overlay container.
  */
-export type OverlayChildProps = Omit<SlotProps, "id"> & {
+export type OverlayChildProps = VirtualSlotProps & {
     /** Whether to include this child in size measurement */
     measure?: boolean;
     /** Whether to clip this overlay child to the main child bounds */
@@ -307,33 +322,62 @@ export type ExpanderRowChildProps = {
     /** Children to add to this slot */
     children?: ReactNode;
 };
+type NavigationPageBaseProps = {
+    title?: string;
+    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;
+};
+/**
+ * Props for the Shortcut element in JSX.
+ *
+ * @see {@link x.Shortcut} for usage examples
+ */
+export type ShortcutProps = ShortcutNodeProps;
 /**
- * Props for the NavigationPage virtual element.
+ * Props for the NavigationPage virtual element with type-safe targeting.
  *
- * Used to declaratively define pages in an AdwNavigationView.
+ * The `for` prop is required and determines valid `id` values:
+ * - `AdwNavigationView`: `id` can be any string (page tags for navigation history)
+ * - `AdwNavigationSplitView`: `id` is narrowed to `"content" | "sidebar"` (slot positions)
  *
  * @example
  * ```tsx
+ * // In NavigationView - id can be any string
  * <AdwNavigationView history={["home", "details"]}>
- *   <x.NavigationPage id="home" title="Home">
+ *   <x.NavigationPage for={AdwNavigationView} id="home" title="Home">
  *     <HomeContent />
  *   </x.NavigationPage>
- *   <x.NavigationPage id="details" title="Details">
- *     <DetailsContent />
- *   </x.NavigationPage>
  * </AdwNavigationView>
+ *
+ * // In NavigationSplitView - id is narrowed to "content" | "sidebar"
+ * <AdwNavigationSplitView>
+ *   <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar">
+ *     <SidebarContent />
+ *   </x.NavigationPage>
+ *   <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content">
+ *     <MainContent />
+ *   </x.NavigationPage>
+ * </AdwNavigationSplitView>
  * ```
  */
-export type NavigationPageProps = {
-    /** Unique identifier for this page (used in history array) */
+export type NavigationPageProps = (NavigationPageBaseProps & {
+    for: "AdwNavigationView";
     id: string;
-    /** Title displayed in the header bar */
-    title?: string;
-    /** Whether the page can be popped via back button/gestures */
-    canPop?: boolean;
-    /** Page content */
-    children?: ReactNode;
-};
+}) | (NavigationPageBaseProps & {
+    for: "AdwNavigationSplitView";
+    id: import("./generated/jsx.js").WidgetSlotNames["AdwNavigationSplitView"];
+});
 /**
  * Type mapping widget names to their available slot IDs.
  */
@@ -693,6 +737,24 @@ export declare const x: {
      * ```
      */
     MenuSubmenu: "MenuSubmenu";
+    /**
+     * Declarative adjustment configuration for adjustable widgets.
+     *
+     * Works with Scale, Scrollbar, ScaleButton, SpinButton, and ListBox.
+     *
+     * @example
+     * ```tsx
+     * <GtkScale>
+     *   <x.Adjustment
+     *     value={50}
+     *     lower={0}
+     *     upper={100}
+     *     onValueChanged={(v) => console.log(v)}
+     *   />
+     * </GtkScale>
+     * ```
+     */
+    Adjustment: "Adjustment";
     /**
      * A mark to display on a GtkScale slider.
      *
@@ -706,6 +768,38 @@ export declare const x: {
      * ```
      */
     ScaleMark: "ScaleMark";
+    /**
+     * Declarative text buffer for a GtkTextView.
+     *
+     * @example
+     * ```tsx
+     * <GtkTextView>
+     *   <x.TextBuffer
+     *     text="Hello!"
+     *     enableUndo
+     *     onTextChanged={(text) => console.log(text)}
+     *   />
+     * </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";
     /**
      * A day mark on a GtkCalendar.
      *
@@ -772,28 +866,69 @@ export declare const x: {
      */
     ExpanderRowAction: "ExpanderRowAction";
     /**
-     * A page within an AdwNavigationView.
+     * Type-safe page component for AdwNavigationView or AdwNavigationSplitView.
+     *
+     * The `for` prop is required and determines valid `id` values:
+     * - `AdwNavigationView`: any string (page tags for navigation history)
+     * - `AdwNavigationSplitView`: `"content"` or `"sidebar"` (slot positions)
      *
      * @example
      * ```tsx
+     * // In NavigationView - id can be any string
      * <AdwNavigationView history={["home"]}>
-     *   <x.NavigationPage id="home" title="Home">
+     *   <x.NavigationPage for={AdwNavigationView} id="home" title="Home">
      *     <GtkLabel label="Welcome!" />
      *   </x.NavigationPage>
-     *   <x.NavigationPage id="settings" title="Settings">
-     *     <GtkLabel label="Settings page" />
-     *   </x.NavigationPage>
      * </AdwNavigationView>
+     *
+     * // In NavigationSplitView - id is narrowed to "content" | "sidebar"
+     * <AdwNavigationSplitView>
+     *   <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar">
+     *     <GtkLabel label="Sidebar" />
+     *   </x.NavigationPage>
+     *   <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content">
+     *     <GtkLabel label="Content" />
+     *   </x.NavigationPage>
+     * </AdwNavigationSplitView>
      * ```
      */
     NavigationPage: "NavigationPage";
+    /**
+     * Declarative keyboard shortcut controller.
+     *
+     * Attach keyboard shortcuts to a widget. Must contain `x.Shortcut` children.
+     *
+     * @example
+     * ```tsx
+     * <GtkBox>
+     *   <x.ShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
+     *     <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} />
+     *     <x.Shortcut trigger="<Control>q" onActivate={quit} />
+     *   </x.ShortcutController>
+     * </GtkBox>
+     * ```
+     */
+    ShortcutController: "ShortcutController";
+    /**
+     * A keyboard shortcut definition.
+     *
+     * Must be a child of `x.ShortcutController`.
+     *
+     * @example
+     * ```tsx
+     * <x.Shortcut trigger="<Control>s" onActivate={save} />
+     * <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} />
+     * <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} />
+     * ```
+     */
+    Shortcut: "Shortcut";
 };
 declare global {
     namespace React {
         namespace JSX {
             interface IntrinsicElements {
-                ActionRowPrefix: SlotProps;
-                ActionRowSuffix: SlotProps;
+                ActionRowPrefix: VirtualSlotProps;
+                ActionRowSuffix: VirtualSlotProps;
                 CalendarMark: CalendarMarkProps;
                 ColumnViewColumn: ColumnViewColumnProps<any>;
                 ExpanderRowAction: ExpanderRowChildProps;
@@ -806,18 +941,23 @@ declare global {
                 MenuSection: MenuSectionProps;
                 MenuSubmenu: MenuSubmenuProps;
                 NotebookPage: NotebookPageProps;
-                NotebookPageTab: NotebookPageTabProps;
+                NotebookPageTab: VirtualSlotProps;
                 OverlayChild: OverlayChildProps;
-                PackEnd: SlotProps;
-                PackStart: SlotProps;
+                PackEnd: VirtualSlotProps;
+                PackStart: VirtualSlotProps;
+                Adjustment: AdjustmentProps;
                 ScaleMark: ScaleMarkProps;
+                SourceBuffer: SourceBufferProps;
+                TextBuffer: TextBufferProps;
                 SimpleListItem: StringListItemProps;
                 StackPage: StackPageProps;
                 Toggle: ToggleProps;
-                ToolbarBottom: SlotProps;
-                ToolbarTop: SlotProps;
+                ToolbarBottom: VirtualSlotProps;
+                ToolbarTop: VirtualSlotProps;
                 TreeListItem: TreeListItemProps<any>;
                 NavigationPage: NavigationPageProps;
+                ShortcutController: ShortcutControllerProps;
+                Shortcut: ShortcutProps;
             }
         }
     }

package/dist/jsx.js

@@ -319,6 +319,24 @@ export const x = {
      * ```
      */
     MenuSubmenu: "MenuSubmenu",
+    /**
+     * Declarative adjustment configuration for adjustable widgets.
+     *
+     * Works with Scale, Scrollbar, ScaleButton, SpinButton, and ListBox.
+     *
+     * @example
+     * ```tsx
+     * <GtkScale>
+     *   <x.Adjustment
+     *     value={50}
+     *     lower={0}
+     *     upper={100}
+     *     onValueChanged={(v) => console.log(v)}
+     *   />
+     * </GtkScale>
+     * ```
+     */
+    Adjustment: "Adjustment",
     /**
      * A mark to display on a GtkScale slider.
      *
@@ -332,6 +350,38 @@ export const x = {
      * ```
      */
     ScaleMark: "ScaleMark",
+    /**
+     * Declarative text buffer for a GtkTextView.
+     *
+     * @example
+     * ```tsx
+     * <GtkTextView>
+     *   <x.TextBuffer
+     *     text="Hello!"
+     *     enableUndo
+     *     onTextChanged={(text) => console.log(text)}
+     *   />
+     * </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",
     /**
      * A day mark on a GtkCalendar.
      *
@@ -398,20 +448,61 @@ export const x = {
      */
     ExpanderRowAction: "ExpanderRowAction",
     /**
-     * A page within an AdwNavigationView.
+     * Type-safe page component for AdwNavigationView or AdwNavigationSplitView.
+     *
+     * The `for` prop is required and determines valid `id` values:
+     * - `AdwNavigationView`: any string (page tags for navigation history)
+     * - `AdwNavigationSplitView`: `"content"` or `"sidebar"` (slot positions)
      *
      * @example
      * ```tsx
+     * // In NavigationView - id can be any string
      * <AdwNavigationView history={["home"]}>
-     *   <x.NavigationPage id="home" title="Home">
+     *   <x.NavigationPage for={AdwNavigationView} id="home" title="Home">
      *     <GtkLabel label="Welcome!" />
      *   </x.NavigationPage>
-     *   <x.NavigationPage id="settings" title="Settings">
-     *     <GtkLabel label="Settings page" />
-     *   </x.NavigationPage>
      * </AdwNavigationView>
+     *
+     * // In NavigationSplitView - id is narrowed to "content" | "sidebar"
+     * <AdwNavigationSplitView>
+     *   <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar">
+     *     <GtkLabel label="Sidebar" />
+     *   </x.NavigationPage>
+     *   <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content">
+     *     <GtkLabel label="Content" />
+     *   </x.NavigationPage>
+     * </AdwNavigationSplitView>
      * ```
      */
     NavigationPage: "NavigationPage",
+    /**
+     * Declarative keyboard shortcut controller.
+     *
+     * Attach keyboard shortcuts to a widget. Must contain `x.Shortcut` children.
+     *
+     * @example
+     * ```tsx
+     * <GtkBox>
+     *   <x.ShortcutController scope={Gtk.ShortcutScope.GLOBAL}>
+     *     <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} />
+     *     <x.Shortcut trigger="<Control>q" onActivate={quit} />
+     *   </x.ShortcutController>
+     * </GtkBox>
+     * ```
+     */
+    ShortcutController: "ShortcutController",
+    /**
+     * A keyboard shortcut definition.
+     *
+     * Must be a child of `x.ShortcutController`.
+     *
+     * @example
+     * ```tsx
+     * <x.Shortcut trigger="<Control>s" onActivate={save} />
+     * <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} />
+     * <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} />
+     * ```
+     */
+    Shortcut: "Shortcut",
 };
 export * from "./generated/jsx.js";

package/dist/nodes/adjustment.d.ts

@@ -0,0 +1,48 @@
+import type { AdjustableWidget } from "./internal/predicates.js";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the Adjustment virtual element.
+ *
+ * Used to declaratively configure the adjustment for adjustable widgets
+ * such as Scale, Scrollbar, ScaleButton, SpinButton, and ListBox.
+ *
+ * @example
+ * ```tsx
+ * <GtkScale>
+ *     <x.Adjustment
+ *         value={50}
+ *         lower={0}
+ *         upper={100}
+ *         stepIncrement={1}
+ *         onValueChanged={(v) => console.log("Value:", v)}
+ *     />
+ * </GtkScale>
+ * ```
+ */
+export type AdjustmentProps = {
+    /** The current value */
+    value?: number;
+    /** The minimum value */
+    lower?: number;
+    /** The maximum value */
+    upper?: number;
+    /** The increment for arrow keys */
+    stepIncrement?: number;
+    /** The increment for page up/down */
+    pageIncrement?: number;
+    /** The page size (usually 0 for scales) */
+    pageSize?: number;
+    /** Callback when the value changes */
+    onValueChanged?: (value: number) => void;
+};
+export declare class AdjustmentNode extends VirtualNode<AdjustmentProps> {
+    static priority: number;
+    private widget?;
+    private adjustment?;
+    static matches(type: string): boolean;
+    setWidget(widget: AdjustableWidget): void;
+    private setupAdjustment;
+    private updateSignalHandler;
+    updateProps(oldProps: AdjustmentProps | null, newProps: AdjustmentProps): void;
+    unmount(): void;
+}

package/dist/nodes/adjustment.js

@@ -0,0 +1,70 @@
+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 AdjustmentNode extends VirtualNode {
+    static priority = 1;
+    widget;
+    adjustment;
+    static matches(type) {
+        return type === "Adjustment";
+    }
+    setWidget(widget) {
+        this.widget = widget;
+        this.setupAdjustment();
+    }
+    setupAdjustment() {
+        if (!this.widget)
+            return;
+        const { value = 0, lower = 0, upper = 100, stepIncrement = 1, pageIncrement = 10, pageSize = 0 } = this.props;
+        this.adjustment = new Gtk.Adjustment(value, lower, upper, stepIncrement, pageIncrement, pageSize);
+        this.widget.setAdjustment(this.adjustment);
+        this.updateSignalHandler();
+    }
+    updateSignalHandler() {
+        if (!this.adjustment)
+            return;
+        const { onValueChanged } = this.props;
+        if (onValueChanged) {
+            const adjustment = this.adjustment;
+            signalStore.set(this, adjustment, "value-changed", () => onValueChanged(adjustment.getValue()));
+        }
+        else {
+            signalStore.set(this, this.adjustment, "value-changed", null);
+        }
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.adjustment)
+            return;
+        if (!oldProps || oldProps.lower !== newProps.lower) {
+            this.adjustment.setLower(newProps.lower ?? 0);
+        }
+        if (!oldProps || oldProps.upper !== newProps.upper) {
+            this.adjustment.setUpper(newProps.upper ?? 100);
+        }
+        if (!oldProps || oldProps.stepIncrement !== newProps.stepIncrement) {
+            this.adjustment.setStepIncrement(newProps.stepIncrement ?? 1);
+        }
+        if (!oldProps || oldProps.pageIncrement !== newProps.pageIncrement) {
+            this.adjustment.setPageIncrement(newProps.pageIncrement ?? 10);
+        }
+        if (!oldProps || oldProps.pageSize !== newProps.pageSize) {
+            this.adjustment.setPageSize(newProps.pageSize ?? 0);
+        }
+        if (!oldProps || oldProps.value !== newProps.value) {
+            if (newProps.value !== undefined) {
+                this.adjustment.setValue(newProps.value);
+            }
+        }
+        if (!oldProps || oldProps.onValueChanged !== newProps.onValueChanged) {
+            this.updateSignalHandler();
+        }
+    }
+    unmount() {
+        this.adjustment = undefined;
+        this.widget = undefined;
+        super.unmount();
+    }
+}
+registerNodeClass(AdjustmentNode);

package/dist/nodes/application.js

@@ -23,20 +23,20 @@ class ApplicationNode extends Node {
             this.container.setMenubar(this.menu.getMenu());
             return;
         }
-        if (child instanceof WindowNode) {
+        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot append '${child.typeName}' to 'Application': expected Window or MenuItem`);
+        throw new Error(`Cannot append '${child.typeName}' to 'Application': expected ApplicationWindow or MenuItem`);
     }
     insertBefore(child, before) {
         if (child instanceof MenuNode) {
             this.menu.insertBefore(child, before);
             return;
         }
-        if (child instanceof WindowNode) {
+        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot insert '${child.typeName}' into 'Application': expected Window or MenuItem`);
+        throw new Error(`Cannot insert '${child.typeName}' into 'Application': expected ApplicationWindow or MenuItem`);
     }
     removeChild(child) {
         if (child instanceof MenuNode) {
@@ -48,10 +48,10 @@ class ApplicationNode extends Node {
             }, CommitPriority.LOW);
             return;
         }
-        if (child instanceof WindowNode) {
+        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot remove '${child.typeName}' from 'Application': expected Window or MenuItem`);
+        throw new Error(`Cannot remove '${child.typeName}' from 'Application': expected ApplicationWindow or MenuItem`);
     }
 }
 registerNodeClass(ApplicationNode);