@gtkx/components 2.0.0-beta.10 → 2.0.0-beta.11

package/README.md

@@ -1,177 +1,17 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/logo.svg" alt="GTKX" width="100" />
-</p>
+# @gtkx/components
 
-<h1 align="center">GTKX</h1>
+Collection views, selection controls, and toasts for GTKX.
 
-<p align="center">
-  The React framework for Linux.<br />
-  Write native GNOME applications with React and TypeScript.
-  Real Adwaita and GTK4 widgets with standard web tooling.
-</p>
+Use `ListView`, `GridView`, and `ColumnView` with React data and render functions. The package also provides dropdowns, combo rows, and `useToast` for notifications within an application window.
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/v/create-gtkx?color=cb3837&logo=npm&label=create-gtkx" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/dm/create-gtkx?color=cb3837&logo=npm&label=downloads" alt="npm downloads" /></a>
-  <img src="https://img.shields.io/badge/node-%E2%89%A526.7-339933?logo=node.js&logoColor=white" alt="Node >= 26.7" />
-  <a href="https://github.com/gtkx-org/gtkx/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MPL--2.0-blue.svg" alt="License: MPL-2.0" /></a>
-  <a href="https://github.com/gtkx-org/gtkx/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/gtkx-org/gtkx/ci.yml?branch=main&logo=github&label=CI" alt="CI status" /></a>
-  <img src="https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
-</p>
-
-<p align="center">
-  <a href="https://gtkx.dev">Homepage</a> &middot;
-  <a href="https://gtkx.dev/guide/getting-started">Documentation</a> &middot;
-  <a href="https://github.com/gtkx-org/gtkx/tree/main/examples">Examples</a> &middot;
-  <a href="https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md">Contributing</a>
-</p>
-
----
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/examples/tutorial/assets/screenshot.png" alt="The Tasks app: an Adwaita window with a sidebar of smart views and colored lists on the left, and a boxed task list on the right." />
-</p>
-
-<p align="center">
-  <em>The Tasks app you build in the <a href="https://gtkx.dev/tutorial/">tutorial</a>.</em>
-</p>
-
-## Demo
-
-This app starts with an Adwaita application shell, renders native GTK4 widgets inside it, and uses ordinary React hooks and events:
-
-```tsx
-import * as Gtk from "@gtkx/gi/gtk";
-import { AdwApplication, AdwApplicationWindow, AdwHeaderBar, AdwToolbarView } from "@gtkx/jsx/adw";
-import { GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
-import { createRoot, quit } from "@gtkx/react";
-import { useState } from "react";
-
-const Counter = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <AdwApplicationWindow
-      title="Hello GTKX"
-      defaultWidth={400}
-      defaultHeight={300}
-      onCloseRequest={quit}
-    >
-      <AdwToolbarView topBar={<AdwHeaderBar />}>
-        <GtkBox
-          orientation={Gtk.Orientation.VERTICAL}
-          spacing={20}
-          marginTop={40}
-          marginBottom={40}
-          marginStart={40}
-          marginEnd={40}
-          valign={Gtk.Align.CENTER}
-          halign={Gtk.Align.CENTER}
-        >
-          <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
-          <GtkLabel cssClasses={["title-2"]}>{`Count: ${String(count)}`}</GtkLabel>
-          <GtkButton
-            label="Increment"
-            onClicked={() => setCount((c) => c + 1)}
-            cssClasses={["suggested-action", "pill"]}
-          />
-        </GtkBox>
-      </AdwToolbarView>
-    </AdwApplicationWindow>
-  );
-};
-
-const App = () => (
-  <AdwApplication>
-    <Counter />
-  </AdwApplication>
-);
-
-createRoot().render(<App />);
-```
-
-This is the [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world) example, with `app.tsx` and `index.tsx` combined into a single snippet. `@gtkx/gi` and `@gtkx/jsx` are per-project bindings generated by the CLI, not packages you install from npm.
-
-## Why GTKX
-
-### Adwaita-first application development
-
-GTKX uses Adwaita as the foundation for applications, windows, navigation, dialogs, and adaptive layouts, with the complete GTK4 toolkit underneath. It adds a declarative React layer and an integrated TypeScript toolchain to the GNOME platform:
-
-- a React reconciler that exposes every GObject as a JSX element,
-- a CLI for scaffolding, development, and production builds,
-- a dev server with Fast Refresh that patches your running UI in place,
-- CSS-in-JS styling, React Hook Form-powered Adwaita controls, gettext-backed react-i18next localization, React Spring animations, React Navigation stack, tab, drawer, and split view navigators, and high-level list, grid, and dialog components,
-- a Testing Library-style API for querying and driving your widgets in tests,
-- and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
-
-### Native GNOME widgets, without a compatibility layer
-
-React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX renders real Adwaita and GTK4 widgets and exposes any other GObject-Introspection library on your system. It is GNOME-native and Linux-only by design.
-
-### Why Node.js, and why generated bindings
-
-GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [Why GTKX guide](https://gtkx.dev/guide/why-gtkx) covers what running on Node.js means day to day.
-
-GTKX generates the TypeScript types and native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. `Adw-1` is the sole default GIR root; its GIR include pulls in `Gtk-4.0`, so codegen covers both complete API surfaces. Neither belongs in a GTKX 2 `libraries` list.
-
-At runtime, the native Rust core calls straight into the system Adwaita, GTK4, and GLib libraries through libffi, without loading libgirepository at all.
-
-## Quick start
-
-GTKX is Linux-only and needs Node.js 26.7 or later. See [Requirements](#requirements).
-
-Scaffold a new app with the `create-gtkx` initializer:
+In an existing GTKX 2.0 beta app:
 
 ```sh
-npm create gtkx@beta
+npm install @gtkx/components@beta
 ```
 
-The same command works with other package managers: `pnpm create gtkx@beta` or `yarn create gtkx@beta`.
-
-Then run your new app:
-
-```sh
-cd my-app
-npm run dev
-```
-
-To go further, follow the [tutorial](https://gtkx.dev/tutorial/).
-
-## Documentation
-
-The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tutorial that builds a complete GNOME app, from scaffolding to packaging and shipping, plus guides and a full API reference.
-
-**[Read the docs &rarr;](https://gtkx.dev/guide/why-gtkx)**
-
-## Requirements
-
-GTKX is Linux-only. You need:
-
-- Linux with the Adwaita (1.8 or later), GTK4 (4.20 or later), and GLib development libraries
-- Node.js 26.7 or later
-
-The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other targets need to build it from the GTKX repository, which requires a Rust toolchain.
-
-## Examples
-
-Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
-
-- [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the Adwaita counter above.
-- [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): the official GTK4 widget showcase in an Adwaita application shell, covering lists, dialogs, gestures, CSS, and OpenGL.
-- [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): an Adwaita browser built around `WebKitWebView`.
-- [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): an Adwaita showcase for `@gtkx/animated`, with React Spring animations driven by the GTK frame clock.
-- [`navigation`](https://github.com/gtkx-org/gtkx/tree/main/examples/navigation): a tour of `@gtkx/navigation`, React Navigation's stack, tab, and drawer navigators rendered with libadwaita.
-- [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.
-
-## Status
-
-GTKX is stable and ready for production use.
-
-## Contributing
-
-Contributions are welcome. See [CONTRIBUTING.md](https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md), the [Code of Conduct](https://github.com/gtkx-org/gtkx/blob/main/CODE_OF_CONDUCT.md), and the [security policy](https://github.com/gtkx-org/gtkx/blob/main/SECURITY.md). Building the repo needs Node.js 26.7 or later, pnpm, and a Rust toolchain.
+[Guide](https://gtkx.dev/v2/guide/components) · [API reference](https://gtkx.dev/v2/reference/@gtkx/components/) · [GTKX](https://gtkx.dev)
 
-## License
+GTKX runs on Linux with Node.js and system native libraries. See [Getting Started](https://gtkx.dev/v2/guide/getting-started) for supported versions and installation. This README describes the 2.0 beta.
 
-GTKX is licensed under [MPL-2.0](https://github.com/gtkx-org/gtkx/blob/main/LICENSE).
+[MPL-2.0](https://github.com/gtkx-org/gtkx/blob/main/LICENSE).

package/dist/column-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAQlD,OAAO,KAAK,EAAoB,eAAe,EAAmC,MAAM,YAAY,CAAC;AAiLrG;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAiCrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAQlD,OAAO,KAAK,EAAoB,eAAe,EAAmC,MAAM,YAAY,CAAC;AA4LrG;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAiCrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/column-view.js

@@ -3,8 +3,9 @@ import * as Gtk from "@gtkx/gi/gtk";
 import { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
 import { useSignal } from "@gtkx/react";
 import { omit } from "@gtkx/utils";
-import { useLayoutEffect, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { ItemPortals, useItemCells, useRowProps, useSectionHeader } from "./internal/cells.js";
+import { useControlledSync } from "./internal/controlled-sync.js";
 import { useCollection } from "./internal/use-collection.js";
 import { useWidgetRef } from "./internal/use-widget-ref.js";
 const COLUMN_VIEW_PROPS = [
@@ -24,7 +25,6 @@ const COLUMN_VIEW_PROPS = [
     "sortOrder",
     "onSortChanged",
     "estimatedItemHeight",
-    "children",
     "ref",
 ];
 const expanderIndexFor = (columns) => columns.findIndex((column) => column.visible !== false);
@@ -57,11 +57,12 @@ const applySort = (sorting, view, column, order) => {
         sorting.current = false;
     }
 };
-const emitSortChanged = (sorter, sorting, sort) => {
+const didEmitSortChanged = (sorter, sorting, sort) => {
     if (sorter === null || sorting.current) {
-        return;
+        return false;
     }
     sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+    return true;
 };
 const syncSort = (sorting, view, sortColumn, sortOrder) => {
     const target = getSortTarget(view, sortColumn);
@@ -74,13 +75,22 @@ const useColumnSorting = (view, sort, columns) => {
     const sorting = useRef(false);
     const sorter = view?.getSorter() ?? null;
     const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;
+    const { sortColumn, sortOrder } = sort;
+    const request = useMemo(() => ({ sortColumn, sortOrder }), [sortColumn, sortOrder]);
+    const markDrift = useControlledSync({
+        value: request,
+        source: columns,
+        target: view,
+        apply: (value) => {
+            syncSort(sorting, view, value.sortColumn, value.sortOrder);
+        },
+    });
     useSignal(columnSorter, "changed", () => {
-        emitSortChanged(columnSorter, sorting, sort);
+        const didEmit = didEmitSortChanged(columnSorter, sorting, sort);
+        if (sortColumn !== undefined && didEmit) {
+            markDrift();
+        }
     });
-    const { sortColumn, sortOrder } = sort;
-    useLayoutEffect(() => {
-        syncSort(sorting, view, sortColumn, sortOrder);
-    }, [view, sortColumn, sortOrder, columns]);
 };
 const ColumnCells = ({ column, hasExpander, collection, expandedIds, expanderDescriptions, size, }) => {
     const cells = useItemCells(size);

package/dist/column-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useLayoutEffect, useRef } from \"react\";\nimport type { CellSize } from \"./internal/cells.js\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { ColumnViewColumn, ColumnViewProps, ExpanderDescriptions, SortProps } from \"./types.js\";\nimport { ItemPortals, useItemCells, useRowProps, useSectionHeader } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };\n\ntype ColumnCellsProps = {\n    column: ColumnViewColumn<never>;\n    hasExpander: boolean;\n    collection: Collection;\n    expandedIds: string[] | null | undefined;\n    expanderDescriptions: ExpanderDescriptions | null | undefined;\n    size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\" | \"hasExpander\"> & {\n    columns: ColumnViewColumn<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n    \"items\",\n    \"sections\",\n    \"isFlat\",\n    \"renderHeader\",\n    \"rowProps\",\n    \"columns\",\n    \"selectedIds\",\n    \"onSelectionChanged\",\n    \"selectionMode\",\n    \"expandedIds\",\n    \"onExpandedChange\",\n    \"expanderDescriptions\",\n    \"sortColumn\",\n    \"sortOrder\",\n    \"onSortChanged\",\n    \"estimatedItemHeight\",\n    \"children\",\n    \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst expanderIndexFor = (columns: ColumnViewColumn<never>[]): number =>\n    columns.findIndex((column) => column.visible !== false);\n\nconst columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {\n    const columns = view.getColumns();\n\n    for (let index = 0; index < columns.getNItems(); index++) {\n        const column = columns.getItem(index);\n\n        if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {\n            return column;\n        }\n    }\n\n    return null;\n};\n\nconst getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {\n    if (view === null || sortColumn === undefined) {\n        return null;\n    }\n\n    if (sortColumn === null) {\n        return { view, column: null };\n    }\n\n    const column = columnById(view, sortColumn);\n\n    return column === null ? null : { view, column };\n};\n\nconst applySort = (\n    sorting: RefObject<boolean>,\n    view: Gtk.ColumnView,\n    column: Gtk.ColumnViewColumn | null,\n    order: Gtk.SortType | null | undefined,\n): void => {\n    sorting.current = true;\n\n    try {\n        view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);\n    } finally {\n        sorting.current = false;\n    }\n};\n\nconst emitSortChanged = (\n    sorter: Gtk.ColumnViewSorter | null,\n    sorting: RefObject<boolean>,\n    sort: SortProps,\n): void => {\n    if (sorter === null || sorting.current) {\n        return;\n    }\n\n    sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());\n};\n\nconst syncSort = (\n    sorting: RefObject<boolean>,\n    view: Gtk.ColumnView | null,\n    sortColumn: string | null | undefined,\n    sortOrder: Gtk.SortType | null | undefined,\n): void => {\n    const target = getSortTarget(view, sortColumn);\n\n    if (target === null) {\n        return;\n    }\n\n    applySort(sorting, target.view, target.column, sortOrder);\n};\n\nconst useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: ColumnViewColumn<never>[]): void => {\n    const sorting = useRef(false);\n    const sorter = view?.getSorter() ?? null;\n    const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;\n\n    useSignal(columnSorter, \"changed\", (): void => {\n        emitSortChanged(columnSorter, sorting, sort);\n    });\n\n    const { sortColumn, sortOrder } = sort;\n\n    useLayoutEffect(() => {\n        syncSort(sorting, view, sortColumn, sortOrder);\n    }, [view, sortColumn, sortOrder, columns]);\n};\n\nconst ColumnCells = ({\n    column,\n    hasExpander,\n    collection,\n    expandedIds,\n    expanderDescriptions,\n    size,\n}: ColumnCellsProps): ReactNode => {\n    const cells = useItemCells(size);\n    const rest = omit(column, [\"id\", \"renderCell\", \"isSortable\"]);\n\n    return (\n        <>\n            <GtkColumnViewColumn\n                id={column.id}\n                factory={<GtkSignalListItemFactory {...cells.handlers} />}\n                sorter={column.isSortable === true ? <GtkCustomSorter /> : null}\n                {...rest}\n            />\n            <ItemPortals\n                registry={cells}\n                render={column.renderCell}\n                collection={collection}\n                hasExpander={hasExpander}\n                expandedIds={expandedIds}\n                expanderDescriptions={expanderDescriptions}\n            />\n        </>\n    );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, expanderDescriptions, size }: ColumnListProps): ReactNode => {\n    const expanderIndex = expanderIndexFor(columns);\n\n    return columns.map((column, index) => (\n        <ColumnCells\n            key={column.id}\n            column={column}\n            hasExpander={index === expanderIndex}\n            collection={collection}\n            expandedIds={expandedIds}\n            expanderDescriptions={expanderDescriptions}\n            size={size}\n        />\n    ));\n};\n\n/**\n * Renders a Gtk.ColumnView from declarative items or sections and a columns array,\n * with controlled selection, expansion, and sorting, per-column header menus,\n * section header rendering, and per-row props such as a screen-reader label.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n    const { renderHeader, rowProps, columns, expandedIds, expanderDescriptions } = props;\n    const { sortColumn, sortOrder, onSortChanged, ref } = props;\n    const rest = omit(props, COLUMN_VIEW_PROPS);\n    const size = { width: -1, height: props.estimatedItemHeight ?? -1 };\n    const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n    const { collection, selection } = useCollection(props);\n    const header = useSectionHeader(renderHeader, collection, size);\n    const rows = useRowProps(rowProps, collection, expandedIds);\n    const columnList = columns as ColumnViewColumn<never>[];\n    useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n    return (\n        <>\n            <GtkColumnView\n                ref={refCallback}\n                model={selection}\n                {...header.factoryProps}\n                {...rows.factoryProps}\n                {...rest}\n            >\n                <ColumnList\n                    columns={columnList}\n                    collection={collection}\n                    expandedIds={expandedIds}\n                    expanderDescriptions={expanderDescriptions}\n                    size={size}\n                />\n            </GtkColumnView>\n            {header.portals}\n            {rows.portals}\n        </>\n    );\n}\n\nexport { ColumnView };\n"]}
+{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useMemo, useRef } from \"react\";\nimport type { CellSize } from \"./internal/cells.js\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { ColumnViewColumn, ColumnViewProps, ExpanderDescriptions, SortProps } from \"./types.js\";\nimport { ItemPortals, useItemCells, useRowProps, useSectionHeader } from \"./internal/cells.js\";\nimport { useControlledSync } from \"./internal/controlled-sync.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };\ntype SortRequest = Pick<SortProps, \"sortColumn\" | \"sortOrder\">;\n\ntype ColumnCellsProps = {\n    column: ColumnViewColumn<never>;\n    hasExpander: boolean;\n    collection: Collection;\n    expandedIds: string[] | null | undefined;\n    expanderDescriptions: ExpanderDescriptions | null | undefined;\n    size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\" | \"hasExpander\"> & {\n    columns: ColumnViewColumn<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n    \"items\",\n    \"sections\",\n    \"isFlat\",\n    \"renderHeader\",\n    \"rowProps\",\n    \"columns\",\n    \"selectedIds\",\n    \"onSelectionChanged\",\n    \"selectionMode\",\n    \"expandedIds\",\n    \"onExpandedChange\",\n    \"expanderDescriptions\",\n    \"sortColumn\",\n    \"sortOrder\",\n    \"onSortChanged\",\n    \"estimatedItemHeight\",\n    \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst expanderIndexFor = (columns: ColumnViewColumn<never>[]): number =>\n    columns.findIndex((column) => column.visible !== false);\n\nconst columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {\n    const columns = view.getColumns();\n\n    for (let index = 0; index < columns.getNItems(); index++) {\n        const column = columns.getItem(index);\n\n        if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {\n            return column;\n        }\n    }\n\n    return null;\n};\n\nconst getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {\n    if (view === null || sortColumn === undefined) {\n        return null;\n    }\n\n    if (sortColumn === null) {\n        return { view, column: null };\n    }\n\n    const column = columnById(view, sortColumn);\n\n    return column === null ? null : { view, column };\n};\n\nconst applySort = (\n    sorting: RefObject<boolean>,\n    view: Gtk.ColumnView,\n    column: Gtk.ColumnViewColumn | null,\n    order: Gtk.SortType | null | undefined,\n): void => {\n    sorting.current = true;\n\n    try {\n        view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);\n    } finally {\n        sorting.current = false;\n    }\n};\n\nconst didEmitSortChanged = (\n    sorter: Gtk.ColumnViewSorter | null,\n    sorting: RefObject<boolean>,\n    sort: SortProps,\n): boolean => {\n    if (sorter === null || sorting.current) {\n        return false;\n    }\n\n    sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());\n\n    return true;\n};\n\nconst syncSort = (\n    sorting: RefObject<boolean>,\n    view: Gtk.ColumnView | null,\n    sortColumn: string | null | undefined,\n    sortOrder: Gtk.SortType | null | undefined,\n): void => {\n    const target = getSortTarget(view, sortColumn);\n\n    if (target === null) {\n        return;\n    }\n\n    applySort(sorting, target.view, target.column, sortOrder);\n};\n\nconst useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: ColumnViewColumn<never>[]): void => {\n    const sorting = useRef(false);\n    const sorter = view?.getSorter() ?? null;\n    const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;\n    const { sortColumn, sortOrder } = sort;\n    const request = useMemo<SortRequest>(() => ({ sortColumn, sortOrder }), [sortColumn, sortOrder]);\n    const markDrift = useControlledSync({\n        value: request,\n        source: columns,\n        target: view,\n        apply: (value) => {\n            syncSort(sorting, view, value.sortColumn, value.sortOrder);\n        },\n    });\n\n    useSignal(columnSorter, \"changed\", (): void => {\n        const didEmit = didEmitSortChanged(columnSorter, sorting, sort);\n\n        if (sortColumn !== undefined && didEmit) {\n            markDrift();\n        }\n    });\n};\n\nconst ColumnCells = ({\n    column,\n    hasExpander,\n    collection,\n    expandedIds,\n    expanderDescriptions,\n    size,\n}: ColumnCellsProps): ReactNode => {\n    const cells = useItemCells(size);\n    const rest = omit(column, [\"id\", \"renderCell\", \"isSortable\"]);\n\n    return (\n        <>\n            <GtkColumnViewColumn\n                id={column.id}\n                factory={<GtkSignalListItemFactory {...cells.handlers} />}\n                sorter={column.isSortable === true ? <GtkCustomSorter /> : null}\n                {...rest}\n            />\n            <ItemPortals\n                registry={cells}\n                render={column.renderCell}\n                collection={collection}\n                hasExpander={hasExpander}\n                expandedIds={expandedIds}\n                expanderDescriptions={expanderDescriptions}\n            />\n        </>\n    );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, expanderDescriptions, size }: ColumnListProps): ReactNode => {\n    const expanderIndex = expanderIndexFor(columns);\n\n    return columns.map((column, index) => (\n        <ColumnCells\n            key={column.id}\n            column={column}\n            hasExpander={index === expanderIndex}\n            collection={collection}\n            expandedIds={expandedIds}\n            expanderDescriptions={expanderDescriptions}\n            size={size}\n        />\n    ));\n};\n\n/**\n * Renders a Gtk.ColumnView from declarative items or sections and a columns array,\n * with controlled selection, expansion, and sorting, per-column header menus,\n * section header rendering, and per-row props such as a screen-reader label.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n    const { renderHeader, rowProps, columns, expandedIds, expanderDescriptions } = props;\n    const { sortColumn, sortOrder, onSortChanged, ref } = props;\n    const rest = omit(props, COLUMN_VIEW_PROPS);\n    const size = { width: -1, height: props.estimatedItemHeight ?? -1 };\n    const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n    const { collection, selection } = useCollection(props);\n    const header = useSectionHeader(renderHeader, collection, size);\n    const rows = useRowProps(rowProps, collection, expandedIds);\n    const columnList = columns as ColumnViewColumn<never>[];\n    useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n    return (\n        <>\n            <GtkColumnView\n                ref={refCallback}\n                model={selection}\n                {...header.factoryProps}\n                {...rows.factoryProps}\n                {...rest}\n            >\n                <ColumnList\n                    columns={columnList}\n                    collection={collection}\n                    expandedIds={expandedIds}\n                    expanderDescriptions={expanderDescriptions}\n                    size={size}\n                />\n            </GtkColumnView>\n            {header.portals}\n            {rows.portals}\n        </>\n    );\n}\n\nexport { ColumnView };\n"]}

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export { ColumnView } from "./column-view.js";
 export { ComboRow } from "./combo-row.js";
 export { DropDown } from "./drop-down.js";
 export { GridView } from "./grid-view.js";
+export { ListItemFactory } from "./list-item-factory.js";
 export { ListView } from "./list-view.js";
-export { ToastProvider, useToast, useToastOverlay } from "./toast.js";
-export type { ColumnViewColumn, ColumnViewProps, ComboRowProps, DropDownProps, ExpanderDescriptions, GridViewProps, ListItem, ListItemRenderArgs, ListItemRenderer, ListRowProps, ListRowPropsResolver, ListSection, ListSectionRenderArgs, ListSectionRenderer, ListViewProps, ToastController, ToastOptions, ToastOverlayController, ToastProviderProps, } from "./types.js";
+export { ToastProvider, useToast } from "./toast.js";
+export type { ColumnViewColumn, ColumnViewProps, ComboRowProps, DropDownProps, ExpanderDescriptions, GridViewProps, ListItem, ListItemFactoryProps, ListItemRenderArgs, ListItemRenderer, ListRowProps, ListRowPropsResolver, ListSection, ListSectionRenderArgs, ListSectionRenderer, ListViewProps, ToastController, ToastOptions, ToastProviderProps, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EACR,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,kBAAkB,GACrB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,YAAY,EACR,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,QAAQ,EACR,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,YAAY,EACZ,kBAAkB,GACrB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ export { ColumnView } from "./column-view.js";
 export { ComboRow } from "./combo-row.js";
 export { DropDown } from "./drop-down.js";
 export { GridView } from "./grid-view.js";
+export { ListItemFactory } from "./list-item-factory.js";
 export { ListView } from "./list-view.js";
-export { ToastProvider, useToast, useToastOverlay } from "./toast.js";
+export { ToastProvider, useToast } from "./toast.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { ColumnView } from \"./column-view.js\";\nexport { ComboRow } from \"./combo-row.js\";\nexport { DropDown } from \"./drop-down.js\";\nexport { GridView } from \"./grid-view.js\";\nexport { ListView } from \"./list-view.js\";\nexport { ToastProvider, useToast, useToastOverlay } from \"./toast.js\";\nexport type {\n    ColumnViewColumn,\n    ColumnViewProps,\n    ComboRowProps,\n    DropDownProps,\n    ExpanderDescriptions,\n    GridViewProps,\n    ListItem,\n    ListItemRenderArgs,\n    ListItemRenderer,\n    ListRowProps,\n    ListRowPropsResolver,\n    ListSection,\n    ListSectionRenderArgs,\n    ListSectionRenderer,\n    ListViewProps,\n    ToastController,\n    ToastOptions,\n    ToastOverlayController,\n    ToastProviderProps,\n} from \"./types.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { ColumnView } from \"./column-view.js\";\nexport { ComboRow } from \"./combo-row.js\";\nexport { DropDown } from \"./drop-down.js\";\nexport { GridView } from \"./grid-view.js\";\nexport { ListItemFactory } from \"./list-item-factory.js\";\nexport { ListView } from \"./list-view.js\";\nexport { ToastProvider, useToast } from \"./toast.js\";\nexport type {\n    ColumnViewColumn,\n    ColumnViewProps,\n    ComboRowProps,\n    DropDownProps,\n    ExpanderDescriptions,\n    GridViewProps,\n    ListItem,\n    ListItemFactoryProps,\n    ListItemRenderArgs,\n    ListItemRenderer,\n    ListRowProps,\n    ListRowPropsResolver,\n    ListSection,\n    ListSectionRenderArgs,\n    ListSectionRenderer,\n    ListViewProps,\n    ToastController,\n    ToastOptions,\n    ToastProviderProps,\n} from \"./types.js\";\n"]}

package/dist/internal/cells.d.ts

@@ -27,6 +27,7 @@ type CellRegistry<H extends FactoryHost> = {
     getEntries: () => CellEntry<H>[];
 };
 type ItemIdentity = {
+    itemKey: string;
     item: ListItem | undefined;
     position: number;
     isExpanded: boolean;
@@ -43,6 +44,11 @@ type ItemPortalsProps = {
     expandedIds?: string[] | null | undefined;
     expanderDescriptions?: ExpanderDescriptions | null | undefined;
 };
+type NativeItemPortalsProps<T extends GObject.Object> = {
+    registry: CellRegistry<Gtk.ListItem>;
+    render: ListItemRenderer<T>;
+    size: CellSize;
+};
 type SectionHeaderSlot = {
     factoryProps: {
         headerFactory?: ReactElement;
@@ -57,7 +63,8 @@ type RowSlot = {
 };
 declare function useItemCells(size: CellSize): CellRegistry<Gtk.ListItem>;
 declare const ItemPortals: ({ registry, render, collection, hasExpander, expandedIds, expanderDescriptions, }: ItemPortalsProps) => ReactNode;
+declare function NativeItemPortals<T extends GObject.Object>({ registry, render, size }: NativeItemPortalsProps<T>): ReactNode;
 declare const useSectionHeader: (render: ListSectionRenderer<never> | null | undefined, collection: Collection, size: CellSize) => SectionHeaderSlot;
 declare const useRowProps: (rowProps: ListRowPropsResolver<never> | null | undefined, collection: Collection, expandedIds: string[] | null | undefined) => RowSlot;
-export { useItemCells, useRowProps, useSectionHeader, ItemPortals, type CellSize, };
+export { useItemCells, useRowProps, useSectionHeader, ItemPortals, NativeItemPortals, type CellSize, };
 //# sourceMappingURL=cells.d.ts.map

package/dist/internal/cells.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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"}

package/dist/internal/cells.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Gtk from "@gtkx/gi/gtk";
-import { GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
+import { GtkBox, GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
 import { createPortal, useProperty } from "@gtkx/react";
-import { setProperty, t } from "@gtkx/runtime";
-import { memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { slotRefFor } from "./collection-model.js";
+import { Fragment, memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { slotPathAt, slotRefFor } from "./collection-model.js";
+import { joinParts } from "./keys.js";
 const ItemCell = memo(ItemCellImpl, isSameItemCell);
 const ItemRow = memo(ItemRowImpl, isSameItemRow);
 const HeaderCell = memo(HeaderCellImpl);
@@ -13,8 +13,12 @@ const HEADER_OPTIONS = { isHost: isListHeader, prepare: prepareCell };
 const ROW_OPTIONS = { isHost: isColumnViewRow };
 const NO_SIZE = { width: -1, height: -1 };
 const NO_ROW_PROPS = {};
-const ROW_TEXT_DESCRIPTOR = t.string("borrowed");
-const placeholder = (size) => new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+const placeholders = new WeakSet();
+const placeholder = (size) => {
+    const widget = new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+    placeholders.add(widget);
+    return widget;
+};
 function isListItem(value) {
     return value instanceof Gtk.ListItem;
 }
@@ -25,9 +29,13 @@ function isColumnViewRow(value) {
     return value instanceof Gtk.ColumnViewRow;
 }
 function prepareCell(host, size) {
-    if (host.getChild() === null) {
+    const child = host.getChild();
+    if (child === null) {
         host.setChild(placeholder(size));
     }
+    else if (placeholders.has(child)) {
+        child.setSizeRequest(size.width, size.height);
+    }
 }
 function notifyRegistry(state) {
     state.snapshot = null;
@@ -95,7 +103,13 @@ function createCellRegistry(options, size) {
     return {
         handlers: createHandlers(state),
         setSize: (next) => {
+            if (state.size.width === next.width && state.size.height === next.height) {
+                return;
+            }
             state.size = next;
+            for (const host of state.entries.keys()) {
+                state.prepare?.(host, next);
+            }
         },
         subscribe: (onChange) => subscribeRegistry(state, onChange),
         getEntries: () => getRegistryEntries(state),
@@ -128,13 +142,20 @@ function itemArgs(item, position, row, isExpanded) {
     }
     return args;
 }
+function keyForItem(ref, item) {
+    return joinParts([slotPathAt(ref.store, ref.slot), item.id]);
+}
 function slotFor(options) {
     const ref = slotRefFor(options.item);
-    const item = ref === null ? undefined : options.collection.itemAt(ref);
+    if (ref === null) {
+        return null;
+    }
+    const item = options.collection.itemAt(ref);
     if (item === undefined) {
         return null;
     }
     return {
+        itemKey: keyForItem(ref, item),
         item,
         row: options.row,
         args: itemArgs(item, options.position, options.row, isRowWanted(options, item)),
@@ -148,6 +169,7 @@ function useItemSlot(entry, state, identity) {
         return identity.item === undefined
             ? null
             : {
+                itemKey: identity.itemKey,
                 item: identity.item,
                 row,
                 args: itemArgs(identity.item, position, row, identity.isExpanded),
@@ -160,13 +182,15 @@ function itemIdentity(entry, collection, expandedIds) {
     const ref = slotRefFor(entry.host.getItem());
     const item = ref === null ? undefined : collection.itemAt(ref);
     return {
+        itemKey: ref === null || item === undefined ? "" : keyForItem(ref, item),
         item,
         position: entry.host.getPosition(),
-        isExpanded: item === undefined ? false : (expandedIds?.includes(item.id) ?? false),
+        isExpanded: item !== undefined && (expandedIds?.includes(item.id) ?? false),
     };
 }
 function isSameItemIdentity(previous, next) {
     return (previous.item === next.item &&
+        previous.itemKey === next.itemKey &&
         previous.position === next.position &&
         previous.isExpanded === next.isExpanded);
 }
@@ -191,8 +215,25 @@ function createItemIdentityStore() {
         },
     };
 }
+function createNativeItemKeyStore() {
+    const keys = new WeakMap();
+    let serial = 0;
+    return {
+        keyFor: (item) => {
+            const current = keys.get(item);
+            if (current !== undefined) {
+                return current;
+            }
+            serial += 1;
+            const key = `gtkx-native-item-${String(serial)}`;
+            keys.set(item, key);
+            return key;
+        },
+    };
+}
 function renderedIdentity(entry, slot) {
     return {
+        itemKey: slot?.itemKey ?? "",
         item: slot?.item,
         position: slot?.args.index ?? entry.host.getPosition(),
         isExpanded: slot?.args.isExpanded ?? false,
@@ -239,7 +280,7 @@ function itemBody(slot, render, hasExpander, descriptions) {
     }
     const renderItem = render;
     const content = renderItem(slot.args);
-    return hasExpander ? wrapExpander(slot, content, descriptions) : content;
+    return (_jsx(Fragment, { children: hasExpander ? wrapExpander(slot, content, descriptions) : content }, slot.itemKey));
 }
 function rowText(value) {
     return value ?? null;
@@ -259,15 +300,12 @@ function rowPropsFor(slot, rowProps) {
         isSelectable: rowFlag(props.isSelectable),
     };
 }
-function setRowText(host, name, value) {
-    setProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
-}
 function applyRowProps(host, props, previous) {
     if (previous?.accessibleLabel !== props.accessibleLabel) {
-        setRowText(host, "accessible-label", props.accessibleLabel);
+        host.accessibleLabel = props.accessibleLabel;
     }
     if (previous?.accessibleDescription !== props.accessibleDescription) {
-        setRowText(host, "accessible-description", props.accessibleDescription);
+        host.accessibleDescription = props.accessibleDescription;
     }
     if (previous?.isActivatable !== props.isActivatable) {
         host.setActivatable(props.isActivatable);
@@ -298,11 +336,33 @@ function ItemRowImpl({ entry, rowProps, state, ...identity }) {
 }
 function HeaderCellImpl({ entry, render, collection }) {
     const item = useProperty(entry.host, "item") ?? null;
-    const ref = slotRefFor(item);
-    const renderHeader = render;
-    const body = ref === null ? null : renderHeader({ section: collection.sectionFor(ref.store.level.path) });
+    return createPortal(headerBody(slotRefFor(item), render, collection), entry.host, entry.key);
+}
+function NativeItemCell({ entry, render, keys, size, }) {
+    const position = useProperty(entry.host, "position");
+    const item = useProperty(entry.host, "item") ?? null;
+    let body = null;
+    if (item !== null && position !== undefined) {
+        const content = render({ item: item, index: position });
+        const child = content == null || typeof content === "boolean"
+            ? _jsx(GtkBox, { widthRequest: size.width, heightRequest: size.height })
+            : content;
+        body = _jsx(Fragment, { children: child }, keys.keyFor(item));
+    }
     return createPortal(body, entry.host, entry.key);
 }
+function headerBody(ref, render, collection) {
+    if (ref === null) {
+        return null;
+    }
+    const section = collection.sectionFor(ref.store.level.path);
+    if (section === undefined) {
+        return null;
+    }
+    const renderHeader = render;
+    const key = joinParts([ref.store.level.path, section.id]);
+    return _jsx(Fragment, { children: renderHeader({ section: section.value }) }, key);
+}
 function usePortalEntries(registry) {
     return useSyncExternalStore(registry.subscribe, registry.getEntries);
 }
@@ -317,6 +377,11 @@ const RowPortals = ({ registry, rowProps, collection, expandedIds }) => {
     return entries.map((entry) => (_jsx(ItemRow, { entry: entry, rowProps: rowProps, state: state, ...itemIdentity(entry, collection, expandedIds) }, entry.key)));
 };
 const HeaderPortals = ({ registry, render, collection }) => usePortalEntries(registry).map((entry) => (_jsx(HeaderCell, { entry: entry, render: render, collection: collection }, entry.key)));
+function NativeItemPortals({ registry, render, size }) {
+    const entries = usePortalEntries(registry);
+    const [keys] = useState(createNativeItemKeyStore);
+    return entries.map((entry) => (_jsx(NativeItemCell, { entry: entry, render: render, keys: keys, size: size }, entry.key)));
+}
 const useSectionHeader = (render, collection, size) => {
     const registry = useHeaderCells(size);
     if (render == null) {
@@ -337,5 +402,5 @@ const useRowProps = (rowProps, collection, expandedIds) => {
         portals: (_jsx(RowPortals, { registry: registry, rowProps: rowProps, collection: collection, expandedIds: expandedIds })),
     };
 };
-export { useItemCells, useRowProps, useSectionHeader, ItemPortals, };
+export { useItemCells, useRowProps, useSectionHeader, ItemPortals, NativeItemPortals, };
 //# sourceMappingURL=cells.js.map