@gtkx/react 1.3.0 → 1.5.0

package/src/adw/element-behaviors.ts

@@ -2,8 +2,6 @@ import type * as Gtk from "@gtkx/gi/gtk";
 import * as Adw from "@gtkx/gi/adw";
 import type { AlertDialogResponse } from "./prop-types.js";
 import {
-    addRemoveSlot,
-    adoptedChildrenSlot,
     applicationCreator,
     boxSlot,
     childMatcher,
@@ -12,6 +10,8 @@ import {
     deferred,
     indexedSlot,
     list,
+    methodSlot,
+    setterSlot,
     slot,
 } from "../reconciler/behaviors.js";
 import { type ElementBehavior, type ElementConfig, forTypes, registerElements } from "../reconciler/registry.js";
@@ -36,56 +36,18 @@ type PrefixSuffixRow = Adw.ActionRow | Adw.EntryRow | Adw.ExpanderRow;
 const SLOT_SUFFIX = "Slot";
 const childSetter = childSetterSlot<AdwChildSetter>();
 const contentSetter = contentSetterSlot<AdwContentSetter>();
-
-const breakpoints = slot<BreakpointHost, Adw.Breakpoint>("breakpoints", "AdwBreakpoint", {
-    attach: (host, breakpoint) => {
-        host.addBreakpoint(breakpoint);
-    },
-});
+const breakpoints = methodSlot<BreakpointHost, Adw.Breakpoint>("breakpoints", "AdwBreakpoint", "addBreakpoint");
 
 const prefixSuffix = [
-    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
-        "prefix",
-        "GtkWidget",
-        (row, child) => {
-            row.addPrefix(child);
-        },
-        (row, child) => {
-            row.remove(child);
-        },
-    ),
-    addRemoveSlot<Gtk.Widget, PrefixSuffixRow>(
-        "suffix",
-        "GtkWidget",
-        (row, child) => {
-            row.addSuffix(child);
-        },
-        (row, child) => {
-            row.remove(child);
-        },
-    ),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("prefix", "GtkWidget", "addPrefix", "remove"),
+    methodSlot<PrefixSuffixRow, Gtk.Widget>("suffix", "GtkWidget", "addSuffix", "remove"),
 ];
 
-const preferencesDialogChildren = addRemoveSlot<Adw.PreferencesPage, Adw.PreferencesDialog>(
-    "children",
-    "AdwPreferencesPage",
-    (dialog, page) => {
-        dialog.add(page);
-    },
-    (dialog, page) => {
-        dialog.remove(page);
-    },
+const preferencesDialogChildren = methodSlot<Adw.PreferencesDialog, Adw.PreferencesPage>(
+    "children", "AdwPreferencesPage", "add", "remove",
 );
 
-const alertDialogExtraChild = slot<Adw.AlertDialog, Gtk.Widget>("children", "GtkWidget", {
-    attach: (dialog, child) => {
-        dialog.setExtraChild(child);
-    },
-    detach: (dialog) => {
-        dialog.setExtraChild(null);
-    },
-});
-
+const alertDialogExtraChild = setterSlot<Adw.AlertDialog, Gtk.Widget>("children", "GtkWidget", "setExtraChild");
 const sidebarSections = indexedSlot<Adw.Sidebar, Adw.SidebarSection>("children", "AdwSidebarSection");
 const sidebarItems = indexedSlot<Adw.SidebarSection, Adw.SidebarItem>("children", "AdwSidebarItem");
 const isWidget = childMatcher("GtkWidget");
@@ -151,14 +113,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwClampScrollable: {
         behaviors: [
-            slot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", "GtkScrollable", {
-                attach: (clamp, child) => {
-                    clamp.setChild(child);
-                },
-                detach: (clamp) => {
-                    clamp.setChild(null);
-                },
-            }),
+            setterSlot<Adw.ClampScrollable, Gtk.Scrollable & Gtk.Widget>("children", "GtkScrollable", "setChild"),
         ],
     },
     ...forTypes(CHILD_SETTER_TYPES, {
@@ -179,15 +134,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwBreakpointBin: {
         behaviors: [
             childSetter,
-            addRemoveSlot<Adw.Breakpoint, Adw.BreakpointBin>(
-                "breakpoints",
-                "AdwBreakpoint",
-                (bin, breakpoint) => {
-                    bin.addBreakpoint(breakpoint);
-                },
-                (bin, breakpoint) => {
-                    bin.removeBreakpoint(breakpoint);
-                },
+            methodSlot<Adw.BreakpointBin, Adw.Breakpoint>(
+                "breakpoints", "AdwBreakpoint", "addBreakpoint", "removeBreakpoint",
             ),
         ],
     },
@@ -200,16 +148,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     AdwExpanderRow: {
         behaviors: [
             ...prefixSuffix,
-            addRemoveSlot<Gtk.Widget, Adw.ExpanderRow>(
-                "rows",
-                "GtkWidget",
-                (row, child) => {
-                    row.addRow(child);
-                },
-                (row, child) => {
-                    row.remove(child);
-                },
-            ),
+            methodSlot<Adw.ExpanderRow, Gtk.Widget>("rows", "GtkWidget", "addRow", "remove"),
         ],
     },
     AdwNavigationSplitView: {
@@ -249,18 +188,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [preferencesDialogChildren],
     },
     AdwPreferencesGroup: {
-        behaviors: [
-            addRemoveSlot<Gtk.Widget, Adw.PreferencesGroup>(
-                "children",
-                "GtkWidget",
-                (group, child) => {
-                    group.add(child);
-                },
-                (group, child) => {
-                    group.remove(child);
-                },
-            ),
-        ],
+        behaviors: [methodSlot<Adw.PreferencesGroup, Gtk.Widget>("children", "GtkWidget", "add", "remove")],
     },
     AdwTabView: {
         behaviors: [
@@ -282,105 +210,37 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     AdwNavigationView: {
         behaviors: [
-            addRemoveSlot<Adw.NavigationPage, Adw.NavigationView>(
-                "children",
-                "AdwNavigationPage",
-                (view, page) => {
-                    view.add(page);
-                },
-                (view, page) => {
-                    view.remove(page);
-                },
-            ),
+            methodSlot<Adw.NavigationView, Adw.NavigationPage>("children", "AdwNavigationPage", "add", "remove"),
         ],
     },
     AdwViewStack: {
         behaviors: [
-            adoptedChildrenSlot<Adw.ViewStack, Gtk.Widget>(
-                "GtkWidget",
-                (stack, child) => stack.add(child),
-                (stack, child) => {
-                    stack.remove(child);
-                },
-            ),
+            methodSlot<Adw.ViewStack, Gtk.Widget>("children", "GtkWidget", "add", "remove"),
             deferred<Adw.ViewStack, string>("visibleChildName", (stack, name) => stack.getChildByName(name) !== null),
         ],
     },
     AdwToolbarView: {
         behaviors: [
             contentSetterSlot<Adw.ToolbarView>(),
-            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
-                "topBar",
-                "GtkWidget",
-                (view, child) => {
-                    view.addTopBar(child);
-                },
-                (view, child) => {
-                    view.remove(child);
-                },
-            ),
-            addRemoveSlot<Gtk.Widget, Adw.ToolbarView>(
-                "bottomBar",
-                "GtkWidget",
-                (view, child) => {
-                    view.addBottomBar(child);
-                },
-                (view, child) => {
-                    view.remove(child);
-                },
-            ),
+            methodSlot<Adw.ToolbarView, Gtk.Widget>("topBar", "GtkWidget", "addTopBar", "remove"),
+            methodSlot<Adw.ToolbarView, Gtk.Widget>("bottomBar", "GtkWidget", "addBottomBar", "remove"),
         ],
     },
     AdwHeaderBar: {
         behaviors: [
-            slot<Adw.HeaderBar, Gtk.Widget>("start", "GtkWidget", {
-                attach: (bar, child) => {
-                    bar.packStart(child);
-                },
-                detach: (bar, child) => {
-                    bar.remove(child);
-                },
-            }),
-            slot<Adw.HeaderBar, Gtk.Widget>("end", "GtkWidget", {
-                attach: (bar, child) => {
-                    bar.packEnd(child);
-                },
-                detach: (bar, child) => {
-                    bar.remove(child);
-                },
-            }),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("start", "GtkWidget", "packStart", "remove"),
+            methodSlot<Adw.HeaderBar, Gtk.Widget>("end", "GtkWidget", "packEnd", "remove"),
         ],
     },
     AdwShortcutsDialog: {
-        behaviors: [
-            slot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", "AdwShortcutsSection", {
-                attach: (dialog, section) => {
-                    dialog.add(section);
-                },
-            }),
-        ],
+        behaviors: [methodSlot<Adw.ShortcutsDialog, Adw.ShortcutsSection>("children", "AdwShortcutsSection", "add")],
     },
     AdwShortcutsSection: {
-        behaviors: [
-            slot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", "AdwShortcutsItem", {
-                attach: (section, item) => {
-                    section.add(item);
-                },
-            }),
-        ],
+        behaviors: [methodSlot<Adw.ShortcutsSection, Adw.ShortcutsItem>("children", "AdwShortcutsItem", "add")],
     },
     AdwToggleGroup: {
         behaviors: [
-            addRemoveSlot<Adw.Toggle, Adw.ToggleGroup>(
-                "children",
-                "AdwToggle",
-                (group, toggle) => {
-                    group.add(toggle);
-                },
-                (group, toggle) => {
-                    group.remove(toggle);
-                },
-            ),
+            methodSlot<Adw.ToggleGroup, Adw.Toggle>("children", "AdwToggle", "add", "remove"),
             deferred<Adw.ToggleGroup, string>("activeName", (group, name) => group.getToggleByName(name) !== null),
             deferred("active"),
         ],

package/src/components/application.tsx

@@ -3,7 +3,10 @@ import { quitApplication, runApplication } from "@gtkx/runtime";
 import { pickBy, warn } from "@gtkx/utils";
 import process from "node:process";
 import { type ElementType, type ReactNode, type Ref, useLayoutEffect, useState } from "react";
-import { applicationId as defaultApplicationId } from "virtual:gtkx-config";
+import {
+    applicationId as defaultApplicationId,
+    resourceBasePath as defaultResourceBasePath,
+} from "virtual:gtkx-config";
 import { ApplicationContext } from "../hooks/use-application.js";
 import { useMergedRef } from "../hooks/use-merged-refs.js";
 import { createPortaledComponent } from "./portaled.js";
@@ -12,6 +15,7 @@ type ApplicationComponentProps = {
     applicationId?: string | null | undefined;
     children?: ReactNode | undefined;
     ref?: Ref<Gtk.Application | null> | undefined;
+    resourceBasePath?: string | null | undefined;
 };
 
 const POST_ACTIVATE_PROPS = new Set(["menubar"]);
@@ -80,7 +84,13 @@ const applicationChildren = (application: Gtk.Application | null, children: Reac
 const createApplicationElement = (
     Component: ElementType,
 ): ((props: ApplicationComponentProps) => ReactNode) => {
-    return ({ applicationId = defaultApplicationId, children, ref, ...rest }: ApplicationComponentProps): ReactNode => {
+    return ({
+        applicationId = defaultApplicationId,
+        children,
+        ref,
+        resourceBasePath = defaultResourceBasePath,
+        ...rest
+    }: ApplicationComponentProps): ReactNode => {
         const [application, setApplication] = useState<Gtk.Application | null>(null);
         const [activated, setActivated] = useState(false);
         useApplicationLifecycle(application, setActivated, applicationId);
@@ -88,7 +98,12 @@ const createApplicationElement = (
         const appliedProps = activated ? rest : pickBy(rest, (_value, key) => !POST_ACTIVATE_PROPS.has(key));
 
         return (
-            <Component ref={mergedRef} applicationId={applicationId} {...appliedProps}>
+            <Component
+                ref={mergedRef}
+                applicationId={applicationId}
+                {...appliedProps}
+                resourceBasePath={resourceBasePath}
+            >
                 {activated ? applicationChildren(application, children) : null}
             </Component>
         );

package/src/components/window.tsx

@@ -2,7 +2,7 @@ import type * as Gtk from "@gtkx/gi/gtk";
 import { type ElementType, type ReactElement, type ReactNode, use } from "react";
 import { ParentWindowContext } from "../hooks/use-parent-window.js";
 import { createPresentedComponent, type PresentedProps } from "../hooks/use-presented-instance.js";
-import { applyWrite } from "../reconciler/signals.js";
+import { applyMutation } from "../reconciler/signals.js";
 import { createPortaledComponent } from "./portaled.js";
 
 type WindowComponentProps = PresentedProps<Gtk.Window> & {
@@ -11,13 +11,13 @@ type WindowComponentProps = PresentedProps<Gtk.Window> & {
 };
 
 const presentWindow = (window: Gtk.Window): void => {
-    applyWrite(() => {
+    applyMutation(() => {
         window.present();
     });
 };
 
 const destroyWindow = (window: Gtk.Window): void => {
-    applyWrite(() => {
+    applyMutation(() => {
         window.destroy();
     });
 };

package/src/element-behaviors.ts

@@ -14,14 +14,15 @@ import type {
 } from "./prop-types.js";
 import { BUILTIN_ELEMENTS, SINGLE_CHILD_TYPES } from "./element-config.js";
 import {
-    addRemoveSlot,
-    adoptedChildrenSlot,
     applicationCreator,
     boxSlot,
     childSetterSlot,
     controlledText,
     deferred,
+    deferredWith,
     list,
+    methodSlot,
+    setterSlot,
     slot,
     value,
     wrappingIndexedSlot,
@@ -34,7 +35,11 @@ import {
     registerElements,
 } from "./reconciler/registry.js";
 import { applyWrite } from "./reconciler/signals.js";
-import { applyStyle, styleClass } from "./reconciler/style.js";
+import { applyStyle, CSS_CLASSES_PROP, styleClass } from "./reconciler/style.js";
+
+const SELECTED_INDEX_PROP = "selectedIndex";
+const SELECTION_SIGNAL = "selected-rows-changed";
+const NO_SELECTION = -1;
 
 const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     ...forTypes(SINGLE_CHILD_TYPES, {
@@ -42,26 +47,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     }),
     ...forTypes(["GtkHeaderBar", "GtkActionBar"], {
         behaviors: [
-            addRemoveSlot<Gtk.Widget, Gtk.HeaderBar | Gtk.ActionBar>(
-                "start",
-                "GtkWidget",
-                (bar, child) => {
-                    bar.packStart(child);
-                },
-                (bar, child) => {
-                    bar.remove(child);
-                },
-            ),
-            addRemoveSlot<Gtk.Widget, Gtk.HeaderBar | Gtk.ActionBar>(
-                "end",
-                "GtkWidget",
-                (bar, child) => {
-                    bar.packEnd(child);
-                },
-                (bar, child) => {
-                    bar.remove(child);
-                },
-            ),
+            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("start", "GtkWidget", "packStart", "remove"),
+            methodSlot<Gtk.HeaderBar | Gtk.ActionBar, Gtk.Widget>("end", "GtkWidget", "packEnd", "remove"),
         ],
     }),
     GtkWindow: {
@@ -77,24 +64,10 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
                     popover.unparent();
                 },
             }),
-            addRemoveSlot<Gtk.EventController, Gtk.Widget>(
-                "controllers",
-                "GtkEventController",
-                (widget, controller) => {
-                    widget.addController(controller);
-                },
-                (widget, controller) => {
-                    widget.removeController(controller);
-                },
+            methodSlot<Gtk.Widget, Gtk.EventController>(
+                "controllers", "GtkEventController", "addController", "removeController",
             ),
-            slot<Gtk.Widget, Gtk.LayoutManager>("layoutManager", "GtkLayoutManager", {
-                attach: (widget, manager) => {
-                    widget.setLayoutManager(manager);
-                },
-                detach: (widget) => {
-                    widget.setLayoutManager(null);
-                },
-            }),
+            setterSlot<Gtk.Widget, Gtk.LayoutManager>("layoutManager", "GtkLayoutManager", "setLayoutManager"),
             slot<Gtk.Widget, Gio.ActionGroup>("actionGroups", "GActionGroup", {
                 attach: (widget, group, info) => {
                     widget.insertActionGroup((info.props.prefix as string | null) ?? "", group);
@@ -114,6 +87,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
             wrappingIndexedSlot(Gtk.ListBoxRow, (row, inner) => {
                 row.setChild(inner);
             }),
+            selectedIndexBehavior(),
         ],
     },
     GtkFlowBox: {
@@ -139,15 +113,8 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkShortcutController: {
         behaviors: [
-            addRemoveSlot<Gtk.Shortcut, Gtk.ShortcutController>(
-                "shortcuts",
-                "GtkShortcut",
-                (controller, shortcut) => {
-                    controller.addShortcut(shortcut);
-                },
-                (controller, shortcut) => {
-                    controller.removeShortcut(shortcut);
-                },
+            methodSlot<Gtk.ShortcutController, Gtk.Shortcut>(
+                "shortcuts", "GtkShortcut", "addShortcut", "removeShortcut",
             ),
         ],
     },
@@ -155,16 +122,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
         behaviors: [{ create: () => Gtk.TextChildAnchor.new() }],
     },
     GtkTextView: {
-        behaviors: [
-            slot<Gtk.TextView, Gtk.TextBuffer>("children", "GtkTextBuffer", {
-                attach: (view, buffer) => {
-                    view.setBuffer(buffer);
-                },
-                detach: (view) => {
-                    view.setBuffer(null);
-                },
-            }),
-        ],
+        behaviors: [setterSlot<Gtk.TextView, Gtk.TextBuffer>("children", "GtkTextBuffer", "setBuffer")],
     },
     GActionMap: {
         behaviors: [
@@ -242,25 +200,11 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkConstraintLayout: {
         behaviors: [
-            addRemoveSlot<Gtk.Constraint, Gtk.ConstraintLayout>(
-                "constraints",
-                "GtkConstraint",
-                (layout, constraint) => {
-                    layout.addConstraint(constraint);
-                },
-                (layout, constraint) => {
-                    layout.removeConstraint(constraint);
-                },
+            methodSlot<Gtk.ConstraintLayout, Gtk.Constraint>(
+                "constraints", "GtkConstraint", "addConstraint", "removeConstraint",
             ),
-            addRemoveSlot<Gtk.ConstraintGuide, Gtk.ConstraintLayout>(
-                "guides",
-                "GtkConstraintGuide",
-                (layout, guide) => {
-                    layout.addGuide(guide);
-                },
-                (layout, guide) => {
-                    layout.removeGuide(guide);
-                },
+            methodSlot<Gtk.ConstraintLayout, Gtk.ConstraintGuide>(
+                "guides", "GtkConstraintGuide", "addGuide", "removeGuide",
             ),
             list<Gtk.ConstraintLayout, VflConstraints, Gtk.Constraint[]>("vfl", {
                 add: (layout, item) => [
@@ -281,13 +225,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     },
     GtkStack: {
         behaviors: [
-            adoptedChildrenSlot<Gtk.Stack, Gtk.Widget>(
-                "GtkWidget",
-                (stack, child) => stack.addChild(child),
-                (stack, child) => {
-                    stack.remove(child);
-                },
-            ),
+            methodSlot<Gtk.Stack, Gtk.Widget>("children", "GtkWidget", "addChild", "remove"),
             deferred<Gtk.Stack, string>("visibleChildName", (stack, name) => stack.getChildByName(name) !== null),
         ],
     },
@@ -308,16 +246,7 @@ const BUILTIN_BEHAVIORS: Record<string, ElementConfig<never>> = {
     GtkApplication: {
         behaviors: [
             applicationCreator(Gtk.Application),
-            addRemoveSlot<Gtk.Window, Gtk.Application>(
-                "children",
-                "GtkWindow",
-                (application, window) => {
-                    application.addWindow(window);
-                },
-                (application, window) => {
-                    application.removeWindow(window);
-                },
-            ),
+            methodSlot<Gtk.Application, Gtk.Window>("children", "GtkWindow", "addWindow", "removeWindow"),
             list<Gtk.Application, ActionAccel>("actionAccels", {
                 add: (application, item) => {
                     application.setAccelsForAction(item.detailedActionName, item.accels);
@@ -430,8 +359,8 @@ const didWriteCssClasses = (widget: Gtk.Widget, prev: Props, next: Props, classN
         return false;
     }
 
-    applyWrite(() => {
-        Reflect.set(widget, "cssClasses", withStyleClass(next.cssClasses, className));
+    applyWrite(CSS_CLASSES_PROP, () => {
+        Reflect.set(widget, CSS_CLASSES_PROP, withStyleClass(next.cssClasses, className));
     });
 
     return true;
@@ -460,6 +389,56 @@ function styleBehavior(): ElementBehavior<Gtk.Widget> {
     return { update: updateStyle };
 }
 
+function selectedRowIndex(box: Gtk.ListBox): number {
+    return box.getSelectedRow()?.getIndex() ?? NO_SELECTION;
+}
+
+function selectedIndexError(value: number): Error {
+    return new Error(
+        "The 'selectedIndex' of a <GtkListBox> must be a whole number, or -1 to select no row; " +
+        `received ${String(value)}.`,
+    );
+}
+
+function desiredIndex(value: unknown): number | undefined {
+    if (value === null) {
+        return NO_SELECTION;
+    }
+
+    if (typeof value !== "number") {
+        return undefined;
+    }
+
+    if (!Number.isSafeInteger(value)) {
+        throw selectedIndexError(value);
+    }
+
+    return value;
+}
+
+function applySelectedIndex(box: Gtk.ListBox, index: number): void {
+    if (index < 0) {
+        box.unselectAll();
+
+        return;
+    }
+
+    const row = box.getRowAtIndex(index);
+
+    if (row !== null) {
+        box.selectRow(row);
+    }
+}
+
+function selectedIndexBehavior(): ElementBehavior<Gtk.ListBox> {
+    return deferredWith<Gtk.ListBox, number>(SELECTED_INDEX_PROP, {
+        parse: desiredIndex,
+        read: selectedRowIndex,
+        write: applySelectedIndex,
+        signal: SELECTION_SIGNAL,
+    });
+}
+
 const addMainOption = (application: Gtk.Application, option: MainOption): void => {
     application.addMainOption(
         option.longName,

package/src/element-config.ts

@@ -82,7 +82,7 @@ const BUILTIN_ELEMENTS: Record<string, ElementConfig> = {
         props: internal("ChildrenProps"),
     },
     GtkListBox: {
-        props: internal("ChildrenProps"),
+        props: internal("GtkListBoxProps"),
     },
     GtkFlowBox: {
         props: internal("ChildrenProps"),

package/src/hooks/use-bind-setting.ts

@@ -3,6 +3,7 @@ import * as Gio from "@gtkx/gi/gio";
 import { kebabCase } from "@gtkx/utils";
 import { useLayoutEffect } from "react";
 import type { SettingsSchema, SettingsSchemaKeys } from "../utils/settings.js";
+import { getPropertyName } from "../reconciler/metadata.js";
 import { type RefProp, resolveRefProp } from "../utils/ref-prop.js";
 import { useSettings } from "./use-setting.js";
 
@@ -32,7 +33,6 @@ function useBindSetting<K extends SettingsSchemaKeys>({
     flags = Gio.SettingsBindFlags.DEFAULT,
 }: UseBindSettingOptions<K>): void {
     const settings = useSettings(schema);
-    const propertyName = kebabCase(property);
 
     useLayoutEffect(() => {
         const resolved = resolveRefProp(object);
@@ -41,12 +41,13 @@ function useBindSetting<K extends SettingsSchemaKeys>({
             return;
         }
 
+        const propertyName = getPropertyName(resolved, property) ?? kebabCase(property);
         settings.bind(key, resolved, propertyName, flags);
 
         return () => {
             Gio.Settings.unbind(resolved, propertyName);
         };
-    }, [settings, key, object, propertyName, flags]);
+    }, [settings, key, object, property, flags]);
 }
 
 export { useBindSetting };

package/src/hooks/use-property.ts

@@ -1,6 +1,7 @@
 import type * as GObject from "@gtkx/gi/gobject";
 import { kebabCase } from "@gtkx/utils";
-import type { RefProp } from "../utils/ref-prop.js";
+import { getPropertyName } from "../reconciler/metadata.js";
+import { type RefProp, resolveRefProp } from "../utils/ref-prop.js";
 import { useObjectValue } from "./use-object-value.js";
 
 /** The property map `T` declares, from camelCase property name to value type. */
@@ -18,7 +19,10 @@ function useProperty<T extends GObject.Object, P extends PropertyName<T>>(
     object: RefProp<T>,
     propertyName: P & string,
 ): T[P] | undefined {
-    return useObjectValue(object, `notify::${kebabCase(propertyName)}`, (obj) => obj?.[propertyName]);
+    const resolved = resolveRefProp(object);
+    const name = (resolved === null ? undefined : getPropertyName(resolved, propertyName)) ?? kebabCase(propertyName);
+
+    return useObjectValue(object, `notify::${name}`, (obj) => obj?.[propertyName]);
 }
 
 export { useProperty };