tinybase 6.0.0-beta.2 → 6.0.0

package/@types/ui-react/index.d.ts

@@ -22,7 +22,26 @@
  * @module ui-react
  * @since v1.0.0
  */
-
+import type {
+  CheckpointIds,
+  CheckpointIdsListener,
+  CheckpointListener,
+  Checkpoints,
+} from '../checkpoints/index.d.ts';
+import type {
+  Callback,
+  Id,
+  IdOrNull,
+  Ids,
+  ParameterizedCallback,
+} from '../common/index.d.ts';
+import type {
+  Indexes,
+  SliceIdsListener,
+  SliceRowIdsListener,
+} from '../indexes/index.d.ts';
+import type {MergeableStore} from '../mergeable-store/index.d.ts';
+import type {MetricListener, Metrics} from '../metrics/index.d.ts';
 import type {
   AnyPersister,
   PersistedStore,
@@ -32,12 +51,22 @@ import type {
   StatusListener,
 } from '../persisters/index.d.ts';
 import type {
-  Callback,
-  Id,
-  IdOrNull,
-  Ids,
-  ParameterizedCallback,
-} from '../common/index.d.ts';
+  Queries,
+  ResultCellIdsListener,
+  ResultCellListener,
+  ResultRowCountListener,
+  ResultRowIdsListener,
+  ResultRowListener,
+  ResultSortedRowIdsListener,
+  ResultTableCellIdsListener,
+  ResultTableListener,
+} from '../queries/index.d.ts';
+import type {
+  LinkedRowIdsListener,
+  LocalRowIdsListener,
+  Relationships,
+  RemoteRowIdListener,
+} from '../relationships/index.d.ts';
 import type {
   Cell,
   CellIdsListener,
@@ -72,38 +101,8 @@ import type {
   Values,
   ValuesListener,
 } from '../store/index.d.ts';
-import type {
-  CheckpointIds,
-  CheckpointIdsListener,
-  CheckpointListener,
-  Checkpoints,
-} from '../checkpoints/index.d.ts';
-import type {ComponentType, ReactElement} from 'react';
-import type {
-  Indexes,
-  SliceIdsListener,
-  SliceRowIdsListener,
-} from '../indexes/index.d.ts';
-import type {
-  LinkedRowIdsListener,
-  LocalRowIdsListener,
-  Relationships,
-  RemoteRowIdListener,
-} from '../relationships/index.d.ts';
-import type {MetricListener, Metrics} from '../metrics/index.d.ts';
-import type {
-  Queries,
-  ResultCellIdsListener,
-  ResultCellListener,
-  ResultRowCountListener,
-  ResultRowIdsListener,
-  ResultRowListener,
-  ResultSortedRowIdsListener,
-  ResultTableCellIdsListener,
-  ResultTableListener,
-} from '../queries/index.d.ts';
-import type {MergeableStore} from '../mergeable-store/index.d.ts';
 import type {Synchronizer} from '../synchronizers/index.d.ts';
+import type {ComponentType, ReactElement} from 'react';
 
 /**
  * The StoreOrStoreId type is used when you need to refer to a Store in a React
@@ -402,10 +401,10 @@ export function useCreateMergeableStore(
  * component accesses their Ids.
  *
  * ```jsx
- * import {Provider, useCreateStore, useStoreIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCreateStore, useStoreIds} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -450,10 +449,10 @@ export function useStoreIds(): Ids;
  * reference to the Store again, without the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useStore} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -474,10 +473,10 @@ export function useStoreIds(): Ids;
  * a reference to the Store again, without the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useStore} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -516,10 +515,10 @@ export function useStore(id?: Id): Store | undefined;
  * to the Store again.
  *
  * ```jsx
- * import {Provider, useStores} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useStores} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -566,10 +565,10 @@ export function useStores(): {[storeId: Id]: Store};
  * it more portable.
  *
  * ```jsx
- * import {Provider, useStoreOrStoreById} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useStoreOrStoreById} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -619,15 +618,15 @@ export function useStoreOrStoreById(
  * This example creates a Provider context. A child component registers a Store
  * into it which is then consumable by a peer child component.
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateStore,
  *   useProvideStore,
  *   useStore,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createStore} from 'tinybase';
  *
  * const App = () => (
  *   <Provider>
@@ -704,10 +703,10 @@ export function useProvideStore(storeId: Id, store: Store): void;
  * provided. A component within it then uses the useHasTables hook.
  *
  * ```jsx
- * import {Provider, useHasTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTables} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -727,10 +726,10 @@ export function useProvideStore(storeId: Id, store: Store): void;
  * by Id. A component within it then uses the useHasTables hook.
  *
  * ```jsx
- * import {Provider, useHasTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTables} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -797,10 +796,10 @@ export function useHasTables(storeOrStoreId?: StoreOrStoreId): boolean;
  * provided. A component within it then uses the useTables hook.
  *
  * ```jsx
- * import {Provider, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTables} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -820,10 +819,10 @@ export function useHasTables(storeOrStoreId?: StoreOrStoreId): boolean;
  * by Id. A component within it then uses the useTables hook.
  *
  * ```jsx
- * import {Provider, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTables} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -888,10 +887,10 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * provided. A component within it then uses the useTableIds hook.
  *
  * ```jsx
- * import {Provider, useTableIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -911,10 +910,10 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * by Id. A component within it then uses the useTableIds hook.
  *
  * ```jsx
- * import {Provider, useTableIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -984,10 +983,10 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * provided. A component within it then uses the useHasTable hook.
  *
  * ```jsx
- * import {Provider, useHasTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTable} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1007,10 +1006,10 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * by Id. A component within it then uses the useHasTable hook.
  *
  * ```jsx
- * import {Provider, useHasTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTable} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1082,10 +1081,10 @@ export function useHasTable(
  * provided. A component within it then uses the useTable hook.
  *
  * ```jsx
- * import {Provider, useTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTable} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1105,10 +1104,10 @@ export function useHasTable(
  * by Id. A component within it then uses the useTable hook.
  *
  * ```jsx
- * import {Provider, useTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTable} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1179,10 +1178,10 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * provided. A component within it then uses the useTableCellIds hook.
  *
  * ```jsx
- * import {Provider, useTableCellIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableCellIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1202,10 +1201,10 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * by Id. A component within it then uses the useTableCellIds hook.
  *
  * ```jsx
- * import {Provider, useTableCellIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableCellIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1281,10 +1280,10 @@ export function useTableCellIds(
  * provided. A component within it then uses the useHasTableCell hook.
  *
  * ```jsx
- * import {Provider, useHasTableCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTableCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1306,10 +1305,10 @@ export function useTableCellIds(
  * by Id. A component within it then uses the useHasTableCell hook.
  *
  * ```jsx
- * import {Provider, useHasTableCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTableCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1384,10 +1383,10 @@ export function useHasTableCell(
  * provided. A component within it then uses the useRowCount hook.
  *
  * ```jsx
- * import {Provider, useRowCount} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowCount} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1407,10 +1406,10 @@ export function useHasTableCell(
  * by Id. A component within it then uses the useRowCount hook.
  *
  * ```jsx
- * import {Provider, useRowCount} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowCount} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1480,10 +1479,10 @@ export function useRowCount(
  * provided. A component within it then uses the useRowIds hook.
  *
  * ```jsx
- * import {Provider, useRowIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1503,10 +1502,10 @@ export function useRowCount(
  * by Id. A component within it then uses the useRowIds hook.
  *
  * ```jsx
- * import {Provider, useRowIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1591,10 +1590,10 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * provided. A component within it then uses the useSortedRowIds hook.
  *
  * ```jsx
- * import {Provider, useSortedRowIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useSortedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1619,10 +1618,10 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * by Id. A component within it then uses the useSortedRowIds hook.
  *
  * ```jsx
- * import {Provider, useSortedRowIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useSortedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1711,10 +1710,10 @@ export function useSortedRowIds(
  * provided. A component within it then uses the useHasRow hook.
  *
  * ```jsx
- * import {Provider, useHasRow} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasRow} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1736,10 +1735,10 @@ export function useSortedRowIds(
  * by Id. A component within it then uses the useHasRow hook.
  *
  * ```jsx
- * import {Provider, useHasRow} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasRow} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1815,10 +1814,10 @@ export function useHasRow(
  * provided. A component within it then uses the useRow hook.
  *
  * ```jsx
- * import {Provider, useRow} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRow} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1838,10 +1837,10 @@ export function useHasRow(
  * by Id. A component within it then uses the useRow hook.
  *
  * ```jsx
- * import {Provider, useRow} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRow} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -1917,10 +1916,10 @@ export function useRow(
  * provided. A component within it then uses the useCellIds hook.
  *
  * ```jsx
- * import {Provider, useCellIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCellIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -1942,10 +1941,10 @@ export function useRow(
  * by Id. A component within it then uses the useCellIds hook.
  *
  * ```jsx
- * import {Provider, useCellIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCellIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2023,10 +2022,10 @@ export function useCellIds(
  * provided. A component within it then uses the useHasCell hook.
  *
  * ```jsx
- * import {Provider, useHasCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2048,10 +2047,10 @@ export function useCellIds(
  * by Id. A component within it then uses the useHasCell hook.
  *
  * ```jsx
- * import {Provider, useHasCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2129,10 +2128,10 @@ export function useHasCell(
  * provided. A component within it then uses the useCell hook.
  *
  * ```jsx
- * import {Provider, useCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2152,10 +2151,10 @@ export function useHasCell(
  * by Id. A component within it then uses the useCell hook.
  *
  * ```jsx
- * import {Provider, useCell} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCell} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2229,10 +2228,10 @@ export function useCell(
  * provided. A component within it then uses the useHasValues hook.
  *
  * ```jsx
- * import {Provider, useHasValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValues} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2252,10 +2251,10 @@ export function useCell(
  * by Id. A component within it then uses the useHasValues hook.
  *
  * ```jsx
- * import {Provider, useHasValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValues} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2321,10 +2320,10 @@ export function useHasValues(storeOrStoreId?: StoreOrStoreId): boolean;
  * provided. A component within it then uses the useValues hook.
  *
  * ```jsx
- * import {Provider, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValues} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2344,10 +2343,10 @@ export function useHasValues(storeOrStoreId?: StoreOrStoreId): boolean;
  * by Id. A component within it then uses the useValues hook.
  *
  * ```jsx
- * import {Provider, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValues} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2412,10 +2411,10 @@ export function useValues(storeOrStoreId?: StoreOrStoreId): Values;
  * provided. A component within it then uses the useValueIds hook.
  *
  * ```jsx
- * import {Provider, useValueIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValueIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2435,10 +2434,10 @@ export function useValues(storeOrStoreId?: StoreOrStoreId): Values;
  * by Id. A component within it then uses the useValueIds hook.
  *
  * ```jsx
- * import {Provider, useValueIds} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValueIds} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2508,10 +2507,10 @@ export function useValueIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * provided. A component within it then uses the useHasValue hook.
  *
  * ```jsx
- * import {Provider, useHasValue} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValue} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2531,10 +2530,10 @@ export function useValueIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * by Id. A component within it then uses the useHasValue hook.
  *
  * ```jsx
- * import {Provider, useHasValue} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValue} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2606,10 +2605,10 @@ export function useHasValue(
  * provided. A component within it then uses the useValue hook.
  *
  * ```jsx
- * import {Provider, useValue} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValue} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -2629,10 +2628,10 @@ export function useHasValue(
  * by Id. A component within it then uses the useValue hook.
  *
  * ```jsx
- * import {Provider, useValue} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValue} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
@@ -2701,10 +2700,10 @@ export function useValue(
  * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useSetTablesCallback, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useSetTablesCallback, useTables} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
@@ -2792,10 +2791,10 @@ export function useSetTablesCallback<Parameter>(
  * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useSetTableCallback, useTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useSetTableCallback, useTable} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {nemo: {species: 'fish'}});
  * const App = () => {
@@ -2888,10 +2887,10 @@ export function useSetTableCallback<Parameter>(
  * updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useRow, useSetRowCallback} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useRow, useSetRowCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
@@ -2992,10 +2991,10 @@ export function useSetRowCallback<Parameter>(
  * updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useAddRowCallback, useTable} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useAddRowCallback, useTable} from 'tinybase/ui-react';
  *
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
@@ -3090,10 +3089,10 @@ export function useAddRowCallback<Parameter>(
  * handler which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useRow, useSetPartialRowCallback} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useRow, useSetPartialRowCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
@@ -3191,10 +3190,10 @@ export function useSetPartialRowCallback<Parameter>(
  * which updates the Store with a Cell value when the `span` element is clicked.
  *
  * ```jsx
- * import {useRow, useSetCellCallback} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useRow, useSetCellCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setCell('pets', 'nemo', 'species', 'fish');
  * const App = () => {
@@ -3233,10 +3232,10 @@ export function useSetPartialRowCallback<Parameter>(
  * clicked.
  *
  * ```jsx
- * import {useRow, useSetCellCallback} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useRow, useSetCellCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setCell('pets', 'nemo', 'visits', 1);
  * const App = () => {
@@ -3327,10 +3326,10 @@ export function useSetCellCallback<Parameter>(
  * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useSetValuesCallback, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useSetValuesCallback, useValues} from 'tinybase/ui-react';
  *
  * const store = createStore().setValues({open: true});
  * const App = () => {
@@ -3416,10 +3415,10 @@ export function useSetValuesCallback<Parameter>(
  * handler which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useSetPartialValuesCallback, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useSetPartialValuesCallback, useValues} from 'tinybase/ui-react';
  *
  * const store = createStore().setValues({open: true});
  * const App = () => {
@@ -3508,10 +3507,10 @@ export function useSetPartialValuesCallback<Parameter>(
  * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useSetValueCallback, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useSetValueCallback, useValues} from 'tinybase/ui-react';
  *
  * const store = createStore().setValue('open', true);
  * const App = () => {
@@ -3583,10 +3582,10 @@ export function useSetValueCallback<Parameter>(
  * which deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelTablesCallback, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelTablesCallback, useTables} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
@@ -3655,10 +3654,10 @@ export function useDelTablesCallback(
  * which deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelTableCallback, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelTableCallback, useTables} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
@@ -3731,10 +3730,10 @@ export function useDelTableCallback<Parameter>(
  * deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelRowCallback, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelRowCallback, useTables} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
@@ -3813,10 +3812,10 @@ export function useDelRowCallback<Parameter>(
  * which deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelCellCallback, useTables} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelCellCallback, useTables} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
@@ -3890,10 +3889,10 @@ export function useDelCellCallback<Parameter>(
  * which deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelValuesCallback, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelValuesCallback, useValues} from 'tinybase/ui-react';
  *
  * const store = createStore().setValues({open: true});
  * const App = () => {
@@ -3962,10 +3961,10 @@ export function useDelValuesCallback(
  * which deletes from the Store when the `span` element is clicked.
  *
  * ```jsx
- * import {useDelValueCallback, useValues} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {useDelValueCallback, useValues} from 'tinybase/ui-react';
  *
  * const store = createStore().setValues({open: true, employees: 3});
  * const App = () => {
@@ -4032,10 +4031,10 @@ export function useDelValueCallback<Parameter>(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasTablesListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTablesListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4099,10 +4098,10 @@ export function useHasTablesListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useTablesListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTablesListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4167,10 +4166,10 @@ export function useTablesListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useTableIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4239,10 +4238,10 @@ export function useTableIdsListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasTableListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTableListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4313,10 +4312,10 @@ export function useHasTableListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useTableListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4387,10 +4386,10 @@ export function useTableListener(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useTableCellIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useTableCellIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4463,10 +4462,10 @@ export function useTableCellIdsListener(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasTableCellListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasTableCellListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4539,10 +4538,10 @@ export function useHasTableCellListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useRowCountListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowCountListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4611,10 +4610,10 @@ export function useRowCountListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useRowIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4687,10 +4686,10 @@ export function useRowIdsListener(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useSortedRowIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useSortedRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4777,10 +4776,10 @@ export function useSortedRowIdsListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasRowListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasRowListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4859,10 +4858,10 @@ export function useHasRowListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useRowListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useRowListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -4940,10 +4939,10 @@ export function useRowListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useCellIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCellIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5024,10 +5023,10 @@ export function useCellIdsListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasCellListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasCellListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5108,10 +5107,10 @@ export function useHasCellListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useCellListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useCellListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5182,10 +5181,10 @@ export function useCellListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasValuesListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValuesListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5249,10 +5248,10 @@ export function useHasValuesListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useValuesListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValuesListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5317,10 +5316,10 @@ export function useValuesListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useValueIdsListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValueIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5390,10 +5389,10 @@ export function useValueIdsListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useHasValueListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useHasValueListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5464,10 +5463,10 @@ export function useHasValueListener(
  * is removed from the Store.
  *
  * ```jsx
- * import {Provider, useValueListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useValueListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5527,10 +5526,10 @@ export function useValueListener(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useStartTransactionListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, useStartTransactionListener} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5589,13 +5588,13 @@ export function useStartTransactionListener(
  * unmounted, the listener is removed from the Store.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useWillFinishTransactionListener,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createStore} from 'tinybase';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5656,13 +5655,13 @@ export function useWillFinishTransactionListener(
  * unmounted, the listener is removed from the Store.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useDidFinishTransactionListener,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createStore} from 'tinybase';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -5733,10 +5732,10 @@ export function useDidFinishTransactionListener(
  * object creation only occurs once by default.
  *
  * ```jsx
- * import {createMetrics, createStore} from 'tinybase';
- * import {useCreateMetrics, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {useCreateMetrics, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(() =>
@@ -5770,10 +5769,10 @@ export function useDidFinishTransactionListener(
  * dependency, and so the Metrics object is created again on the second render.
  *
  * ```jsx
- * import {createMetrics, createStore} from 'tinybase';
- * import {useCreateMetrics, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {useCreateMetrics, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = ({tableToCount}) => {
  *   const store = useCreateStore(() =>
@@ -5827,15 +5826,15 @@ export function useCreateMetrics(
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateMetrics,
  *   useCreateStore,
  *   useMetricsIds,
  * } from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -5883,10 +5882,10 @@ export function useMetricsIds(): Ids;
  * as a prop.
  *
  * ```jsx
- * import {Provider, useMetrics} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetrics} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -5908,10 +5907,10 @@ export function useMetricsIds(): Ids;
  * to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useMetrics} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetrics} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metricsById={{petStore: metrics}}>
@@ -5958,10 +5957,10 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * into it, making it more portable.
  *
  * ```jsx
- * import {Provider, useMetricsOrMetricsById} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetricsOrMetricsById} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -6023,6 +6022,9 @@ export function useMetricsOrMetricsById(
  * Metrics object into it which is then consumable by a peer child component.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateMetrics,
@@ -6030,9 +6032,6 @@ export function useMetricsOrMetricsById(
  *   useMetrics,
  *   useProvideMetrics,
  * } from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => (
  *   <Provider>
@@ -6091,9 +6090,9 @@ export function useProvideMetrics(metricsId: Id, metrics: Metrics): void;
  * the component.
  *
  * ```jsx
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
  * import {useMetricIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -6145,9 +6144,9 @@ export function useMetricIds(metricsOrMetricsId?: MetricsOrMetricsId): Ids;
  * component.
  *
  * ```jsx
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
  * import {useMetric} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('species', {
@@ -6173,10 +6172,10 @@ export function useMetricIds(metricsOrMetricsId?: MetricsOrMetricsId): Ids;
  * is provided. A component within it then uses the useMetric hook.
  *
  * ```jsx
- * import {Provider, useMetric} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetric} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -6203,10 +6202,10 @@ export function useMetricIds(metricsOrMetricsId?: MetricsOrMetricsId): Ids;
  * is provided. A component within it then uses the useMetric hook.
  *
  * ```jsx
- * import {Provider, useMetric} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetric} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metricsById={{petMetrics: metrics}}>
@@ -6267,10 +6266,10 @@ export function useMetric(
  * is removed from the Metrics object.
  *
  * ```jsx
- * import {Provider, useMetricListener} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {Provider, useMetricListener} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -6347,10 +6346,10 @@ export function useMetricListener(
  * object creation only occurs once by default.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
- * import {useCreateIndexes, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {useCreateIndexes, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(() =>
@@ -6389,10 +6388,10 @@ export function useMetricListener(
  * dependency, and so the Indexes object is created again on the second render.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
- * import {useCreateIndexes, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {useCreateIndexes, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = ({cellToIndex}) => {
  *   const store = useCreateStore(() =>
@@ -6449,15 +6448,15 @@ export function useCreateIndexes(
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateIndexes,
  *   useCreateStore,
  *   useIndexesIds,
  * } from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -6505,10 +6504,10 @@ export function useIndexesIds(): Ids;
  * as a prop.
  *
  * ```jsx
- * import {Provider, useIndexes} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useIndexes} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -6530,10 +6529,10 @@ export function useIndexesIds(): Ids;
  * to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useIndexes} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useIndexes} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petStore: indexes}}>
@@ -6580,10 +6579,10 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * into it, making it more portable.
  *
  * ```jsx
- * import {Provider, useIndexesOrIndexesById} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useIndexesOrIndexesById} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -6646,9 +6645,9 @@ export function useProvideIndexes(indexesId: Id, indexes: Indexes): void;
  * component.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
  * import {useIndexIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -6698,9 +6697,9 @@ export function useIndexIds(indexesOrIndexesId?: IndexesOrIndexesId): Ids;
  * the component.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
  * import {useSliceIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -6728,10 +6727,10 @@ export function useIndexIds(indexesOrIndexesId?: IndexesOrIndexesId): Ids;
  * is provided. A component within it then uses the useSliceIds hook.
  *
  * ```jsx
- * import {Provider, useSliceIds} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceIds} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -6758,10 +6757,10 @@ export function useIndexIds(indexesOrIndexesId?: IndexesOrIndexesId): Ids;
  * is provided. A component within it then uses the useSliceIds hook.
  *
  * ```jsx
- * import {Provider, useSliceIds} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceIds} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petIndexes: indexes}}>
@@ -6820,9 +6819,9 @@ export function useSliceIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
  * import {useSliceRowIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -6852,10 +6851,10 @@ export function useSliceIds(
  * is provided. A component within it then uses the useSliceRowIds hook.
  *
  * ```jsx
- * import {Provider, useSliceRowIds} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceRowIds} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -6884,10 +6883,10 @@ export function useSliceIds(
  * is provided. A component within it then uses the useSliceRowIds hook.
  *
  * ```jsx
- * import {Provider, useSliceRowIds} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceRowIds} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petIndexes: indexes}}>
@@ -6954,10 +6953,10 @@ export function useSliceRowIds(
  * is removed from the Indexes object.
  *
  * ```jsx
- * import {Provider, useSliceIdsListener} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -7038,10 +7037,10 @@ export function useSliceIdsListener(
  * listener is removed from the Indexes object.
  *
  * ```jsx
- * import {Provider, useSliceRowIdsListener} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, useSliceRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -7120,10 +7119,10 @@ export function useSliceRowIdsListener(
  * Relationships object creation only occurs once by default.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
- * import {useCreateRelationships, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {useCreateRelationships, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(() =>
@@ -7168,10 +7167,10 @@ export function useSliceRowIdsListener(
  * object is created again on the second render.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
- * import {useCreateRelationships, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {useCreateRelationships, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = ({remoteTableAndCellToLink}) => {
  *   const store = useCreateStore(() =>
@@ -7234,15 +7233,15 @@ export function useCreateRelationships(
  * an inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateRelationships,
  *   useCreateStore,
  *   useRelationshipsIds,
  * } from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -7298,10 +7297,10 @@ export function useRelationshipsIds(): Ids;
  * have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useRelationships} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useRelationships} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -7326,10 +7325,10 @@ export function useRelationshipsIds(): Ids;
  * without the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useRelationships} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useRelationships} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petStore: relationships}}>
@@ -7382,13 +7381,13 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * it, making it more portable.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useRelationshipsOrRelationshipsById,
  * } from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -7457,9 +7456,9 @@ export function useProvideRelationships(
  * Relationship re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {useRelationshipIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -7523,9 +7522,9 @@ export function useRelationshipIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {useRemoteRowId} from 'tinybase/ui-react';
  *
  * const store = createStore()
@@ -7555,10 +7554,10 @@ export function useRelationshipIds(
  * object is provided. A component within it then uses the useRemoteRowId hook.
  *
  * ```jsx
- * import {Provider, useRemoteRowId} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useRemoteRowId} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -7584,10 +7583,10 @@ export function useRelationshipIds(
  * object is provided. A component within it then uses the useRemoteRowId hook.
  *
  * ```jsx
- * import {Provider, useRemoteRowId} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useRemoteRowId} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
@@ -7647,9 +7646,9 @@ export function useRemoteRowId(
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {useLocalRowIds} from 'tinybase/ui-react';
  *
  * const store = createStore()
@@ -7681,10 +7680,10 @@ export function useRemoteRowId(
  * object is provided. A component within it then uses the useLocalRowIds hook.
  *
  * ```jsx
- * import {Provider, useLocalRowIds} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLocalRowIds} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -7712,10 +7711,10 @@ export function useRemoteRowId(
  * object is provided. A component within it then uses the useLocalRowIds hook.
  *
  * ```jsx
- * import {Provider, useLocalRowIds} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLocalRowIds} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
@@ -7779,9 +7778,9 @@ export function useLocalRowIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
  * import {useLinkedRowIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -7816,10 +7815,10 @@ export function useLocalRowIds(
  * object is provided. A component within it then uses the useLinkedRowIds hook.
  *
  * ```jsx
- * import {Provider, useLinkedRowIds} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLinkedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -7849,10 +7848,10 @@ export function useLocalRowIds(
  * object is provided. A component within it then uses the useLinkedRowIds hook.
  *
  * ```jsx
- * import {Provider, useLinkedRowIds} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLinkedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
@@ -7932,10 +7931,10 @@ export function useLinkedRowIds(
  * listener is removed from the Relationships object.
  *
  * ```jsx
- * import {Provider, useRemoteRowIdListener} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useRemoteRowIdListener} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -8026,10 +8025,10 @@ export function useRemoteRowIdListener(
  * listener is removed from the Relationships object.
  *
  * ```jsx
- * import {Provider, useLocalRowIdsListener} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLocalRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -8114,10 +8113,10 @@ export function useLocalRowIdsListener(
  * listener is removed from the Relationships object.
  *
  * ```jsx
- * import {Provider, useLinkedRowIdsListener} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, useLinkedRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -8202,10 +8201,10 @@ export function useLinkedRowIdsListener(
  * object creation only occurs once by default.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
- * import {useCreateQueries, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {useCreateQueries, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(() =>
@@ -8249,10 +8248,10 @@ export function useLinkedRowIdsListener(
  * dependency, and so the Queries object is created again on the second render.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
- * import {useCreateQueries, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {useCreateQueries, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(() =>
@@ -8307,15 +8306,15 @@ export function useCreateQueries(
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCreateQueries,
  *   useCreateStore,
  *   useQueriesIds,
  * } from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -8363,10 +8362,10 @@ export function useQueriesIds(): Ids;
  * a prop.
  *
  * ```jsx
- * import {Provider, useQueries} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useQueries} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -8388,10 +8387,10 @@ export function useQueriesIds(): Ids;
  * to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useQueries} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useQueries} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -8438,10 +8437,10 @@ export function useQueries(id?: Id): Queries | undefined;
  * into it, making it more portable.
  *
  * ```jsx
- * import {Provider, useQueriesOrQueriesById} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useQueriesOrQueriesById} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -8507,9 +8506,9 @@ export function useProvideQueries(queriesId: Id, queries: Queries): void;
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useQueryIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -8565,9 +8564,9 @@ export function useQueryIds(queriesOrQueriesId?: QueriesOrQueriesId): Ids;
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultTable} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -8601,10 +8600,10 @@ export function useQueryIds(queriesOrQueriesId?: QueriesOrQueriesId): Ids;
  * is provided. A component within it then uses the useResultTable hook.
  *
  * ```jsx
- * import {Provider, useResultTable} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTable} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -8637,10 +8636,10 @@ export function useQueryIds(queriesOrQueriesId?: QueriesOrQueriesId): Ids;
  * hook.
  *
  * ```jsx
- * import {Provider, useResultTable} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTable} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -8701,9 +8700,9 @@ export function useResultTable(
  * query re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultTableCellIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -8740,10 +8739,10 @@ export function useResultTable(
  * is provided. A component within it then uses the useResultTableCellIds hook.
  *
  * ```jsx
- * import {Provider, useResultTableCellIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTableCellIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -8776,10 +8775,10 @@ export function useResultTable(
  * useResultTableCellIds hook.
  *
  * ```jsx
- * import {Provider, useResultTableCellIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTableCellIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -8846,9 +8845,9 @@ export function useResultTableCellIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultRowCount} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -8880,10 +8879,10 @@ export function useResultTableCellIds(
  * is provided. A component within it then uses the useResultRowCount hook.
  *
  * ```jsx
- * import {Provider, useResultRowCount} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowCount} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -8913,10 +8912,10 @@ export function useResultTableCellIds(
  * hook.
  *
  * ```jsx
- * import {Provider, useResultRowCount} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowCount} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -8977,9 +8976,9 @@ export function useResultRowCount(
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultRowIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -9013,10 +9012,10 @@ export function useResultRowCount(
  * is provided. A component within it then uses the useResultRowIds hook.
  *
  * ```jsx
- * import {Provider, useResultRowIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9048,10 +9047,10 @@ export function useResultRowCount(
  * hook.
  *
  * ```jsx
- * import {Provider, useResultRowIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -9116,9 +9115,9 @@ export function useResultRowIds(
  * query re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultSortedRowIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -9163,10 +9162,10 @@ export function useResultRowIds(
  * is provided. A component within it then uses the useResultSortedRowIds hook.
  *
  * ```jsx
- * import {Provider, useResultSortedRowIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultSortedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9200,10 +9199,10 @@ export function useResultRowIds(
  * useResultSortedRowIds hook.
  *
  * ```jsx
- * import {Provider, useResultSortedRowIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultSortedRowIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -9280,9 +9279,9 @@ export function useResultSortedRowIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultRow} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -9316,10 +9315,10 @@ export function useResultSortedRowIds(
  * is provided. A component within it then uses the useResultRow hook.
  *
  * ```jsx
- * import {Provider, useResultRow} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRow} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9351,10 +9350,10 @@ export function useResultSortedRowIds(
  * hook.
  *
  * ```jsx
- * import {Provider, useResultRow} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRow} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -9419,9 +9418,9 @@ export function useResultRow(
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultCellIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -9459,10 +9458,10 @@ export function useResultRow(
  * is provided. A component within it then uses the useResultCellIds hook.
  *
  * ```jsx
- * import {Provider, useResultCellIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCellIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9495,10 +9494,10 @@ export function useResultRow(
  * hook.
  *
  * ```jsx
- * import {Provider, useResultCellIds} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCellIds} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -9564,9 +9563,9 @@ export function useResultCellIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {useResultCell} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
@@ -9602,10 +9601,10 @@ export function useResultCellIds(
  * is provided. A component within it then uses the useResultCell hook.
  *
  * ```jsx
- * import {Provider, useResultCell} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCell} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9638,10 +9637,10 @@ export function useResultCellIds(
  * hook.
  *
  * ```jsx
- * import {Provider, useResultCell} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCell} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queriesById={{petQueries: queries}}>
@@ -9710,10 +9709,10 @@ export function useResultCell(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultTableListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTableListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9793,10 +9792,10 @@ export function useResultTableListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultTableCellIdsListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultTableCellIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9879,10 +9878,10 @@ export function useResultTableCellIdsListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultRowCountListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowCountListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -9961,10 +9960,10 @@ export function useResultRowCountListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultRowIdsListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -10045,10 +10044,10 @@ export function useResultRowIdsListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultSortedRowIdsListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultSortedRowIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -10142,10 +10141,10 @@ export function useResultSortedRowIdsListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultRowListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultRowListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -10228,10 +10227,10 @@ export function useResultRowListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultCellIdsListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCellIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -10322,10 +10321,10 @@ export function useResultCellIdsListener(
  * listener is removed from the Queries object.
  *
  * ```jsx
- * import {Provider, useResultCellListener} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, useResultCellListener} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -10408,10 +10407,10 @@ export function useResultCellListener(
  * Checkpoints object creation only occurs once by default.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {useCreateCheckpoints, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {useCreateCheckpoints, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = () => {
  *   const store = useCreateStore(createStore);
@@ -10441,10 +10440,10 @@ export function useResultCellListener(
  * render.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {useCreateCheckpoints, useCreateStore} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {useCreateCheckpoints, useCreateStore} from 'tinybase/ui-react';
  *
  * const App = ({size}) => {
  *   const store = useCreateStore(createStore);
@@ -10491,15 +10490,15 @@ export function useCreateCheckpoints(
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCheckpointsIds,
  *   useCreateCheckpoints,
  *   useCreateStore,
  * } from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -10547,10 +10546,10 @@ export function useCheckpointsIds(): Ids;
  * it passed as a prop.
  *
  * ```jsx
- * import {Provider, useCheckpoints} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpoints} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -10575,10 +10574,10 @@ export function useCheckpointsIds(): Ids;
  * the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useCheckpoints} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpoints} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petStore: checkpoints}}>
@@ -10630,13 +10629,13 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * portable.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   useCheckpointsOrCheckpointsById,
  * } from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -10697,9 +10696,9 @@ export function useProvideCheckpoints(
  * Ids re-renders the component.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useCheckpointIds} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
@@ -10727,10 +10726,10 @@ export function useProvideCheckpoints(
  * hook.
  *
  * ```jsx
- * import {Provider, useCheckpointIds} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpointIds} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -10755,10 +10754,10 @@ export function useProvideCheckpoints(
  * hook.
  *
  * ```jsx
- * import {Provider, useCheckpointIds} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpointIds} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
@@ -10812,9 +10811,9 @@ export function useCheckpointIds(
  * re-renders the component.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useCheckpoint} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
@@ -10837,10 +10836,10 @@ export function useCheckpointIds(
  * hook.
  *
  * ```jsx
- * import {Provider, useCheckpoint} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpoint} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -10865,10 +10864,10 @@ export function useCheckpointIds(
  * hook.
  *
  * ```jsx
- * import {Provider, useCheckpoint} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpoint} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
@@ -10940,9 +10939,9 @@ export function useCheckpoint(
  * handler which sets a checkpoint when the `span` element is clicked.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useSetCheckpointCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11002,9 +11001,9 @@ export function useSetCheckpointCallback<Parameter>(
  * clicked.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useGoBackwardCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11055,9 +11054,9 @@ export function useGoBackwardCallback(
  * clicked.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useGoForwardCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11137,9 +11136,9 @@ export function useGoForwardCallback(
  * moves to a checkpoint when the `span` element is clicked.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useGoToCallback} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11196,9 +11195,9 @@ export function useGoToCallback<Parameter>(
  * This example uses the useUndoInformation hook to create an undo button.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useUndoInformation} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11248,9 +11247,9 @@ export function useUndoInformation(
  * This example uses the useUndoInformation hook to create a redo button.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {useRedoInformation} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
@@ -11311,10 +11310,10 @@ export function useRedoInformation(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useCheckpointIdsListener} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpointIdsListener} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -11387,10 +11386,10 @@ export function useCheckpointIdsListener(
  * listener is removed from the Store.
  *
  * ```jsx
- * import {Provider, useCheckpointListener} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {Provider, useCheckpointListener} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -11502,15 +11501,15 @@ export function useCheckpointListener(
  * occurs once by default.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {
  *   useCreatePersister,
  *   useCreateStore,
  *   useTables,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
- * import {createStore} from 'tinybase';
  *
  * const App = () => {
  *   const store = useCreateStore(createStore);
@@ -11556,15 +11555,15 @@ export function useCheckpointListener(
  * destroyed and the `destroy` parameter is called for it.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {
  *   useCreatePersister,
  *   useCreateStore,
  *   useTables,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
- * import {createStore} from 'tinybase';
  *
  * const App = ({sessionKey}) => {
  *   const store = useCreateStore(createStore);
@@ -11643,16 +11642,16 @@ export function useCreatePersister<
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {
  *   Provider,
  *   useCreatePersister,
  *   useCreateStore,
  *   usePersisterIds,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
- * import {createStore} from 'tinybase';
  *
  * const App = () => {
  *   const store1 = useCreateStore(createStore);
@@ -11706,11 +11705,11 @@ export function usePersisterIds(): Ids;
  * it passed as a prop.
  *
  * ```jsx
- * import {Provider, usePersister} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersister} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persister={persister}>
@@ -11733,11 +11732,11 @@ export function usePersisterIds(): Ids;
  * the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, usePersister} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersister} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persistersById={{petPersister: persister}}>
@@ -11784,11 +11783,11 @@ export function usePersister(id?: Id): AnyPersister | undefined;
  * portable.
  *
  * ```jsx
- * import {Provider, usePersisterOrPersisterById} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersisterOrPersisterById} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persister={persister}>
@@ -11846,8 +11845,8 @@ export function useProvidePersister(
  * ```jsx
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {usePersisterStatus} from 'tinybase/ui-react';
  *
  * const persister = createSessionPersister(createStore(), 'pets');
@@ -11864,11 +11863,11 @@ export function useProvidePersister(
  * provided. A component within it then uses the usePersisterStatus hook.
  *
  * ```jsx
- * import {Provider, usePersisterStatus} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersisterStatus} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persister={persister}>
@@ -11888,11 +11887,11 @@ export function useProvidePersister(
  * named by Id. A component within it then uses the usePersisterStatus hook.
  *
  * ```jsx
- * import {Provider, usePersisterStatus} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersisterStatus} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persistersById={{petPersister: persister}}>
@@ -11941,11 +11940,11 @@ export function usePersisterStatus(
  * listener is removed from the Persister.
  *
  * ```jsx
- * import {Provider, usePersisterStatusListener} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
- * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
  * import {createStore} from 'tinybase';
+ * import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+ * import {Provider, usePersisterStatusListener} from 'tinybase/ui-react';
  *
  * const App = ({persister}) => (
  *   <Provider persister={persister}>
@@ -12025,15 +12024,15 @@ export function usePersisterStatusListener(
  * only occurs once by default.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
  * import {
  *   useCreateMergeableStore,
  *   useCreateSynchronizer,
  *   useTables,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store = useCreateMergeableStore(() => createMergeableStore('s1'));
@@ -12064,17 +12063,17 @@ export function usePersisterStatusListener(
  * is provided to start both Synchronizers' synchronization.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';
+ * import {createWsServer} from 'tinybase/synchronizers/synchronizer-ws-server';
  * import {
  *   useCreateMergeableStore,
  *   useCreateSynchronizer,
  *   useTables,
  * } from 'tinybase/ui-react';
- * import React from 'react';
  * import {WebSocketServer} from 'ws';
- * import {createMergeableStore} from 'tinybase';
- * import {createRoot} from 'react-dom/client';
- * import {createWsServer} from 'tinybase/synchronizers/synchronizer-ws-server';
- * import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';
  *
  * const server1 = createWsServer(new WebSocketServer({port: 8044}));
  * const server2 = createWsServer(new WebSocketServer({port: 8045}));
@@ -12136,16 +12135,16 @@ export function useCreateSynchronizer<
  * inner component accesses their Ids.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
  * import {
  *   Provider,
  *   useCreateMergeableStore,
  *   useCreateSynchronizer,
  *   useSynchronizerIds,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = () => {
  *   const store1 = useCreateMergeableStore(createMergeableStore);
@@ -12201,11 +12200,11 @@ export function useSynchronizerIds(): Ids;
  * it passed as a prop.
  *
  * ```jsx
- * import {Provider, useSynchronizer} from 'tinybase/ui-react';
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {Provider, useSynchronizer} from 'tinybase/ui-react';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizer={synchronizer}>
@@ -12228,11 +12227,11 @@ export function useSynchronizerIds(): Ids;
  * without the need to have it passed as a prop.
  *
  * ```jsx
- * import {Provider, useSynchronizer} from 'tinybase/ui-react';
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {Provider, useSynchronizer} from 'tinybase/ui-react';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizersById={{petSynchronizer: synchronizer}}>
@@ -12282,14 +12281,14 @@ export function useSynchronizer(id?: Id): Synchronizer | undefined;
  * portable.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
  * import {
  *   Provider,
  *   useSynchronizerOrSynchronizerById,
  * } from 'tinybase/ui-react';
- * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizer={synchronizer}>
@@ -12348,9 +12347,9 @@ export function useProvideSynchronizer(
  *
  * ```jsx
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
  * import {useSynchronizerStatus} from 'tinybase/ui-react';
  *
  * const synchronizer = createLocalSynchronizer(createMergeableStore());
@@ -12367,11 +12366,11 @@ export function useProvideSynchronizer(
  * provided. A component within it then uses the useSynchronizerStatus hook.
  *
  * ```jsx
- * import {Provider, useSynchronizerStatus} from 'tinybase/ui-react';
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {Provider, useSynchronizerStatus} from 'tinybase/ui-react';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizer={synchronizer}>
@@ -12392,11 +12391,11 @@ export function useProvideSynchronizer(
  * useSynchronizerStatus hook.
  *
  * ```jsx
- * import {Provider, useSynchronizerStatus} from 'tinybase/ui-react';
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {Provider, useSynchronizerStatus} from 'tinybase/ui-react';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizersById={{petSynchronizer: synchronizer}}>
@@ -12445,11 +12444,11 @@ export function useSynchronizerStatus(
  * listener is removed from the Synchronizer.
  *
  * ```jsx
- * import {Provider, useSynchronizerStatusListener} from 'tinybase/ui-react';
  * import React from 'react';
- * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
- * import {createMergeableStore} from 'tinybase';
  * import {createRoot} from 'react-dom/client';
+ * import {createMergeableStore} from 'tinybase';
+ * import {createLocalSynchronizer} from 'tinybase/synchronizers/synchronizer-local';
+ * import {Provider, useSynchronizerStatusListener} from 'tinybase/ui-react';
  *
  * const App = ({synchronizer}) => (
  *   <Provider synchronizer={synchronizer}>
@@ -13692,10 +13691,10 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * props.
  *
  * ```jsx
- * import {CellView, Provider, useMetric} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {CellView, Provider, useMetric} from 'tinybase/ui-react';
  *
  * const App = ({store, metrics}) => (
  *   <Provider store={store} metricsById={{petStore: metrics}}>
@@ -13726,15 +13725,15 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * objects are provided, showing how visibility is merged.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
  * import {
  *   CellView,
  *   Provider,
  *   useCreateStore,
  *   useMetric,
  * } from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({petStore, metrics}) => (
  *   <Provider storesById={{pet: petStore}} metrics={metrics}>
@@ -13806,10 +13805,10 @@ export function Provider(
  * the component.
  *
  * ```jsx
- * import {CellView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {CellView} from 'tinybase/ui-react';
  *
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => (
@@ -13833,10 +13832,10 @@ export function Provider(
  * for readability).
  *
  * ```jsx
- * import {CellView, Provider} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {CellView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -13861,10 +13860,10 @@ export function Provider(
  * non-existent Cell.
  *
  * ```jsx
- * import {CellView, Provider} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {CellView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -13920,9 +13919,9 @@ export function CellView(props: CellProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {RowView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {RowView} from 'tinybase/ui-react';
  *
  * const store = createStore().setRow('pets', 'fido', {species: 'dog'});
  * const App = () => (
@@ -13946,10 +13945,10 @@ export function CellView(props: CellProps): ComponentReturnType;
  * set of Cell Ids (and rendered with Ids for readability).
  *
  * ```jsx
- * import {Provider, RowView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, RowView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -13984,10 +13983,10 @@ export function CellView(props: CellProps): ComponentReturnType;
  * Cell component and a custom props callback.
  *
  * ```jsx
- * import {CellView, Provider, RowView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {CellView, Provider, RowView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14061,9 +14060,9 @@ export function RowView(props: RowProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {SortedTableView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {SortedTableView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({
  *   pets: {
@@ -14097,10 +14096,10 @@ export function RowView(props: RowProps): ComponentReturnType;
  * a custom set of Cell Ids (and rendered with Ids for readability).
  *
  * ```jsx
- * import {Provider, SortedTableView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, SortedTableView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14136,10 +14135,10 @@ export function RowView(props: RowProps): ComponentReturnType;
  * a custom Row component and a custom props callback.
  *
  * ```jsx
- * import {Provider, RowView, SortedTableView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, RowView, SortedTableView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14213,9 +14212,9 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {TableView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {TableView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const App = () => (
@@ -14239,10 +14238,10 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  * custom set of Cell Ids (and rendered with Ids for readability).
  *
  * ```jsx
- * import {Provider, TableView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, TableView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14275,10 +14274,10 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
  * custom Row component and a custom props callback.
  *
  * ```jsx
- * import {Provider, RowView, TableView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, RowView, TableView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14343,9 +14342,9 @@ export function TableView(props: TableProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {TablesView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {TablesView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
  * const App = () => (
@@ -14369,10 +14368,10 @@ export function TableView(props: TableProps): ComponentReturnType;
  * for readability).
  *
  * ```jsx
- * import {Provider, TablesView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, TablesView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14400,10 +14399,10 @@ export function TableView(props: TableProps): ComponentReturnType;
  * custom Table component and a custom props callback.
  *
  * ```jsx
- * import {Provider, TableView, TablesView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, TableView, TablesView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14465,9 +14464,9 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {ValueView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {ValueView} from 'tinybase/ui-react';
  *
  * const store = createStore().setValue('open', true);
  * const App = () => (
@@ -14491,10 +14490,10 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * Id for readability).
  *
  * ```jsx
- * import {Provider, ValueView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, ValueView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14519,10 +14518,10 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * non-existent Value.
  *
  * ```jsx
- * import {Provider, ValueView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, ValueView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14575,9 +14574,9 @@ export function ValueView(props: ValueProps): ComponentReturnType;
  *
  * ```jsx
  * import React from 'react';
- * import {ValuesView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {ValuesView} from 'tinybase/ui-react';
  *
  * const store = createStore().setValue('open', true);
  * const App = () => (
@@ -14601,10 +14600,10 @@ export function ValueView(props: ValueProps): ComponentReturnType;
  * Ids for readability).
  *
  * ```jsx
- * import {Provider, ValuesView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, ValuesView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14629,10 +14628,10 @@ export function ValueView(props: ValueProps): ComponentReturnType;
  * custom Value component and a custom props callback.
  *
  * ```jsx
- * import {Provider, ValueView, ValuesView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
  * import {createStore} from 'tinybase';
+ * import {Provider, ValueView, ValuesView} from 'tinybase/ui-react';
  *
  * const App = ({store}) => (
  *   <Provider store={store}>
@@ -14685,10 +14684,10 @@ export function ValuesView(props: ValuesProps): ComponentReturnType;
  * re-renders the component.
  *
  * ```jsx
- * import {createMetrics, createStore} from 'tinybase';
- * import {MetricView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {MetricView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('species', {
  *   dog: {price: 5},
@@ -14718,10 +14717,10 @@ export function ValuesView(props: ValuesProps): ComponentReturnType;
  * its Id for readability).
  *
  * ```jsx
- * import {MetricView, Provider} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {MetricView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -14753,10 +14752,10 @@ export function ValuesView(props: ValuesProps): ComponentReturnType;
  * non-existent Metric.
  *
  * ```jsx
- * import {MetricView, Provider} from 'tinybase/ui-react';
- * import {createMetrics, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createMetrics, createStore} from 'tinybase';
+ * import {MetricView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
@@ -14811,10 +14810,10 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * the component.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
- * import {SliceView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {SliceView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
@@ -14848,10 +14847,10 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * Ids for readability).
  *
  * ```jsx
- * import {Provider, SliceView} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, SliceView} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -14883,10 +14882,10 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * custom Row component and a custom props callback.
  *
  * ```jsx
- * import {Provider, RowView, SliceView} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {Provider, RowView, SliceView} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -14955,10 +14954,10 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * the component.
  *
  * ```jsx
- * import {createIndexes, createStore} from 'tinybase';
- * import {IndexView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {IndexView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
@@ -14987,10 +14986,10 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * Ids for readability).
  *
  * ```jsx
- * import {IndexView, Provider} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {IndexView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -15021,10 +15020,10 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * custom Slice component and a custom props callback.
  *
  * ```jsx
- * import {IndexView, Provider, SliceView} from 'tinybase/ui-react';
- * import {createIndexes, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createIndexes, createStore} from 'tinybase';
+ * import {IndexView, Provider, SliceView} from 'tinybase/ui-react';
  *
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
@@ -15094,10 +15093,10 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
- * import {RemoteRowView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {RemoteRowView} from 'tinybase/ui-react';
  *
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
@@ -15133,10 +15132,10 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * remote Row (with Ids for readability).
  *
  * ```jsx
- * import {Provider, RemoteRowView} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, RemoteRowView} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15171,10 +15170,10 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * remote Row with a custom Row component and a custom props callback.
  *
  * ```jsx
- * import {Provider, RemoteRowView, RowView} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {Provider, RemoteRowView, RowView} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15244,10 +15243,10 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
- * import {LocalRowsView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LocalRowsView} from 'tinybase/ui-react';
  *
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
@@ -15284,10 +15283,10 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * local Row objects (with Ids for readability).
  *
  * ```jsx
- * import {LocalRowsView, Provider} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LocalRowsView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15322,10 +15321,10 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * local Row objects with a custom Row component and a custom props callback.
  *
  * ```jsx
- * import {LocalRowsView, Provider, RowView} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LocalRowsView, Provider, RowView} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15395,10 +15394,10 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * re-renders the component.
  *
  * ```jsx
- * import {createRelationships, createStore} from 'tinybase';
- * import {LinkedRowsView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LinkedRowsView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {next: 'felix'},
@@ -15438,10 +15437,10 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * local Row objects (with Ids for readability).
  *
  * ```jsx
- * import {LinkedRowsView, Provider} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LinkedRowsView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15477,10 +15476,10 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * local Row objects with a custom Row component and a custom props callback.
  *
  * ```jsx
- * import {LinkedRowsView, Provider, RowView} from 'tinybase/ui-react';
- * import {createRelationships, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createRelationships, createStore} from 'tinybase';
+ * import {LinkedRowsView, Provider, RowView} from 'tinybase/ui-react';
  *
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
@@ -15548,10 +15547,10 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  * Store re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
- * import {ResultCellView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {ResultCellView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog', color: 'brown'},
@@ -15589,10 +15588,10 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  * (with its Id for readability).
  *
  * ```jsx
- * import {Provider, ResultCellView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultCellView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -15628,10 +15627,10 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  * non-existent Cell.
  *
  * ```jsx
- * import {Provider, ResultCellView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultCellView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -15691,10 +15690,10 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  * Store re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
- * import {ResultRowView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {ResultRowView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog', color: 'brown'},
@@ -15735,10 +15734,10 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  * Ids for readability).
  *
  * ```jsx
- * import {Provider, ResultRowView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultRowView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -15772,10 +15771,10 @@ export function ResultCellView(props: ResultCellProps): ComponentReturnType;
  * a custom Cell component and a custom props callback.
  *
  * ```jsx
- * import {Provider, ResultCellView, ResultRowView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultCellView, ResultRowView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -15852,10 +15851,10 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  * the Store re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
- * import {ResultSortedTableView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {ResultSortedTableView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog', color: 'brown'},
@@ -15892,10 +15891,10 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  * Table (with Ids for readability).
  *
  * ```jsx
- * import {Provider, ResultSortedTableView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultSortedTableView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -15929,14 +15928,14 @@ export function ResultRowView(props: ResultRowProps): ComponentReturnType;
  * Table with a custom Row component and a custom props callback.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
  * import {
  *   Provider,
  *   ResultRowView,
  *   ResultSortedTableView,
  * } from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -16006,10 +16005,10 @@ export function ResultSortedTableView(
  * Store re-renders the component.
  *
  * ```jsx
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
- * import {ResultTableView} from 'tinybase/ui-react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {ResultTableView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog', color: 'brown'},
@@ -16041,10 +16040,10 @@ export function ResultSortedTableView(
  * (with Ids for readability).
  *
  * ```jsx
- * import {Provider, ResultTableView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultTableView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -16074,10 +16073,10 @@ export function ResultSortedTableView(
  * with a custom Row component and a custom props callback.
  *
  * ```jsx
- * import {Provider, ResultRowView, ResultTableView} from 'tinybase/ui-react';
- * import {createQueries, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider, ResultRowView, ResultTableView} from 'tinybase/ui-react';
  *
  * const App = ({queries}) => (
  *   <Provider queries={queries}>
@@ -16138,10 +16137,10 @@ export function ResultTableView(props: ResultTableProps): ComponentReturnType;
  * a label (with its Id for readability).
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {CheckpointView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {CheckpointView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const checkpoints = createCheckpoints(store);
@@ -16200,10 +16199,10 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * of previous checkpoints.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {BackwardCheckpointsView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {BackwardCheckpointsView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
@@ -16235,10 +16234,10 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * renders the list of previous checkpoints (with Ids for readability).
  *
  * ```jsx
- * import {BackwardCheckpointsView, Provider} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {BackwardCheckpointsView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -16273,14 +16272,14 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * custom props callback.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {
  *   BackwardCheckpointsView,
  *   CheckpointView,
  *   Provider,
  * } from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -16354,10 +16353,10 @@ export function BackwardCheckpointsView(
  * current checkpoints.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {CurrentCheckpointView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {CurrentCheckpointView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
@@ -16391,10 +16390,10 @@ export function BackwardCheckpointsView(
  * renders current checkpoint (with its Id for readability).
  *
  * ```jsx
- * import {CurrentCheckpointView, Provider} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {CurrentCheckpointView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -16426,14 +16425,14 @@ export function BackwardCheckpointsView(
  * custom props callback.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {
  *   CheckpointView,
  *   CurrentCheckpointView,
  *   Provider,
  * } from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -16510,10 +16509,10 @@ export function CurrentCheckpointView(
  * of future checkpoints.
  *
  * ```jsx
- * import {createCheckpoints, createStore} from 'tinybase';
- * import {ForwardCheckpointsView} from 'tinybase/ui-react';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {ForwardCheckpointsView} from 'tinybase/ui-react';
  *
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
@@ -16546,10 +16545,10 @@ export function CurrentCheckpointView(
  * renders the list of future checkpoints (with Ids for readability).
  *
  * ```jsx
- * import {ForwardCheckpointsView, Provider} from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
  * import React from 'react';
  * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
+ * import {ForwardCheckpointsView, Provider} from 'tinybase/ui-react';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
@@ -16584,14 +16583,14 @@ export function CurrentCheckpointView(
  * custom props callback.
  *
  * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createCheckpoints, createStore} from 'tinybase';
  * import {
  *   CheckpointView,
  *   ForwardCheckpointsView,
  *   Provider,
  * } from 'tinybase/ui-react';
- * import {createCheckpoints, createStore} from 'tinybase';
- * import React from 'react';
- * import {createRoot} from 'react-dom/client';
  *
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>