@gtkx/components 2.0.0-beta.12 → 2.0.0-beta.13

package/src/internal/use-collection.tsx

@@ -1,6 +1,7 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import type { ReactElement } from "react";
 import { GtkFlattenListModel } from "@gtkx/jsx/gtk";
+import { useLatestRef } from "@gtkx/react/internal";
 import { useLayoutEffect, useMemo, useState } from "react";
 import type { ExpansionProps, ListItem, ListSection, SelectionProps } from "../types.js";
 import type { Collection } from "./collection.js";
@@ -14,6 +15,7 @@ type CollectionDataOptions = {
     items?: ListItem[] | undefined;
     sections?: ListSection[] | undefined;
     isFlat?: boolean | undefined;
+    onSectionsFilled?: (() => void) | undefined;
 };
 
 type CollectionOptions = CollectionDataOptions & SelectionProps & ExpansionProps;
@@ -44,9 +46,13 @@ function useCollectionData(options: CollectionDataOptions): CollectionDataResult
         return gtkModel.clear;
     }, [gtkModel, root, model]);
 
+    const onSectionsFilled = useLatestRef(options.onSectionsFilled);
+
     useLayoutEffect(() => {
-        gtkModel.sync(index);
-    }, [gtkModel, index, root, model]);
+        gtkModel.sync(index, () => {
+            onSectionsFilled.current?.();
+        });
+    }, [gtkModel, index, root, model, onSectionsFilled]);
 
     return {
         collection,

package/src/list-item-factory.tsx

@@ -10,6 +10,7 @@ import { NativeItemPortals, useItemCells } from "./internal/cells.js";
  */
 function ListItemFactory<T extends GObject.Object>({
     renderItem,
+    rowProps,
     estimatedItemHeight = -1,
     estimatedItemWidth = -1,
 }: ListItemFactoryProps<T>): ReactNode {
@@ -19,7 +20,7 @@ function ListItemFactory<T extends GObject.Object>({
     return (
         <>
             <GtkSignalListItemFactory {...cells.handlers} />
-            <NativeItemPortals registry={cells} render={renderItem} size={size} />
+            <NativeItemPortals registry={cells} render={renderItem} rowProps={rowProps} size={size} />
         </>
     );
 }

package/src/list-view.tsx

@@ -1,9 +1,12 @@
+import type * as Gtk from "@gtkx/gi/gtk";
 import type { ReactNode } from "react";
 import { GtkListView, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
 import { omit } from "@gtkx/utils";
 import type { ListViewProps } from "./types.js";
 import { ItemPortals, useItemCells, useSectionHeader } from "./internal/cells.js";
+import { showFirstHeader } from "./internal/first-header.js";
 import { useCollection } from "./internal/use-collection.js";
+import { useWidgetRef } from "./internal/use-widget-ref.js";
 
 const LIST_VIEW_PROPS = [
     "items",
@@ -11,6 +14,7 @@ const LIST_VIEW_PROPS = [
     "isFlat",
     "renderItem",
     "renderHeader",
+    "rowProps",
     "selectedIds",
     "onSelectionChanged",
     "selectionMode",
@@ -19,6 +23,7 @@ const LIST_VIEW_PROPS = [
     "expanderDescriptions",
     "estimatedItemHeight",
     "estimatedItemWidth",
+    "ref",
 ] as const satisfies (keyof ListViewProps)[];
 
 /**
@@ -26,17 +31,19 @@ const LIST_VIEW_PROPS = [
  * controlled selection, controlled tree expansion, and estimated item sizing.
  */
 function ListView<T = unknown, S = unknown>(props: ListViewProps<T, S>): ReactNode {
-    const { renderItem, renderHeader, expandedIds, expanderDescriptions } = props;
+    const { renderItem, renderHeader, rowProps, expandedIds, expanderDescriptions, ref } = props;
     const { estimatedItemHeight, estimatedItemWidth } = props;
     const rest = omit(props, LIST_VIEW_PROPS);
     const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };
-    const { collection, selection } = useCollection(props);
+    const [view, refCallback] = useWidgetRef<Gtk.ListView>(ref);
+    const { collection, selection } = useCollection({ ...props, onSectionsFilled: () => showFirstHeader(view) });
     const itemCells = useItemCells(size);
     const header = useSectionHeader(renderHeader, collection, size);
 
     return (
         <>
             <GtkListView
+                ref={refCallback}
                 model={selection}
                 factory={<GtkSignalListItemFactory {...itemCells.handlers} />}
                 {...header.factoryProps}
@@ -45,6 +52,7 @@ function ListView<T = unknown, S = unknown>(props: ListViewProps<T, S>): ReactNo
             <ItemPortals
                 registry={itemCells}
                 render={renderItem}
+                rowProps={rowProps}
                 collection={collection}
                 expandedIds={expandedIds}
                 expanderDescriptions={expanderDescriptions}

package/src/types.ts

@@ -1,7 +1,7 @@
 import type * as Adw from "@gtkx/gi/adw";
 import type * as GObject from "@gtkx/gi/gobject";
 import type * as Gtk from "@gtkx/gi/gtk";
-import type { AdwComboRowProps, AdwTabPageProps, AdwToastProps } from "@gtkx/jsx/adw";
+import type { AdwComboRowProps, AdwToastProps } from "@gtkx/jsx/adw";
 import type {
     GtkColumnViewColumnProps,
     GtkColumnViewProps,
@@ -17,7 +17,10 @@ import type { ReactNode, RefObject } from "react";
  * arbitrary value. Nested items form a tree.
  */
 type ListItem<T = unknown> = {
-    /** Stable identifier, unique across the collection, used to preserve identity across updates and selection. */
+    /**
+     * Stable identifier that names the item in selection and expansion, so keep it unique across the collection.
+     * A row keeps its component state while its id stays among the same siblings.
+     */
     id: string;
     /** Payload handed to the cell renderer as `ListItemRenderArgs.item`. */
     value: T;
@@ -45,7 +48,10 @@ type ListSection<S = unknown, T = unknown> = {
 type ListItemRenderArgs<T> = {
     /** Value of the `ListItem` being rendered. */
     item: T;
-    /** Position of the item in the flattened item list, which excludes section headers and collapsed tree rows. */
+    /**
+     * Position of the item in the flattened item list, which excludes section headers and collapsed tree rows.
+     * A drop-down popup filtered by `enableSearch` still passes this position, not the row's place in the results.
+     */
     index: number;
     /** Depth of the item within a tree, starting at zero for top-level items. */
     depth?: number | undefined;
@@ -54,9 +60,10 @@ type ListItemRenderArgs<T> = {
 };
 
 /**
- * Properties applied to the row that carries one item's cells. A Gtk.ColumnViewRow is not a widget, so
- * these are the only handles it offers; anything omitted falls back to the row's own default, which
- * leaves the accessibility strings unset rather than setting them to an empty string.
+ * Properties applied to the row that carries one item: the Gtk.ListItem of a list or grid, or the
+ * Gtk.ColumnViewRow of a table. Neither is a widget, so these are the only handles they offer; anything
+ * omitted falls back to the row's own default, which leaves the accessibility strings unset rather than
+ * setting them to an empty string.
  */
 type ListRowProps = {
     /** Name a screen reader announces for the row, through `accessible-label`. */
@@ -94,6 +101,14 @@ type ItemSizeProps = {
 
 type ListItemFactoryProps<T extends GObject.Object> = ItemSizeProps & {
     renderItem: ListItemRenderer<T>;
+    /** Resolves the props of the row carrying one model object, such as its screen-reader label. */
+    rowProps?: ListRowPropsResolver<T> | null | undefined;
+};
+
+/** Per-row properties shared by the collection views. */
+type RowPropsProps<T> = {
+    /** Resolves the props of the row carrying one item, such as its screen-reader label. */
+    rowProps?: ListRowPropsResolver<T> | null | undefined;
 };
 
 /** The flat-collection hint shared by {@link ListView} and {@link ColumnView}. */
@@ -113,7 +128,10 @@ type SelectionProps = {
      * user's selection is adopted into it.
      */
     selectedIds?: string[] | null | undefined;
-    /** Called with one id per selected row whenever the selection changes, and once on mount. */
+    /**
+     * Called with one id per selected row when the user or the widget changes the selection, or when an item
+     * `selectedIds` names is not in the collection; a `selectedIds` change is not reported back.
+     */
     onSelectionChanged?: ((ids: string[]) => void) | null | undefined;
     /** How much the user may select, one item at a time unless `MULTIPLE` or `NONE` is given. */
     selectionMode?: Gtk.SelectionMode | null | undefined;
@@ -138,7 +156,10 @@ type ExpansionProps = {
      * user's expansion is adopted into it.
      */
     expandedIds?: string[] | null | undefined;
-    /** Called with one id per expanded row, in visible order, whenever expansion changes. */
+    /**
+     * Called with one id per expanded row, in visible order, when the user or the widget changes expansion, or
+     * when a row `expandedIds` names cannot expand; an `expandedIds` change is not reported back.
+     */
     onExpandedChange?: ((ids: string[]) => void) | null | undefined;
     /**
      * Wording announced for the expander of every row that can expand, describing what activating it does.
@@ -182,6 +203,11 @@ type ColumnViewColumn<T = unknown> = Omit<GtkColumnViewColumnProps, "factory" |
     renderCell: ListItemRenderer<T>;
     /** Makes the column header clickable, reporting the choice through `onSortChanged`. */
     isSortable?: boolean | undefined;
+    /**
+     * Draws the tree expander and depth indentation in this column. Without a visible column marked this way,
+     * the first visible column draws them.
+     */
+    hasExpander?: boolean | undefined;
     /** Menu element popped up as the column header's context menu, on a right-click. */
     headerMenu?: ReactNode;
 };
@@ -192,11 +218,10 @@ type ColumnViewOwnProps<T, S> = SelectionProps &
     SortProps &
     SourceProps<T, S> &
     FlatnessProps &
+    RowPropsProps<T> &
     Omit<ItemSizeProps, "estimatedItemWidth"> & {
         /** Columns to render, in order; each carries its own cell renderer. */
         columns: ColumnViewColumn<T>[];
-        /** Resolves the props of the row carrying one item's cells, such as its screen-reader label. */
-        rowProps?: ListRowPropsResolver<T> | null | undefined;
     };
 
 /**
@@ -235,7 +260,8 @@ type DropDownProps<T = unknown, S = unknown> = DropDownWidgetProps<GtkDropDownPr
 
 /** The declarative collection props {@link GridView} adds on top of Gtk.GridView's own. */
 type GridViewOwnProps<T> = ItemSizeProps &
-    SelectionProps & {
+    SelectionProps &
+    RowPropsProps<T> & {
         /** Items to render as cells; a grid is always flat, so `ListItem.children` is ignored. */
         items?: ListItem<T>[] | undefined;
         /** Renders the contents of one cell. */
@@ -253,7 +279,8 @@ type ListViewOwnProps<T, S> = ItemSizeProps &
     SelectionProps &
     ExpansionProps &
     SourceProps<T, S> &
-    FlatnessProps & {
+    FlatnessProps &
+    RowPropsProps<T> & {
         /** Renders the contents of one row. */
         renderItem: ListItemRenderer<T>;
     };
@@ -294,42 +321,6 @@ type ToastProviderProps = {
     children?: ReactNode | undefined;
 };
 
-/** Describes the JSX page rendered for each value in a {@link TabCollection}. */
-type TabCollectionOptions<T> = {
-    /** Native page props and JSX content. Call getPage in event handlers to access the mounted page. The collection owns its ref and parent relationship. */
-    pageProps: (item: T, getPage: () => Adw.TabPage | null) => Omit<AdwTabPageProps, "ref" | "parent">;
-};
-
-/** Options for adding a page to a {@link TabCollection}. */
-type TabAppendOptions = {
-    /** Inserts a related page after this parent and its descendants, using native tab ancestry. */
-    parent?: Adw.TabPage | undefined;
-    /** Selects the new page by default. */
-    select?: boolean | undefined;
-};
-
-/**
- * Owns independent JSX tab roots across native view transfers. Its lifetime can span several windows.
- * Remove a page after accepting its native close request, remove a view's pages before destroying that
- * view, and dispose the collection when its owner is finished.
- */
-type TabCollection<T> = {
-    /** Renders synchronously and returns the native page, including from an overview's create-tab handler. */
-    append: (view: Adw.TabView, item: T, options?: TabAppendOptions) => Adw.TabPage;
-    /** Returns a managed page's current value, or undefined for an unmanaged page. */
-    get: (page: Adw.TabPage) => T | undefined;
-    /** Updates the value and rerenders the existing JSX root, preserving component state and native identity. */
-    update: (page: Adw.TabPage, item: T) => void;
-    /** Unmounts a managed page from its current native owner; already removed pages are ignored. */
-    remove: (page: Adw.TabPage) => void;
-    /** Unmounts this collection's pages currently belonging to the given view, including transferred pages. */
-    removeView: (view: Adw.TabView) => void;
-    /** Moves a managed page to another view, appending within its pinned or unpinned group by default. */
-    transfer: (page: Adw.TabPage, target: Adw.TabView, position?: number) => void;
-    /** Unmounts every managed page. The collection may subsequently be reused. */
-    dispose: () => void;
-};
-
 export {
     type SelectionProps,
     type ExpanderDescriptions,
@@ -354,7 +345,4 @@ export {
     type ToastOptions,
     type ToastController,
     type ToastProviderProps,
-    type TabAppendOptions,
-    type TabCollection,
-    type TabCollectionOptions,
 };

package/dist/tab-collection.d.ts

@@ -1,9 +0,0 @@
-import type { TabCollection, TabCollectionOptions } from "./types.js";
-/**
- * Creates a collection of JSX pages whose React state survives native transfers and source-window
- * closure. Call append from an event handler because it commits synchronously. Page content lives in
- * independent roots: pass context-dependent values through the item or wrap the content in providers.
- */
-declare const createTabCollection: <T>(options: TabCollectionOptions<T>) => TabCollection<T>;
-export { createTabCollection };
-//# sourceMappingURL=tab-collection.d.ts.map

package/dist/tab-collection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-collection.d.ts","sourceRoot":"","sources":["../src/tab-collection.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AA6BtE;;;;GAIG;AACH,QAAA,MAAM,mBAAmB,GAAI,CAAC,WAAY,oBAAoB,CAAC,CAAC,CAAC,KAAG,aAAa,CAAC,CAAC,CAkFlF,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/tab-collection.js

@@ -1,114 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Adw from "@gtkx/gi/adw";
-import { AdwTabPage } from "@gtkx/jsx/adw";
-import { createRoot, flushSync } from "@gtkx/react";
-import { getClassType } from "@gtkx/runtime";
-import { createRef, useEffect } from "react";
-const ManagedTab = ({ handle, item, options, forget }) => {
-    const { page: pageRef, parent, getPage } = handle;
-    useEffect(() => () => forget(handle), [handle, forget]);
-    return _jsx(AdwTabPage, { ...options.pageProps(item, getPage), ref: pageRef, parent: parent });
-};
-const ownerOf = (page) => {
-    const owner = page.getChild().getAncestor(getClassType(Adw.TabView));
-    if (!(owner instanceof Adw.TabView))
-        throw new Error("The tab has no native view");
-    return owner;
-};
-/**
- * Creates a collection of JSX pages whose React state survives native transfers and source-window
- * closure. Call append from an event handler because it commits synchronously. Page content lives in
- * independent roots: pass context-dependent values through the item or wrap the content in providers.
- */
-const createTabCollection = (options) => {
-    const handles = new Set();
-    const forget = (handle) => {
-        handles.delete(handle);
-    };
-    const find = (page) => [...handles].find((handle) => handle.page.current === page);
-    const render = (handle) => {
-        handle.root.render(_jsx(ManagedTab, { handle: handle, item: handle.item, options: options, forget: forget }));
-    };
-    const remove = (handle) => {
-        handles.delete(handle);
-        handle.root.unmount();
-    };
-    return {
-        append: (view, item, appendOptions = {}) => {
-            if (appendOptions.parent && ownerOf(appendOptions.parent) !== view) {
-                throw new RangeError("The parent page belongs to another tab view");
-            }
-            const pageRef = createRef();
-            const handle = {
-                root: createRoot(view),
-                page: pageRef,
-                getPage: () => pageRef.current,
-                parent: appendOptions.parent,
-                item,
-            };
-            handles.add(handle);
-            try {
-                flushSync(() => render(handle));
-            }
-            catch (error) {
-                remove(handle);
-                throw error;
-            }
-            const page = handle.page.current;
-            if (page === null) {
-                remove(handle);
-                throw new Error("The tab page did not render");
-            }
-            if (appendOptions.parent === undefined) {
-                view.reorderPage(page, page.getPinned() ? view.getNPinnedPages() - 1 : view.getNPages() - 1);
-            }
-            if (appendOptions.select !== false)
-                view.setSelectedPage(page);
-            return page;
-        },
-        get: (page) => find(page)?.item,
-        update: (page, item) => {
-            const handle = find(page);
-            if (handle === undefined)
-                throw new Error("The tab is not managed by this collection");
-            handle.item = item;
-            render(handle);
-        },
-        remove: (page) => {
-            const handle = find(page);
-            if (handle)
-                remove(handle);
-        },
-        removeView: (view) => {
-            const pages = Array.from({ length: view.getNPages() }, (_, index) => view.getNthPage(index));
-            for (const page of pages) {
-                const handle = find(page);
-                if (handle)
-                    remove(handle);
-            }
-        },
-        transfer: (page, target, position) => {
-            if (find(page) === undefined)
-                throw new Error("The tab is not managed by this collection");
-            const source = ownerOf(page);
-            const minimum = page.getPinned() ? 0 : target.getNPinnedPages();
-            const maximum = page.getPinned() ? target.getNPinnedPages() : target.getNPages();
-            const index = position ?? maximum;
-            if (!Number.isInteger(index) || index < minimum || index > maximum) {
-                throw new RangeError("The position is outside the tab's pinned or unpinned group");
-            }
-            if (source === target) {
-                target.reorderPage(page, Math.min(index, maximum - 1));
-            }
-            else {
-                source.transferPage(page, target, index);
-            }
-        },
-        dispose: () => {
-            for (const handle of [...handles])
-                remove(handle);
-        },
-    };
-};
-export { createTabCollection };
-//# sourceMappingURL=tab-collection.js.map

package/dist/tab-collection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-collection.js","sourceRoot":"","sources":["../src/tab-collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as Adw from \"@gtkx/gi/adw\";\nimport { AdwTabPage } from \"@gtkx/jsx/adw\";\nimport { createRoot, flushSync, type Root } from \"@gtkx/react\";\nimport { getClassType } from \"@gtkx/runtime\";\nimport { createRef, type RefObject, useEffect } from \"react\";\nimport type { TabCollection, TabCollectionOptions } from \"./types.js\";\n\ntype TabHandle<T> = {\n    root: Root;\n    page: RefObject<Adw.TabPage | null>;\n    getPage: () => Adw.TabPage | null;\n    parent: Adw.TabPage | undefined;\n    item: T;\n};\n\ntype ManagedTabProps<T> = {\n    handle: TabHandle<T>;\n    item: T;\n    options: TabCollectionOptions<T>;\n    forget: (handle: TabHandle<T>) => void;\n};\n\nconst ManagedTab = <T,>({ handle, item, options, forget }: ManagedTabProps<T>) => {\n    const { page: pageRef, parent, getPage } = handle;\n    useEffect(() => () => forget(handle), [handle, forget]);\n    return <AdwTabPage {...options.pageProps(item, getPage)} ref={pageRef} parent={parent} />;\n};\n\nconst ownerOf = (page: Adw.TabPage): Adw.TabView => {\n    const owner = page.getChild().getAncestor(getClassType(Adw.TabView));\n    if (!(owner instanceof Adw.TabView)) throw new Error(\"The tab has no native view\");\n    return owner;\n};\n\n/**\n * Creates a collection of JSX pages whose React state survives native transfers and source-window\n * closure. Call append from an event handler because it commits synchronously. Page content lives in\n * independent roots: pass context-dependent values through the item or wrap the content in providers.\n */\nconst createTabCollection = <T,>(options: TabCollectionOptions<T>): TabCollection<T> => {\n    const handles = new Set<TabHandle<T>>();\n    const forget = (handle: TabHandle<T>) => {\n        handles.delete(handle);\n    };\n    const find = (page: Adw.TabPage) => [...handles].find((handle) => handle.page.current === page);\n    const render = (handle: TabHandle<T>) => {\n        handle.root.render(<ManagedTab handle={handle} item={handle.item} options={options} forget={forget} />);\n    };\n    const remove = (handle: TabHandle<T>) => {\n        handles.delete(handle);\n        handle.root.unmount();\n    };\n\n    return {\n        append: (view, item, appendOptions = {}) => {\n            if (appendOptions.parent && ownerOf(appendOptions.parent) !== view) {\n                throw new RangeError(\"The parent page belongs to another tab view\");\n            }\n            const pageRef = createRef<Adw.TabPage>();\n            const handle: TabHandle<T> = {\n                root: createRoot(view),\n                page: pageRef,\n                getPage: () => pageRef.current,\n                parent: appendOptions.parent,\n                item,\n            };\n            handles.add(handle);\n            try {\n                flushSync(() => render(handle));\n            } catch (error) {\n                remove(handle);\n                throw error;\n            }\n            const page = handle.page.current;\n            if (page === null) {\n                remove(handle);\n                throw new Error(\"The tab page did not render\");\n            }\n            if (appendOptions.parent === undefined) {\n                view.reorderPage(page, page.getPinned() ? view.getNPinnedPages() - 1 : view.getNPages() - 1);\n            }\n            if (appendOptions.select !== false) view.setSelectedPage(page);\n            return page;\n        },\n        get: (page) => find(page)?.item,\n        update: (page, item) => {\n            const handle = find(page);\n            if (handle === undefined) throw new Error(\"The tab is not managed by this collection\");\n            handle.item = item;\n            render(handle);\n        },\n        remove: (page) => {\n            const handle = find(page);\n            if (handle) remove(handle);\n        },\n        removeView: (view) => {\n            const pages = Array.from({ length: view.getNPages() }, (_, index) => view.getNthPage(index));\n            for (const page of pages) {\n                const handle = find(page);\n                if (handle) remove(handle);\n            }\n        },\n        transfer: (page, target, position) => {\n            if (find(page) === undefined) throw new Error(\"The tab is not managed by this collection\");\n            const source = ownerOf(page);\n            const minimum = page.getPinned() ? 0 : target.getNPinnedPages();\n            const maximum = page.getPinned() ? target.getNPinnedPages() : target.getNPages();\n            const index = position ?? maximum;\n            if (!Number.isInteger(index) || index < minimum || index > maximum) {\n                throw new RangeError(\"The position is outside the tab's pinned or unpinned group\");\n            }\n            if (source === target) {\n                target.reorderPage(page, Math.min(index, maximum - 1));\n            } else {\n                source.transferPage(page, target, index);\n            }\n        },\n        dispose: () => {\n            for (const handle of [...handles]) remove(handle);\n        },\n    };\n};\n\nexport { createTabCollection };\n"]}

package/src/tab-collection.tsx

@@ -1,124 +0,0 @@
-import * as Adw from "@gtkx/gi/adw";
-import { AdwTabPage } from "@gtkx/jsx/adw";
-import { createRoot, flushSync, type Root } from "@gtkx/react";
-import { getClassType } from "@gtkx/runtime";
-import { createRef, type RefObject, useEffect } from "react";
-import type { TabCollection, TabCollectionOptions } from "./types.js";
-
-type TabHandle<T> = {
-    root: Root;
-    page: RefObject<Adw.TabPage | null>;
-    getPage: () => Adw.TabPage | null;
-    parent: Adw.TabPage | undefined;
-    item: T;
-};
-
-type ManagedTabProps<T> = {
-    handle: TabHandle<T>;
-    item: T;
-    options: TabCollectionOptions<T>;
-    forget: (handle: TabHandle<T>) => void;
-};
-
-const ManagedTab = <T,>({ handle, item, options, forget }: ManagedTabProps<T>) => {
-    const { page: pageRef, parent, getPage } = handle;
-    useEffect(() => () => forget(handle), [handle, forget]);
-    return <AdwTabPage {...options.pageProps(item, getPage)} ref={pageRef} parent={parent} />;
-};
-
-const ownerOf = (page: Adw.TabPage): Adw.TabView => {
-    const owner = page.getChild().getAncestor(getClassType(Adw.TabView));
-    if (!(owner instanceof Adw.TabView)) throw new Error("The tab has no native view");
-    return owner;
-};
-
-/**
- * Creates a collection of JSX pages whose React state survives native transfers and source-window
- * closure. Call append from an event handler because it commits synchronously. Page content lives in
- * independent roots: pass context-dependent values through the item or wrap the content in providers.
- */
-const createTabCollection = <T,>(options: TabCollectionOptions<T>): TabCollection<T> => {
-    const handles = new Set<TabHandle<T>>();
-    const forget = (handle: TabHandle<T>) => {
-        handles.delete(handle);
-    };
-    const find = (page: Adw.TabPage) => [...handles].find((handle) => handle.page.current === page);
-    const render = (handle: TabHandle<T>) => {
-        handle.root.render(<ManagedTab handle={handle} item={handle.item} options={options} forget={forget} />);
-    };
-    const remove = (handle: TabHandle<T>) => {
-        handles.delete(handle);
-        handle.root.unmount();
-    };
-
-    return {
-        append: (view, item, appendOptions = {}) => {
-            if (appendOptions.parent && ownerOf(appendOptions.parent) !== view) {
-                throw new RangeError("The parent page belongs to another tab view");
-            }
-            const pageRef = createRef<Adw.TabPage>();
-            const handle: TabHandle<T> = {
-                root: createRoot(view),
-                page: pageRef,
-                getPage: () => pageRef.current,
-                parent: appendOptions.parent,
-                item,
-            };
-            handles.add(handle);
-            try {
-                flushSync(() => render(handle));
-            } catch (error) {
-                remove(handle);
-                throw error;
-            }
-            const page = handle.page.current;
-            if (page === null) {
-                remove(handle);
-                throw new Error("The tab page did not render");
-            }
-            if (appendOptions.parent === undefined) {
-                view.reorderPage(page, page.getPinned() ? view.getNPinnedPages() - 1 : view.getNPages() - 1);
-            }
-            if (appendOptions.select !== false) view.setSelectedPage(page);
-            return page;
-        },
-        get: (page) => find(page)?.item,
-        update: (page, item) => {
-            const handle = find(page);
-            if (handle === undefined) throw new Error("The tab is not managed by this collection");
-            handle.item = item;
-            render(handle);
-        },
-        remove: (page) => {
-            const handle = find(page);
-            if (handle) remove(handle);
-        },
-        removeView: (view) => {
-            const pages = Array.from({ length: view.getNPages() }, (_, index) => view.getNthPage(index));
-            for (const page of pages) {
-                const handle = find(page);
-                if (handle) remove(handle);
-            }
-        },
-        transfer: (page, target, position) => {
-            if (find(page) === undefined) throw new Error("The tab is not managed by this collection");
-            const source = ownerOf(page);
-            const minimum = page.getPinned() ? 0 : target.getNPinnedPages();
-            const maximum = page.getPinned() ? target.getNPinnedPages() : target.getNPages();
-            const index = position ?? maximum;
-            if (!Number.isInteger(index) || index < minimum || index > maximum) {
-                throw new RangeError("The position is outside the tab's pinned or unpinned group");
-            }
-            if (source === target) {
-                target.reorderPage(page, Math.min(index, maximum - 1));
-            } else {
-                source.transferPage(page, target, index);
-            }
-        },
-        dispose: () => {
-            for (const handle of [...handles]) remove(handle);
-        },
-    };
-};
-
-export { createTabCollection };