tinybase 0.9.0 → 0.9.4

package/lib/debug/{react.d.ts → ui-react.d.ts}

@@ -1,6 +1,6 @@
 /**
- * The react module of the TinyBase project provides both hooks and components
- * to make it easy to create reactive apps with Store objects.
+ * The ui-react module of the TinyBase project provides both hooks and
+ * components to make it easy to create reactive apps with Store objects.
  *
  * The hooks in this module provide access to the data and structures exposed by
  * other modules in the project. As well as immediate access, they all register
@@ -11,7 +11,7 @@
  * to ease the composition of user interfaces that use TinyBase.
  *
  * @packageDocumentation
- * @module react
+ * @module ui-react
  */
 
 import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d';
@@ -57,8 +57,8 @@ import {Persister} from './persisters.d';
  * multiple Store objects into a context that can be used throughout the app. In
  * this case you will want to refer to a Store by its Id in that context.
  *
- * Many hooks and components in this react module take this type as a parameter
- * or a prop, allowing you to pass in either the Store or its Id.
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
  *
  * @category Identity
  */
@@ -76,8 +76,8 @@ export type StoreOrStoreId = Store | Id;
  * In this case you will want to refer to a Metrics object by its Id in that
  * context.
  *
- * Many hooks and components in this react module take this type as a parameter
- * or a prop, allowing you to pass in either the Store or its Id.
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
  *
  * @category Identity
  */
@@ -95,8 +95,8 @@ export type MetricsOrMetricsId = Metrics | Id;
  * In this case you will want to refer to an Indexes object by its Id in that
  * context.
  *
- * Many hooks and components in this react module take this type as a parameter
- * or a prop, allowing you to pass in either the Store or its Id.
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
  *
  * @category Identity
  */
@@ -114,8 +114,8 @@ export type IndexesOrIndexesId = Indexes | Id;
  * app. In this case you will want to refer to a Relationships object by its Id
  * in that context.
  *
- * Many hooks and components in this react module take this type as a parameter
- * or a prop, allowing you to pass in either the Store or its Id.
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
  *
  * @category Identity
  */
@@ -133,8 +133,8 @@ export type RelationshipsOrRelationshipsId = Relationships | Id;
  * app. In this case you will want to refer to a Checkpoints object by its Id in
  * that context.
  *
- * Many hooks and components in this react module take this type as a parameter
- * or a prop, allowing you to pass in either the Store or its Id.
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
  *
  * @category Identity
  */
@@ -183,7 +183,7 @@ export type UndoOrRedoInformation = [boolean, Callback, Id | undefined, string];
  * Even though the App component is rendered twice, the Store creation only
  * occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore(() => {
  *     console.log('Store created');
@@ -208,7 +208,7 @@ export type UndoOrRedoInformation = [boolean, Callback, Id | undefined, string];
  * The useCreateStore hook takes the `fidoSpecies` prop as a dependency, and so
  * the Store is created again on the second render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({fidoSpecies}) => {
  *   const store = useCreateStore(() => {
  *     console.log(`Store created for fido as ${fidoSpecies}`);
@@ -259,7 +259,7 @@ export function useCreateStore(
  * provided. A component within it then uses the useStore hook to get a
  * reference to the Store again, without the need to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -278,7 +278,7 @@ export function useCreateStore(
  * by Id. A component within it then uses the useStore hook with that Id to get
  * a reference to the Store again, without the need to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -322,7 +322,7 @@ export function useStore(id?: Id): Store | undefined;
  * useTables hook by reference. A change to the data in the Store re-renders the
  * component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => <span>{JSON.stringify(useTables(store))}</span>;
  *
@@ -339,7 +339,7 @@ export function useStore(id?: Id): Store | undefined;
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useTables hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -357,7 +357,7 @@ export function useStore(id?: Id): Store | undefined;
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useTables hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -397,7 +397,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * useTableIds hook by reference. A change to the data in the Store re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => <span>{JSON.stringify(useTableIds(store))}</span>;
  *
@@ -414,7 +414,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useTableIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -432,7 +432,7 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useTableIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -475,7 +475,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * useTable hook by reference. A change to the data in the Store re-renders the
  * component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => <span>{JSON.stringify(useTable('pets', store))}</span>;
  *
@@ -492,7 +492,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useTable hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -510,7 +510,7 @@ export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useTable hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -555,7 +555,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * useRowIds hook by reference. A change to the data in the Store re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => <span>{JSON.stringify(useRowIds('pets', store))}</span>;
  *
@@ -572,7 +572,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -590,7 +590,7 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -636,7 +636,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * useRow hook by reference. A change to the data in the Store re-renders the
  * component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => (
  *   <span>{JSON.stringify(useRow('pets', 'fido', store))}</span>
@@ -655,7 +655,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useRow hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -673,7 +673,7 @@ export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useRow hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -723,7 +723,7 @@ export function useRow(
  * useCellIds hook by reference. A change to the data in the Store re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => (
  *   <span>{JSON.stringify(useCellIds('pets', 'fido', store))}</span>
@@ -742,7 +742,7 @@ export function useRow(
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useCellIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -762,7 +762,7 @@ export function useRow(
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useCellIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -813,7 +813,7 @@ export function useCellIds(
  * useCell hook by reference. A change to the data in the Store re-renders the
  * component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => <span>{useCell('pets', 'fido', 'color', store)}</span>;
  *
@@ -830,7 +830,7 @@ export function useCellIds(
  * This example creates a Provider context into which a default Store is
  * provided. A component within it then uses the useCell hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -848,7 +848,7 @@ export function useCellIds(
  * This example creates a Provider context into which a Store is provided, named
  * by Id. A component within it then uses the useCell hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider storesById={{petStore: store}}>
  *     <Pane />
@@ -917,7 +917,7 @@ export function useCell(
  * This example uses the useSetTablesCallback hook to create an event handler
  * which updates the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
  *   const handleClick = useSetTablesCallback(
@@ -1001,7 +1001,7 @@ export function useSetTablesCallback<Parameter>(
  * This example uses the useSetTableCallback hook to create an event handler
  * which updates the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {nemo: {species: 'fish'}});
  * const App = () => {
  *   const handleClick = useSetTableCallback(
@@ -1088,7 +1088,7 @@ export function useSetTableCallback<Parameter>(
  * This example uses the useSetRowCallback hook to create an event handler which
  * updates the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
  *   const handleClick = useSetRowCallback(
@@ -1176,7 +1176,7 @@ export function useSetRowCallback<Parameter>(
  * This example uses the useAddRowCallback hook to create an event handler which
  * updates the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
  *   const handleClick = useAddRowCallback(
@@ -1264,7 +1264,7 @@ export function useAddRowCallback<Parameter>(
  * This example uses the useSetPartialRowCallback hook to create an event
  * handler which updates the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
  * const App = () => {
  *   const handleClick = useSetPartialRowCallback(
@@ -1355,7 +1355,7 @@ export function useSetPartialRowCallback<Parameter>(
  * This example uses the useSetCellCallback hook to create an event handler
  * which updates the Store with a Cell value when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'nemo', 'species', 'fish');
  * const App = () => {
  *   const handleClick = useSetCellCallback(
@@ -1392,7 +1392,7 @@ export function useSetPartialRowCallback<Parameter>(
  * which updates the Store via a MapCell function when the `span` element is
  * clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'nemo', 'visits', 1);
  * const App = () => {
  *   const handleClick = useSetCellCallback(
@@ -1466,7 +1466,7 @@ export function useSetCellCallback<Parameter>(
  * This example uses the useDelTablesCallback hook to create an event handler
  * which deletes from the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
  *   const handleClick = useDelTablesCallback(store, () =>
@@ -1530,7 +1530,7 @@ export function useDelTablesCallback(
  * This example uses the useDelTableCallback hook to create an event handler
  * which deletes from the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
  *   const handleClick = useDelTableCallback('pets', store, () =>
@@ -1596,7 +1596,7 @@ export function useDelTableCallback(
  * This example uses the useDelRowCallback hook to create an event handler which
  * deletes from the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
  *   const handleClick = useDelRowCallback('pets', 'nemo', store, () =>
@@ -1667,7 +1667,7 @@ export function useDelRowCallback(
  * This example uses the useDelCellCallback hook to create an event handler
  * which deletes from the Store when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const App = () => {
  *   const handleClick = useDelCellCallback(
@@ -1738,7 +1738,7 @@ export function useDelCellCallback(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1800,7 +1800,7 @@ export function useTablesListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1865,7 +1865,7 @@ export function useTableIdsListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -1931,7 +1931,7 @@ export function useTableListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -2004,7 +2004,7 @@ export function useRowIdsListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -2079,7 +2079,7 @@ export function useRowListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -2156,7 +2156,7 @@ export function useCellIdsListener(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -2213,6 +2213,9 @@ export function useCellListener(
  * an array in the optional second parameter, just as you would for any React
  * hook with dependencies.
  *
+ * This hook ensures the Metrics object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
  * @param store A reference to the Store for which to create a new Metrics
  * object.
  * @param create A function for performing the creation steps of the Metrics
@@ -2227,7 +2230,7 @@ export function useCellListener(
  * application. Even though the App component is rendered twice, the Metrics
  * object creation only occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore(() =>
  *     createStore().setTable('species', {dog: {price: 5}, cat: {price: 4}}),
@@ -2258,7 +2261,7 @@ export function useCellListener(
  * top-level prop. The useCreateMetrics hook takes the tableToCount prop as a
  * dependency, and so the Metrics object is created again on the second render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({tableToCount}) => {
  *   const store = useCreateStore(() =>
  *     createStore()
@@ -2323,7 +2326,7 @@ export function useCreateMetrics(
  * reference to the Metrics object again, without the need to have it passed
  * as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
  *     <Pane />
@@ -2343,7 +2346,7 @@ export function useCreateMetrics(
  * with that Id to get a reference to the Metrics object again, without the need
  * to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metricsById={{petStore: metrics}}>
  *     <Pane />
@@ -2388,7 +2391,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * in the useMetric hook by reference. A change to the Metric re-renders the
  * component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('species', {
  *   dog: {price: 5},
  *   cat: {price: 4},
@@ -2411,7 +2414,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * This example creates a Provider context into which a default Metrics object
  * is provided. A component within it then uses the useMetric hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
  *     <Pane />
@@ -2436,7 +2439,7 @@ export function useMetrics(id?: Id): Metrics | undefined;
  * This example creates a Provider context into which a default Metrics object
  * is provided. A component within it then uses the useMetric hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metricsById={{petMetrics: metrics}}>
  *     <Pane />
@@ -2495,7 +2498,7 @@ export function useMetric(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Metrics object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
  *     <Pane />
@@ -2554,6 +2557,9 @@ export function useMetricListener(
  * an array in the optional second parameter, just as you would for any React
  * hook with dependencies.
  *
+ * This hook ensures the Indexes object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
  * @param store A reference to the Store for which to create a new Indexes
  * object.
  * @param create A function for performing the creation steps of the Indexes
@@ -2568,7 +2574,7 @@ export function useMetricListener(
  * application. Even though the App component is rendered twice, the Indexes
  * object creation only occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore((store) =>
  *     createStore().setTable('pets', {
@@ -2604,7 +2610,7 @@ export function useMetricListener(
  * top-level prop. The useCreateIndexes hook takes the cellToIndex prop as a
  * dependency, and so the Indexes object is created again on the second render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({cellToIndex}) => {
  *   const store = useCreateStore(() =>
  *     createStore().setTable('pets', {
@@ -2672,7 +2678,7 @@ export function useCreateIndexes(
  * reference to the Indexes object again, without the need to have it passed
  * as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -2692,7 +2698,7 @@ export function useCreateIndexes(
  * with that Id to get a reference to the Indexes object again, without the need
  * to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petStore: indexes}}>
  *     <Pane />
@@ -2737,7 +2743,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * in the useSliceIds hook by reference. A change to the Slice Ids re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
  *   felix: {species: 'cat'},
@@ -2762,7 +2768,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * This example creates a Provider context into which a default Indexes object
  * is provided. A component within it then uses the useSliceIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -2787,7 +2793,7 @@ export function useIndexes(id?: Id): Indexes | undefined;
  * This example creates a Provider context into which a default Indexes object
  * is provided. A component within it then uses the useSliceIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petIndexes: indexes}}>
  *     <Pane />
@@ -2844,7 +2850,7 @@ export function useSliceIds(
  * in the useSliceRowIds hook by reference. A change to the Row Ids in the Slice
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
  *   felix: {species: 'cat'},
@@ -2871,7 +2877,7 @@ export function useSliceIds(
  * This example creates a Provider context into which a default Indexes object
  * is provided. A component within it then uses the useSliceRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -2898,7 +2904,7 @@ export function useSliceIds(
  * This example creates a Provider context into which a default Indexes object
  * is provided. A component within it then uses the useSliceRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexesById={{petIndexes: indexes}}>
  *     <Pane />
@@ -2963,7 +2969,7 @@ export function useSliceRowIds(
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Indexes object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -3041,7 +3047,7 @@ export function useSliceIdsListener(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Indexes object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -3104,6 +3110,9 @@ export function useSliceRowIdsListener(
  * them in an array in the optional second parameter, just as you would for any
  * React hook with dependencies.
  *
+ * This hook ensures the Relationships object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
  * @param store A reference to the Store for which to create a new Relationships
  * object.
  * @param create An optional callback for performing post-creation steps on the
@@ -3117,7 +3126,7 @@ export function useSliceRowIdsListener(
  * application. Even though the App component is rendered twice, the
  * Relationships object creation only occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore(() =>
  *     createStore()
@@ -3157,7 +3166,7 @@ export function useSliceRowIdsListener(
  * `remoteTableAndCellToLink` prop as a dependency, and so the Relationships
  * object is created again on the second render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({remoteTableAndCellToLink}) => {
  *   const store = useCreateStore(() =>
  *     createStore()
@@ -3231,7 +3240,7 @@ export function useCreateRelationships(
  * to get a reference to the Relationships object again, without the need to
  * have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3253,7 +3262,7 @@ export function useCreateRelationships(
  * hook with that Id to get a reference to the Relationships object again,
  * without the need to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petStore: relationships}}>
  *     <Pane />
@@ -3303,7 +3312,7 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * used in the useRemoteRowId hook by reference. A change to the remote Row Id
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
  *   .setTable('species', {wolf: {price: 10}, dog: {price: 5}});
@@ -3330,7 +3339,7 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useRemoteRowId hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3353,7 +3362,7 @@ export function useRelationships(id?: Id): Relationships | undefined;
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useRemoteRowId hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
  *     <Pane />
@@ -3410,7 +3419,7 @@ export function useRemoteRowId(
  * used in the useLocalRowIds hook by reference. A change to the local Row Ids
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
  *   .setTable('species', {wolf: {price: 10}, dog: {price: 5}});
@@ -3439,7 +3448,7 @@ export function useRemoteRowId(
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useLocalRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3464,7 +3473,7 @@ export function useRemoteRowId(
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useLocalRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
  *     <Pane />
@@ -3525,7 +3534,7 @@ export function useLocalRowIds(
  * used in the useLinkedRowIds hook by reference. A change to the linked Row Ids
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog', next: 'felix'},
  *   felix: {species: 'cat', next: 'cujo'},
@@ -3557,7 +3566,7 @@ export function useLocalRowIds(
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useLinkedRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3584,7 +3593,7 @@ export function useLocalRowIds(
  * This example creates a Provider context into which a default Relationships
  * object is provided. A component within it then uses the useLinkedRowIds hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationshipsById={{petRelationships: relationships}}>
  *     <Pane />
@@ -3661,7 +3670,7 @@ export function useLinkedRowIds(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Relationships object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3749,7 +3758,7 @@ export function useRemoteRowIdListener(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Relationships object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3831,7 +3840,7 @@ export function useLocalRowIdsListener(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Relationships object.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -3900,6 +3909,9 @@ export function useLinkedRowIdsListener(
  * them in an array in the optional second parameter, just as you would for any
  * React hook with dependencies.
  *
+ * This hook ensures the Checkpoints object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
  * @param store A reference to the Store for which to create a new Checkpoints
  * object.
  * @param create A function for performing the creation steps of the Checkpoints
@@ -3914,7 +3926,7 @@ export function useLinkedRowIdsListener(
  * application. Even though the App component is rendered twice, the
  * Checkpoints object creation only occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore(createStore);
  *   const checkpoints = useCreateCheckpoints(store, (store) => {
@@ -3941,7 +3953,7 @@ export function useLinkedRowIdsListener(
  * dependency, and so the Checkpoints object is created again on the second
  * render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({size}) => {
  *   const store = useCreateStore(createStore);
  *   const checkpoints = useCreateCheckpoints(
@@ -3999,7 +4011,7 @@ export function useCreateCheckpoints(
  * to get a reference to the Checkpoints object again, without the need to have
  * it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -4021,7 +4033,7 @@ export function useCreateCheckpoints(
  * hook with that Id to get a reference to the Checkpoints object again, without
  * the need to have it passed as a prop.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petStore: checkpoints}}>
  *     <Pane />
@@ -4070,7 +4082,7 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * used in the useCheckpointIds hook by reference. A change to the checkpoint
  * Ids re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -4095,7 +4107,7 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * object is provided. A component within it then uses the useCheckpointIds
  * hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -4117,7 +4129,7 @@ export function useCheckpoints(id?: Id): Checkpoints | undefined;
  * object is provided. A component within it then uses the useCheckpointIds
  * hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
  *     <Pane />
@@ -4168,7 +4180,7 @@ export function useCheckpointIds(
  * used in the useCheckpoint hook by reference. A change to the checkpoint label
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => <span>{useCheckpoint('1', checkpoints)}</span>;
@@ -4188,7 +4200,7 @@ export function useCheckpointIds(
  * object is provided. A component within it then uses the useCheckpoint
  * hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -4210,7 +4222,7 @@ export function useCheckpointIds(
  * object is provided. A component within it then uses the useCheckpoint
  * hook.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
  *     <Pane />
@@ -4279,7 +4291,7 @@ export function useCheckpoint(
  * This example uses the useSetCheckpointCallback hook to create an event
  * handler which sets a checkpoint when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => {
@@ -4336,7 +4348,7 @@ export function useSetCheckpointCallback<Parameter>(
  * which goes backward in the checkpoint stack when the `span` element is
  * clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -4384,7 +4396,7 @@ export function useGoBackwardCallback(
  * which goes backward in the checkpoint stack when the `span` element is
  * clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -4461,7 +4473,7 @@ export function useGoForwardCallback(
  * This example uses the useGoToCallback hook to create an event handler which
  * moves to a checkpoint when the `span` element is clicked.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => {
@@ -4515,7 +4527,7 @@ export function useGoToCallback<Parameter>(
  * @example
  * This example uses the useUndoInformation hook to create an undo button.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => {
@@ -4561,7 +4573,7 @@ export function useUndoInformation(
  * @example
  * This example uses the useUndoInformation hook to create a redo button.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => {
@@ -4618,7 +4630,7 @@ export function useRedoInformation(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -4688,7 +4700,7 @@ export function useCheckpointIdsListener(
  * is scoped to a single component. When the component is unmounted, the
  * listener is removed from the Store.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -4751,6 +4763,9 @@ export function useCheckpointListener(
  * an array in the fifth parameter. The Persister itself is used as a dependency
  * by default.
  *
+ * This hook ensures the Persister object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
  * @param store A reference to the Store for which to create a new Persister
  * object.
  * @param create A function for performing the creation steps of the Persister
@@ -4769,7 +4784,7 @@ export function useCheckpointListener(
  * Even though the App component is rendered twice, the Persister creation only
  * occurs once by default.
  *
- * ```tsx
+ * ```jsx
  * const App = () => {
  *   const store = useCreateStore(createStore);
  *   const persister = useCreatePersister(
@@ -4795,10 +4810,12 @@ export function useCheckpointListener(
  *
  * // ... // !act
  * ReactDOM.render(<App />, app); // !act
- * // No second Checkpoints creation
+ * // No second Persister creation
  *
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"fido\":{\"species\":\"dog\"}}}</span>'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
  * ```
  * @example
  * This example creates a Persister at the top level of a React application. The
@@ -4806,7 +4823,7 @@ export function useCheckpointListener(
  * useCreatePersister hook takes the `sessionKey` prop as a dependency, and so
  * the Persister object is created again on the second render.
  *
- * ```tsx
+ * ```jsx
  * const App = ({sessionKey}) => {
  *   const store = useCreateStore(createStore);
  *   const persister = useCreatePersister(
@@ -4841,6 +4858,8 @@ export function useCheckpointListener(
  * // ... // !act
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"cujo\":{\"species\":\"dog\"}}}</span>'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
  * ```
  *  @category Persister hooks
  */
@@ -4853,13 +4872,17 @@ export function useCreatePersister(
 ): Persister;
 
 /**
- * The ExtraProps type represents a set of arbitrary additional props..
+ * The ExtraProps type represents a set of arbitrary additional props.
+ *
+ * @category Props
  */
 export type ExtraProps = {[propName: string]: any};
 
 /**
  * TablesProps props are used for components that refer to all the Tables in a
  * Store, such as the TablesView component.
+ *
+ * @category Props
  */
 export type TablesProps = {
   /**
@@ -4891,6 +4914,8 @@ export type TablesProps = {
 /**
  * TableProps props are used for components that refer to a single Table in a
  * Store, such as the TableView component.
+ *
+ * @category Props
  */
 export type TableProps = {
   /**
@@ -4926,6 +4951,8 @@ export type TableProps = {
 /**
  * RowProps props are used for components that refer to a single Row in a Table,
  * such as the RowView component.
+ *
+ * @category Props
  */
 export type RowProps = {
   /**
@@ -4965,6 +4992,8 @@ export type RowProps = {
 /**
  * RowProps props are used for components that refer to a single Cell in a Row,
  * such as the CellView component.
+ *
+ * @category Props
  */
 export type CellProps = {
   /**
@@ -4994,6 +5023,8 @@ export type CellProps = {
 /**
  * MetricProps props are used for components that refer to a single Metric in a
  * Metrics object, such as the MetricView component.
+ *
+ * @category Props
  */
 export type MetricProps = {
   /**
@@ -5016,6 +5047,8 @@ export type MetricProps = {
 /**
  * IndexProps props are used for components that refer to a single Index in an
  * Indexes object, such as the IndexView component.
+ *
+ * @category Props
  */
 export type IndexProps = {
   /**
@@ -5051,6 +5084,8 @@ export type IndexProps = {
 /**
  * IndexProps props are used for components that refer to a single Slice in an
  * Index object, such as the SliceView component.
+ *
+ * @category Props
  */
 export type SliceProps = {
   /**
@@ -5091,6 +5126,8 @@ export type SliceProps = {
  * RemoteRowProps props are used for components that refer to a single
  * Relationship in an Relationships object, and where you want to render a
  * remote Row based on a local Row, such as in the RemoteRowView component.
+ *
+ * @category Props
  */
 export type RemoteRowProps = {
   /**
@@ -5128,6 +5165,8 @@ export type RemoteRowProps = {
  * LocalRowsProps props are used for components that refer to a single
  * Relationship in an Relationships object, and where you want to render local
  * Rows based on a remote Row, such as the LocalRowsView component.
+ *
+ * @category Props
  */
 export type LocalRowsProps = {
   /**
@@ -5170,6 +5209,8 @@ export type LocalRowsProps = {
  * Relationship in an Relationships object, and where you want to render a
  * linked list of Rows starting from a first Row, such as the LinkedRowsView
  * component.
+ *
+ * @category Props
  */
 export type LinkedRowsProps = {
   /**
@@ -5210,6 +5251,8 @@ export type LinkedRowsProps = {
 /**
  * CheckpointProps props are used for components that refer to a single
  * checkpoint in an Checkpoints object, such as the CheckpointView component.
+ *
+ * @category Props
  */
 export type CheckpointProps = {
   /**
@@ -5233,6 +5276,8 @@ export type CheckpointProps = {
  * BackwardCheckpointsProps props are used for components that refer to a list
  * of previous checkpoints in a Checkpoints object, such as the
  * BackwardCheckpointsView component.
+ *
+ * @category Props
  */
 export type BackwardCheckpointsProps = {
   /**
@@ -5265,6 +5310,8 @@ export type BackwardCheckpointsProps = {
  * CurrentCheckpointsProps props are used for components that refer to the
  * current checkpoints in a Checkpoints object, such as the
  * BackwardCheckpointsView component.
+ *
+ * @category Props
  */
 export type CurrentCheckpointProps = {
   /**
@@ -5293,6 +5340,8 @@ export type CurrentCheckpointProps = {
  * ForwardCheckpointsProps props are used for components that refer to a list of
  * future checkpoints in a Checkpoints object, such as the
  * ForwardCheckpointsView component.
+ *
+ * @category Props
  */
 export type ForwardCheckpointsProps = {
   /**
@@ -5324,10 +5373,13 @@ export type ForwardCheckpointsProps = {
 /**
  * ProviderProps props are used with the Provider component, so that Store
  * Metrics, Indexes, Relationships, and Checkpoints objects can be passed into
- * the context of an application and used throughout. One of each type of object
- * can be provided as a default within the context. Additionally, multiple of
- * each type of object can be provided in an Id-keyed map to the `___ById`
- * props.
+ * the context of an application and used throughout.
+ *
+ * One of each type of object can be provided as a default within the context.
+ * Additionally, multiple of each type of object can be provided in an Id-keyed
+ * map to the `___ById` props.
+ *
+ * @category Props
  */
 export type ProviderProps = {
   /**
@@ -5385,6 +5437,8 @@ export type ProviderProps = {
 /**
  * ComponentReturnType is a simple alias for what a React component can return:
  * either a ReactElement, or `null` for an empty component.
+ *
+ * @category Component
  */
 export type ComponentReturnType = ReactElement<any, any> | null;
 
@@ -5398,9 +5452,12 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * multiple of each type of object can be provided in an Id-keyed map to the
  * `___ById` props.
  *
- * Provider contexts can be nested but they are completely opaque. For example,
- * if an outer context contains a Store and an inner context contains only a
- * Metrics object, the Store will not be visible within the inner context.
+ * Provider contexts can be nested and the objects passed in will be merged. For
+ * example, if an outer context contains a default Metrics object and an inner
+ * context contains only a default Store, both the Metrics objects and the Store
+ * will be visible within the inner context. If the outer context contains a
+ * Store named by Id and the inner context contains a Store named by a different
+ * Id, both will be visible within the inner context.
  *
  * @param props The props for this component.
  * @returns A rendering of the child components.
@@ -5410,7 +5467,7 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * it then render content from both, without the need to have them passed as
  * props.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store, metrics}) => (
  *   <Provider store={store} metricsById={{petStore: metrics}}>
  *     <Pane />
@@ -5434,6 +5491,49 @@ export type ComponentReturnType = ReactElement<any, any> | null;
  * console.log(app.innerHTML);
  * // -> '<span>5,4,5</span>'
  * ```
+ * @example
+ * This example creates nested Provider contexts into which Store and Metrics
+ * objects are provided, showing how visibility is merged.
+ *
+ * ```jsx
+ * const App = ({petStore, metrics}) => (
+ *   <Provider storesById={{pet: petStore}} metrics={metrics}>
+ *     <OuterPane />
+ *   </Provider>
+ * );
+ * const OuterPane = () => {
+ *   const planetStore = useCreateStore(() =>
+ *     createStore().setTables({planets: {mars: {moons: 2}}}),
+ *   );
+ *   return (
+ *     <Provider storesById={{planet: planetStore}}>
+ *       <InnerPane />
+ *     </Provider>
+ *   );
+ * };
+ * const InnerPane = () => (
+ *   <span>
+ *     <CellView tableId="species" rowId="dog" cellId="price" store="pet" />,
+ *     {useMetric('highestPrice')},
+ *     <CellView
+ *       tableId="planets"
+ *       rowId="mars"
+ *       cellId="moons"
+ *       store="planet"
+ *     />
+ *   </span>
+ * );
+ *
+ * const petStore = createStore();
+ * petStore.setTable('species', {dog: {price: 5}, cat: {price: 4}});
+ * const metrics = createMetrics(petStore);
+ * metrics.setMetricDefinition('highestPrice', 'species', 'max', 'price');
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App petStore={petStore} metrics={metrics} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>5,5,2</span>'
+ * ```
  * @category Context components
  */
 export function Provider(
@@ -5464,7 +5564,7 @@ export function Provider(
  * CellView component by reference. A change to the data in the Store re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
  * const App = () => (
  *   <span>
@@ -5486,7 +5586,7 @@ export function Provider(
  * provided. The CellView component within it then renders the Cell (with its Id
  * for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5509,7 +5609,7 @@ export function Provider(
  * provided. The CellView component within it then attempts to render a
  * non-existent Cell.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5560,7 +5660,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  * RowView component by reference. A change to the data in the Store re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setRow('pets', 'fido', {species: 'dog'});
  * const App = () => (
  *   <div>
@@ -5582,7 +5682,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  * provided. The RowView component within it then renders the Row (with Ids for
  * readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5608,7 +5708,7 @@ export function CellView(props: CellProps): ComponentReturnType;
  * provided. The RowView component within it then renders the Row with a custom
  * Cell component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5673,7 +5773,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  * TableView component by reference. A change to the data in the Store
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const App = () => (
  *   <div>
@@ -5695,7 +5795,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  * provided. The TableView component within it then renders the Table (with Ids
  * for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5721,7 +5821,7 @@ export function RowView(props: RowProps): ComponentReturnType;
  * provided. The TableView component within it then renders the Table with a
  * custom Row component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5781,7 +5881,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * TablesView component by reference. A change to the data in the Store
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
  * const App = () => (
  *   <div>
@@ -5803,7 +5903,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * provided. The TablesView component within it then renders the Store (with Ids
  * for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5829,7 +5929,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * provided. The TablesView component within it then renders the Store with a
  * custom Table component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({store}) => (
  *   <Provider store={store}>
  *     <Pane />
@@ -5882,7 +5982,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * in the MetricView component hook by reference. A change to the Metric
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('species', {
  *   dog: {price: 5},
  *   cat: {price: 4},
@@ -5910,7 +6010,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * is provided. The MetricView component within it then renders the Metric (with
  * its Id for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
  *     <Pane />
@@ -5940,7 +6040,7 @@ export function TablesView(props: TablesProps): ComponentReturnType;
  * is provided. The MetricView component within it then attempts to render a
  * non-existent Metric.
  *
- * ```tsx
+ * ```jsx
  * const App = ({metrics}) => (
  *   <Provider metrics={metrics}>
  *     <Pane />
@@ -5993,7 +6093,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * in the SliceView component by reference. A change to the Row Ids re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
  *   felix: {species: 'cat'},
@@ -6025,7 +6125,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * is provided. The SliceView component within it then renders the Slice (with
  * Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -6054,7 +6154,7 @@ export function MetricView(props: MetricProps): ComponentReturnType;
  * is provided. The SliceView component within it then renders the Slice with a
  * custom Row component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -6120,7 +6220,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * in the IndexView component by reference. A change to the Slice Ids re-renders
  * the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
  *   felix: {species: 'cat'},
@@ -6147,7 +6247,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * is provided. The IndexView component within it then renders the Index (with
  * Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -6176,7 +6276,7 @@ export function SliceView(props: SliceProps): ComponentReturnType;
  * is provided. The IndexView component within it then renders the Index with a
  * custom Slice component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({indexes}) => (
  *   <Provider indexes={indexes}>
  *     <Pane />
@@ -6243,7 +6343,7 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * is used in the RemoteRowView component by reference. A change to the Row Ids
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
  *   .setTable('species', {wolf: {price: 10}, dog: {price: 5}});
@@ -6277,7 +6377,7 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * object is provided. The RemoteRowView component within it then renders the
  * remote Row (with Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6309,7 +6409,7 @@ export function IndexView(props: IndexProps): ComponentReturnType;
  * object is provided. The RemoteRowView component within it then renders the
  * remote Row with a custom Row component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6375,7 +6475,7 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * is used in the LocalRowsView component by reference. A change to the Row Ids
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore()
  *   .setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
  *   .setTable('species', {wolf: {price: 10}, dog: {price: 5}});
@@ -6410,7 +6510,7 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * object is provided. The LocalRowsView component within it then renders the
  * local Row objects (with Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6442,7 +6542,7 @@ export function RemoteRowView(props: RemoteRowProps): ComponentReturnType;
  * object is provided. The LocalRowsView component within it then renders the
  * local Row objects with a custom Row component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6508,7 +6608,7 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * is used in the LinkedRowsView component by reference. A change to the Row Ids
  * re-renders the component.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {
  *   fido: {next: 'felix'},
  *   felix: {next: 'cujo'},
@@ -6546,7 +6646,7 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * object is provided. The LinkedRowsView component within it then renders the
  * local Row objects (with Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6579,7 +6679,7 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  * object is provided. The LinkedRowsView component within it then renders the
  * local Row objects with a custom Row component and a custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({relationships}) => (
  *   <Provider relationships={relationships}>
  *     <Pane />
@@ -6639,7 +6739,7 @@ export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
  * used in the CheckpointView component by reference to render a checkpoint with
  * a label (with its Id for readability).
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -6696,7 +6796,7 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * used in the BackwardCheckpointsView component by reference to render a list
  * of previous checkpoints.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -6726,7 +6826,7 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * object is provided. The BackwardCheckpointsView component within it then
  * renders the list of previous checkpoints (with Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -6758,7 +6858,7 @@ export function CheckpointView(props: CheckpointProps): ComponentReturnType;
  * renders the list of previous checkpoints with a custom Row component and a
  * custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -6830,7 +6930,7 @@ export function BackwardCheckpointsView(
  * used in the CurrentCheckpointView component by reference to render the
  * current checkpoints.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -6862,7 +6962,7 @@ export function BackwardCheckpointsView(
  * object is provided. The CurrentCheckpointView component within it then
  * renders current checkpoint (with its Id for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -6891,7 +6991,7 @@ export function BackwardCheckpointsView(
  * renders the list of future checkpoints with a custom Row component and a
  * custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -6966,7 +7066,7 @@ export function CurrentCheckpointView(
  * used in the ForwardCheckpointsView component by reference to render a list
  * of future checkpoints.
  *
- * ```tsx
+ * ```jsx
  * const store = createStore().setTable('pets', {fido: {color: 'brown'}});
  * const checkpoints = createCheckpoints(store);
  * const App = () => (
@@ -6997,7 +7097,7 @@ export function CurrentCheckpointView(
  * object is provided. The ForwardCheckpointsView component within it then
  * renders the list of future checkpoints (with Ids for readability).
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />
@@ -7029,7 +7129,7 @@ export function CurrentCheckpointView(
  * renders the list of future checkpoints with a custom Row component and a
  * custom props callback.
  *
- * ```tsx
+ * ```jsx
  * const App = ({checkpoints}) => (
  *   <Provider checkpoints={checkpoints}>
  *     <Pane />