@gtkx/react 0.20.0 → 1.0.0-rc.1

package/src/reconciler/accessible.ts

@@ -0,0 +1,232 @@
+import * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import { deleteAccessibleMetadata, setAccessibleMetadata } from "../utils/accessible-metadata.js";
+import type { Props } from "./types.js";
+
+/**
+ * Accessibility props available on every widget. Each member maps to a GTK4 accessible attribute
+ * (a `Gtk.AccessibleProperty`, `Gtk.AccessibleState`, or `Gtk.AccessibleRelation`) and is applied
+ * to the widget's accessible interface; setting a member to `undefined` resets that attribute to its default.
+ */
+export interface AccessibleProps {
+    accessibleAutocomplete?: Gtk.AccessibleAutocomplete | null | undefined;
+    accessibleDescription?: string | null | undefined;
+    accessibleHasPopup?: boolean | null | undefined;
+    accessibleKeyShortcuts?: string | null | undefined;
+    accessibleLabel?: string | null | undefined;
+    accessibleLevel?: number | null | undefined;
+    accessibleModal?: boolean | null | undefined;
+    accessibleMultiLine?: boolean | null | undefined;
+    accessibleMultiSelectable?: boolean | null | undefined;
+    accessibleOrientation?: Gtk.Orientation | null | undefined;
+    accessiblePlaceholder?: string | null | undefined;
+    accessibleReadOnly?: boolean | null | undefined;
+    accessibleRequired?: boolean | null | undefined;
+    accessibleRoleDescription?: string | null | undefined;
+    accessibleSort?: Gtk.AccessibleSort | null | undefined;
+    accessibleValueMax?: number | null | undefined;
+    accessibleValueMin?: number | null | undefined;
+    accessibleValueNow?: number | null | undefined;
+    accessibleValueText?: string | null | undefined;
+    accessibleHelpText?: string | null | undefined;
+    accessibleBusy?: boolean | null | undefined;
+    accessibleChecked?: Gtk.AccessibleTristate | null | undefined;
+    accessibleDisabled?: boolean | null | undefined;
+    accessibleExpanded?: boolean | null | undefined;
+    accessibleHidden?: boolean | null | undefined;
+    accessibleInvalid?: Gtk.AccessibleInvalidState | null | undefined;
+    accessiblePressed?: Gtk.AccessibleTristate | null | undefined;
+    accessibleSelected?: boolean | null | undefined;
+    accessibleVisited?: boolean | null | undefined;
+    accessibleActiveDescendant?: Gtk.Widget | null | undefined;
+    accessibleColCount?: number | null | undefined;
+    accessibleColIndex?: number | null | undefined;
+    accessibleColIndexText?: string | null | undefined;
+    accessibleColSpan?: number | null | undefined;
+    accessibleControls?: Gtk.Widget[] | null | undefined;
+    accessibleDescribedBy?: Gtk.Widget[] | null | undefined;
+    accessibleDetails?: Gtk.Widget[] | null | undefined;
+    accessibleErrorMessage?: Gtk.Widget[] | null | undefined;
+    accessibleFlowTo?: Gtk.Widget[] | null | undefined;
+    accessibleLabelledBy?: Gtk.Widget[] | null | undefined;
+    accessibleOwns?: Gtk.Widget[] | null | undefined;
+    accessiblePosInSet?: number | null | undefined;
+    accessibleRowCount?: number | null | undefined;
+    accessibleRowIndex?: number | null | undefined;
+    accessibleRowIndexText?: string | null | undefined;
+    accessibleRowSpan?: number | null | undefined;
+    accessibleSetSize?: number | null | undefined;
+}
+
+type CreateValue = (jsValue: unknown) => GObject.Value;
+
+type AccessiblePropertyDescriptor = {
+    kind: "property";
+    enumValue: Gtk.AccessibleProperty;
+    createValue: CreateValue;
+};
+
+type AccessibleStateDescriptor = {
+    kind: "state";
+    enumValue: Gtk.AccessibleState;
+    createValue: CreateValue;
+};
+
+type AccessibleRelationDescriptor = {
+    kind: "relation";
+    enumValue: Gtk.AccessibleRelation;
+    createValue: CreateValue;
+};
+
+type AccessibleDescriptor = AccessiblePropertyDescriptor | AccessibleStateDescriptor | AccessibleRelationDescriptor;
+
+const fromString: CreateValue = (val) => GObject.buildValue(GObject.TYPE_STRING, (v) => v.setString(val as string));
+const fromBoolean: CreateValue = (val) => GObject.buildValue(GObject.TYPE_BOOLEAN, (v) => v.setBoolean(val as boolean));
+const fromInt: CreateValue = (val) => GObject.buildValue(GObject.TYPE_INT, (v) => v.setInt(val as number));
+const fromDouble: CreateValue = (val) => GObject.buildValue(GObject.TYPE_DOUBLE, (v) => v.setDouble(val as number));
+const fromObject: CreateValue = (val) =>
+    GObject.buildValue(GObject.TYPE_OBJECT, (v) => v.setObject(val as GObject.Object));
+
+const fromRefList: CreateValue = (val) => {
+    const widgets = val as Gtk.Accessible[];
+    const list = Gtk.AccessibleList.newFromList(widgets);
+    return GObject.buildValue(Gtk.AccessibleList.prototype.__type__, (v) => v.setBoxed(list));
+};
+
+const property = (enumValue: Gtk.AccessibleProperty, createValue: CreateValue): AccessiblePropertyDescriptor => ({
+    kind: "property",
+    enumValue,
+    createValue,
+});
+
+const state = (enumValue: Gtk.AccessibleState, createValue: CreateValue): AccessibleStateDescriptor => ({
+    kind: "state",
+    enumValue,
+    createValue,
+});
+
+const relation = (enumValue: Gtk.AccessibleRelation, createValue: CreateValue): AccessibleRelationDescriptor => ({
+    kind: "relation",
+    enumValue,
+    createValue,
+});
+
+const ACCESSIBLE_PROP_MAP: Record<keyof AccessibleProps, AccessibleDescriptor> = {
+    accessibleAutocomplete: property(Gtk.AccessibleProperty.AUTOCOMPLETE, fromInt),
+    accessibleDescription: property(Gtk.AccessibleProperty.DESCRIPTION, fromString),
+    accessibleHasPopup: property(Gtk.AccessibleProperty.HAS_POPUP, fromBoolean),
+    accessibleKeyShortcuts: property(Gtk.AccessibleProperty.KEY_SHORTCUTS, fromString),
+    accessibleLabel: property(Gtk.AccessibleProperty.LABEL, fromString),
+    accessibleLevel: property(Gtk.AccessibleProperty.LEVEL, fromInt),
+    accessibleModal: property(Gtk.AccessibleProperty.MODAL, fromBoolean),
+    accessibleMultiLine: property(Gtk.AccessibleProperty.MULTI_LINE, fromBoolean),
+    accessibleMultiSelectable: property(Gtk.AccessibleProperty.MULTI_SELECTABLE, fromBoolean),
+    accessibleOrientation: property(Gtk.AccessibleProperty.ORIENTATION, fromInt),
+    accessiblePlaceholder: property(Gtk.AccessibleProperty.PLACEHOLDER, fromString),
+    accessibleReadOnly: property(Gtk.AccessibleProperty.READ_ONLY, fromBoolean),
+    accessibleRequired: property(Gtk.AccessibleProperty.REQUIRED, fromBoolean),
+    accessibleRoleDescription: property(Gtk.AccessibleProperty.ROLE_DESCRIPTION, fromString),
+    accessibleSort: property(Gtk.AccessibleProperty.SORT, fromInt),
+    accessibleValueMax: property(Gtk.AccessibleProperty.VALUE_MAX, fromDouble),
+    accessibleValueMin: property(Gtk.AccessibleProperty.VALUE_MIN, fromDouble),
+    accessibleValueNow: property(Gtk.AccessibleProperty.VALUE_NOW, fromDouble),
+    accessibleValueText: property(Gtk.AccessibleProperty.VALUE_TEXT, fromString),
+    accessibleHelpText: property(Gtk.AccessibleProperty.HELP_TEXT, fromString),
+    accessibleBusy: state(Gtk.AccessibleState.BUSY, fromBoolean),
+    accessibleChecked: state(Gtk.AccessibleState.CHECKED, fromInt),
+    accessibleDisabled: state(Gtk.AccessibleState.DISABLED, fromBoolean),
+    accessibleExpanded: state(Gtk.AccessibleState.EXPANDED, fromInt),
+    accessibleHidden: state(Gtk.AccessibleState.HIDDEN, fromBoolean),
+    accessibleInvalid: state(Gtk.AccessibleState.INVALID, fromInt),
+    accessiblePressed: state(Gtk.AccessibleState.PRESSED, fromInt),
+    accessibleSelected: state(Gtk.AccessibleState.SELECTED, fromInt),
+    accessibleVisited: state(Gtk.AccessibleState.VISITED, fromInt),
+    accessibleActiveDescendant: relation(Gtk.AccessibleRelation.ACTIVE_DESCENDANT, fromObject),
+    accessibleColCount: relation(Gtk.AccessibleRelation.COL_COUNT, fromInt),
+    accessibleColIndex: relation(Gtk.AccessibleRelation.COL_INDEX, fromInt),
+    accessibleColIndexText: relation(Gtk.AccessibleRelation.COL_INDEX_TEXT, fromString),
+    accessibleColSpan: relation(Gtk.AccessibleRelation.COL_SPAN, fromInt),
+    accessibleControls: relation(Gtk.AccessibleRelation.CONTROLS, fromRefList),
+    accessibleDescribedBy: relation(Gtk.AccessibleRelation.DESCRIBED_BY, fromRefList),
+    accessibleDetails: relation(Gtk.AccessibleRelation.DETAILS, fromRefList),
+    accessibleErrorMessage: relation(Gtk.AccessibleRelation.ERROR_MESSAGE, fromRefList),
+    accessibleFlowTo: relation(Gtk.AccessibleRelation.FLOW_TO, fromRefList),
+    accessibleLabelledBy: relation(Gtk.AccessibleRelation.LABELLED_BY, fromRefList),
+    accessibleOwns: relation(Gtk.AccessibleRelation.OWNS, fromRefList),
+    accessiblePosInSet: relation(Gtk.AccessibleRelation.POS_IN_SET, fromInt),
+    accessibleRowCount: relation(Gtk.AccessibleRelation.ROW_COUNT, fromInt),
+    accessibleRowIndex: relation(Gtk.AccessibleRelation.ROW_INDEX, fromInt),
+    accessibleRowIndexText: relation(Gtk.AccessibleRelation.ROW_INDEX_TEXT, fromString),
+    accessibleRowSpan: relation(Gtk.AccessibleRelation.ROW_SPAN, fromInt),
+    accessibleSetSize: relation(Gtk.AccessibleRelation.SET_SIZE, fromInt),
+};
+
+const lookupDescriptor = (name: string): AccessibleDescriptor | undefined =>
+    Object.hasOwn(ACCESSIBLE_PROP_MAP, name) ? ACCESSIBLE_PROP_MAP[name as keyof AccessibleProps] : undefined;
+
+export const isAccessibleProp = (name: string): boolean => Object.hasOwn(ACCESSIBLE_PROP_MAP, name);
+
+function applyDescriptor(widget: Gtk.Accessible, descriptor: AccessibleDescriptor, newValue: unknown): void {
+    const gvalue = descriptor.createValue(newValue);
+
+    switch (descriptor.kind) {
+        case "property":
+            widget.updateProperty([descriptor.enumValue], [gvalue]);
+            break;
+        case "state":
+            widget.updateState([descriptor.enumValue], [gvalue]);
+            break;
+        case "relation":
+            widget.updateRelation([descriptor.enumValue], [gvalue]);
+            break;
+    }
+}
+
+function resetDescriptor(widget: Gtk.Accessible, descriptor: AccessibleDescriptor): void {
+    switch (descriptor.kind) {
+        case "property":
+            widget.resetProperty(descriptor.enumValue);
+            break;
+        case "state":
+            widget.resetState(descriptor.enumValue);
+            break;
+        case "relation":
+            widget.resetRelation(descriptor.enumValue);
+            break;
+    }
+}
+
+const applyChangedAccessibleProps = (widget: Gtk.Accessible, oldProps: Props | null, newProps: Props): void => {
+    for (const name in newProps) {
+        const descriptor = lookupDescriptor(name);
+        if (!descriptor) continue;
+
+        const newValue = newProps[name];
+        if (oldProps?.[name] === newValue) continue;
+
+        if (newValue === undefined) {
+            resetDescriptor(widget, descriptor);
+            deleteAccessibleMetadata(widget, name);
+        } else {
+            applyDescriptor(widget, descriptor, newValue);
+            setAccessibleMetadata(widget, name, newValue);
+        }
+    }
+};
+
+const resetRemovedAccessibleProps = (widget: Gtk.Accessible, oldProps: Props, newProps: Props): void => {
+    for (const name in oldProps) {
+        if (Object.hasOwn(newProps, name)) continue;
+        const descriptor = lookupDescriptor(name);
+        if (!descriptor) continue;
+        if (oldProps[name] !== undefined) {
+            resetDescriptor(widget, descriptor);
+            deleteAccessibleMetadata(widget, name);
+        }
+    }
+};
+
+export const applyAccessibleProps = (widget: Gtk.Accessible, oldProps: Props | null, newProps: Props): void => {
+    applyChangedAccessibleProps(widget, oldProps, newProps);
+    if (oldProps) resetRemovedAccessibleProps(widget, oldProps, newProps);
+};

package/src/reconciler/apply-props.ts

@@ -0,0 +1,117 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type { SignalHandler } from "@gtkx/runtime";
+import { isConstructOnlyProp, resolveDefaultProp, resolveSignal } from "../utils/gtype.js";
+import { NOTIFY_DETAIL_PREFIX, notifyDetailToProp } from "../utils/notify-name.js";
+import { stateOf } from "./state.js";
+import type { Props } from "./types.js";
+
+const notifyValueHandler = (container: GObject.Object, signalName: string, handler: SignalHandler): SignalHandler => {
+    const prop = notifyDetailToProp(signalName);
+    return () => handler(Reflect.get(container, prop), container);
+};
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+    if (typeof value !== "object" || value === null) return false;
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+};
+
+const elementsEqual = (a: unknown, b: unknown): boolean => {
+    if (a === b) return true;
+    if (!isPlainObject(a) || !isPlainObject(b)) return false;
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.hasOwn(b, key) && a[key] === b[key]);
+};
+
+const propsEqual = (a: unknown, b: unknown): boolean => {
+    if (a === b) return true;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((item, index) => elementsEqual(item, b[index]));
+    }
+    return false;
+};
+
+type ApplyPropsOptions = {
+    exclude?: (name: string) => boolean;
+};
+
+type PendingSignal = { signalName: string; newValue: unknown };
+
+type PendingProperty = { name: string; newValue: unknown };
+
+const collectGenericChanges = (
+    container: GObject.Object,
+    oldProps: Props | null,
+    newProps: Props,
+    exclude: ((name: string) => boolean) | undefined,
+): { pendingSignals: PendingSignal[]; pendingProperties: PendingProperty[] } => {
+    const constructionApplied = oldProps === null;
+    const pendingSignals: PendingSignal[] = [];
+    const pendingProperties: PendingProperty[] = [];
+
+    const collect = (name: string): void => {
+        if (name === "children" || exclude?.(name)) return;
+        if (isConstructOnlyProp(container, name)) return;
+
+        const oldValue = oldProps?.[name];
+        const newValue = newProps[name];
+        if (propsEqual(oldValue, newValue)) return;
+
+        const signalName = resolveSignal(container, name);
+        if (signalName) {
+            pendingSignals.push({ signalName, newValue });
+            return;
+        }
+        if (constructionApplied) return;
+        if (newValue !== undefined) {
+            pendingProperties.push({ name, newValue });
+            return;
+        }
+        const fallback = resolveDefaultProp(container, name);
+        if (fallback.has) pendingProperties.push({ name, newValue: fallback.value });
+    };
+
+    if (oldProps) {
+        for (const name in oldProps) collect(name);
+        for (const name in newProps) {
+            if (!(name in oldProps)) collect(name);
+        }
+    } else {
+        for (const name in newProps) collect(name);
+    }
+
+    return { pendingSignals, pendingProperties };
+};
+
+export function applyProps(
+    container: GObject.Object,
+    oldProps: Props | null,
+    newProps: Props,
+    options?: ApplyPropsOptions,
+): void {
+    const { signalStore } = stateOf(container);
+    const { pendingSignals, pendingProperties } = collectGenericChanges(
+        container,
+        oldProps,
+        newProps,
+        options?.exclude,
+    );
+
+    for (const { signalName, newValue } of pendingSignals) {
+        const nextHandler = typeof newValue === "function" ? (newValue as SignalHandler) : undefined;
+        const handler =
+            nextHandler && signalName.startsWith(NOTIFY_DETAIL_PREFIX)
+                ? notifyValueHandler(container, signalName, nextHandler)
+                : nextHandler;
+        signalStore.set({
+            instance: container,
+            signal: signalName,
+            handler,
+        });
+    }
+
+    for (const { name, newValue } of pendingProperties) {
+        if (typeof newValue === "string" && Reflect.get(container, name) === newValue) continue;
+        Reflect.set(container, name, newValue);
+    }
+}

package/src/reconciler/commit-flush.ts

@@ -0,0 +1,13 @@
+const pending = new Set<() => void>();
+
+export const scheduleFlush = (fn: () => void): void => {
+    pending.add(fn);
+};
+
+export const runCommitFlush = (): void => {
+    while (pending.size > 0) {
+        const batch = [...pending];
+        pending.clear();
+        for (const fn of batch) fn();
+    }
+};

package/src/reconciler/container-attach.ts

@@ -0,0 +1,219 @@
+import type { ContainerProp } from "@gtkx/config";
+import * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import { typeChainIncludes } from "../utils/gtype.js";
+import { callUsesRef, nullSetterCurrentHolder, resolveContainerProp, runCall } from "./element-props.js";
+import { type ElementMapping, registeredStateOf, stateOf } from "./state.js";
+import { childWidget } from "./wrapper-content.js";
+
+const containerPropFor = (container: GObject.Object, child: Gtk.Widget): ContainerProp | null =>
+    resolveContainerProp(container.__type__, child.__type__, undefined);
+
+const scopeFor = (child: Gtk.Widget) => ({ child, props: registeredStateOf(child)?.props ?? {} });
+
+export function attachChild(child: Gtk.Widget, container: GObject.Object): void {
+    const cp = containerPropFor(container, child);
+    if (cp?.append !== undefined) {
+        runCall(container, cp.append, [child], scopeFor(child));
+        return;
+    }
+    if (container instanceof Gtk.Widget) child.setParent(container);
+}
+
+export function detachChild(child: Gtk.Widget, container: GObject.Object): void {
+    const cp = containerPropFor(container, child);
+    if (cp?.remove !== undefined) {
+        const holder = nullSetterCurrentHolder(container, cp.remove);
+        if (holder !== undefined) {
+            if (holder === child) runCall(container, cp.remove, [child], scopeFor(child));
+            return;
+        }
+        if (container instanceof Gtk.Widget && !isDescendantOf(child, container)) return;
+        runCall(container, cp.remove, [child], scopeFor(child));
+        return;
+    }
+    if (container instanceof Gtk.Widget && isDescendantOf(child, container)) child.unparent();
+}
+
+export function unparentWidget(widget: Gtk.Widget): void {
+    const currentParent = widget.getParent();
+    if (currentParent === null) return;
+    detachChild(widget, currentParent);
+}
+
+export function getFocusWidget(widget: Gtk.Widget): Gtk.Widget | null {
+    const root = widget.getRoot();
+    return root?.getFocus() ?? null;
+}
+
+export function isDescendantOf(widget: Gtk.Widget, ancestor: Gtk.Widget): boolean {
+    let current: Gtk.Widget | null = widget;
+    while (current) {
+        if (current === ancestor) return true;
+        current = current.getParent();
+    }
+    return false;
+}
+
+const isAutowrapChild = (cp: ContainerProp | null, widget: Gtk.Widget): boolean =>
+    cp?.autowrap !== undefined && !typeChainIncludes(widget.__type__, cp.autowrap);
+
+const detachAutowrapped = (widget: Gtk.Widget): void => {
+    const wrapper = widget.getParent();
+    if (wrapper === null) return;
+    detachChild(widget, wrapper);
+    const wrapperParent = wrapper.getParent();
+    if (wrapperParent !== null) detachChild(wrapper, wrapperParent);
+};
+
+function* childWidgetsOf(container: Gtk.Widget): IterableIterator<Gtk.Widget> {
+    let child = container.getFirstChild();
+    while (child) {
+        yield child;
+        child = child.getNextSibling();
+    }
+}
+
+const unwrapChildWidget = (child: Gtk.Widget): Gtk.Widget | null => {
+    if ("getChild" in child && typeof child.getChild === "function") {
+        const inner: unknown = child.getChild();
+        return inner instanceof Gtk.Widget ? inner : null;
+    }
+    return child;
+};
+
+const findWrappedPosition = (container: Gtk.Widget, anchor: Gtk.Widget, wrapper: string): number | null => {
+    const anchorIsWrapper = typeChainIncludes(anchor.__type__, wrapper);
+    let position = 0;
+    for (const current of childWidgetsOf(container)) {
+        const compare = anchorIsWrapper ? current : unwrapChildWidget(current);
+        if (compare && compare === anchor) return position;
+        position++;
+    }
+    return null;
+};
+
+const findInsertPosition = (container: Gtk.Widget, anchor: Gtk.Widget): number => {
+    let position = 0;
+    for (const current of childWidgetsOf(container)) {
+        if (current === anchor) return position;
+        position++;
+    }
+    return position;
+};
+
+const reorderPosition = (container: Gtk.Widget, anchor: Gtk.Widget, moving: Gtk.Widget): number => {
+    let position = 0;
+    for (const current of childWidgetsOf(container)) {
+        if (current === moving) continue;
+        if (current === anchor) return position;
+        position++;
+    }
+    return position;
+};
+
+const findPrevSibling = (container: Gtk.Widget, anchor: Gtk.Widget): Gtk.Widget | undefined => {
+    for (const child of childWidgetsOf(container)) {
+        if (child === anchor) return child.getPrevSibling() ?? undefined;
+    }
+    return undefined;
+};
+
+const insertAtIndex = (
+    container: Gtk.Widget,
+    widget: Gtk.Widget,
+    anchor: Gtk.Widget,
+    cp: ContainerProp & { insert: NonNullable<ContainerProp["insert"]> },
+): void => {
+    if (cp.autowrap !== undefined) {
+        if (widget.getParent() !== null) {
+            if (isAutowrapChild(cp, widget)) detachAutowrapped(widget);
+            else unparentWidget(widget);
+        }
+        const position = findWrappedPosition(container, anchor, cp.autowrap);
+        if (position === null) attachChild(widget, container);
+        else runCall(container, cp.insert, [widget, position], { child: widget, index: position });
+        return;
+    }
+    if (widget.getParent() === container && cp.reorder !== undefined) {
+        const position = reorderPosition(container, anchor, widget);
+        runCall(container, cp.reorder, [widget, position], { child: widget, index: position });
+        return;
+    }
+    unparentWidget(widget);
+    const position = findInsertPosition(container, anchor);
+    runCall(container, cp.insert, [widget, position], { child: widget, index: position });
+};
+
+const insertBySibling = (container: Gtk.Widget, widget: Gtk.Widget, anchor: Gtk.Widget, cp: ContainerProp): void => {
+    const previous = findPrevSibling(container, anchor);
+    const scope = { child: widget, sibling: previous ?? null };
+    if (widget.getParent() === container && cp.reorder !== undefined) {
+        runCall(container, cp.reorder, [widget, previous], scope);
+        return;
+    }
+    unparentWidget(widget);
+    if (cp.insert !== undefined) runCall(container, cp.insert, [widget, previous], scope);
+    else attachChild(widget, container);
+};
+
+const reinsertAll = (container: GObject.Object): void => {
+    const widgets: Gtk.Widget[] = [];
+    for (const child of stateOf(container).children) {
+        const widget = childWidget(child);
+        if (widget) widgets.push(widget);
+    }
+    for (const widget of widgets) detachChild(widget, container);
+    for (const widget of widgets) attachChild(widget, container);
+};
+
+const insertWidgetBefore = (container: GObject.Object, widget: Gtk.Widget, anchor: Gtk.Widget): void => {
+    const cp = containerPropFor(container, widget);
+    if (cp?.insert !== undefined && callUsesRef(cp.insert, "index") && container instanceof Gtk.Widget) {
+        insertAtIndex(container, widget, anchor, { ...cp, insert: cp.insert });
+        return;
+    }
+    if (
+        container instanceof Gtk.Widget &&
+        (cp?.reorder !== undefined || (cp?.insert !== undefined && callUsesRef(cp.insert, "sibling")))
+    ) {
+        insertBySibling(container, widget, anchor, cp);
+        return;
+    }
+    reinsertAll(container);
+};
+
+const appendWidget = (container: GObject.Object, widget: Gtk.Widget, fresh: boolean): void => {
+    if (!fresh && widget.getParent() !== null) {
+        const cp = containerPropFor(container, widget);
+        if (isAutowrapChild(cp, widget)) detachAutowrapped(widget);
+        else unparentWidget(widget);
+    }
+    attachChild(widget, container);
+};
+
+const removeWidget = (container: GObject.Object, widget: Gtk.Widget): void => {
+    const cp = containerPropFor(container, widget);
+    if (!isAutowrapChild(cp, widget)) {
+        detachChild(widget, container);
+        return;
+    }
+    const wrapper = widget.getParent();
+    if (wrapper !== null && wrapper !== container) {
+        detachChild(widget, wrapper);
+        detachChild(wrapper, container);
+    }
+};
+
+export const containerMapping: ElementMapping = (child, parent) => {
+    const widget = childWidget(child);
+    if (widget === null || !(parent instanceof GObject.Object)) return null;
+    if (!(parent instanceof Gtk.Widget) && containerPropFor(parent, widget) === null) return null;
+    return {
+        attach: (anchor, fresh) => {
+            if (anchor instanceof Gtk.Widget) insertWidgetBefore(parent, widget, anchor);
+            else appendWidget(parent, widget, fresh === true);
+        },
+        detach: () => removeWidget(parent, widget),
+    };
+};

package/src/reconciler/content-rebuild.ts

@@ -0,0 +1,19 @@
+import { scheduleFlush } from "./commit-flush.js";
+import { closestInstance, type Node } from "./state.js";
+
+const rebuildsByContentOwner = new WeakMap<Node, () => void>();
+
+export const scheduleContentRebuild = <T extends Node>(
+    node: Node,
+    isContentOwner: (candidate: Node) => candidate is T,
+    createRebuild: (owner: T) => () => void,
+): void => {
+    const owner = closestInstance(node, isContentOwner);
+    if (!owner) return;
+    let rebuild = rebuildsByContentOwner.get(owner);
+    if (!rebuild) {
+        rebuild = createRebuild(owner);
+        rebuildsByContentOwner.set(owner, rebuild);
+    }
+    scheduleFlush(rebuild);
+};

package/src/reconciler/dispatch.ts

@@ -0,0 +1,58 @@
+import * as GObject from "@gtkx/gi/gobject";
+import { containerMapping } from "./container-attach.js";
+import { type ElementHandler, type ElementMapping, type Node, stateOf } from "./state.js";
+import { containerChildMapping, containerPropMapping, lazyElementMapping, objectPropMapping } from "./wrapper-apply.js";
+import { isWrapperNode } from "./wrapper-node.js";
+
+const ELEMENT_MAP: ElementMapping[] = [
+    objectPropMapping,
+    containerPropMapping,
+    lazyElementMapping,
+    containerChildMapping,
+    containerMapping,
+];
+
+const resolveHandler = (child: Node, parent: Node): ElementHandler | null => {
+    for (const mapping of ELEMENT_MAP) {
+        const handler = mapping(child, parent);
+        if (handler !== null) return handler;
+    }
+    return null;
+};
+
+const attachToParent = (child: Node, parent: Node, anchor?: GObject.Object | null, fresh?: boolean): void => {
+    resolveHandler(child, parent)?.attach(anchor, fresh);
+};
+
+export const detachFromParent = (child: Node, parent: Node): void => {
+    resolveHandler(child, parent)?.detach();
+};
+
+export const resyncWrapperNode = (node: Node): void => {
+    const parent = stateOf(node).parent;
+    if (isWrapperNode(node) && parent) attachToParent(node, parent);
+};
+
+const anchorWrapper = (before: Node): GObject.Object | null => {
+    if (before instanceof GObject.Object) return before;
+    for (const grandchild of stateOf(before).children) {
+        if (grandchild instanceof GObject.Object) return grandchild;
+    }
+    return null;
+};
+
+export const attachNode = (parent: Node, child: Node, before: Node | null, fresh: boolean): void => {
+    if (before === null) {
+        if (isWrapperNode(child) || !isWrapperNode(parent)) attachToParent(child, parent, null, fresh);
+    } else if (isWrapperNode(child)) {
+        attachToParent(child, parent);
+    } else if (!isWrapperNode(parent)) {
+        attachToParent(child, parent, anchorWrapper(before));
+    }
+    if (isWrapperNode(parent)) resyncWrapperNode(parent);
+};
+
+export const detachNode = (parent: Node, child: Node): void => {
+    if (isWrapperNode(child) || !isWrapperNode(parent)) detachFromParent(child, parent);
+    if (isWrapperNode(parent)) resyncWrapperNode(parent);
+};