@gtkx/components 0.21.0 → 1.0.0-rc.1

package/src/drop-down.tsx

@@ -1,134 +1,115 @@
-import type * as Adw from "@gtkx/gi/adw";
-import type * as Gio from "@gtkx/gi/gio";
 import type * as Gtk from "@gtkx/gi/gtk";
-import { AdwComboRow, type AdwComboRowProps } from "@gtkx/jsx/adw";
-import { GtkDropDown, type GtkDropDownProps, GtkLabel } from "@gtkx/jsx/gtk";
-import { useForwardedRef } from "@gtkx/react";
-import {
-    createElement,
-    type ElementType,
-    type ReactElement,
-    type ReactNode,
-    type Ref,
-    useCallback,
-    useRef,
-    useState,
-} from "react";
+import { GtkDropDown, GtkLabel } from "@gtkx/jsx/gtk";
+import { useMergeRefs } from "@gtkx/react/internal";
+import { type ElementType, type ReactNode, type Ref, useCallback, useRef, useState } from "react";
+import { type CellRenderer, CellRenderHost, HeaderRenderHost, itemRenderer } from "./cell.js";
+import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
 import { useDropDownSelection } from "./hooks/use-drop-down-selection.js";
+import { useInstalledModel } from "./hooks/use-installed-model.js";
 import { useListModel } from "./hooks/use-list-model.js";
-import { useModelInstallation } from "./hooks/use-model-installation.js";
-import { type FactoryBinding, useRealizedSlots } from "./hooks/use-realized-slots.js";
-import { ListPortalHost } from "./list-portal-host.js";
-import type { SlotRenderer } from "./list-slot.js";
-import type { DropDownProps, ListItem } from "./types.js";
+import type { ItemNode, RenderItemProps, SectionNode, WidgetProps } from "./types.js";
+import type { CellContainerStore } from "./utils/cell-container-store.js";
 import type { ItemResolver } from "./utils/item-resolver.js";
-import type { RealizedSlotStore } from "./utils/realized-slot-store.js";
 
-export interface DropDownWidget extends Gtk.Widget {
-    getSelected(): number;
-    setSelected(position: number): void;
-    setModel(model: Gio.ListModel | null): void;
-    setFactory(factory: Gtk.ListItemFactory | null): void;
-    setListFactory(factory: Gtk.ListItemFactory | null): void;
-    setHeaderFactory(factory: Gtk.ListItemFactory | null): void;
-}
+export type DropDownItemRenderer<T> = (props: RenderItemProps<T>) => ReactNode;
 
-const itemFactoryBinding: FactoryBinding<DropDownWidget> = {
-    install: (widget, factory) => widget.setFactory(factory),
-    uninstall: (widget) => widget.setFactory(null),
-};
+const itemFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setFactory(factory));
 
-const listFactoryBinding: FactoryBinding<DropDownWidget> = {
-    install: (widget, factory) => widget.setListFactory(factory),
-    uninstall: (widget) => widget.setListFactory(null),
-};
+const listFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setListFactory(factory));
 
-const headerFactoryBinding: FactoryBinding<DropDownWidget> = {
-    install: (widget, factory) => widget.setHeaderFactory(factory),
-    uninstall: (widget) => widget.setHeaderFactory(null),
-};
+const headerFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) =>
+    widget.setHeaderFactory(factory),
+);
 
-const defaultRenderer: SlotRenderer<unknown, unknown> = (value, _treeRow, isHeader) => {
-    if (isHeader || value === undefined || value === null) return null;
-    return createElement(GtkLabel, { label: String(value) });
+const defaultRenderer: CellRenderer<unknown, unknown> = (value) => {
+    if (value === undefined || value === null) return null;
+    return <GtkLabel>{String(value)}</GtkLabel>;
 };
 
-interface DropDownImplProps<T, S, W extends DropDownWidget> {
-    element: ElementType;
-    intrinsicProps: Record<string, unknown>;
-    ref: Ref<W | null> | undefined;
-    items: ListItem<T, S>[] | undefined;
-    model: Gio.ListModel | undefined;
-    renderItem: ((value: T) => ReactNode) | null | undefined;
-    renderListItem: ((value: T) => ReactNode) | null | undefined;
-    renderHeader: ((value: S) => ReactNode) | null | undefined;
-    selectedId: string | null | undefined;
-    onSelectionChanged: ((id: string) => void) | null | undefined;
-}
-
-const toItemRenderer = <T, S>(renderItem: ((value: T) => ReactNode) | null | undefined): SlotRenderer<T, S> => {
-    if (typeof renderItem !== "function") return defaultRenderer as SlotRenderer<T, S>;
-    return (value, _treeRow, isHeader) => (isHeader ? null : renderItem(value as T));
+const toItemRenderer = <T, S>(renderItem: DropDownItemRenderer<T> | null | undefined): CellRenderer<T, S> => {
+    if (typeof renderItem !== "function") return defaultRenderer as CellRenderer<T, S>;
+    return itemRenderer<T, S>(renderItem);
 };
 
-const toPopupRenderer = <T, S>(
-    renderListItem: ((value: T) => ReactNode) | null | undefined,
-    renderItem: ((value: T) => ReactNode) | null | undefined,
-): SlotRenderer<T, S> => {
-    if (typeof renderListItem === "function")
-        return (value, _treeRow, isHeader) => (isHeader ? null : renderListItem(value as T));
+const toListRenderer = <T, S>(
+    renderListItem: DropDownItemRenderer<T> | null | undefined,
+    renderItem: DropDownItemRenderer<T> | null | undefined,
+): CellRenderer<T, S> => {
+    if (typeof renderListItem === "function") return itemRenderer<T, S>(renderListItem);
     return toItemRenderer<T, S>(renderItem);
 };
 
-const toHeaderRenderer = <T, S>(renderHeader: ((value: S) => ReactNode) | null | undefined): SlotRenderer<T, S> => {
-    if (typeof renderHeader !== "function") return () => null;
-    return (value) => renderHeader(value as S);
+const createSelectionResolver = <T, S>(resolver: ItemResolver<T, S>, selectedPosition: number): ItemResolver<T, S> => ({
+    positionOfId: (id) => resolver.positionOfId(id),
+    idOf: (position) => resolver.idOf(position),
+    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow),
+});
+
+/** Declarative props for {@link DropDown}'s backing collection and cell rendering. */
+export type DropDownDeclarativeProps<T = unknown, S = unknown> = {
+    items?: ItemNode<T>[] | undefined;
+    sections?: SectionNode<S, T>[] | undefined;
+    /** Id of the currently selected item, making the selection controlled. */
+    selectedId?: string | null | undefined;
+    onSelectionChanged?: ((id: string) => void) | null | undefined;
+    renderItem?: DropDownItemRenderer<T> | null | undefined;
+    /** Renderer for items in the open popup list, falling back to renderItem when omitted. */
+    renderListItem?: DropDownItemRenderer<T> | null | undefined;
+    /** Renderer for section headers in the popup list. */
+    renderHeader?: ((info: { section: S }) => ReactNode) | null | undefined;
 };
 
-interface DropDownWiring<T, S, W extends DropDownWidget> {
-    setRef: (value: W | null) => void;
+/**
+ * Props for {@link DropDown}. The backing widget is chosen through the `component` prop, defaulting to
+ * GtkDropDown, and its own props combine with {@link DropDownDeclarativeProps}.
+ */
+export type DropDownProps<T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown> = WidgetProps<
+    C,
+    DropDownDeclarativeProps<T, S>,
+    "model" | "factory" | "listFactory" | "headerFactory"
+>;
+
+interface NormalizedDropDownProps<T, S> {
+    ref: Ref<Gtk.DropDown | null> | undefined;
+    items: ItemNode<T>[] | undefined;
+    sections: SectionNode<S, T>[] | undefined;
+    selectedId: string | null | undefined;
+    onSelectionChanged: ((id: string) => void) | null | undefined;
+    renderHeader: ((info: { section: S }) => ReactNode) | null | undefined;
+}
+
+interface DropDownWiring<T, S> {
+    setRef: (value: Gtk.DropDown | null) => void;
     resolver: ItemResolver<T, S>;
-    faceResolver: ItemResolver<T, S>;
+    selectionResolver: ItemResolver<T, S>;
     headerResolver: ItemResolver<T, S>;
-    faceStore: RealizedSlotStore;
-    popupStore: RealizedSlotStore;
-    headerStore: RealizedSlotStore;
+    selectionStore: CellContainerStore;
+    listStore: CellContainerStore;
+    headerStore: CellContainerStore;
     useHeader: boolean;
 }
 
-const createFaceResolver = <T, S>(resolver: ItemResolver<T, S>, selectedPosition: number): ItemResolver<T, S> => ({
-    count: resolver.count,
-    positionOf: (id) => resolver.positionOf(id),
-    idOf: (position) => resolver.idOf(position),
-    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow, null),
-});
-
-const useDropDownWiring = <T, S, W extends DropDownWidget>(
-    props: DropDownImplProps<T, S, W>,
-): DropDownWiring<T, S, W> => {
-    const widgetRef = useRef<DropDownWidget | null>(null);
-    const [widget, setWidget] = useState<DropDownWidget | null>(null);
-    const captureWidget = useCallback((value: W | null) => {
+const useDropDownWiring = <T, S>(props: NormalizedDropDownProps<T, S>): DropDownWiring<T, S> => {
+    const widgetRef = useRef<Gtk.DropDown | null>(null);
+    const [widget, setWidget] = useState<Gtk.DropDown | null>(null);
+    const captureWidget = useCallback((value: Gtk.DropDown | null) => {
         widgetRef.current = value;
         setWidget(value);
     }, []);
-    const [, setRef] = useForwardedRef<W>(props.ref, captureWidget);
+    const setRef = useMergeRefs<Gtk.DropDown>(props.ref, captureWidget);
 
-    const externalModel = props.model;
-    const listModel = useListModel<T, S>(
-        externalModel === undefined ? { items: props.items ?? undefined } : { model: externalModel },
-    );
+    const listModel = useListModel<T, S>({ items: props.items, sections: props.sections });
 
-    const useHeader = externalModel === undefined && typeof props.renderHeader === "function";
+    const useHeader = typeof props.renderHeader === "function";
 
-    const face = useRealizedSlots<DropDownWidget>({ target: widgetRef, binding: itemFactoryBinding });
-    const popup = useRealizedSlots<DropDownWidget>({ target: widgetRef, binding: listFactoryBinding });
-    const header = useRealizedSlots<DropDownWidget>({
-        target: useHeader ? widgetRef : null,
-        binding: headerFactoryBinding,
+    const selectionStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: itemFactoryInstaller });
+    const listStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: listFactoryInstaller });
+    const headerStore = useCellContainers<Gtk.DropDown>({
+        object: useHeader ? widgetRef : null,
+        installer: headerFactoryInstaller,
     });
 
-    useModelInstallation(widgetRef, listModel.model, (widget, model) => widget.setModel(model));
+    useInstalledModel(widgetRef, listModel.model, (widget, value) => widget.setModel(value));
 
     const selectedPosition = useDropDownSelection<T, S>({
         widget,
@@ -140,120 +121,72 @@ const useDropDownWiring = <T, S, W extends DropDownWidget>(
     const controlledPosition =
         props.selectedId === undefined || props.selectedId === null
             ? -1
-            : listModel.resolver.positionOf(props.selectedId);
-    const facePosition = controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;
+            : listModel.resolver.positionOfId(props.selectedId);
+    const selectionPosition =
+        controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;
 
     return {
         setRef,
         resolver: listModel.resolver,
-        faceResolver: createFaceResolver(listModel.resolver, facePosition),
+        selectionResolver: createSelectionResolver(listModel.resolver, selectionPosition),
         headerResolver: listModel.headerResolver,
-        faceStore: face.store,
-        popupStore: popup.store,
-        headerStore: header.store,
+        selectionStore,
+        listStore,
+        headerStore,
         useHeader,
     };
 };
 
-const DropDownImpl = <T, S, W extends DropDownWidget>(props: DropDownImplProps<T, S, W>): ReactNode => {
-    const { setRef, resolver, faceResolver, headerResolver, faceStore, popupStore, headerStore, useHeader } =
-        useDropDownWiring(props);
-    const intrinsic: ReactElement = createElement(props.element, { ...props.intrinsicProps, ref: setRef });
-
-    return (
-        <>
-            {intrinsic}
-            <ListPortalHost store={faceStore} resolver={faceResolver} render={toItemRenderer<T, S>(props.renderItem)} />
-            <ListPortalHost
-                store={popupStore}
-                resolver={resolver}
-                render={toPopupRenderer<T, S>(props.renderListItem, props.renderItem)}
-            />
-            {useHeader ? (
-                <ListPortalHost
-                    store={headerStore}
-                    resolver={headerResolver}
-                    render={toHeaderRenderer<T, S>(props.renderHeader)}
-                />
-            ) : null}
-        </>
-    );
-};
-
-type DropDownImplComponentProps<T, S, W extends DropDownWidget> = DropDownProps<T, S> & {
-    ref?: Ref<W | null> | undefined;
-};
-
-const extractDropDownProps = <T, S, W extends DropDownWidget>(
-    props: DropDownImplComponentProps<T, S, W>,
-): {
-    impl: Omit<DropDownImplProps<T, S, W>, "element" | "intrinsicProps">;
-    intrinsicProps: Record<string, unknown>;
-} => {
+/**
+ * Renders a drop-down widget (Gtk.DropDown by default, or the widget given as `component`) backed by a
+ * collection model, with customizable rendering for the selected item, the popup list rows, and section
+ * headers.
+ */
+export const DropDown = <T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown>(
+    props: DropDownProps<T, S, C>,
+): ReactNode => {
     const {
+        component,
         ref,
         items,
-        model,
+        sections,
         renderItem,
         renderListItem,
         renderHeader,
         selectedId,
         onSelectionChanged,
         ...intrinsicProps
-    } = props as DropDownProps<T, S> & {
-        ref?: Ref<W | null>;
-        [key: string]: unknown;
-    };
-
-    return {
-        impl: {
-            ref,
-            items: items as ListItem<T, S>[] | undefined,
-            model: model as Gio.ListModel | undefined,
-            renderItem: renderItem as ((value: T) => ReactNode) | null | undefined,
-            renderListItem: renderListItem as ((value: T) => ReactNode) | null | undefined,
-            renderHeader: renderHeader as ((value: S) => ReactNode) | null | undefined,
-            selectedId: selectedId as string | null | undefined,
-            onSelectionChanged: onSelectionChanged as ((id: string) => void) | null | undefined,
-        },
-        intrinsicProps: intrinsicProps as Record<string, unknown>,
-    };
-};
-
-/**
- * Props for the {@link DropDown} component: the raw `GtkDropDown` element
- * surface with its factory/model wiring replaced by the declarative
- * {@link DropDownProps} API.
- */
-export type DropDownComponentProps<T = unknown, S = unknown> = Omit<GtkDropDownProps, keyof DropDownProps<T, S>> &
-    DropDownProps<T, S>;
-
-/**
- * Props for the {@link ComboRow} component: the raw `AdwComboRow` element
- * surface with its factory/model wiring replaced by the declarative
- * {@link DropDownProps} API.
- */
-export type ComboRowComponentProps<T = unknown, S = unknown> = Omit<AdwComboRowProps, keyof DropDownProps<T, S>> &
-    DropDownProps<T, S>;
+    } = props;
+    const Component: ElementType = component ?? GtkDropDown;
 
-/**
- * A `GtkDropDown` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export const DropDown = <T = unknown, S = unknown>(props: DropDownComponentProps<T, S>): ReactNode => {
-    const { impl, intrinsicProps } = extractDropDownProps<T, S, Gtk.DropDown>(props);
-    return <DropDownImpl<T, S, Gtk.DropDown> element={GtkDropDown} intrinsicProps={intrinsicProps} {...impl} />;
-};
+    const wiring = useDropDownWiring<T, S>({
+        ref,
+        items,
+        sections,
+        selectedId,
+        onSelectionChanged,
+        renderHeader,
+    });
 
-/**
- * An `AdwComboRow` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export const ComboRow = <T = unknown, S = unknown>(props: ComboRowComponentProps<T, S>): ReactNode => {
-    const { impl, intrinsicProps } = extractDropDownProps<T, S, Adw.ComboRow>(props);
-    return <DropDownImpl<T, S, Adw.ComboRow> element={AdwComboRow} intrinsicProps={intrinsicProps} {...impl} />;
+    return (
+        <>
+            <Component {...intrinsicProps} ref={wiring.setRef} />
+            <CellRenderHost
+                store={wiring.selectionStore}
+                resolver={wiring.selectionResolver}
+                render={toItemRenderer<T, S>(renderItem)}
+            />
+            <CellRenderHost
+                store={wiring.listStore}
+                resolver={wiring.resolver}
+                render={toListRenderer<T, S>(renderListItem, renderItem)}
+            />
+            <HeaderRenderHost
+                useHeader={wiring.useHeader}
+                store={wiring.headerStore}
+                resolver={wiring.headerResolver}
+                renderHeader={renderHeader}
+            />
+        </>
+    );
 };

package/src/fixed.tsx

@@ -0,0 +1,86 @@
+import * as Graphene from "@gtkx/gi/graphene";
+import * as Gsk from "@gtkx/gi/gsk";
+import type * as Gtk from "@gtkx/gi/gtk";
+import { GtkFixed, type GtkFixedProps } from "@gtkx/jsx/gtk";
+import { useMergeRefs } from "@gtkx/react/internal";
+import {
+    createContext,
+    type ElementType,
+    type ReactNode,
+    type Ref,
+    type RefCallback,
+    useCallback,
+    useContext,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
+import type { ChildProps } from "./types.js";
+
+const FixedContext = createContext<Gtk.Fixed | null | undefined>(undefined);
+
+const useFixedInstance = (): Gtk.Fixed | null => {
+    const fixed = useContext(FixedContext);
+    if (fixed === undefined) throw new Error("<Fixed.Child> must be a child of <Fixed>");
+    return fixed;
+};
+
+/** Props for {@link Fixed}. */
+export type FixedProps = GtkFixedProps & { ref?: Ref<Gtk.Fixed | null>; children?: ReactNode };
+
+export type FixedPlacementProps = {
+    x?: number | null | undefined;
+    y?: number | null | undefined;
+    /** Full transform applied to the child, overriding x and y when provided. */
+    transform?: Gsk.Transform | null | undefined;
+};
+
+/** Positions a single child inside a {@link Fixed} at coordinates x and y, or by an explicit transform. */
+export type FixedChildProps<C extends ElementType> = ChildProps<C, FixedPlacementProps>;
+
+const transformOf = (x: number, y: number, transform: Gsk.Transform | null | undefined): Gsk.Transform | null =>
+    transform !== undefined ? transform : Gsk.Transform.new().translate(Graphene.Point.create(x, y));
+
+const FixedChild = <C extends ElementType>({
+    component,
+    x,
+    y,
+    transform,
+    ref,
+    ...rest
+}: FixedChildProps<C>): ReactNode => {
+    const fixed = useFixedInstance();
+    const Component: ElementType = component;
+    const widgetRef = useRef<Gtk.Widget | null>(null);
+    const captureWidget = useCallback<RefCallback<Gtk.Widget>>((node) => {
+        widgetRef.current = node;
+    }, []);
+    const setWidget = useMergeRefs<Gtk.Widget>(ref, captureWidget);
+
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (widget === null || fixed === null) return;
+        fixed.setChildTransform(widget, transformOf(x ?? 0, y ?? 0, transform));
+    });
+
+    return <Component {...rest} ref={setWidget} />;
+};
+
+/**
+ * Renders a Gtk.Fixed container whose children are placed at explicit positions via
+ * {@link Fixed.Child}.
+ */
+export const Fixed: ((props: FixedProps) => ReactNode) & {
+    Child: <C extends ElementType>(props: FixedChildProps<C>) => ReactNode;
+} = Object.assign(
+    ({ children, ref, ...rest }: FixedProps): ReactNode => {
+        const [fixed, setFixed] = useState<Gtk.Fixed | null>(null);
+        const mergedRef = useMergeRefs<Gtk.Fixed>(ref, setFixed);
+        return (
+            <GtkFixed {...rest} ref={mergedRef}>
+                <FixedContext.Provider value={fixed}>{children}</FixedContext.Provider>
+            </GtkFixed>
+        );
+    },
+    { Child: FixedChild },
+);

package/src/grid-view.tsx

@@ -1,73 +1,81 @@
-import type * as Gio from "@gtkx/gi/gio";
 import type * as Gtk from "@gtkx/gi/gtk";
 import { GtkGridView, type GtkGridViewProps } from "@gtkx/jsx/gtk";
-import type { ReactNode, Ref } from "react";
-import { CollectionView, type ModelBinding } from "./collection-view.js";
-import type { SlotRenderer } from "./list-slot.js";
-import type { GridViewProps } from "./types.js";
+import { useMergeRefs } from "@gtkx/react/internal";
+import { type ReactNode, type Ref, useRef } from "react";
+import { type CellRenderer, CellRenderHost, itemRenderer } from "./cell.js";
+import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
+import { useCollectionModel } from "./hooks/use-collection-model.js";
+import { useInstalledModel } from "./hooks/use-installed-model.js";
+import type { CollectionItemSizeProps, ControlledSelectionProps, ItemNode, RenderItemProps } from "./types.js";
 
-const factoryBinding = {
-    install: (widget: Gtk.GridView, factory: Gtk.SignalListItemFactory) => widget.setFactory(factory),
-    uninstall: (widget: Gtk.GridView) => widget.setFactory(null),
-};
+const factoryInstaller = makeFactoryInstaller<Gtk.GridView>((widget, factory) => widget.setFactory(factory));
 
-const modelBinding: ModelBinding<Gtk.GridView> = {
-    install: (widget, model) => widget.setModel(model as Gtk.SelectionModel),
-};
+export type GridViewDeclarativeProps<T = unknown> = CollectionItemSizeProps &
+    ControlledSelectionProps & {
+        items?: ItemNode<T>[] | undefined;
+        renderItem: (props: RenderItemProps<T>) => ReactNode;
+    };
 
 /**
- * Props for the {@link GridView} component: the raw `GtkGridView` element
- * surface with its factory/model wiring replaced by the declarative
- * {@link GridViewProps} API.
+ * Props for {@link GridView}. Combines the underlying Gtk.GridView props with
+ * declarative collection props: items, a per-cell renderItem, controlled selection,
+ * and estimated item sizing.
  */
-export type GridViewComponentProps<T = unknown> = Omit<GtkGridViewProps, keyof GridViewProps<T>> & GridViewProps<T>;
+export type GridViewProps<T = unknown> = Omit<
+    GtkGridViewProps,
+    "model" | "factory" | keyof GridViewDeclarativeProps<T>
+> &
+    GridViewDeclarativeProps<T>;
 
 /**
- * A `GtkGridView` driven by a declarative `items`/`renderItem` API with
- * optional controlled selection. Supplying an external `model` switches to the
- * uncontrolled form.
+ * Renders a Gtk.GridView: a scrollable grid of uniformly sized cells backed by a
+ * collection model, with each cell drawn by renderItem.
  */
-export const GridView = <T = unknown>(props: GridViewComponentProps<T>): ReactNode => {
+export const GridView = <T = unknown>(props: GridViewProps<T>): ReactNode => {
     const {
         ref,
         items,
-        model,
         renderItem,
-        selected,
+        selectedIds,
         selectionMode,
         onSelectionChanged,
         estimatedItemHeight,
         estimatedItemWidth,
         ...intrinsicProps
-    } = props as GridViewProps<T> & {
+    } = props as GridViewDeclarativeProps<T> & {
         ref?: Ref<Gtk.GridView | null>;
         estimatedItemHeight?: number;
         estimatedItemWidth?: number;
         [key: string]: unknown;
     };
 
-    const renderItemFn = renderItem as (item: T) => ReactNode;
-    const slotRenderer: SlotRenderer<T, unknown> = (value, _treeRow, isHeader) =>
-        isHeader ? null : renderItemFn(value as T);
+    const cellRenderer: CellRenderer<T, unknown> = itemRenderer<T, unknown>(renderItem);
+
+    const widgetRef = useRef<Gtk.GridView | null>(null);
+    const setRef = useMergeRefs<Gtk.GridView>(ref, widgetRef);
+
+    const collection = useCollectionModel<T, unknown>({
+        items,
+        sections: undefined,
+        selectionMode,
+        selectedIds,
+        onSelectionChanged,
+        renderHeader: undefined,
+    });
+
+    const itemStore = useCellContainers<Gtk.GridView>({
+        object: widgetRef,
+        installer: factoryInstaller,
+        estimatedHeight: estimatedItemHeight,
+        estimatedWidth: estimatedItemWidth,
+    });
+
+    useInstalledModel(widgetRef, collection.installedModel, (widget, value) => widget.setModel(value));
 
     return (
-        <CollectionView<T, unknown, Gtk.GridView>
-            element={GtkGridView}
-            intrinsicProps={intrinsicProps}
-            ref={ref}
-            items={model === undefined ? items : undefined}
-            model={model as Gio.ListModel | undefined}
-            renderItem={slotRenderer}
-            autoexpand={undefined}
-            renderHeader={undefined}
-            estimatedHeight={estimatedItemHeight}
-            estimatedWidth={estimatedItemWidth}
-            selected={selected}
-            selectionMode={selectionMode}
-            onSelectionChanged={onSelectionChanged}
-            factoryBinding={factoryBinding}
-            headerFactoryBinding={undefined}
-            modelBinding={modelBinding}
-        />
+        <>
+            <GtkGridView {...intrinsicProps} ref={setRef} />
+            <CellRenderHost store={itemStore} resolver={collection.resolver} render={cellRenderer} />
+        </>
     );
 };