@gtkx/components 0.21.0

package/src/hooks/use-header-menu.ts

@@ -0,0 +1,33 @@
+import * as Gio from "@gtkx/gi/gio";
+import * as GObject from "@gtkx/gi/gobject";
+import type * as Gtk from "@gtkx/gi/gtk";
+import { createPortal } from "@gtkx/react";
+import { stateOf } from "@gtkx/react/internal";
+import { type ReactNode, useLayoutEffect, useRef } from "react";
+
+const findMenuModel = (container: GObject.Object): Gio.MenuModel | null => {
+    for (const child of stateOf(container).children) {
+        if (child instanceof Gio.MenuModel) return child;
+    }
+    return null;
+};
+
+export const useHeaderMenu = (column: Gtk.ColumnViewColumn | null, headerMenu: ReactNode): ReactNode => {
+    const containerRef = useRef<GObject.Object | null>(null);
+    if (containerRef.current === null) {
+        containerRef.current = new GObject.Object();
+    }
+    const container = containerRef.current;
+
+    useLayoutEffect(() => {
+        if (column === null) return;
+        if (headerMenu === undefined || headerMenu === null) {
+            column.setHeaderMenu(null);
+            return;
+        }
+        column.setHeaderMenu(findMenuModel(container));
+    });
+
+    if (headerMenu === undefined || headerMenu === null) return null;
+    return createPortal(headerMenu, container, "header-menu");
+};

package/src/hooks/use-list-model.ts

@@ -0,0 +1,145 @@
+import type * as Gio from "@gtkx/gi/gio";
+import type * as GObject from "@gtkx/gi/gobject";
+import type * as Gtk from "@gtkx/gi/gtk";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import type { ListItem } from "../types.js";
+import {
+    createControlledResolver,
+    createModelResolver,
+    createSectionHeaderResolver,
+    type ItemResolver,
+    type RowValue,
+} from "../utils/item-resolver.js";
+import { detectStructure, type ListStructure, structuralSignature } from "../utils/list-item-flatten.js";
+import {
+    createFlatModel,
+    createSectionModel,
+    createTreeModel,
+    resizeFlatModel,
+    retagRows,
+} from "../utils/position-only-model.js";
+
+export interface ControlledListMode<T, S> {
+    items: ListItem<T, S>[] | undefined;
+    autoexpand?: boolean | undefined;
+    model?: never;
+}
+
+export interface UncontrolledListMode {
+    model: Gio.ListModel;
+    items?: never;
+    autoexpand?: never;
+}
+
+export interface ListModelResult<T, S> {
+    model: Gio.ListModel;
+    resolver: ItemResolver<T, S>;
+    headerResolver: ItemResolver<T, S>;
+}
+
+interface ControlledState<T, S> {
+    model: Gio.ListModel;
+    flatModel: Gtk.StringList | undefined;
+    items: ListItem<T, S>[] | undefined;
+    structure: ListStructure;
+    autoexpand: boolean;
+    signature: string;
+    rowValues: WeakMap<GObject.Object, RowValue<T, S>>;
+    placeholdersById: Map<string, GObject.Object>;
+}
+
+const controlledSignature = <T, S>(
+    structure: ListStructure,
+    autoexpand: boolean,
+    items: ListItem<T, S>[] | undefined,
+): string => (structure === "flat" ? "" : `${structure}|${autoexpand ? 1 : 0}|${structuralSignature(items)}`);
+
+const buildControlledState = <T, S>(
+    items: ListItem<T, S>[] | undefined,
+    autoexpand: boolean,
+    structure: ListStructure,
+    signature: string,
+): ControlledState<T, S> => {
+    const rowValues = new WeakMap<GObject.Object, RowValue<T, S>>();
+    const placeholdersById = new Map<string, GObject.Object>();
+    let model: Gio.ListModel;
+    let flatModel: Gtk.StringList | undefined;
+    if (structure === "sections") {
+        model = createSectionModel(items ?? []);
+    } else if (structure === "tree") {
+        model = createTreeModel(items ?? [], autoexpand, rowValues, placeholdersById);
+    } else {
+        flatModel = createFlatModel(items?.length ?? 0);
+        model = flatModel;
+    }
+    return { model, flatModel, items, structure, autoexpand, signature, rowValues, placeholdersById };
+};
+
+const resolveControlledState = <T, S>(
+    prev: ControlledState<T, S> | null,
+    items: ListItem<T, S>[] | undefined,
+    autoexpand: boolean,
+): ControlledState<T, S> => {
+    if (prev !== null && prev.items === items && prev.autoexpand === autoexpand) return prev;
+    const structure = detectStructure(items);
+    const signature = controlledSignature(structure, autoexpand, items);
+    if (prev === null || prev.structure !== structure) {
+        return buildControlledState(items, autoexpand, structure, signature);
+    }
+    if (structure !== "flat" && prev.signature !== signature) {
+        return buildControlledState(items, autoexpand, structure, signature);
+    }
+    if (structure !== "flat") {
+        retagRows(items ?? [], prev.rowValues, prev.placeholdersById);
+    }
+    prev.items = items;
+    prev.autoexpand = autoexpand;
+    prev.signature = signature;
+    return prev;
+};
+
+const useControlledModel = <T, S>(mode: ControlledListMode<T, S>): ListModelResult<T, S> => {
+    const { items } = mode;
+    const autoexpand = mode.autoexpand ?? false;
+    const stateRef = useRef<ControlledState<T, S> | null>(null);
+    const state = resolveControlledState(stateRef.current, items, autoexpand);
+    stateRef.current = state;
+    const { structure, flatModel } = state;
+
+    useLayoutEffect(() => {
+        if (flatModel !== undefined) {
+            resizeFlatModel(flatModel, items?.length ?? 0);
+        }
+    }, [flatModel, items]);
+
+    const resolver = useMemo(
+        () => createControlledResolver(items, structure !== "flat" && autoexpand, state.rowValues),
+        [items, structure, autoexpand, state.rowValues],
+    );
+
+    const headerResolver = useMemo(
+        () => createSectionHeaderResolver(structure === "sections" ? items : undefined),
+        [items, structure],
+    );
+
+    return { model: state.model, resolver, headerResolver };
+};
+
+const useUncontrolledModel = <T, S>(mode: UncontrolledListMode): ListModelResult<T, S> => {
+    const { model } = mode;
+    const resolver = useMemo<ItemResolver<T, S>>(() => createModelResolver(model), [model]);
+    const headerResolver = useMemo<ItemResolver<T, S>>(() => createSectionHeaderResolver<T, S>(undefined), []);
+    return { model, resolver, headerResolver };
+};
+
+export const useListModel = <T, S>(mode: ControlledListMode<T, S> | UncontrolledListMode): ListModelResult<T, S> => {
+    const controlled = useControlledModel<T, S>(
+        mode.model === undefined ? { items: mode.items, autoexpand: mode.autoexpand } : { items: [] },
+    );
+    const uncontrolled = useUncontrolledModel<T, S>(
+        mode.model === undefined ? { model: EMPTY_MODEL } : { model: mode.model },
+    );
+    return mode.model === undefined ? controlled : uncontrolled;
+};
+
+const EMPTY_MODEL: Gio.ListModel = createFlatModel(0);

package/src/hooks/use-model-installation.ts

@@ -0,0 +1,25 @@
+import type * as Gtk from "@gtkx/gi/gtk";
+import { useTargetRegistration } from "@gtkx/react/internal";
+import { type RefObject, useRef } from "react";
+
+/**
+ * Installs `model` onto the realized GTK widget referenced by `target` through
+ * the `install` callback, re-running whenever the widget or model identity
+ * changes and tolerating the widget being realized after mount.
+ */
+export const useModelInstallation = <W extends Gtk.Widget, M>(
+    target: RefObject<W | null>,
+    model: M,
+    install: (widget: W, model: M) => void,
+): void => {
+    const installRef = useRef(install);
+    installRef.current = install;
+    useTargetRegistration<W, { widget: W; model: M }>(target, {
+        attach: (widget) => {
+            installRef.current(widget, model);
+            return { widget, model };
+        },
+        detach: () => {},
+        isSame: (registration, widget) => registration.widget === widget && registration.model === model,
+    });
+};

package/src/hooks/use-realized-slots.ts

@@ -0,0 +1,93 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import { type GObjectTarget, useTargetRegistration } from "@gtkx/react/internal";
+import { useRef } from "react";
+import { RealizedSlotStore } from "../utils/realized-slot-store.js";
+
+interface ChildContainer {
+    getChild(): Gtk.Widget | null;
+    setChild(child: Gtk.Widget | null): void;
+    getItem(): GObject.Object | null;
+}
+
+const isChildContainer = (container: GObject.Object): container is GObject.Object & ChildContainer =>
+    container instanceof Gtk.ListItem || container instanceof Gtk.ListHeader;
+
+const positionOf = (container: GObject.Object & ChildContainer): number => {
+    if (container instanceof Gtk.ListItem) return container.getPosition();
+    if (container instanceof Gtk.ListHeader) return container.getStart();
+    return -1;
+};
+
+export interface FactoryBinding<W extends GObject.Object> {
+    install(widget: W, factory: Gtk.SignalListItemFactory): void;
+    uninstall(widget: W, factory: Gtk.SignalListItemFactory): void;
+}
+
+export interface RealizedSlotsOptions<W extends GObject.Object> {
+    target: GObjectTarget<W>;
+    binding: FactoryBinding<W>;
+    estimatedHeight?: number | undefined;
+    estimatedWidth?: number | undefined;
+}
+
+export interface RealizedSlots {
+    factory: Gtk.SignalListItemFactory;
+    store: RealizedSlotStore;
+}
+
+const applyEstimatedSize = (child: Gtk.Widget, height: number | undefined, width: number | undefined): void => {
+    if (height === undefined && width === undefined) return;
+    child.setSizeRequest(width ?? -1, height ?? -1);
+};
+
+export const useRealizedSlots = <W extends GObject.Object>(options: RealizedSlotsOptions<W>): RealizedSlots => {
+    const { target, binding, estimatedHeight, estimatedWidth } = options;
+    const storeRef = useRef<RealizedSlotStore | null>(null);
+    if (storeRef.current === null) storeRef.current = new RealizedSlotStore();
+    const store = storeRef.current;
+
+    const bindingRef = useRef(binding);
+    bindingRef.current = binding;
+
+    const factoryRef = useRef<Gtk.SignalListItemFactory | null>(null);
+    if (factoryRef.current === null) {
+        const factory = Gtk.SignalListItemFactory.new();
+        factory.on("setup", (container) => {
+            if (isChildContainer(container) && container.getChild() === null) {
+                const placeholder = new Gtk.Box();
+                applyEstimatedSize(placeholder, estimatedHeight, estimatedWidth);
+                container.setChild(placeholder);
+            }
+            store.addContainer(container);
+        });
+        factory.on("bind", (container) => {
+            if (isChildContainer(container)) {
+                const item = container.getItem();
+                const treeRow = item instanceof Gtk.TreeListRow ? item : null;
+                store.bind(container, positionOf(container), treeRow, item);
+            } else {
+                store.bind(container, -1, null, null);
+            }
+        });
+        factory.on("unbind", (container) => {
+            store.unbind(container);
+        });
+        factory.on("teardown", (container) => {
+            store.removeContainer(container);
+        });
+        factoryRef.current = factory;
+    }
+    const factory = factoryRef.current;
+
+    useTargetRegistration<W, { widget: W }>(target, {
+        attach: (widget) => {
+            bindingRef.current.install(widget, factory);
+            return { widget };
+        },
+        detach: (registration) => bindingRef.current.uninstall(registration.widget, factory),
+        isSame: (registration, widget) => registration.widget === widget,
+    });
+
+    return { factory, store };
+};

package/src/hooks/use-selection-model.ts

@@ -0,0 +1,121 @@
+import type * as Gio from "@gtkx/gi/gio";
+import * as Gtk from "@gtkx/gi/gtk";
+import { useSignal } from "@gtkx/react";
+import { useLayoutEffect, useRef } from "react";
+import type { ItemResolver } from "../utils/item-resolver.js";
+
+export interface SelectionModelOptions<T, S> {
+    base: Gio.ListModel;
+    selectionMode: Gtk.SelectionMode | null | undefined;
+    selected: string[] | null | undefined;
+    onSelectionChanged: ((ids: string[]) => void) | null | undefined;
+    resolver: ItemResolver<T, S>;
+}
+
+type WrappingSelectionModel = (Gtk.SingleSelection | Gtk.MultiSelection | Gtk.NoSelection) & Gtk.SelectionModel;
+
+const createSelectionModel = (mode: Gtk.SelectionMode, base: Gio.ListModel): WrappingSelectionModel => {
+    if (mode === Gtk.SelectionMode.MULTIPLE) return Gtk.MultiSelection.new(base);
+    if (mode === Gtk.SelectionMode.NONE) return Gtk.NoSelection.new(base);
+    return new Gtk.SingleSelection({ model: base, autoselect: false, canUnselect: true });
+};
+
+const bitsetOf = (positions: number[]): Gtk.Bitset => {
+    const bitset = Gtk.Bitset.newEmpty();
+    for (const position of positions) {
+        if (position >= 0) bitset.add(position);
+    }
+    return bitset;
+};
+
+const applySelectedPositions = (model: Gtk.SelectionModel, positions: number[]): void => {
+    if (model instanceof Gtk.MultiSelection) {
+        if (positions.length === 0) {
+            const current = model.getSelection();
+            if (!current.isEmpty()) model.unselectAll();
+            return;
+        }
+        const requested = bitsetOf(positions);
+        const changed = model.getSelection();
+        changed.difference(requested);
+        if (changed.isEmpty()) return;
+        model.setSelection(requested, changed);
+        return;
+    }
+    if (positions.length === 0) {
+        model.unselectAll();
+        return;
+    }
+    const first = positions[0];
+    if (first !== undefined && first >= 0) model.selectItem(first, true);
+};
+
+const readSelectedIds = <T, S>(model: Gtk.SelectionModel, resolver: ItemResolver<T, S>): string[] => {
+    const selection = model.getSelection();
+    const ids: string[] = [];
+    const count = Number(selection.getSize());
+    for (let index = 0; index < count; index++) {
+        const position = selection.getNth(index);
+        const id = resolver.idOf(position);
+        if (id !== undefined) ids.push(id);
+    }
+    return ids;
+};
+
+const idsToPositions = <T, S>(ids: string[] | null | undefined, resolver: ItemResolver<T, S>): number[] => {
+    if (ids === undefined || ids === null) return [];
+    const positions: number[] = [];
+    for (const id of ids) {
+        const position = resolver.positionOf(id);
+        if (position >= 0) positions.push(position);
+    }
+    return positions;
+};
+
+const sameIds = (a: string[], b: string[]): boolean => {
+    if (a.length !== b.length) return false;
+    for (let index = 0; index < a.length; index++) {
+        if (a[index] !== b[index]) return false;
+    }
+    return true;
+};
+
+export const useSelectionModel = <T, S>(options: SelectionModelOptions<T, S>): Gtk.SelectionModel => {
+    const { base, selectionMode, selected, onSelectionChanged, resolver } = options;
+    const mode = selectionMode ?? Gtk.SelectionMode.SINGLE;
+
+    const modelRef = useRef<WrappingSelectionModel | null>(null);
+    const modeRef = useRef<Gtk.SelectionMode | null>(null);
+    if (modelRef.current === null || modeRef.current !== mode) {
+        modelRef.current = createSelectionModel(mode, base);
+        modeRef.current = mode;
+    }
+    const model = modelRef.current;
+
+    const onChangedRef = useRef(onSelectionChanged);
+    onChangedRef.current = onSelectionChanged;
+    const resolverRef = useRef(resolver);
+    resolverRef.current = resolver;
+    const lastReportedRef = useRef<string[] | null>(null);
+
+    const report = (): void => {
+        const callback = onChangedRef.current;
+        if (!callback) return;
+        const ids = readSelectedIds(model, resolverRef.current);
+        if (lastReportedRef.current !== null && sameIds(lastReportedRef.current, ids)) return;
+        lastReportedRef.current = ids;
+        callback(ids);
+    };
+
+    useSignal(model, "selection-changed", report);
+
+    useLayoutEffect(() => {
+        if (model.getModel() !== base) model.setModel(base);
+        if (selected !== undefined && selected !== null) {
+            applySelectedPositions(model, idsToPositions(selected, resolver));
+        }
+        report();
+    }, [model, base, selected, resolver]);
+
+    return model;
+};

package/src/hooks/use-sort-handler.ts

@@ -0,0 +1,102 @@
+import * as Gtk from "@gtkx/gi/gtk";
+import { type GObjectTarget, resolveGobjectTarget } from "@gtkx/react/internal";
+import { useLayoutEffect, useRef } from "react";
+import type { ColumnRegistration } from "../contexts/column-view-context.js";
+
+export interface SortHandlerOptions {
+    columnView: GObjectTarget<Gtk.ColumnView>;
+    sortColumn: string | null | undefined;
+    sortOrder: Gtk.SortType | null | undefined;
+    onSortChanged: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;
+    columns: ColumnRegistration[];
+}
+
+const neutralSorter = (): Gtk.CustomSorter => Gtk.CustomSorter.new(() => 0);
+
+const ensureColumnSorters = (columns: ColumnRegistration[], activeId: string | null): void => {
+    for (const registration of columns) {
+        const wantsSorter = registration.sortable || registration.id === activeId;
+        const hasSorter = registration.column.getSorter() !== null;
+        if (wantsSorter && !hasSorter) {
+            registration.column.setSorter(neutralSorter());
+        } else if (!wantsSorter && hasSorter) {
+            registration.column.setSorter(null);
+        }
+    }
+};
+
+const columnForId = (columns: ColumnRegistration[], id: string | null): Gtk.ColumnViewColumn | null => {
+    if (id === null) return null;
+    for (const registration of columns) {
+        if (registration.id === id) return registration.column;
+    }
+    return null;
+};
+
+const idForColumn = (columns: ColumnRegistration[], column: Gtk.ColumnViewColumn | null): string | null => {
+    if (column === null) return null;
+    for (const registration of columns) {
+        if (registration.column === column) return registration.id;
+    }
+    return column.getId();
+};
+
+const primarySort = (sorter: Gtk.Sorter): { column: Gtk.ColumnViewColumn | null; order: Gtk.SortType } =>
+    sorter instanceof Gtk.ColumnViewSorter
+        ? { column: sorter.getPrimarySortColumn(), order: sorter.getPrimarySortOrder() }
+        : { column: null, order: Gtk.SortType.ASCENDING };
+
+interface SorterSubscription {
+    sorter: Gtk.Sorter | null;
+    handler: ((change: Gtk.SorterChange) => void) | null;
+}
+
+const disconnectSorter = (subscription: SorterSubscription): void => {
+    if (subscription.sorter !== null && subscription.handler !== null) {
+        subscription.sorter.off("changed", subscription.handler);
+    }
+    subscription.sorter = null;
+    subscription.handler = null;
+};
+
+export const useSortHandler = (options: SortHandlerOptions): void => {
+    const { columnView, sortColumn, sortOrder, onSortChanged, columns } = options;
+    const activeId = sortColumn ?? null;
+    const order = sortOrder ?? Gtk.SortType.ASCENDING;
+
+    const onChangedRef = useRef(onSortChanged);
+    onChangedRef.current = onSortChanged;
+    const columnsRef = useRef(columns);
+    columnsRef.current = columns;
+    const suppressRef = useRef(false);
+    const subscriptionRef = useRef<SorterSubscription>({ sorter: null, handler: null });
+
+    const resubscribe = (sorter: Gtk.Sorter | null): void => {
+        const subscription = subscriptionRef.current;
+        if (sorter === subscription.sorter) return;
+        disconnectSorter(subscription);
+        if (sorter === null) return;
+        const handler = (): void => {
+            if (suppressRef.current) return;
+            const callback = onChangedRef.current;
+            if (!callback) return;
+            const { column, order: primaryOrder } = primarySort(sorter);
+            callback(idForColumn(columnsRef.current, column), primaryOrder);
+        };
+        subscription.sorter = sorter;
+        subscription.handler = handler;
+        sorter.on("changed", handler);
+    };
+
+    useLayoutEffect(() => {
+        const view = resolveGobjectTarget(columnView);
+        if (view === null) return;
+        ensureColumnSorters(columns, activeId);
+        suppressRef.current = true;
+        view.sortByColumn(columnForId(columns, activeId), order);
+        suppressRef.current = false;
+        resubscribe(view.getSorter());
+    });
+
+    useLayoutEffect(() => () => disconnectSorter(subscriptionRef.current), []);
+};

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Higher-level GTKX components: declarative, opinionated abstractions layered on
+ * top of the generated `@gtkx/jsx` element bindings and the `@gtkx/react`
+ * runtime. Each component pairs a GObject widget with a gtkx-authored prop
+ * surface (item models, render callbacks, selection, sorting) and is exported
+ * under an unprefixed name to distinguish it from the raw `Gtk*`/`Adw*`/`G*`
+ * intrinsic element it builds upon.
+ *
+ * @packageDocumentation
+ */
+
+export { ColumnView, type ColumnViewComponentProps } from "./column-view.js";
+export { ColumnViewColumn, type ColumnViewColumnComponentProps } from "./column-view-column.js";
+export { ConstraintLayout, type ConstraintLayoutProps } from "./constraint-layout.js";
+export { ComboRow, type ComboRowComponentProps, DropDown, type DropDownComponentProps } from "./drop-down.js";
+export { GridView, type GridViewComponentProps } from "./grid-view.js";
+export { ListView, type ListViewComponentProps } from "./list-view.js";
+export { Menu, type MenuProps } from "./menu.js";
+export type {
+    ColumnViewColumnProps,
+    ColumnViewProps,
+    ConstraintGuideProps,
+    ConstraintProps,
+    ConstraintVflProps,
+    DropDownProps,
+    GridViewProps,
+    ListItem,
+    ListViewProps,
+    MenuEntry,
+    MenuItemsProps,
+} from "./types.js";

package/src/list-portal-host.tsx

@@ -0,0 +1,27 @@
+import { Fragment, type ReactNode, useSyncExternalStore } from "react";
+import { ListSlot, type SlotRenderer } from "./list-slot.js";
+import type { ItemResolver } from "./utils/item-resolver.js";
+import type { RealizedSlotStore } from "./utils/realized-slot-store.js";
+
+export interface ListPortalHostProps<T, S> {
+    store: RealizedSlotStore;
+    resolver: ItemResolver<T, S>;
+    render: SlotRenderer<T, S>;
+}
+
+export const ListPortalHost = <T, S>({ store, resolver, render }: ListPortalHostProps<T, S>): ReactNode => {
+    const containers = useSyncExternalStore(store.subscribeSet, store.getSlotsSnapshot, store.getSlotsSnapshot);
+    return (
+        <Fragment>
+            {containers.map((container) => (
+                <ListSlot
+                    key={store.keyFor(container)}
+                    container={container}
+                    store={store}
+                    resolver={resolver}
+                    render={render}
+                />
+            ))}
+        </Fragment>
+    );
+};

package/src/list-slot.tsx

@@ -0,0 +1,56 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type * as Gtk from "@gtkx/gi/gtk";
+import { GtkTreeExpander } from "@gtkx/jsx/gtk";
+import { createPortal } from "@gtkx/react";
+import { createElement, memo, type ReactNode, useCallback, useSyncExternalStore } from "react";
+import type { ItemResolver } from "./utils/item-resolver.js";
+import type { TreeItemMetadata } from "./utils/list-item-flatten.js";
+import type { RealizedSlotStore, SlotEntry } from "./utils/realized-slot-store.js";
+
+export type SlotRenderer<T, S> = (
+    value: T | S | undefined,
+    treeRow: Gtk.TreeListRow | null,
+    isHeader: boolean,
+) => ReactNode;
+
+export interface ListSlotProps<T, S> {
+    container: GObject.Object;
+    store: RealizedSlotStore;
+    resolver: ItemResolver<T, S>;
+    render: SlotRenderer<T, S>;
+}
+
+const wrapInTreeExpander = (content: ReactNode, treeRow: Gtk.TreeListRow, metadata: TreeItemMetadata): ReactNode =>
+    createElement(
+        GtkTreeExpander,
+        {
+            ref: (expander: Gtk.TreeExpander | null) => {
+                if (expander !== null) expander.setListRow(treeRow);
+            },
+            hideExpander: metadata.hideExpander,
+            indentForDepth: metadata.indentForDepth,
+            indentForIcon: metadata.indentForIcon,
+        },
+        content,
+    );
+
+const SlotImpl = <T, S>({ container, store, resolver, render }: ListSlotProps<T, S>): ReactNode => {
+    const subscribe = useCallback(
+        (onChange: () => void) => store.subscribePosition(container, onChange),
+        [store, container],
+    );
+    const getSnapshot = useCallback((): SlotEntry => store.getPosition(container), [store, container]);
+    const entry = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    if (entry.position < 0) return null;
+    const resolved = resolver.resolve(entry.position, entry.treeRow, entry.item);
+    if (!resolved.present) return null;
+    const content = render(resolved.value, resolved.treeRow, resolved.isHeader);
+    const portalled =
+        resolved.treeRow !== null && !resolved.isHeader
+            ? wrapInTreeExpander(content, resolved.treeRow, resolved.metadata)
+            : content;
+    return createPortal(portalled, container, store.keyFor(container));
+};
+
+export const ListSlot = memo(SlotImpl) as <T, S>(props: ListSlotProps<T, S>) => ReactNode;