tinybase 0.9.1 → 1.0.0

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
@@ -10,8 +10,16 @@
  * The components in this module provide a further abstraction over those hooks
  * to ease the composition of user interfaces that use TinyBase.
  *
+ * @see Building UIs guides
+ * @see Building UIs With Metrics guide
+ * @see Building UIs With Indexes guide
+ * @see Building UIs With Relationships guide
+ * @see Building UIs With Checkpoints guide
+ * @see Countries demo
+ * @see Todo App demos
+ * @see TinyDraw demo
  * @packageDocumentation
- * @module react
+ * @module ui-react
  */
 
 import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d';
@@ -57,8 +65,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 +84,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 +103,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 +122,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 +141,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 +191,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 +216,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 +267,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 +286,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 +330,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 +347,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 +365,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 +405,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 +422,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 +440,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 +483,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 +500,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 +518,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 +563,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 +580,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 +598,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 +644,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 +663,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 +681,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 +731,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 +750,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 +770,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 +821,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 +838,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 +856,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 +925,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 +1009,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 +1096,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 +1184,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 +1272,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 +1363,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 +1400,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 +1474,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 +1538,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 +1604,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 +1675,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 +1746,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 +1808,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 +1873,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 +1939,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 +2012,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 +2087,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 +2164,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 +2221,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 +2238,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 +2269,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 +2334,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 +2354,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 +2399,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 +2422,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 +2447,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 +2506,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 +2565,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 +2582,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 +2618,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 +2686,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 +2706,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 +2751,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 +2776,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 +2801,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 +2858,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 +2885,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 +2912,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 +2977,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 +3055,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 +3118,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 +3134,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 +3174,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 +3248,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 +3270,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 +3320,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 +3347,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 +3370,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 +3427,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 +3456,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 +3481,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 +3542,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 +3574,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 +3601,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 +3678,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 +3766,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 +3848,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 +3917,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 +3934,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 +3961,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 +4019,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 +4041,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 +4090,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 +4115,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 +4137,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 +4188,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 +4208,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 +4230,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 +4299,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 +4356,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 +4404,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 +4481,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 +4535,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 +4581,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 +4638,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 +4708,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 +4771,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 +4792,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 +4818,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 +4831,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 +4866,8 @@ export function useCheckpointListener(
  * // ... // !act
  * console.log(app.innerHTML);
  * // -> '<span>{\"pets\":{\"cujo\":{\"species\":\"dog\"}}}</span>'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
  * ```
  *  @category Persister hooks
  */
@@ -4853,13 +4880,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 +4922,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 +4959,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 +5000,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 +5031,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 +5055,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 +5092,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 +5134,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 +5173,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 +5217,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 +5259,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 +5284,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 +5318,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 +5348,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 +5381,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 +5445,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 +5460,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 +5475,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 +5499,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 +5572,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 +5594,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 +5617,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 +5668,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 +5690,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 +5716,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 +5781,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 +5803,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 +5829,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 +5889,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 +5911,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 +5937,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 +5990,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 +6018,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 +6048,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 +6101,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 +6133,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 +6162,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 +6228,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 +6255,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 +6284,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 +6351,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 +6385,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 +6417,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 +6483,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 +6518,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 +6550,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 +6616,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 +6654,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 +6687,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 +6747,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 +6804,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 +6834,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 +6866,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 +6938,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 +6970,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 +6999,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 +7074,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 +7105,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 +7137,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 />