tinybase 3.0.0-beta.0 → 3.0.0

package/lib/debug/ui-react.d.ts

@@ -39,6 +39,11 @@ import {
   TableListener,
   Tables,
   TablesListener,
+  Value,
+  ValueIdsListener,
+  ValueListener,
+  Values,
+  ValuesListener,
 } from './store.d';
 import {
   CheckpointIds,
@@ -339,7 +344,7 @@ export function useCreateStore(
 export function useStore(id?: Id): Store | undefined;
 
 /**
- * The useTables hook returns a Tables object containing the entire data of a
+ * The useTables hook returns a Tables object containing the tabular data of a
  * Store, and registers a listener so that any changes to that result will cause
  * a re-render.
  *
@@ -356,7 +361,7 @@ export function useStore(id?: Id): Store | undefined;
  * @param storeOrStoreId The Store to be accessed: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @returns A Tables object containing the entire data of the Store.
+ * @returns A Tables object containing the tabular data of the Store.
  * @example
  * This example creates a Store outside the application, which is used in the
  * useTables hook by reference. A change to the data in the Store re-renders the
@@ -418,7 +423,8 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
 
 /**
  * The useTableIds hook returns the Ids of every Table in a Store, and registers
- * a listener so that any changes to that result will cause a re-render. forward
+ * a listener so that any changes to that result will cause a re-render.
+ *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
  * useTableIds hook lets you indicate which Store to get data for: omit the
@@ -492,9 +498,9 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
 export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
 
 /**
- * The useTable hook returns an object containing the entire data of a single
- * Table in a Store, and registers a listener so that any changes to that result
- * will cause a re-render.
+ * The useTable hook returns an object containing the data of a single Table in
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
@@ -770,9 +776,9 @@ export function useSortedRowIds(
 ): Ids;
 
 /**
- * The useRow hook returns an object containing the entire data of a single Row
- * in a given Table, and registers a listener so that any changes to that result
- * will cause a re-render.
+ * The useRow hook returns an object containing the data of a single Row in a
+ * given Table, and registers a listener so that any changes to that result will
+ * cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
  * it can contain a default Store or a set of Store objects named by Id. The
@@ -1032,12 +1038,248 @@ export function useCell(
   storeOrStoreId?: StoreOrStoreId,
 ): Cell | undefined;
 
+/**
+ * The useValues hook returns a Values object containing the keyed value data of
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValues hook lets you indicate which Store to get data for: omit the
+ * optional parameter for the default context Store, provide an Id for a named
+ * context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Values will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns A Values object containing the keyed value data of the Store.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValues hook by reference. A change to the data in the Store re-renders the
+ * component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValues(store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":false}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValues hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValues())}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValues hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValues('petStore'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"open":true}</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValues(storeOrStoreId?: StoreOrStoreId): Values;
+
+/**
+ * The useValueIds hook returns the Ids of every Value in a Store, and registers
+ * a listener so that any changes to that result will cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValueIds hook lets you indicate which Store to get data for: omit the
+ * optional parameter for the default context Store, provide an Id for a named
+ * context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Value Ids will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns An array of the Ids of every Value in the Store.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValueIds hook by reference. A change to the data in the Store re-renders
+ * the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValueIds(store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ *
+ * store.setValue('employees', 3); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open","employees"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValueIds hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValueIds())}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValueIds hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValueIds('petStore'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["open"]</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValueIds(storeOrStoreId?: StoreOrStoreId): Ids;
+
+/**
+ * The useValue hook returns an object containing the data of a single Value in
+ * a Store, and registers a listener so that any changes to that result will
+ * cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Store or a set of Store objects named by Id. The
+ * useValue hook lets you indicate which Store to get data for: omit the final
+ * optional final parameter for the default context Store, provide an Id for a
+ * named context Store, or provide a Store explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * Value will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param valueId The Id of the Value in the Store.
+ * @param storeOrStoreId The Store to be accessed: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @returns An object containing the entire data of the Value.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * useValue hook by reference. A change to the data in the Store re-renders the
+ * component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => <span>{JSON.stringify(useValue('open', store))}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>false</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. A component within it then uses the useValue hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useValue('open'))}</span>;
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Store is provided, named
+ * by Id. A component within it then uses the useValue hook.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider storesById={{petStore: store}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useValue('open', 'petStore'))}</span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useValue(valueId: Id, storeOrStoreId?: StoreOrStoreId): Value;
+
 /**
  * The useSetTablesCallback hook returns a parameterized callback that can be
- * used to set the entire data of a Store.
+ * used to set the tabular data of a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The first parameter is a function which will produce the Tables object that
@@ -1117,10 +1359,10 @@ export function useSetTablesCallback<Parameter>(
 
 /**
  * The useSetTableCallback hook returns a parameterized callback that can be
- * used to set the entire data of a single Table in a Store.
+ * used to set the data of a single Table in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The second parameter is a function which will produce the Table object that
@@ -1203,10 +1445,10 @@ export function useSetTableCallback<Parameter>(
 
 /**
  * The useSetRowCallback hook returns a parameterized callback that can be used
- * to set the entire data of a single Row in a Store.
+ * to set the data of a single Row in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The third parameter is a function which will produce the Row object that will
@@ -1295,7 +1537,7 @@ export function useSetRowCallback<Parameter>(
  * to create a new Row in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The second parameter is a function which will produce the Row object that
@@ -1378,7 +1620,7 @@ export function useAddRowCallback<Parameter>(
 
 /**
  * The useSetPartialRowCallback hook returns a parameterized callback that can
- * be used to sets partial data of a single Row in the Store, leaving other Cell
+ * be used to set partial data of a single Row in the Store, leaving other Cell
  * values unaffected.
  *
  * This hook is useful, for example, when creating an event handler that will
@@ -1472,7 +1714,7 @@ export function useSetPartialRowCallback<Parameter>(
  * to set the value of a single Cell in a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * mutate the data in Store. In this case, the parameter will likely be the
+ * mutate the data in the Store. In this case, the parameter will likely be the
  * event, so that you can use data from it as part of the mutation.
  *
  * The fourth parameter is a function which will produce the Cell object that
@@ -1597,43 +1839,61 @@ export function useSetCellCallback<Parameter>(
 ): ParameterizedCallback<Parameter>;
 
 /**
- * The useDelTablesCallback hook returns a callback that can be used to remove
- * all of the data in a Store.
+ * The useSetValuesCallback hook returns a parameterized callback that can be
+ * used to set the keyed value data of a Store.
  *
  * This hook is useful, for example, when creating an event handler that will
- * delete data in a Store.
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The first parameter is a function which will produce the Values object that
+ * will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional second parameter, just as you would for any React hook with
+ * dependencies.
  *
  * For convenience, you can optionally provide a `then` function (with its own
  * set of dependencies) which will be called just after the Store has been
  * updated. This is a useful place to call the addCheckpoint method, for
- * example, if you wish to add the deletion to your application's undo stack.
+ * example, if you wish to add the mutation to your application's undo stack.
  *
- * The Store to which the callback will make the deletion (indicated by the
+ * The Store to which the callback will make the mutation (indicated by the
  * hook's `storeOrStoreId` parameter) is always automatically used as a hook
  * dependency for the callback.
  *
+ * @param getValues A function which returns the Values object that will be used
+ * to update the Store, based on the parameter the callback will receive (and
+ * which is most likely a DOM event).
+ * @param getValuesDeps An optional array of dependencies for the `getValues`
+ * function, which, if any change, result in the regeneration of the callback.
+ * This parameter defaults to an empty array.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @param then A function which is called after the deletion, with a reference
- * to the Store.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Values used in the update.
  * @param thenDeps An optional array of dependencies for the `then` function,
  * which, if any change, result in the regeneration of the callback. This
  * parameter defaults to an empty array.
- * @returns A callback for subsequent use.
+ * @returns A parameterized callback for subsequent use.
  * @example
- * This example uses the useDelTablesCallback hook to create an event handler
- * which deletes from the Store when the `span` element is clicked.
+ * This example uses the useSetValuesCallback hook to create an event handler
+ * which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const store = createStore().setValues({open: true});
  * const App = () => {
- *   const handleClick = useDelTablesCallback(store, () =>
- *     console.log('Deleted'),
+ *   const handleClick = useSetValuesCallback(
+ *     (e) => ({bubbles: e.bubbles}),
+ *     [],
+ *     store,
+ *     (store, values) => console.log(`Updated: ${JSON.stringify(values)}`),
  *   );
  *   return (
  *     <span id="span" onClick={handleClick}>
- *       {JSON.stringify(useTables(store))}
+ *       {JSON.stringify(useValues(store))}
  *     </span>
  *   );
  * };
@@ -1642,62 +1902,301 @@ export function useSetCellCallback<Parameter>(
  * ReactDOMClient.createRoot(app).render(<App />); // !act
  * const span = app.querySelector('span');
  * console.log(span.innerHTML);
- * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ * // -> '{"open":true}'
  *
  * // User clicks the <span> element:
  * // -> span MouseEvent('click', {bubbles: true})
- * // -> 'Deleted'
+ * // -> 'Updated: {"bubbles":true}'
  *
  * console.log(span.innerHTML);
- * // -> '{}'
+ * // -> '{"bubbles":true}'
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useDelTablesCallback(
+export function useSetValuesCallback<Parameter>(
+  getValues: (parameter: Parameter, store: Store) => Values,
+  getValuesDeps?: React.DependencyList,
   storeOrStoreId?: StoreOrStoreId,
-  then?: (store: Store) => void,
+  then?: (store: Store, values: Values) => void,
   thenDeps?: React.DependencyList,
-): Callback;
+): ParameterizedCallback<Parameter>;
 
 /**
- * The useDelTableCallback hook returns a callback that can be used to remove a
- * single Table from a Store.
+ * The useSetPartialValuesCallback hook returns a parameterized callback that
+ * can be used to set partial Values data in the Store, leaving other Values
+ * unaffected.
  *
  * This hook is useful, for example, when creating an event handler that will
- * delete data in a Store.
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The third parameter is a function which will produce the partial Values
+ * object that will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional fourth parameter, just as you would for any React hook with
+ * dependencies.
  *
  * For convenience, you can optionally provide a `then` function (with its own
  * set of dependencies) which will be called just after the Store has been
  * updated. This is a useful place to call the addCheckpoint method, for
- * example, if you wish to add the deletion to your application's undo stack.
+ * example, if you wish to add the mutation to your application's undo stack.
  *
- * The Store to which the callback will make the deletion (indicated by the
+ * The Store to which the callback will make the mutation (indicated by the
  * hook's `storeOrStoreId` parameter) is always automatically used as a hook
  * dependency for the callback.
  *
- * @param tableId The Id of the Table in the Store.
+ * @param getPartialValues A function which returns the partial Values object
+ * that will be used to update the Store, based on the parameter the callback
+ * will receive (and which is most likely a DOM event).
+ * @param getPartialValuesDeps An optional array of dependencies for the
+ * `getValues` function, which, if any change, result in the regeneration of the
+ * callback. This parameter defaults to an empty array.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
- * @param then A function which is called after the deletion, with a reference
- * to the Store.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Values used in the update.
  * @param thenDeps An optional array of dependencies for the `then` function,
  * which, if any change, result in the regeneration of the callback. This
  * parameter defaults to an empty array.
- * @returns A callback for subsequent use.
+ * @returns A parameterized callback for subsequent use.
  * @example
- * This example uses the useDelTableCallback hook to create an event handler
- * which deletes from the Store when the `span` element is clicked.
+ * This example uses the useSetPartialValuesCallback hook to create an event
+ * handler which updates the Store when the `span` element is clicked.
  *
  * ```jsx
- * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const store = createStore().setValues({open: true});
  * const App = () => {
- *   const handleClick = useDelTableCallback('pets', store, () =>
- *     console.log('Deleted'),
+ *   const handleClick = useSetPartialValuesCallback(
+ *     (e) => ({bubbles: e.bubbles}),
+ *     [],
+ *     store,
+ *     (store, partialValues) =>
+ *       console.log(`Updated: ${JSON.stringify(partialValues)}`),
  *   );
  *   return (
  *     <span id="span" onClick={handleClick}>
- *       {JSON.stringify(useTables(store))}
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Updated: {"bubbles":true}'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{"open":true,"bubbles":true}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useSetPartialValuesCallback<Parameter>(
+  getPartialValues: (parameter: Parameter, store: Store) => Values,
+  getPartialValuesDeps?: React.DependencyList,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store, partialValues: Values) => void,
+  thenDeps?: React.DependencyList,
+): ParameterizedCallback<Parameter>;
+
+/**
+ * The useSetValueCallback hook returns a parameterized callback that can be
+ * used to set the data of a single Value in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * mutate the data in the Store. In this case, the parameter will likely be the
+ * event, so that you can use data from it as part of the mutation.
+ *
+ * The second parameter is a function which will produce the Value object that
+ * will then be used to update the Store in the callback.
+ *
+ * If that function has any other dependencies, the changing of which should
+ * also cause the callback to be recreated, you can provide them in an array in
+ * the optional third parameter, just as you would for any React hook with
+ * dependencies.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the mutation to your application's undo stack.
+ *
+ * The Store to which the callback will make the mutation (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param valueId The Id of the Value in the Store to set.
+ * @param getValue A function which returns the Value object that will be used
+ * to update the Store, based on the parameter the callback will receive (and
+ * which is most likely a DOM event).
+ * @param getValueDeps An optional array of dependencies for the `getValue`
+ * function, which, if any change, result in the regeneration of the callback.
+ * This parameter defaults to an empty array.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the mutation, with a reference
+ * to the Store and the Value used in the update.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A parameterized callback for subsequent use.
+ * @example
+ * This example uses the useSetValueCallback hook to create an event handler
+ * which updates the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => {
+ *   const handleClick = useSetValueCallback(
+ *     'bubbles',
+ *     (e) => e.bubbles,
+ *     [],
+ *     store,
+ *     (store, value) => console.log(`Updated: ${JSON.stringify(value)}`),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Updated: true'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{"open":true,"bubbles":true}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useSetValueCallback<Parameter>(
+  valueId: Id,
+  getValue: (parameter: Parameter, store: Store) => Value,
+  getValueDeps?: React.DependencyList,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store, value: Value) => void,
+  thenDeps?: React.DependencyList,
+): ParameterizedCallback<Parameter>;
+
+/**
+ * The useDelTablesCallback hook returns a callback that can be used to remove
+ * all of the tabular data in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelTablesCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const App = () => {
+ *   const handleClick = useDelTablesCallback(store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useTables(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"pets":{"nemo":{"species":"fish"}}}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{}'
+ * ```
+ * @category Store hooks
+ */
+export function useDelTablesCallback(
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
+/**
+ * The useDelTableCallback hook returns a callback that can be used to remove a
+ * single Table from a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param tableId The Id of the Table in the Store.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelTableCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
+ * const App = () => {
+ *   const handleClick = useDelTableCallback('pets', store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useTables(store))}
  *     </span>
  *   );
  * };
@@ -1811,8 +2310,8 @@ export function useDelRowCallback(
  * @param rowId The Id of the Row in the Table.
  * @param cellId The Id of the Cell in the Row.
  * @param forceDel An optional flag to indicate that the whole Row should be
- * deleted, even if a Schema provides a default value for this Cell. Defaults to
- * `false`.
+ * deleted, even if a TablesSchema provides a default value for this Cell.
+ * Defaults to `false`.
  * @param storeOrStoreId The Store to be updated: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
@@ -1869,9 +2368,139 @@ export function useDelCellCallback(
   thenDeps?: React.DependencyList,
 ): Callback;
 
+/**
+ * The useDelValuesCallback hook returns a callback that can be used to remove
+ * all of the keyed value data in a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelValuesCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValues({open: true});
+ * const App = () => {
+ *   const handleClick = useDelValuesCallback(store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useDelValuesCallback(
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
+/**
+ * The useDelValueCallback hook returns a callback that can be used to remove a
+ * single Value from a Store.
+ *
+ * This hook is useful, for example, when creating an event handler that will
+ * delete data in a Store.
+ *
+ * For convenience, you can optionally provide a `then` function (with its own
+ * set of dependencies) which will be called just after the Store has been
+ * updated. This is a useful place to call the addCheckpoint method, for
+ * example, if you wish to add the deletion to your application's undo stack.
+ *
+ * The Store to which the callback will make the deletion (indicated by the
+ * hook's `storeOrStoreId` parameter) is always automatically used as a hook
+ * dependency for the callback.
+ *
+ * @param valueId The Id of the Value in the Store.
+ * @param storeOrStoreId The Store to be updated: omit for the default context
+ * Store, provide an Id for a named context Store, or provide an explicit
+ * reference.
+ * @param then A function which is called after the deletion, with a reference
+ * to the Store.
+ * @param thenDeps An optional array of dependencies for the `then` function,
+ * which, if any change, result in the regeneration of the callback. This
+ * parameter defaults to an empty array.
+ * @returns A callback for subsequent use.
+ * @example
+ * This example uses the useDelValueCallback hook to create an event handler
+ * which deletes from the Store when the `span` element is clicked.
+ *
+ * ```jsx
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const App = () => {
+ *   const handleClick = useDelValueCallback('open', store, () =>
+ *     console.log('Deleted'),
+ *   );
+ *   return (
+ *     <span id="span" onClick={handleClick}>
+ *       {JSON.stringify(useValues(store))}
+ *     </span>
+ *   );
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * const span = app.querySelector('span');
+ * console.log(span.innerHTML);
+ * // -> '{"open":true,"employees":3}'
+ *
+ * // User clicks the <span> element:
+ * // -> span MouseEvent('click', {bubbles: true})
+ * // -> 'Deleted'
+ *
+ * console.log(span.innerHTML);
+ * // -> '{"employees":3}'
+ * ```
+ * @category Store hooks
+ * @since v3.0.0
+ */
+export function useDelValueCallback(
+  valueId: Id,
+  storeOrStoreId?: StoreOrStoreId,
+  then?: (store: Store) => void,
+  thenDeps?: React.DependencyList,
+): Callback;
+
 /**
  * The useTablesListener hook registers a listener function with a Store that
- * will be called whenever data in it changes.
+ * will be called whenever tabular data in it changes.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
@@ -1882,8 +2511,8 @@ export function useDelCellCallback(
  * for you: when the listener changes (per its `listenerDeps` dependencies) or
  * the component unmounts, the listener on the underlying Store will be deleted.
  *
- * @param listener The function that will be called whenever data in the Store
- * changes.
+ * @param listener The function that will be called whenever tabular data in the
+ * Store changes.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -2257,62 +2886,271 @@ export function useSortedRowIdsListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useRowListener('pets', 'fido', () => console.log('Row changed'));
+ *   useRowListener('pets', 'fido', () => console.log('Row changed'));
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().row);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Row changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().row);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useRowListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  listener: RowListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useCellIdsListener hook registers a listener function with a Store that
+ * will be called whenever the Cell Ids in a Row change.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useCellIds hook).
+ *
+ * You can either listen to a single Row (by specifying the Table Id and Row Id
+ * as the method's first two parameters) or changes to any Row (by providing
+ * `null` wildcards).
+ *
+ * Both, either, or neither of the `tableId` and `rowId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Row in a specific Table,
+ * any Row in a specific Table, a specific Row in any Table, or any Row in any
+ * Table.
+ *
+ * Unlike the addCellIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useCellIdsListener hook manages this
+ * lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying Store
+ * will be deleted.
+ *
+ * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever the Cell Ids in the
+ * Row change.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useCellIdsListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useCellIdsListener('pets', 'fido', () =>
+ *     console.log('Cell Ids changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().cellIds);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'species', 'dog'); // !act
+ * // -> 'Cell Ids changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().cellIds);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useCellIdsListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  listener: CellIdsListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useCellListener hook registers a listener function with a Store that will
+ * be called whenever data in a Cell changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useCell hook).
+ *
+ * You can either listen to a single Cell (by specifying the Table Id, Row Id,
+ * and Cell Id as the method's first three parameters) or changes to any Cell
+ * (by providing `null` wildcards).
+ *
+ * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Cell in a specific Row
+ * in a specific Table, any Cell in any Row in any Table, for example - or every
+ * other combination of wildcards.
+ *
+ * Unlike the addCellListener method, which returns a listener Id and requires
+ * you to remove it manually, the useCellListener hook manages this lifecycle
+ * for you: when the listener changes (per its `listenerDeps` dependencies) or
+ * the component unmounts, the listener on the underlying Store will be deleted.
+ *
+ * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
+ * @param cellId The Id of the Cell to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the Cell
+ * changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useCellListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useCellListener('pets', 'fido', 'color', () =>
+ *     console.log('Cell changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App store={store} />); // !act
+ * console.log(store.getListenerStats().cell);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Cell changed'
+ *
+ * root.unmount(); // !act
+ * console.log(store.getListenerStats().cell);
+ * // -> 0
+ * ```
+ * @category Store hooks
+ */
+export function useCellListener(
+  tableId: IdOrNull,
+  rowId: IdOrNull,
+  cellId: IdOrNull,
+  listener: CellListener,
+  listenerDeps?: React.DependencyList,
+  mutator?: boolean,
+  storeOrStoreId?: StoreOrStoreId,
+): void;
+
+/**
+ * The useValuesListener hook registers a listener function with a Store that
+ * will be called whenever keyed value data in it changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useValues hook).
+ *
+ * Unlike the addValuesListener method, which returns a listener Id and requires
+ * you to remove it manually, the useValuesListener hook manages this lifecycle
+ * for you: when the listener changes (per its `listenerDeps` dependencies) or
+ * the component unmounts, the listener on the underlying Store will be deleted.
+ *
+ * @param listener The function that will be called whenever keyed value data in
+ * the Store changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param mutator An optional boolean that indicates that the listener mutates
+ * Store data.
+ * @param storeOrStoreId The Store to register the listener with: omit for the
+ * default context Store, provide an Id for a named context Store, or provide an
+ * explicit reference.
+ * @example
+ * This example uses the useValuesListener hook to create a listener that is
+ * scoped to a single component. When the component is unmounted, the listener
+ * is removed from the Store.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useValuesListener(() => console.log('Values changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
  * const root = ReactDOMClient.createRoot(app);
  * root.render(<App store={store} />); // !act
- * console.log(store.getListenerStats().row);
+ * console.log(store.getListenerStats().values);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
- * // -> 'Row changed'
+ * store.setValue('open', false); // !act
+ * // -> 'Values changed'
  *
  * root.unmount(); // !act
- * console.log(store.getListenerStats().row);
+ * console.log(store.getListenerStats().values);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useRowListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  listener: RowListener,
+export function useValuesListener(
+  listener: ValuesListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
 
 /**
- * The useCellIdsListener hook registers a listener function with a Store that
- * will be called whenever the Cell Ids in a Row change.
+ * The useValueIdsListener hook registers a listener function with a Store that
+ * will be called whenever the Value Ids in it change.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
- * more easily done with the useCellIds hook).
- *
- * You can either listen to a single Row (by specifying the Table Id and Row Id
- * as the method's first two parameters) or changes to any Row (by providing
- * `null` wildcards).
- *
- * Both, either, or neither of the `tableId` and `rowId` parameters can be
- * wildcarded with `null`. You can listen to a specific Row in a specific Table,
- * any Row in a specific Table, a specific Row in any Table, or any Row in any
- * Table.
+ * more easily done with the useValueIds hook).
  *
- * Unlike the addCellIdsListener method, which returns a listener Id and
- * requires you to remove it manually, the useCellIdsListener hook manages this
+ * Unlike the addValueIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useValueIdsListener hook manages this
  * lifecycle for you: when the listener changes (per its `listenerDeps`
  * dependencies) or the component unmounts, the listener on the underlying Store
  * will be deleted.
  *
- * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
- * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever the Cell Ids in the
- * Row change.
+ * @param listener The function that will be called whenever the Value Ids in
+ * the Store change.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
@@ -2322,7 +3160,7 @@ export function useRowListener(
  * default context Store, provide an Id for a named context Store, or provide an
  * explicit reference.
  * @example
- * This example uses the useCellIdsListener hook to create a listener that is
+ * This example uses the useValueIdsListener hook to create a listener that is
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
@@ -2333,63 +3171,52 @@ export function useRowListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useCellIdsListener('pets', 'fido', () =>
- *     console.log('Cell Ids changed'),
- *   );
+ *   useValueIdsListener(() => console.log('Value Ids changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
  * const root = ReactDOMClient.createRoot(app);
  * root.render(<App store={store} />); // !act
- * console.log(store.getListenerStats().cellIds);
+ * console.log(store.getListenerStats().valueIds);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'species', 'dog'); // !act
- * // -> 'Cell Ids changed'
+ * store.setValue('employees', 3); // !act
+ * // -> 'Value Ids changed'
  *
  * root.unmount(); // !act
- * console.log(store.getListenerStats().cellIds);
+ * console.log(store.getListenerStats().valueIds);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useCellIdsListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  listener: CellIdsListener,
+export function useValueIdsListener(
+  listener: ValueIdsListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
 
 /**
- * The useCellListener hook registers a listener function with a Store that will
- * be called whenever data in a Cell changes.
+ * The useValueListener hook registers a listener function with a Store that
+ * will be called whenever data in a Value changes.
  *
  * This hook is useful for situations where a component needs to register its
  * own specific listener to do more than simply tracking the value (which is
- * more easily done with the useCell hook).
- *
- * You can either listen to a single Cell (by specifying the Table Id, Row Id,
- * and Cell Id as the method's first three parameters) or changes to any Cell
- * (by providing `null` wildcards).
+ * more easily done with the useValue hook).
  *
- * All, some, or none of the `tableId`, `rowId`, and `cellId` parameters can be
- * wildcarded with `null`. You can listen to a specific Cell in a specific Row
- * in a specific Table, any Cell in any Row in any Table, for example - or every
- * other combination of wildcards.
+ * You can either listen to a single Value (by specifying its Id as the method's
+ * first parameter) or changes to any Value (by providing a `null` wildcard).
  *
- * Unlike the addCellListener method, which returns a listener Id and requires
- * you to remove it manually, the useCellListener hook manages this lifecycle
+ * Unlike the addValueListener method, which returns a listener Id and requires
+ * you to remove it manually, the useValueListener hook manages this lifecycle
  * for you: when the listener changes (per its `listenerDeps` dependencies) or
  * the component unmounts, the listener on the underlying Store will be deleted.
  *
- * @param tableId The Id of the Table to listen to, or `null` as a wildcard.
- * @param rowId The Id of the Row to listen to, or `null` as a wildcard.
- * @param cellId The Id of the Cell to listen to, or `null` as a wildcard.
- * @param listener The function that will be called whenever data in the Cell
+ * @param valueId The Id of the Value to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the Value
  * changes.
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
@@ -2400,7 +3227,7 @@ export function useCellIdsListener(
  * default context Store, provide an Id for a named context Store, or provide an
  * explicit reference.
  * @example
- * This example uses the useCellListener hook to create a listener that is
+ * This example uses the useValueListener hook to create a listener that is
  * scoped to a single component. When the component is unmounted, the listener
  * is removed from the Store.
  *
@@ -2411,33 +3238,30 @@ export function useCellIdsListener(
  *   </Provider>
  * );
  * const Pane = () => {
- *   useCellListener('pets', 'fido', 'color', () =>
- *     console.log('Cell changed'),
- *   );
+ *   useValueListener('open', () => console.log('Value changed'));
  *   return <span>App</span>;
  * };
  *
- * const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
+ * const store = createStore().setValues({open: true});
  * const app = document.createElement('div');
  * const root = ReactDOMClient.createRoot(app);
  * root.render(<App store={store} />); // !act
- * console.log(store.getListenerStats().cell);
+ * console.log(store.getListenerStats().value);
  * // -> 1
  *
- * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
- * // -> 'Cell changed'
+ * store.setValue('open', false); // !act
+ * // -> 'Value changed'
  *
  * root.unmount(); // !act
- * console.log(store.getListenerStats().cell);
+ * console.log(store.getListenerStats().value);
  * // -> 0
  * ```
  * @category Store hooks
+ * @since v3.0.0
  */
-export function useCellListener(
-  tableId: IdOrNull,
-  rowId: IdOrNull,
-  cellId: IdOrNull,
-  listener: CellListener,
+export function useValueListener(
+  valueId: IdOrNull,
+  listener: ValueListener,
   listenerDeps?: React.DependencyList,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
@@ -4739,7 +5563,7 @@ export function useResultSortedRowIds(
 ): Ids;
 
 /**
- * The useResultRow hook returns an object containing the entire data of a
+ * The useResultRow hook returns an object containing the data of a
  * single Row in the result Table of the given query, and registers a listener
  * so that any changes to that Row will cause a re-render.
  *
@@ -6653,7 +7477,7 @@ export type TablesProps = {
    */
   readonly separator?: ReactElement | string;
   /**
-   * Whether the component should also render the Ids of the Table, and its
+   * Whether the component should also render the Ids of each Table, and its
    * descendent objects, to assist with debugging.
    */
   readonly debugIds?: boolean;
@@ -6793,7 +7617,7 @@ export type RowProps = {
 };
 
 /**
- * RowProps props are used for components that refer to a single Cell in a Row,
+ * CellProps props are used for components that refer to a single Cell in a Row,
  * such as the CellView component.
  *
  * @category Props
@@ -6823,6 +7647,64 @@ export type CellProps = {
   readonly debugIds?: boolean;
 };
 
+/**
+ * ValuesProps props are used for components that refer to all the Values in a
+ * Store, such as the ValuesView component.
+ *
+ * @category Props
+ * @since v3.0.0
+ */
+export type ValuesProps = {
+  /**
+   * The Store to be accessed: omit for the default context Store, provide an Id
+   * for a named context Store, or provide an explicit reference.
+   */
+  readonly store?: StoreOrStoreId;
+  /**
+   * A custom component for rendering each Value in the Store (to override the
+   * default ValueView component).
+   */
+  readonly valueComponent?: ComponentType<ValueProps>;
+  /**
+   * A function for generating extra props for each custom Value component based
+   * on its Id.
+   */
+  readonly getValueComponentProps?: (valueId: Id) => ExtraProps;
+  /**
+   * A component or string to separate each Value component.
+   */
+  readonly separator?: ReactElement | string;
+  /**
+   * Whether the component should also render the Ids of each Value to assist
+   * with debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
+/**
+ * ValueProps props are used for components that refer to a single Value in a
+ * Row, such as the ValueView component.
+ *
+ * @category Props
+ * @since v3.0.0
+ */
+export type ValueProps = {
+  /**
+   * The Id of the Value in the Row to be rendered.
+   */
+  readonly valueId: Id;
+  /**
+   * The Store to be accessed: omit for the default context Store, provide an Id
+   * for a named context Store, or provide an explicit reference.
+   */
+  readonly store?: StoreOrStoreId;
+  /**
+   * Whether the component should also render the Id of the Value to assist with
+   * debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
 /**
  * MetricProps props are used for components that refer to a single Metric in a
  * Metrics object, such as the MetricView component.
@@ -7977,8 +8859,9 @@ export function SortedTableView(props: SortedTableProps): ComponentReturnType;
 export function TableView(props: TableProps): ComponentReturnType;
 
 /**
- * The TablesView component renders the contents of a Store, and registers a
- * listener so that any changes to that result will cause a re-render.
+ * The TablesView component renders the tabular contents of a Store, and
+ * registers a listener so that any changes to that result will cause a
+ * re-render.
  *
  * The component's props can identify which Store to render - either the default
  * context Store, a named context Store, or an explicit reference.
@@ -8004,7 +8887,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
  * const App = () => (
  *   <div>
- *     <TablesView store={store} />
+ *     <TablesView store={store} separator="/" />
  *   </div>
  * );
  *
@@ -8015,7 +8898,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  *
  * store.setTable('species', {dog: {price: 5}}); // !act
  * console.log(app.innerHTML);
- * // -> '<div>dog5</div>'
+ * // -> '<div>dog/5</div>'
  * ```
  * @example
  * This example creates a Provider context into which a default Store is
@@ -8030,7 +8913,7 @@ export function TableView(props: TableProps): ComponentReturnType;
  * );
  * const Pane = () => (
  *   <div>
- *     <TablesView tableId="pets" debugIds={true} />
+ *     <TablesView debugIds={true} />
  *   </div>
  * );
  *
@@ -8083,6 +8966,203 @@ export function TableView(props: TableProps): ComponentReturnType;
  */
 export function TablesView(props: TablesProps): ComponentReturnType;
 
+/**
+ * The ValueView component renders the value of a single Value, and registers a
+ * listener so that any changes to that result will cause a re-render.
+ *
+ * The component's props identify which Value to render based on Value Id and
+ * Store (which is either the default context Store, a named context Store, or
+ * an explicit reference).
+ *
+ * A Value contains a string, number, or boolean, so the value is rendered
+ * directly without further decoration. You can create your own ValueView-like
+ * component to customize the way that a Value is rendered: see the ValuesView
+ * component for more details.
+ *
+ * This component uses the useValue hook under the covers, which means that any
+ * changes to the specified Value will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the Value, or nothing, if not present.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * ValueView component by reference. A change to the data in the Store
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => (
+ *   <span>
+ *     <ValueView valueId="open" store={store} />
+ *   </span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>true</span>'
+ *
+ * store.setValue('open', false); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>false</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValueView component within it then renders the Value (with its
+ * Id for readability).
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ValueView valueId="open" debugIds={true} />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>open:{true}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValueView component within it then attempts to render a
+ * non-existent Value.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ValueView valueId="website" />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValue('open', true);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span></span>'
+ * ```
+ * @category Store components
+ * @since v3.0.0
+ */
+export function ValueView(props: ValueProps): ComponentReturnType;
+
+/**
+ * The ValuesView component renders the keyed value contents of a Store, and
+ * registers a listener so that any changes to that result will cause a
+ * re-render.
+ *
+ * The component's props can identify which Store to render - either the default
+ * context Store, a named context Store, or an explicit reference.
+ *
+ * This component renders a Store by iterating over its Value objects. By
+ * default these are in turn rendered with the ValueView component, but you can
+ * override this behavior by providing a `valueComponent` prop, a custom
+ * component of your own that will render a Value based on ValueProps. You can
+ * also pass additional props to your custom component with the
+ * `getValueComponentProps` callback prop.
+ *
+ * This component uses the useTableIds hook under the covers, which means that
+ * any changes to the structure of the Store will cause a re-render.
+ *
+ * This component uses the useValueIds hook under the covers, which means that
+ * any changes to the Store's Values will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the Values, or nothing, if not present.
+ * @example
+ * This example creates a Store outside the application, which is used in the
+ * ValuesView component by reference. A change to the data in the Store
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setValue('open', true);
+ * const App = () => (
+ *   <div>
+ *     <ValuesView store={store} separator="/" />
+ *   </div>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>true</div>'
+ *
+ * store.setValue('employees', 3); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>true/3</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValuesView component within it then renders the Values (with
+ * Ids for readability).
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ValuesView debugIds={true} />
+ *   </div>
+ * );
+ *
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>open:{true}employees:{3}</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The ValuesView component within it then renders the Values with a
+ * custom Value component and a custom props callback.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ValuesView
+ *       valueComponent={FormattedValueView}
+ *       getValueComponentProps={(valueId) => ({bold: valueId == 'open'})}
+ *     />
+ *   </div>
+ * );
+ * const FormattedValueView = ({valueId, bold}) => (
+ *   <span>
+ *     {bold ? <b>{valueId}</b> : valueId}
+ *     {': '}
+ *     <ValueView valueId={valueId} />
+ *   </span>
+ * );
+ *
+ * const store = createStore().setValues({open: true, employees: 3});
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div><span><b>open</b>: true</span><span>employees: 3</span></div>'
+ * ```
+ * @category Store components
+ * @since v3.0.0
+ */
+export function ValuesView(props: ValuesProps): ComponentReturnType;
+
 /**
  * The MetricView component renders the current value of a Metric, and registers
  * a listener so that any changes to that result will cause a re-render.