tinybase 4.1.0-beta.3 → 4.1.0-beta.4

package/lib/debug/ui-react-dom.js

@@ -1,18 +1,25 @@
 import {
+  useValue,
+  useSetValueCallback,
   CellView,
-  useRowIds,
   useTableCellIds,
+  useRowIds,
+  useRowCount,
   useSortedRowIds,
   useValueIds,
   ValueView,
   ResultCellView,
-  useResultRowIds,
   useResultTableCellIds,
+  useResultRowIds,
+  useResultRowCount,
   useResultSortedRowIds,
   useCell,
   useSetCellCallback,
-  useValue,
-  useSetValueCallback,
+  useStore,
+  useTableIds,
+  useStoreIds,
+  useCreateStore,
+  useCreatePersister,
 } from './ui-react';
 import React from 'react';
 
@@ -21,53 +28,278 @@ const EMPTY_STRING = '';
 const STRING = getTypeOf(EMPTY_STRING);
 const BOOLEAN = getTypeOf(true);
 const NUMBER = getTypeOf(0);
+const FUNCTION = getTypeOf(getTypeOf);
+const TYPE = 'type';
+const DEFAULT = 'default';
+const LISTENER = 'Listener';
+const ADD = 'add';
+const IDS = 'Ids';
+const TABLE = 'Table';
+const TABLES = TABLE + 's';
+const TABLE_IDS = TABLE + IDS;
+const ROW = 'Row';
+const ROW_COUNT = ROW + 'Count';
+const ROW_IDS = ROW + IDS;
 const CELL = 'Cell';
+const CELL_IDS = CELL + IDS;
 const VALUE = 'Value';
+const VALUES = VALUE + 's';
+const VALUE_IDS = VALUE + IDS;
 const CURRENT_TARGET = 'currentTarget';
 const _VALUE = 'value';
+const id = (key) => EMPTY_STRING + key;
 
 const isFiniteNumber = isFinite;
+const isInstanceOf = (thing, cls) => thing instanceof cls;
 const isUndefined = (thing) => thing == void 0;
+const ifNotUndefined = (value, then, otherwise) =>
+  isUndefined(value) ? otherwise?.() : then(value);
 const isTypeStringOrBoolean = (type) => type == STRING || type == BOOLEAN;
 const isString = (thing) => getTypeOf(thing) == STRING;
+const isFunction = (thing) => getTypeOf(thing) == FUNCTION;
 const isArray = (thing) => Array.isArray(thing);
+const test = (regex, subject) => regex.test(subject);
 
-const getCellOrValueType = (cell) => {
-  const type = getTypeOf(cell);
-  return isTypeStringOrBoolean(type) || (type == NUMBER && isFiniteNumber(cell))
-    ? type
-    : void 0;
-};
-const getTypeCase = (type, stringCase, numberCase, booleanCase) =>
-  type == STRING ? stringCase : type == NUMBER ? numberCase : booleanCase;
-
+const arrayHas = (array, value) => array.includes(value);
+const arrayEvery = (array, cb) => array.every(cb);
+const arrayIsEqual = (array1, array2) =>
+  arrayLength(array1) === arrayLength(array2) &&
+  arrayEvery(array1, (value1, index) => array2[index] === value1);
+const arraySort = (array, sorter) => array.sort(sorter);
+const arrayForEach = (array, cb) => array.forEach(cb);
+const arrayJoin = (array, sep = EMPTY_STRING) => array.join(sep);
 const arrayMap = (array, cb) => array.map(cb);
+const arrayLength = (array) => array.length;
+const arrayIsEmpty = (array) => arrayLength(array) == 0;
+const arrayReduce = (array, cb, initial) => array.reduce(cb, initial);
+const arraySlice = (array, start, end) => array.slice(start, end);
+const arrayPush = (array, ...values) => array.push(...values);
+const arrayShift = (array) => array.shift();
 
 const object = Object;
+const objIds = object.keys;
+const objFrozen = object.isFrozen;
+const objFreeze = object.freeze;
+const isObject = (obj) =>
+  isInstanceOf(obj, object) && obj.constructor == object;
 const objNew = (entries = []) => object.fromEntries(entries);
+const objGet = (obj, id) => ifNotUndefined(obj, (obj2) => obj2[id]);
+const objHas = (obj, id) => !isUndefined(objGet(obj, id));
+const objDel = (obj, id) => {
+  delete obj[id];
+  return obj;
+};
 const objMap = (obj, cb) =>
   arrayMap(object.entries(obj), ([id, value]) => cb(value, id));
+const objSize = (obj) => arrayLength(objIds(obj));
+const objIsEmpty = (obj) => isObject(obj) && objSize(obj) == 0;
 
-const {createContext, useContext} = React;
-createContext([]);
+const jsonString = (obj) =>
+  JSON.stringify(obj, (_key, value) =>
+    isInstanceOf(value, Map) ? object.fromEntries([...value]) : value,
+  );
+const jsonParse = JSON.parse;
+
+const UNIQUE_ID = 'tinybaseStoreInspector';
+const TITLE = 'TinyBase Store Inspector';
+const POSITIONS = ['left', 'top', 'bottom', 'right', 'full'];
+const STATE_TABLE = 'state';
+const SORT_CELL = 'sort';
+const OPEN_CELL = 'open';
+const POSITION_VALUE = 'position';
+const OPEN_VALUE = OPEN_CELL;
+const getUniqueId = (...args) => jsonString(args);
+
+var img =
+  "data:image/svg+xml,%3csvg viewBox='0 0 680 680' xmlns='http://www.w3.org/2000/svg' style='width:680px%3bheight:680px'%3e %3cpath stroke='white' stroke-width='80' fill='none' d='M340 617a84 241 90 11.01 0zM131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124zm-12-127a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z' /%3e %3cpath fill='%23d81b60' d='M131 475a94 254 70 10428-124 114 286 70 01-428 124zm0-140a94 254 70 10428-124 114 286 70 01-428 124z' /%3e %3cpath d='M249 619a94 240 90 00308-128 114 289 70 01-308 128zM119 208a94 254 70 00306 38 90 260 90 01-306-38zm221 3a74 241 90 11.01 0z' /%3e%3c/svg%3e";
+
+const PRE_CSS = 'content:url("';
+const POST_CSS = '")';
+const PRE =
+  PRE_CSS +
+  `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='4' stroke='white'>`;
+const POST = `</svg>` + POST_CSS;
+const LOGO_SVG = PRE_CSS + img + POST_CSS;
+const POSITIONS_SVG = arrayMap(
+  [
+    [20, 20, 20, 60],
+    [20, 20, 60, 20],
+    [20, 60, 60, 20],
+    [60, 20, 20, 60],
+    [30, 30, 40, 40],
+  ],
+  ([x, y, w, h]) =>
+    PRE +
+    `<rect x='20' y='20' width='60' height='60' fill='grey'/><rect x='${x}' y='${y}' width='${w}' height='${h}' fill='white'/>` +
+    POST,
+);
+const CLOSE_SVG = PRE + `<path d='M20 20l60 60M20 80l60-60' />` + POST;
+
+const APP_STYLESHEET = arrayJoin(
+  objMap(
+    {
+      '': 'all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999',
+      '*': 'all:revert',
+      '*::before': 'all:revert',
+      '*::after': 'all:revert',
+      img: 'width:1rem;height:1rem;background:#111;border:0',
+      // Nub
+      '>img': 'padding:0.25rem;bottom:0;right:0;position:fixed;' + LOGO_SVG,
+      ...objNew(
+        arrayMap(['bottom:0;left:0', 'top:0;right:0'], (css, p) => [
+          `>img[data-position='${p}']`,
+          css,
+        ]),
+      ),
+      // Panel
+      main: 'display:flex;flex-direction:column;background:#111d;color:#fff;position:fixed;',
+      ...objNew(
+        arrayMap(
+          [
+            'bottom:0;left:0;width:35vw;height:100vh',
+            'top:0;right:0;width:100vw;height:30vh',
+            'bottom:0;left:0;width:100vw;height:30vh',
+            'top:0;right:0;width:35vw;height:100vh',
+            'top:0;right:0;width:100vw;height:100vh',
+          ],
+          (css, p) => [`main[data-position='${p}']`, css],
+        ),
+      ),
+      // Header
+      header: 'display:flex;padding:0.25rem;background:#000;align-items:center',
+      'header>img:nth-of-type(1)': LOGO_SVG,
+      'header>img:nth-of-type(6)': CLOSE_SVG,
+      ...objNew(
+        arrayMap(POSITIONS_SVG, (SVG, p) => [
+          `header>img[data-id='${p}']`,
+          SVG,
+        ]),
+      ),
+      'header>span':
+        'flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem',
+      // Body
+      article: 'padding:0.25rem 0.25rem 0.25rem 0.5rem;overflow:auto',
+      details: 'margin-left:0.75rem;width:fit-content;',
+      summary:
+        'margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content',
+      table: 'border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem',
+      thead: 'background:#222',
+      'th:nth-of-type(1)': 'min-width:2rem;',
+      'th.sorted': 'background:#000',
+      'table caption': 'text-align:left;white-space:nowrap;line-height:1.25rem',
+      button: 'width:1.5rem;border:none;background:none;color:#fff;padding:0',
+      'button[disabled]': 'color:#777',
+      'button.next': 'margin-right:0.5rem',
+      [`th,#${UNIQUE_ID} td`]:
+        'overflow:hidden;text-overflow:ellipsis;padding:0.25rem 0.5rem;max-width:12rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#777;text-align:left',
+    },
+    (style, selector) => (style ? `#${UNIQUE_ID} ${selector}{${style}}` : ''),
+  ),
+);
+
+const {createElement} = React;
 const getProps = (getProps2, ...ids) =>
   isUndefined(getProps2) ? {} : getProps2(...ids);
 
-const {createElement, useCallback, useMemo, useState} = React;
+const Nub = ({s}) => {
+  const position = useValue(POSITION_VALUE, s) ?? 1;
+  const handleOpen = useSetValueCallback(OPEN_VALUE, () => true, [], s);
+  return useValue(OPEN_VALUE, s)
+    ? null
+    : /* @__PURE__ */ createElement('img', {
+        onClick: handleOpen,
+        title: TITLE,
+        'data-position': position,
+      });
+};
+
+const getCellOrValueType = (cell) => {
+  const type = getTypeOf(cell);
+  return isTypeStringOrBoolean(type) || (type == NUMBER && isFiniteNumber(cell))
+    ? type
+    : void 0;
+};
+const setOrDelCell = (store, tableId, rowId, cellId, cell) =>
+  isUndefined(cell)
+    ? store.delCell(tableId, rowId, cellId, true)
+    : store.setCell(tableId, rowId, cellId, cell);
+const setOrDelValue = (store, valueId, value) =>
+  isUndefined(value) ? store.delValue(valueId) : store.setValue(valueId, value);
+const getTypeCase = (type, stringCase, numberCase, booleanCase) =>
+  type == STRING ? stringCase : type == NUMBER ? numberCase : booleanCase;
+
+const {useCallback, useMemo, useState} = React;
 const EDITABLE = 'editable';
+const LEFT_ARROW = '\u2190';
+const UP_ARROW = '\u2191';
+const RIGHT_ARROW = '\u2192';
+const DOWN_ARROW = '\u2193';
 const useCallbackOrUndefined = (callback, deps, test) => {
   const returnCallback = useCallback(callback, deps);
   return test ? returnCallback : void 0;
 };
-const sortedClassName = (sorting, cellId) =>
-  isUndefined(sorting)
-    ? void 0
-    : sorting[0] != cellId
-    ? void 0
-    : `sorted ${sorting[1] ? 'de' : 'a'}scending`;
-const HtmlHeaderTh = ({
+const useSortingAndPagination = (
+  cellId,
+  descending = false,
+  sortOnClick,
+  offset = 0,
+  limit,
+  total,
+  paginator,
+  onChange,
+) => {
+  const [[currentCellId, currentDescending, currentOffset], setState] =
+    useState([cellId, descending, offset]);
+  const setStateAndChange = useCallback(
+    (sortAndOffset) => {
+      setState(sortAndOffset);
+      onChange?.(sortAndOffset);
+    },
+    [onChange],
+  );
+  const handleSort = useCallbackOrUndefined(
+    (cellId2) =>
+      setStateAndChange([
+        cellId2,
+        cellId2 == currentCellId ? !currentDescending : false,
+        currentOffset,
+      ]),
+    [setStateAndChange, currentCellId, currentDescending, currentOffset],
+    sortOnClick,
+  );
+  const handleChangeOffset = useCallback(
+    (offset2) => setStateAndChange([currentCellId, currentDescending, offset2]),
+    [setStateAndChange, currentCellId, currentDescending],
+  );
+  const PaginatorComponent =
+    paginator === true ? SortedTablePaginator : paginator;
+  return [
+    [currentCellId, currentDescending, currentOffset],
+    handleSort,
+    useMemo(
+      () =>
+        paginator === false
+          ? null
+          : /* @__PURE__ */ createElement(PaginatorComponent, {
+              offset: currentOffset,
+              limit,
+              total,
+              onChange: handleChangeOffset,
+            }),
+      [
+        paginator,
+        PaginatorComponent,
+        currentOffset,
+        limit,
+        total,
+        handleChangeOffset,
+      ],
+    ),
+  ];
+};
+const HtmlHeader = ({
   cellId,
-  sorting,
+  sort: [sortCellId, sortDescending],
   label = cellId ?? EMPTY_STRING,
   onClick,
 }) =>
@@ -77,10 +309,16 @@ const HtmlHeaderTh = ({
       onClick: useCallbackOrUndefined(
         () => onClick?.(cellId),
         [onClick, cellId],
-        !isUndefined(onClick),
+        onClick,
       ),
-      className: sortedClassName(sorting, cellId),
+      className:
+        isUndefined(sortDescending) || sortCellId != cellId
+          ? void 0
+          : `sorted ${sortDescending ? 'de' : 'a'}scending`,
     },
+    isUndefined(sortDescending) || sortCellId != cellId
+      ? null
+      : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
     label,
   );
 const HtmlTable = ({
@@ -88,13 +326,19 @@ const HtmlTable = ({
   headerRow,
   idColumn,
   customCells,
-  storeTableIdOrQueriesQueryId,
-  defaultCellComponent,
+  params,
   rowIds,
-  defaultCellIds,
-  sorting,
-  onHeaderThClick,
 }) => {
+  const [
+    cellComponentProps,
+    useCellIdsArgs,
+    defaultCellComponent,
+    useDefaultCellIds,
+    sortAndOffset,
+    handleSort,
+    paginatorComponent,
+  ] = params;
+  const defaultCellIds = useDefaultCellIds(...useCellIdsArgs);
   const customCellConfigurations = useMemo(() => {
     const cellIds = customCells ?? defaultCellIds;
     return objNew(
@@ -117,6 +361,9 @@ const HtmlTable = ({
   return /* @__PURE__ */ createElement(
     'table',
     {className},
+    paginatorComponent
+      ? /* @__PURE__ */ createElement('caption', null, paginatorComponent)
+      : null,
     headerRow === false
       ? null
       : /* @__PURE__ */ createElement(
@@ -127,18 +374,18 @@ const HtmlTable = ({
             null,
             idColumn === false
               ? null
-              : /* @__PURE__ */ createElement(HtmlHeaderTh, {
-                  sorting,
+              : /* @__PURE__ */ createElement(HtmlHeader, {
+                  sort: sortAndOffset ?? [],
                   label: 'Id',
-                  onClick: onHeaderThClick,
+                  onClick: handleSort,
                 }),
             objMap(customCellConfigurations, ({label}, cellId) =>
-              /* @__PURE__ */ createElement(HtmlHeaderTh, {
+              /* @__PURE__ */ createElement(HtmlHeader, {
                 key: cellId,
                 cellId,
                 label,
-                sorting,
-                onClick: onHeaderThClick,
+                sort: sortAndOffset ?? [],
+                onClick: handleSort,
               }),
             ),
           ),
@@ -164,7 +411,7 @@ const HtmlTable = ({
                 {key: cellId},
                 /* @__PURE__ */ createElement(CellView2, {
                   ...getProps(getComponentProps, rowId, cellId),
-                  ...storeTableIdOrQueriesQueryId,
+                  ...cellComponentProps,
                   rowId,
                   cellId,
                 }),
@@ -202,7 +449,6 @@ const EditableThing = ({thing, onThingChange, className}) => {
     /* @__PURE__ */ createElement(
       'button',
       {
-        type: 'button',
         className: thingType,
         onClick: useCallback(() => {
           const nextType = getTypeCase(thingType, NUMBER, BOOLEAN, STRING);
@@ -265,13 +511,16 @@ const EditableThing = ({thing, onThingChange, className}) => {
 const TableInHtmlTable = ({tableId, store, editable, ...props}) =>
   /* @__PURE__ */ createElement(HtmlTable, {
     ...props,
-    storeTableIdOrQueriesQueryId: useMemo(
-      () => ({store, tableId}),
-      [store, tableId],
+    params: useMemo(
+      () => [
+        {tableId, store},
+        [tableId, store],
+        editable ? EditableCellView : CellView,
+        useTableCellIds,
+      ],
+      [store, tableId, editable],
     ),
-    defaultCellComponent: editable ? EditableCellView : CellView,
     rowIds: useRowIds(tableId, store),
-    defaultCellIds: useTableCellIds(tableId, store),
   });
 const SortedTableInHtmlTable = ({
   tableId,
@@ -282,26 +531,36 @@ const SortedTableInHtmlTable = ({
   store,
   editable,
   sortOnClick,
+  paginator = false,
+  onChange,
   ...props
 }) => {
-  const [sorting, setSorting] = useState([cellId, descending ? true : false]);
-  const handleHeaderThClick = useCallbackOrUndefined(
-    (cellId2) =>
-      setSorting([cellId2, cellId2 == sorting[0] ? !sorting[1] : false]),
-    [sorting],
-    sortOnClick,
-  );
+  const [sortAndOffset, handleSort, paginatorComponent] =
+    useSortingAndPagination(
+      cellId,
+      descending,
+      sortOnClick,
+      offset,
+      limit,
+      useRowCount(tableId, store),
+      paginator,
+      onChange,
+    );
   return /* @__PURE__ */ createElement(HtmlTable, {
     ...props,
-    storeTableIdOrQueriesQueryId: useMemo(
-      () => ({store, tableId}),
-      [store, tableId],
+    params: useMemo(
+      () => [
+        {tableId, store},
+        [tableId, store],
+        editable ? EditableCellView : CellView,
+        useTableCellIds,
+        sortAndOffset,
+        handleSort,
+        paginatorComponent,
+      ],
+      [store, tableId, editable, sortAndOffset, handleSort, paginatorComponent],
     ),
-    defaultCellComponent: editable ? EditableCellView : CellView,
-    rowIds: useSortedRowIds(tableId, ...sorting, offset, limit, store),
-    defaultCellIds: useTableCellIds(tableId, store),
-    sorting,
-    onHeaderThClick: handleHeaderThClick,
+    rowIds: useSortedRowIds(tableId, ...sortAndOffset, limit, store),
   });
 };
 const ValuesInHtmlTable = ({
@@ -356,13 +615,16 @@ const ValuesInHtmlTable = ({
 const ResultTableInHtmlTable = ({queryId, queries, ...props}) =>
   /* @__PURE__ */ createElement(HtmlTable, {
     ...props,
-    storeTableIdOrQueriesQueryId: useMemo(
-      () => ({queries, queryId}),
-      [queries, queryId],
+    params: useMemo(
+      () => [
+        {queryId, queries},
+        [queryId, queries],
+        ResultCellView,
+        useResultTableCellIds,
+      ],
+      [queryId, queries],
     ),
-    defaultCellComponent: ResultCellView,
     rowIds: useResultRowIds(queryId, queries),
-    defaultCellIds: useResultTableCellIds(queryId, queries),
   });
 const ResultSortedTableInHtmlTable = ({
   queryId,
@@ -372,26 +634,36 @@ const ResultSortedTableInHtmlTable = ({
   limit,
   queries,
   sortOnClick,
+  paginator = false,
+  onChange,
   ...props
 }) => {
-  const [sorting, setSorting] = useState([cellId, descending ? true : false]);
-  const handleHeaderThClick = useCallbackOrUndefined(
-    (cellId2) =>
-      setSorting([cellId2, cellId2 == sorting[0] ? !sorting[1] : false]),
-    [sorting],
-    sortOnClick,
-  );
+  const [sortAndOffset, handleSort, paginatorComponent] =
+    useSortingAndPagination(
+      cellId,
+      descending,
+      sortOnClick,
+      offset,
+      limit,
+      useResultRowCount(queryId, queries),
+      paginator,
+      onChange,
+    );
   return /* @__PURE__ */ createElement(HtmlTable, {
     ...props,
-    storeTableIdOrQueriesQueryId: useMemo(
-      () => ({queries, queryId}),
-      [queries, queryId],
+    params: useMemo(
+      () => [
+        {queryId, queries},
+        [queryId, queries],
+        ResultCellView,
+        useResultTableCellIds,
+        sortAndOffset,
+        handleSort,
+        paginatorComponent,
+      ],
+      [queryId, queries, sortAndOffset, handleSort, paginatorComponent],
     ),
-    defaultCellComponent: ResultCellView,
-    rowIds: useResultSortedRowIds(queryId, ...sorting, offset, limit, queries),
-    defaultCellIds: useResultTableCellIds(queryId, queries),
-    sorting,
-    onHeaderThClick: handleHeaderThClick,
+    rowIds: useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
   });
 };
 const EditableCellView = ({tableId, rowId, cellId, store, className}) =>
@@ -413,6 +685,1796 @@ const EditableValueView = ({valueId, store, className}) =>
     onThingChange: useSetValueCallback(valueId, (value) => value, [], store),
     className: className ?? EDITABLE + VALUE,
   });
+const SortedTablePaginator = ({
+  onChange,
+  total,
+  offset = 0,
+  limit = total,
+  singular = 'row',
+  plural = singular + 's',
+}) => {
+  if (offset > total || offset < 0) {
+    offset = 0;
+    onChange(0);
+  }
+  const handlePrevClick = useCallbackOrUndefined(
+    () => onChange(offset - limit),
+    [onChange, offset, limit],
+    offset > 0,
+  );
+  const handleNextClick = useCallbackOrUndefined(
+    () => onChange(offset + limit),
+    [onChange, offset, limit],
+    offset + limit < total,
+  );
+  return /* @__PURE__ */ createElement(
+    React.Fragment,
+    null,
+    total > limit &&
+      /* @__PURE__ */ createElement(
+        React.Fragment,
+        null,
+        /* @__PURE__ */ createElement(
+          'button',
+          {
+            className: 'previous',
+            disabled: offset == 0,
+            onClick: handlePrevClick,
+          },
+          LEFT_ARROW,
+        ),
+        /* @__PURE__ */ createElement(
+          'button',
+          {
+            className: 'next',
+            disabled: offset + limit >= total,
+            onClick: handleNextClick,
+          },
+          RIGHT_ARROW,
+        ),
+        offset + 1,
+        ' to ',
+        Math.min(total, offset + limit),
+        ' of ',
+      ),
+    total,
+    ' ',
+    total != 1 ? plural : singular,
+  );
+};
+
+const Details = ({uniqueId, summary, children, s}) => {
+  const open = !!useCell(STATE_TABLE, uniqueId, OPEN_CELL, s);
+  const handleToggle = useSetCellCallback(
+    STATE_TABLE,
+    uniqueId,
+    OPEN_CELL,
+    (event) => event[CURRENT_TARGET].open,
+    [],
+    s,
+  );
+  return /* @__PURE__ */ React.createElement(
+    'details',
+    {open, onToggle: handleToggle},
+    /* @__PURE__ */ React.createElement('summary', null, summary),
+    children,
+  );
+};
+
+const StoreTableView = ({tableId, store, storeId, s}) => {
+  const uniqueId = getUniqueId('t', storeId, tableId);
+  const [cellId, descending, offset] = jsonParse(
+    useCell(STATE_TABLE, uniqueId, SORT_CELL, s) ?? '[]',
+  );
+  const handleChange = useSetCellCallback(
+    STATE_TABLE,
+    uniqueId,
+    SORT_CELL,
+    jsonString,
+    [],
+    s,
+  );
+  return /* @__PURE__ */ createElement(
+    Details,
+    {uniqueId, summary: TABLE + ': ' + tableId, s},
+    /* @__PURE__ */ createElement(SortedTableInHtmlTable, {
+      tableId,
+      store,
+      cellId,
+      descending,
+      offset,
+      limit: 10,
+      paginator: true,
+      sortOnClick: true,
+      onChange: handleChange,
+    }),
+  );
+};
+const StoreValuesView = ({store, storeId, s}) =>
+  arrayIsEmpty(useValueIds(store))
+    ? null
+    : /* @__PURE__ */ createElement(
+        Details,
+        {uniqueId: getUniqueId('v', storeId), summary: VALUES, s},
+        /* @__PURE__ */ createElement(ValuesInHtmlTable, {store}),
+      );
+const StoreView = ({storeId, s}) => {
+  const store = useStore(storeId);
+  const tableIds = useTableIds(store);
+  return isUndefined(store)
+    ? null
+    : /* @__PURE__ */ createElement(
+        Details,
+        {
+          uniqueId: getUniqueId('s', storeId),
+          summary: 'Store: ' + (storeId ?? DEFAULT),
+          s,
+        },
+        /* @__PURE__ */ createElement(StoreValuesView, {storeId, store, s}),
+        arrayMap(tableIds, (tableId) =>
+          /* @__PURE__ */ createElement(StoreTableView, {
+            storeId,
+            tableId,
+            store,
+            s,
+          }),
+        ),
+      );
+};
+
+const Body = (props) =>
+  /* @__PURE__ */ createElement(
+    'article',
+    null,
+    /* @__PURE__ */ createElement(StoreView, {...props}),
+    arrayMap(useStoreIds(), (storeId) =>
+      /* @__PURE__ */ createElement(StoreView, {
+        storeId,
+        key: storeId,
+        ...props,
+      }),
+    ),
+  );
+
+const Header = ({s}) => {
+  const position = useValue(POSITION_VALUE, s) ?? 1;
+  const handleClose = useSetValueCallback(OPEN_VALUE, () => false, [], s);
+  const handleDock = useSetValueCallback(
+    POSITION_VALUE,
+    (event) => Number(event[CURRENT_TARGET].dataset.id),
+    [],
+    s,
+  );
+  return /* @__PURE__ */ createElement(
+    'header',
+    null,
+    /* @__PURE__ */ createElement('img', {title: TITLE}),
+    /* @__PURE__ */ createElement('span', null, TITLE),
+    arrayMap(POSITIONS, (name, p) =>
+      p == position
+        ? null
+        : /* @__PURE__ */ createElement('img', {
+            onClick: handleDock,
+            'data-id': p,
+            title: 'Dock to ' + name,
+            key: p,
+          }),
+    ),
+    /* @__PURE__ */ createElement('img', {
+      onClick: handleClose,
+      title: 'Close',
+    }),
+  );
+};
+
+const Panel = ({s}) => {
+  const position = useValue(POSITION_VALUE, s) ?? 1;
+  return useValue(OPEN_VALUE, s)
+    ? /* @__PURE__ */ createElement(
+        'main',
+        {'data-position': position},
+        /* @__PURE__ */ createElement(Header, {s}),
+        /* @__PURE__ */ createElement(Body, {s}),
+      )
+    : null;
+};
+
+const createCustomPersister = (
+  store,
+  getPersisted,
+  setPersisted,
+  addPersisterListener,
+  delPersisterListener,
+) => {
+  let listenerId;
+  let loadSave = 0;
+  let loads = 0;
+  let saves = 0;
+  let running = 0;
+  let listening = 0;
+  let action;
+  let listeningHandle;
+  const scheduledActions = [];
+  const run = async () => {
+    /* istanbul ignore else */
+    if (!running) {
+      running = 1;
+      while (!isUndefined((action = arrayShift(scheduledActions)))) {
+        try {
+          await action();
+        } catch {}
+      }
+      running = 0;
+    }
+  };
+  const loadLock = async (actions) => {
+    /* istanbul ignore else */
+    if (loadSave != 2) {
+      loadSave = 1;
+      {
+        loads++;
+      }
+      await persister.schedule(async () => {
+        await actions();
+        loadSave = 0;
+      });
+    }
+    return persister;
+  };
+  const persister = {
+    load: async (initialTables, initialValues) =>
+      await loadLock(async () => {
+        try {
+          store.setContent(await getPersisted());
+        } catch {
+          store.setContent([initialTables, initialValues]);
+        }
+      }),
+    startAutoLoad: async (initialTables = {}, initialValues = {}) => {
+      persister.stopAutoLoad();
+      await persister.load(initialTables, initialValues);
+      listening = 1;
+      listeningHandle = addPersisterListener(
+        async (getContent, getTransactionChanges) =>
+          await loadLock(async () => {
+            if (getTransactionChanges) {
+              store.setTransactionChanges(getTransactionChanges());
+            } else {
+              try {
+                store.setContent(getContent?.() ?? (await getPersisted()));
+              } catch {}
+            }
+          }),
+      );
+      return persister;
+    },
+    stopAutoLoad: () => {
+      if (listening) {
+        delPersisterListener(listeningHandle);
+        listeningHandle = void 0;
+        listening = 0;
+      }
+      return persister;
+    },
+    save: async (getTransactionChanges) => {
+      /* istanbul ignore else */
+      if (loadSave != 1) {
+        loadSave = 2;
+        {
+          saves++;
+        }
+        await persister.schedule(async () => {
+          try {
+            await setPersisted(store.getContent, getTransactionChanges);
+          } catch {}
+          loadSave = 0;
+        });
+      }
+      return persister;
+    },
+    startAutoSave: async () => {
+      await persister.stopAutoSave().save();
+      listenerId = store.addDidFinishTransactionListener(
+        (_store, getTransactionChanges) => {
+          const [tableChanges, valueChanges] = getTransactionChanges();
+          if (!objIsEmpty(tableChanges) || !objIsEmpty(valueChanges)) {
+            persister.save(() => [tableChanges, valueChanges]);
+          }
+        },
+      );
+      return persister;
+    },
+    stopAutoSave: () => {
+      ifNotUndefined(listenerId, store.delListener);
+      return persister;
+    },
+    schedule: async (...actions) => {
+      arrayPush(scheduledActions, ...actions);
+      await run();
+      return persister;
+    },
+    getStore: () => store,
+    destroy: () => persister.stopAutoLoad().stopAutoSave(),
+    getStats: () => ({loads, saves}),
+  };
+  return objFreeze(persister);
+};
+
+const STORAGE = 'storage';
+const WINDOW = globalThis.window;
+const getStoragePersister = (store, storageName, storage) => {
+  const getPersisted = async () => jsonParse(storage.getItem(storageName));
+  const setPersisted = async (getContent) =>
+    storage.setItem(storageName, jsonString(getContent()));
+  const addPersisterListener = (listener) => {
+    const storeListener = (event) => {
+      if (event.storageArea === storage && event.key === storageName) {
+        listener(() => jsonParse(event.newValue));
+      }
+    };
+    WINDOW.addEventListener(STORAGE, storeListener);
+    return storeListener;
+  };
+  const delPersisterListener = (storeListener) =>
+    WINDOW.removeEventListener(STORAGE, storeListener);
+  return createCustomPersister(
+    store,
+    getPersisted,
+    setPersisted,
+    addPersisterListener,
+    delPersisterListener,
+  );
+};
+const createSessionPersister = (store, storageName) =>
+  getStoragePersister(store, storageName, sessionStorage);
+
+const collSizeN = (collSizer) => (coll) =>
+  arrayReduce(collValues(coll), (total, coll2) => total + collSizer(coll2), 0);
+const collSize = (coll) => coll?.size ?? 0;
+const collSize2 = collSizeN(collSize);
+const collSize3 = collSizeN(collSize2);
+const collSize4 = collSizeN(collSize3);
+const collHas = (coll, keyOrValue) => coll?.has(keyOrValue) ?? false;
+const collIsEmpty = (coll) => isUndefined(coll) || collSize(coll) == 0;
+const collValues = (coll) => [...(coll?.values() ?? [])];
+const collClear = (coll) => coll.clear();
+const collForEach = (coll, cb) => coll?.forEach(cb);
+const collDel = (coll, keyOrValue) => coll?.delete(keyOrValue);
+
+const mapNew = (entries) => new Map(entries);
+const mapKeys = (map) => [...(map?.keys() ?? [])];
+const mapGet = (map, key) => map?.get(key);
+const mapForEach = (map, cb) =>
+  collForEach(map, (value, key) => cb(key, value));
+const mapMap = (coll, cb) =>
+  arrayMap([...(coll?.entries() ?? [])], ([key, value]) => cb(value, key));
+const mapSet = (map, key, value) =>
+  isUndefined(value) ? (collDel(map, key), map) : map?.set(key, value);
+const mapEnsure = (map, key, getDefaultValue) => {
+  if (!collHas(map, key)) {
+    mapSet(map, key, getDefaultValue());
+  }
+  return mapGet(map, key);
+};
+const mapMatch = (map, obj, set, del = mapSet) => {
+  objMap(obj, (value, id) => set(map, id, value));
+  mapForEach(map, (id) => (objHas(obj, id) ? 0 : del(map, id)));
+  return map;
+};
+const mapToObj = (map, mapValue, excludeValue) => {
+  const obj = {};
+  collForEach(map, (value, id) => {
+    const mappedValue = mapValue ? mapValue(value, id) : value;
+    excludeValue?.(mappedValue, value) ? 0 : (obj[id] = mappedValue);
+  });
+  return obj;
+};
+const mapToObj2 = (map, mapValue, excludeValue) =>
+  mapToObj(
+    map,
+    (childMap) => mapToObj(childMap, mapValue, excludeValue),
+    objIsEmpty,
+  );
+const mapToObj3 = (map, mapValue, excludeValue) =>
+  mapToObj(
+    map,
+    (childMap) => mapToObj2(childMap, mapValue, excludeValue),
+    objIsEmpty,
+  );
+const mapClone = (map, mapValue) => {
+  const map2 = mapNew();
+  collForEach(map, (value, key) => map2.set(key, mapValue?.(value) ?? value));
+  return map2;
+};
+const mapClone2 = (map) => mapClone(map, mapClone);
+const mapClone3 = (map) => mapClone(map, mapClone2);
+const visitTree = (node, path, ensureLeaf, pruneLeaf, p = 0) =>
+  ifNotUndefined(
+    (ensureLeaf ? mapEnsure : mapGet)(
+      node,
+      path[p],
+      p > arrayLength(path) - 2 ? ensureLeaf : mapNew,
+    ),
+    (nodeOrLeaf) => {
+      if (p > arrayLength(path) - 2) {
+        if (pruneLeaf?.(nodeOrLeaf)) {
+          mapSet(node, path[p]);
+        }
+        return nodeOrLeaf;
+      }
+      const leaf = visitTree(nodeOrLeaf, path, ensureLeaf, pruneLeaf, p + 1);
+      if (collIsEmpty(nodeOrLeaf)) {
+        mapSet(node, path[p]);
+      }
+      return leaf;
+    },
+  );
+
+const setNew = (entryOrEntries) =>
+  new Set(
+    isArray(entryOrEntries) || isUndefined(entryOrEntries)
+      ? entryOrEntries
+      : [entryOrEntries],
+  );
+const setAdd = (set, value) => set?.add(value);
+
+const INTEGER = /^\d+$/;
+const getPoolFunctions = () => {
+  const pool = [];
+  let nextId = 0;
+  return [
+    (reuse) => (reuse ? arrayShift(pool) : null) ?? EMPTY_STRING + nextId++,
+    (id) => {
+      if (test(INTEGER, id) && arrayLength(pool) < 1e3) {
+        arrayPush(pool, id);
+      }
+    },
+  ];
+};
+
+const getWildcardedLeaves = (deepIdSet, path = [EMPTY_STRING]) => {
+  const leaves = [];
+  const deep = (node, p) =>
+    p == arrayLength(path)
+      ? arrayPush(leaves, node)
+      : path[p] === null
+      ? collForEach(node, (node2) => deep(node2, p + 1))
+      : arrayForEach([path[p], null], (id) => deep(mapGet(node, id), p + 1));
+  deep(deepIdSet, 0);
+  return leaves;
+};
+const getListenerFunctions = (getThing) => {
+  let thing;
+  const [getId, releaseId] = getPoolFunctions();
+  const allListeners = mapNew();
+  const addListener = (
+    listener,
+    idSetNode,
+    path,
+    pathGetters = [],
+    extraArgsGetter = () => [],
+  ) => {
+    thing ??= getThing();
+    const id = getId(1);
+    mapSet(allListeners, id, [
+      listener,
+      idSetNode,
+      path,
+      pathGetters,
+      extraArgsGetter,
+    ]);
+    setAdd(visitTree(idSetNode, path ?? [EMPTY_STRING], setNew), id);
+    return id;
+  };
+  const callListeners = (idSetNode, ids, ...extraArgs) =>
+    arrayForEach(getWildcardedLeaves(idSetNode, ids), (set) =>
+      collForEach(set, (id) =>
+        mapGet(allListeners, id)[0](thing, ...(ids ?? []), ...extraArgs),
+      ),
+    );
+  const delListener = (id) =>
+    ifNotUndefined(mapGet(allListeners, id), ([, idSetNode, idOrNulls]) => {
+      visitTree(idSetNode, idOrNulls ?? [EMPTY_STRING], void 0, (idSet) => {
+        collDel(idSet, id);
+        return collIsEmpty(idSet) ? 1 : 0;
+      });
+      mapSet(allListeners, id);
+      releaseId(id);
+      return idOrNulls;
+    });
+  const callListener = (id) =>
+    ifNotUndefined(
+      mapGet(allListeners, id),
+      ([listener, , path = [], pathGetters, extraArgsGetter]) => {
+        const callWithIds = (...ids) => {
+          const index = arrayLength(ids);
+          index == arrayLength(path)
+            ? listener(thing, ...ids, ...extraArgsGetter(ids))
+            : isUndefined(path[index])
+            ? arrayForEach(pathGetters[index]?.(...ids) ?? [], (id2) =>
+                callWithIds(...ids, id2),
+              )
+            : callWithIds(...ids, path[index]);
+        };
+        callWithIds();
+      },
+    );
+  return [addListener, callListeners, delListener, callListener];
+};
+
+const pairNew = (value) => [value, value];
+const pairCollSize2 = (pair, func = collSize2) => func(pair[0]) + func(pair[1]);
+const pairNewMap = () => [mapNew(), mapNew()];
+const pairClone = (array) => [...array];
+const pairIsEqual = ([entry1, entry2]) => entry1 === entry2;
+
+const defaultSorter = (sortKey1, sortKey2) =>
+  (sortKey1 ?? 0) < (sortKey2 ?? 0) ? -1 : 1;
+
+const validate = (obj, validateChild, onInvalidObj) => {
+  if (isUndefined(obj) || !isObject(obj) || objIsEmpty(obj) || objFrozen(obj)) {
+    onInvalidObj?.();
+    return false;
+  }
+  objMap(obj, (child, id2) => {
+    if (!validateChild(child, id2)) {
+      objDel(obj, id2);
+    }
+  });
+  return !objIsEmpty(obj);
+};
+const idsChanged = (changedIds, id2, addedOrRemoved) =>
+  mapSet(
+    changedIds,
+    id2,
+    mapGet(changedIds, id2) == -addedOrRemoved ? void 0 : addedOrRemoved,
+  );
+const createStore = () => {
+  let hasTablesSchema;
+  let hasValuesSchema;
+  let cellsTouched = false;
+  let valuesTouched = false;
+  let transactions = 0;
+  const changedTableIds = mapNew();
+  const changedTableCellIds = mapNew();
+  const changedRowCount = mapNew();
+  const changedRowIds = mapNew();
+  const changedCellIds = mapNew();
+  const changedCells = mapNew();
+  const changedValueIds = mapNew();
+  const changedValues = mapNew();
+  const invalidCells = mapNew();
+  const invalidValues = mapNew();
+  const tablesSchemaMap = mapNew();
+  const tablesSchemaRowCache = mapNew();
+  const valuesSchemaMap = mapNew();
+  const valuesDefaulted = mapNew();
+  const valuesNonDefaulted = setNew();
+  const tablePoolFunctions = mapNew();
+  const tableCellIds = mapNew();
+  const tablesMap = mapNew();
+  const valuesMap = mapNew();
+  const tablesListeners = pairNewMap();
+  const tableIdsListeners = pairNewMap();
+  const tableListeners = pairNewMap();
+  const tableCellIdsListeners = pairNewMap();
+  const rowCountListeners = pairNewMap();
+  const rowIdsListeners = pairNewMap();
+  const sortedRowIdsListeners = pairNewMap();
+  const rowListeners = pairNewMap();
+  const cellIdsListeners = pairNewMap();
+  const cellListeners = pairNewMap();
+  const invalidCellListeners = pairNewMap();
+  const invalidValueListeners = pairNewMap();
+  const valuesListeners = pairNewMap();
+  const valueIdsListeners = pairNewMap();
+  const valueListeners = pairNewMap();
+  const startTransactionListeners = mapNew();
+  const finishTransactionListeners = pairNewMap();
+  const [addListener, callListeners, delListenerImpl, callListenerImpl] =
+    getListenerFunctions(() => store);
+  const validateTablesSchema = (tableSchema) =>
+    validate(tableSchema, (tableSchema2) =>
+      validate(tableSchema2, validateCellOrValueSchema),
+    );
+  const validateValuesSchema = (valuesSchema) =>
+    validate(valuesSchema, validateCellOrValueSchema);
+  const validateCellOrValueSchema = (schema) => {
+    if (!validate(schema, (_child, id2) => arrayHas([TYPE, DEFAULT], id2))) {
+      return false;
+    }
+    const type = schema[TYPE];
+    if (!isTypeStringOrBoolean(type) && type != NUMBER) {
+      return false;
+    }
+    if (getCellOrValueType(schema[DEFAULT]) != type) {
+      objDel(schema, DEFAULT);
+    }
+    return true;
+  };
+  const validateTables = (tables) =>
+    validate(tables, validateTable, cellInvalid);
+  const validateTable = (table, tableId) =>
+    (!hasTablesSchema ||
+      collHas(tablesSchemaMap, tableId) ||
+      cellInvalid(tableId)) &&
+    validate(
+      table,
+      (row, rowId) => validateRow(tableId, rowId, row),
+      () => cellInvalid(tableId),
+    );
+  const validateRow = (tableId, rowId, row, skipDefaults) =>
+    validate(
+      skipDefaults ? row : addDefaultsToRow(row, tableId, rowId),
+      (cell, cellId) =>
+        ifNotUndefined(
+          getValidatedCell(tableId, rowId, cellId, cell),
+          (validCell) => {
+            row[cellId] = validCell;
+            return true;
+          },
+          () => false,
+        ),
+      () => cellInvalid(tableId, rowId),
+    );
+  const getValidatedCell = (tableId, rowId, cellId, cell) =>
+    hasTablesSchema
+      ? ifNotUndefined(
+          mapGet(mapGet(tablesSchemaMap, tableId), cellId),
+          (cellSchema) =>
+            getCellOrValueType(cell) != cellSchema[TYPE]
+              ? cellInvalid(tableId, rowId, cellId, cell, cellSchema[DEFAULT])
+              : cell,
+          () => cellInvalid(tableId, rowId, cellId, cell),
+        )
+      : isUndefined(getCellOrValueType(cell))
+      ? cellInvalid(tableId, rowId, cellId, cell)
+      : cell;
+  const validateValues = (values, skipDefaults) =>
+    validate(
+      skipDefaults ? values : addDefaultsToValues(values),
+      (value, valueId) =>
+        ifNotUndefined(
+          getValidatedValue(valueId, value),
+          (validValue) => {
+            values[valueId] = validValue;
+            return true;
+          },
+          () => false,
+        ),
+      () => valueInvalid(),
+    );
+  const getValidatedValue = (valueId, value) =>
+    hasValuesSchema
+      ? ifNotUndefined(
+          mapGet(valuesSchemaMap, valueId),
+          (valueSchema) =>
+            getCellOrValueType(value) != valueSchema[TYPE]
+              ? valueInvalid(valueId, value, valueSchema[DEFAULT])
+              : value,
+          () => valueInvalid(valueId, value),
+        )
+      : isUndefined(getCellOrValueType(value))
+      ? valueInvalid(valueId, value)
+      : value;
+  const addDefaultsToRow = (row, tableId, rowId) => {
+    ifNotUndefined(
+      mapGet(tablesSchemaRowCache, tableId),
+      ([rowDefaulted, rowNonDefaulted]) => {
+        collForEach(rowDefaulted, (cell, cellId) => {
+          if (!objHas(row, cellId)) {
+            row[cellId] = cell;
+          }
+        });
+        collForEach(rowNonDefaulted, (cellId) => {
+          if (!objHas(row, cellId)) {
+            cellInvalid(tableId, rowId, cellId);
+          }
+        });
+      },
+    );
+    return row;
+  };
+  const addDefaultsToValues = (values) => {
+    if (hasValuesSchema) {
+      collForEach(valuesDefaulted, (value, valueId) => {
+        if (!objHas(values, valueId)) {
+          values[valueId] = value;
+        }
+      });
+      collForEach(valuesNonDefaulted, (valueId) => {
+        if (!objHas(values, valueId)) {
+          valueInvalid(valueId);
+        }
+      });
+    }
+    return values;
+  };
+  const setValidTablesSchema = (tablesSchema) =>
+    mapMatch(
+      tablesSchemaMap,
+      tablesSchema,
+      (_tablesSchema, tableId, tableSchema) => {
+        const rowDefaulted = mapNew();
+        const rowNonDefaulted = setNew();
+        mapMatch(
+          mapEnsure(tablesSchemaMap, tableId, mapNew),
+          tableSchema,
+          (tableSchemaMap, cellId, cellSchema) => {
+            mapSet(tableSchemaMap, cellId, cellSchema);
+            ifNotUndefined(
+              cellSchema[DEFAULT],
+              (def) => mapSet(rowDefaulted, cellId, def),
+              () => setAdd(rowNonDefaulted, cellId),
+            );
+          },
+        );
+        mapSet(tablesSchemaRowCache, tableId, [rowDefaulted, rowNonDefaulted]);
+      },
+      (_tablesSchema, tableId) => {
+        mapSet(tablesSchemaMap, tableId);
+        mapSet(tablesSchemaRowCache, tableId);
+      },
+    );
+  const setValidValuesSchema = (valuesSchema) =>
+    mapMatch(
+      valuesSchemaMap,
+      valuesSchema,
+      (_valuesSchema, valueId, valueSchema) => {
+        mapSet(valuesSchemaMap, valueId, valueSchema);
+        ifNotUndefined(
+          valueSchema[DEFAULT],
+          (def) => mapSet(valuesDefaulted, valueId, def),
+          () => setAdd(valuesNonDefaulted, valueId),
+        );
+      },
+      (_valuesSchema, valueId) => {
+        mapSet(valuesSchemaMap, valueId);
+        mapSet(valuesDefaulted, valueId);
+        collDel(valuesNonDefaulted, valueId);
+      },
+    );
+  const setOrDelTables = (tables) =>
+    objIsEmpty(tables) ? delTables() : setTables(tables);
+  const setValidTables = (tables) =>
+    mapMatch(
+      tablesMap,
+      tables,
+      (_tables, tableId, table) => setValidTable(tableId, table),
+      (_tables, tableId) => delValidTable(tableId),
+    );
+  const setValidTable = (tableId, table) =>
+    mapMatch(
+      mapEnsure(tablesMap, tableId, () => {
+        tableIdsChanged(tableId, 1);
+        mapSet(tablePoolFunctions, tableId, getPoolFunctions());
+        mapSet(tableCellIds, tableId, mapNew());
+        return mapNew();
+      }),
+      table,
+      (tableMap, rowId, row) => setValidRow(tableId, tableMap, rowId, row),
+      (tableMap, rowId) => delValidRow(tableId, tableMap, rowId),
+    );
+  const setValidRow = (tableId, tableMap, rowId, row, forceDel) =>
+    mapMatch(
+      mapEnsure(tableMap, rowId, () => {
+        rowIdsChanged(tableId, rowId, 1);
+        return mapNew();
+      }),
+      row,
+      (rowMap, cellId, cell) =>
+        setValidCell(tableId, rowId, rowMap, cellId, cell),
+      (rowMap, cellId) =>
+        delValidCell(tableId, tableMap, rowId, rowMap, cellId, forceDel),
+    );
+  const setValidCell = (tableId, rowId, rowMap, cellId, cell) => {
+    if (!collHas(rowMap, cellId)) {
+      cellIdsChanged(tableId, rowId, cellId, 1);
+    }
+    const oldCell = mapGet(rowMap, cellId);
+    if (cell !== oldCell) {
+      cellChanged(tableId, rowId, cellId, oldCell, cell);
+      mapSet(rowMap, cellId, cell);
+    }
+  };
+  const setCellIntoDefaultRow = (tableId, tableMap, rowId, cellId, validCell) =>
+    ifNotUndefined(
+      mapGet(tableMap, rowId),
+      (rowMap) => setValidCell(tableId, rowId, rowMap, cellId, validCell),
+      () =>
+        setValidRow(
+          tableId,
+          tableMap,
+          rowId,
+          addDefaultsToRow({[cellId]: validCell}, tableId, rowId),
+        ),
+    );
+  const setOrDelValues = (values) =>
+    objIsEmpty(values) ? delValues() : setValues(values);
+  const setValidValues = (values) =>
+    mapMatch(
+      valuesMap,
+      values,
+      (_valuesMap, valueId, value) => setValidValue(valueId, value),
+      (_valuesMap, valueId) => delValidValue(valueId),
+    );
+  const setValidValue = (valueId, value) => {
+    if (!collHas(valuesMap, valueId)) {
+      valueIdsChanged(valueId, 1);
+    }
+    const oldValue = mapGet(valuesMap, valueId);
+    if (value !== oldValue) {
+      valueChanged(valueId, oldValue, value);
+      mapSet(valuesMap, valueId, value);
+    }
+  };
+  const getNewRowId = (tableId, reuse) => {
+    const [getId] = mapGet(tablePoolFunctions, tableId);
+    const rowId = getId(reuse);
+    if (!collHas(mapGet(tablesMap, tableId), rowId)) {
+      return rowId;
+    }
+    return getNewRowId(tableId, reuse);
+  };
+  const getOrCreateTable = (tableId) =>
+    mapGet(tablesMap, tableId) ?? setValidTable(tableId, {});
+  const delValidTable = (tableId) => setValidTable(tableId, {});
+  const delValidRow = (tableId, tableMap, rowId) => {
+    const [, releaseId] = mapGet(tablePoolFunctions, tableId);
+    releaseId(rowId);
+    setValidRow(tableId, tableMap, rowId, {}, true);
+  };
+  const delValidCell = (tableId, table, rowId, row, cellId, forceDel) => {
+    const defaultCell = mapGet(
+      mapGet(tablesSchemaRowCache, tableId)?.[0],
+      cellId,
+    );
+    if (!isUndefined(defaultCell) && !forceDel) {
+      return setValidCell(tableId, rowId, row, cellId, defaultCell);
+    }
+    const delCell2 = (cellId2) => {
+      cellChanged(tableId, rowId, cellId2, mapGet(row, cellId2));
+      cellIdsChanged(tableId, rowId, cellId2, -1);
+      mapSet(row, cellId2);
+    };
+    isUndefined(defaultCell) ? delCell2(cellId) : mapForEach(row, delCell2);
+    if (collIsEmpty(row)) {
+      rowIdsChanged(tableId, rowId, -1);
+      if (collIsEmpty(mapSet(table, rowId))) {
+        tableIdsChanged(tableId, -1);
+        mapSet(tablesMap, tableId);
+        mapSet(tablePoolFunctions, tableId);
+        mapSet(tableCellIds, tableId);
+      }
+    }
+  };
+  const delValidValue = (valueId) => {
+    const defaultValue = mapGet(valuesDefaulted, valueId);
+    if (!isUndefined(defaultValue)) {
+      return setValidValue(valueId, defaultValue);
+    }
+    valueChanged(valueId, mapGet(valuesMap, valueId));
+    valueIdsChanged(valueId, -1);
+    mapSet(valuesMap, valueId);
+  };
+  const tableIdsChanged = (tableId, addedOrRemoved) =>
+    idsChanged(changedTableIds, tableId, addedOrRemoved);
+  const rowIdsChanged = (tableId, rowId, addedOrRemoved) =>
+    idsChanged(
+      mapEnsure(changedRowIds, tableId, mapNew),
+      rowId,
+      addedOrRemoved,
+    ) &&
+    mapSet(
+      changedRowCount,
+      tableId,
+      mapEnsure(changedRowCount, tableId, () => 0) + addedOrRemoved,
+    );
+  const cellIdsChanged = (tableId, rowId, cellId, addedOrRemoved) => {
+    const cellIds = mapGet(tableCellIds, tableId);
+    const count = mapGet(cellIds, cellId) ?? 0;
+    if (
+      (count == 0 && addedOrRemoved == 1) ||
+      (count == 1 && addedOrRemoved == -1)
+    ) {
+      idsChanged(
+        mapEnsure(changedTableCellIds, tableId, mapNew),
+        cellId,
+        addedOrRemoved,
+      );
+    }
+    mapSet(
+      cellIds,
+      cellId,
+      count != -addedOrRemoved ? count + addedOrRemoved : null,
+    );
+    idsChanged(
+      mapEnsure(mapEnsure(changedCellIds, tableId, mapNew), rowId, mapNew),
+      cellId,
+      addedOrRemoved,
+    );
+  };
+  const cellChanged = (tableId, rowId, cellId, oldCell, newCell) =>
+    (mapEnsure(
+      mapEnsure(mapEnsure(changedCells, tableId, mapNew), rowId, mapNew),
+      cellId,
+      () => [oldCell, 0],
+    )[1] = newCell);
+  const valueIdsChanged = (valueId, addedOrRemoved) =>
+    idsChanged(changedValueIds, valueId, addedOrRemoved);
+  const valueChanged = (valueId, oldValue, newValue) =>
+    (mapEnsure(changedValues, valueId, () => [oldValue, 0])[1] = newValue);
+  const cellInvalid = (tableId, rowId, cellId, invalidCell, defaultedCell) => {
+    arrayPush(
+      mapEnsure(
+        mapEnsure(mapEnsure(invalidCells, tableId, mapNew), rowId, mapNew),
+        cellId,
+        () => [],
+      ),
+      invalidCell,
+    );
+    return defaultedCell;
+  };
+  const valueInvalid = (valueId, invalidValue, defaultedValue) => {
+    arrayPush(
+      mapEnsure(invalidValues, valueId, () => []),
+      invalidValue,
+    );
+    return defaultedValue;
+  };
+  const getCellChange = (tableId, rowId, cellId) =>
+    ifNotUndefined(
+      mapGet(mapGet(mapGet(changedCells, tableId), rowId), cellId),
+      ([oldCell, newCell]) => [true, oldCell, newCell],
+      () => [false, ...pairNew(getCell(tableId, rowId, cellId))],
+    );
+  const getValueChange = (valueId) =>
+    ifNotUndefined(
+      mapGet(changedValues, valueId),
+      ([oldValue, newValue]) => [true, oldValue, newValue],
+      () => [false, ...pairNew(getValue(valueId))],
+    );
+  const callInvalidCellListeners = (mutator) =>
+    !collIsEmpty(invalidCells) && !collIsEmpty(invalidCellListeners[mutator])
+      ? collForEach(
+          mutator ? mapClone3(invalidCells) : invalidCells,
+          (rows, tableId) =>
+            collForEach(rows, (cells, rowId) =>
+              collForEach(cells, (invalidCell, cellId) =>
+                callListeners(
+                  invalidCellListeners[mutator],
+                  [tableId, rowId, cellId],
+                  invalidCell,
+                ),
+              ),
+            ),
+        )
+      : 0;
+  const callInvalidValueListeners = (mutator) =>
+    !collIsEmpty(invalidValues) && !collIsEmpty(invalidValueListeners[mutator])
+      ? collForEach(
+          mutator ? mapClone(invalidValues) : invalidValues,
+          (invalidValue, valueId) =>
+            callListeners(
+              invalidValueListeners[mutator],
+              [valueId],
+              invalidValue,
+            ),
+        )
+      : 0;
+  const callIdsListenersIfChanged = (listeners, changedIds, ids) => {
+    if (!collIsEmpty(changedIds)) {
+      callListeners(listeners, ids, () => mapToObj(changedIds));
+      return 1;
+    }
+  };
+  const callTabularListenersForChanges = (mutator) => {
+    const emptySortedRowIdListeners = collIsEmpty(
+      sortedRowIdsListeners[mutator],
+    );
+    const emptyIdListeners =
+      collIsEmpty(cellIdsListeners[mutator]) &&
+      collIsEmpty(tableCellIdsListeners[mutator]) &&
+      collIsEmpty(rowCountListeners[mutator]) &&
+      collIsEmpty(rowIdsListeners[mutator]) &&
+      emptySortedRowIdListeners &&
+      collIsEmpty(tableIdsListeners[mutator]);
+    const emptyOtherListeners =
+      collIsEmpty(cellListeners[mutator]) &&
+      collIsEmpty(rowListeners[mutator]) &&
+      collIsEmpty(tableListeners[mutator]) &&
+      collIsEmpty(tablesListeners[mutator]);
+    if (!emptyIdListeners || !emptyOtherListeners) {
+      const changes = mutator
+        ? [
+            mapClone(changedTableIds),
+            mapClone2(changedTableCellIds),
+            mapClone(changedRowCount),
+            mapClone2(changedRowIds),
+            mapClone3(changedCellIds),
+            mapClone3(changedCells),
+          ]
+        : [
+            changedTableIds,
+            changedTableCellIds,
+            changedRowCount,
+            changedRowIds,
+            changedCellIds,
+            changedCells,
+          ];
+      if (!emptyIdListeners) {
+        callIdsListenersIfChanged(tableIdsListeners[mutator], changes[0]);
+        collForEach(changes[1], (changedIds, tableId) =>
+          callIdsListenersIfChanged(
+            tableCellIdsListeners[mutator],
+            changedIds,
+            [tableId],
+          ),
+        );
+        collForEach(changes[2], (changedCount, tableId) => {
+          if (changedCount != 0) {
+            callListeners(
+              rowCountListeners[mutator],
+              [tableId],
+              getRowCount(tableId),
+            );
+          }
+        });
+        const calledSortableTableIds = setNew();
+        collForEach(changes[3], (changedIds, tableId) => {
+          if (
+            callIdsListenersIfChanged(rowIdsListeners[mutator], changedIds, [
+              tableId,
+            ]) &&
+            !emptySortedRowIdListeners
+          ) {
+            callListeners(sortedRowIdsListeners[mutator], [tableId, null]);
+            setAdd(calledSortableTableIds, tableId);
+          }
+        });
+        if (!emptySortedRowIdListeners) {
+          collForEach(changes[5], (rows, tableId) => {
+            if (!collHas(calledSortableTableIds, tableId)) {
+              const sortableCellIds = setNew();
+              collForEach(rows, (cells) =>
+                collForEach(cells, ([oldCell, newCell], cellId) =>
+                  newCell !== oldCell
+                    ? setAdd(sortableCellIds, cellId)
+                    : collDel(cells, cellId),
+                ),
+              );
+              collForEach(sortableCellIds, (cellId) =>
+                callListeners(sortedRowIdsListeners[mutator], [
+                  tableId,
+                  cellId,
+                ]),
+              );
+            }
+          });
+        }
+        collForEach(changes[4], (rowCellIds, tableId) =>
+          collForEach(rowCellIds, (changedIds, rowId) =>
+            callIdsListenersIfChanged(cellIdsListeners[mutator], changedIds, [
+              tableId,
+              rowId,
+            ]),
+          ),
+        );
+      }
+      if (!emptyOtherListeners) {
+        let tablesChanged;
+        collForEach(changes[5], (rows, tableId) => {
+          let tableChanged;
+          collForEach(rows, (cells, rowId) => {
+            let rowChanged;
+            collForEach(cells, ([oldCell, newCell], cellId) => {
+              if (newCell !== oldCell) {
+                callListeners(
+                  cellListeners[mutator],
+                  [tableId, rowId, cellId],
+                  newCell,
+                  oldCell,
+                  getCellChange,
+                );
+                tablesChanged = tableChanged = rowChanged = 1;
+              }
+            });
+            if (rowChanged) {
+              callListeners(
+                rowListeners[mutator],
+                [tableId, rowId],
+                getCellChange,
+              );
+            }
+          });
+          if (tableChanged) {
+            callListeners(tableListeners[mutator], [tableId], getCellChange);
+          }
+        });
+        if (tablesChanged) {
+          callListeners(tablesListeners[mutator], void 0, getCellChange);
+        }
+      }
+    }
+  };
+  const callKeyedValuesListenersForChanges = (mutator) => {
+    const emptyIdListeners = collIsEmpty(valueIdsListeners[mutator]);
+    const emptyOtherListeners =
+      collIsEmpty(valueListeners[mutator]) &&
+      collIsEmpty(valuesListeners[mutator]);
+    if (!emptyIdListeners || !emptyOtherListeners) {
+      const changes = mutator
+        ? [mapClone(changedValueIds), mapClone(changedValues)]
+        : [changedValueIds, changedValues];
+      if (!emptyIdListeners) {
+        callIdsListenersIfChanged(valueIdsListeners[mutator], changes[0]);
+      }
+      if (!emptyOtherListeners) {
+        let valuesChanged;
+        collForEach(changes[1], ([oldValue, newValue], valueId) => {
+          if (newValue !== oldValue) {
+            callListeners(
+              valueListeners[mutator],
+              [valueId],
+              newValue,
+              oldValue,
+              getValueChange,
+            );
+            valuesChanged = 1;
+          }
+        });
+        if (valuesChanged) {
+          callListeners(valuesListeners[mutator], void 0, getValueChange);
+        }
+      }
+    }
+  };
+  const fluentTransaction = (actions, ...args) => {
+    transaction(() => actions(...arrayMap(args, id)));
+    return store;
+  };
+  const getTransactionChanges = () => [
+    mapToObj(
+      changedCells,
+      (table, tableId) =>
+        mapGet(changedTableIds, tableId) === -1
+          ? null
+          : mapToObj(
+              table,
+              (row, rowId) =>
+                mapGet(mapGet(changedRowIds, tableId), rowId) === -1
+                  ? null
+                  : mapToObj(
+                      row,
+                      ([, newCell]) => newCell ?? null,
+                      (_, changedCell) => pairIsEqual(changedCell),
+                    ),
+              objIsEmpty,
+            ),
+      objIsEmpty,
+    ),
+    mapToObj(
+      changedValues,
+      ([, newValue]) => newValue ?? null,
+      (_, changedValue) => pairIsEqual(changedValue),
+    ),
+  ];
+  const getTransactionLog = () => ({
+    cellsTouched,
+    valuesTouched,
+    changedCells: mapToObj3(changedCells, pairClone, pairIsEqual),
+    invalidCells: mapToObj3(invalidCells),
+    changedValues: mapToObj(changedValues, pairClone, pairIsEqual),
+    invalidValues: mapToObj(invalidValues),
+    changedTableIds: mapToObj(changedTableIds),
+    changedRowIds: mapToObj2(changedRowIds),
+    changedCellIds: mapToObj3(changedCellIds),
+    changedValueIds: mapToObj(changedValueIds),
+  });
+  const getContent = () => [getTables(), getValues()];
+  const getTables = () => mapToObj3(tablesMap);
+  const getTableIds = () => mapKeys(tablesMap);
+  const getTable = (tableId) => mapToObj2(mapGet(tablesMap, id(tableId)));
+  const getTableCellIds = (tableId) =>
+    mapKeys(mapGet(tableCellIds, id(tableId)));
+  const getRowCount = (tableId) => collSize(mapGet(tablesMap, id(tableId)));
+  const getRowIds = (tableId) => mapKeys(mapGet(tablesMap, id(tableId)));
+  const getSortedRowIds = (tableId, cellId, descending, offset = 0, limit) =>
+    arrayMap(
+      arraySlice(
+        arraySort(
+          mapMap(mapGet(tablesMap, id(tableId)), (row, rowId) => [
+            isUndefined(cellId) ? rowId : mapGet(row, id(cellId)),
+            rowId,
+          ]),
+          ([cell1], [cell2]) =>
+            defaultSorter(cell1, cell2) * (descending ? -1 : 1),
+        ),
+        offset,
+        isUndefined(limit) ? limit : offset + limit,
+      ),
+      ([, rowId]) => rowId,
+    );
+  const getRow = (tableId, rowId) =>
+    mapToObj(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)));
+  const getCellIds = (tableId, rowId) =>
+    mapKeys(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)));
+  const getCell = (tableId, rowId, cellId) =>
+    mapGet(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), id(cellId));
+  const getValues = () => mapToObj(valuesMap);
+  const getValueIds = () => mapKeys(valuesMap);
+  const getValue = (valueId) => mapGet(valuesMap, id(valueId));
+  const hasTables = () => !collIsEmpty(tablesMap);
+  const hasTable = (tableId) => collHas(tablesMap, id(tableId));
+  const hasTableCell = (tableId, cellId) =>
+    collHas(mapGet(tableCellIds, id(tableId)), id(cellId));
+  const hasRow = (tableId, rowId) =>
+    collHas(mapGet(tablesMap, id(tableId)), id(rowId));
+  const hasCell = (tableId, rowId, cellId) =>
+    collHas(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), id(cellId));
+  const hasValues = () => !collIsEmpty(valuesMap);
+  const hasValue = (valueId) => collHas(valuesMap, id(valueId));
+  const getTablesJson = () => jsonString(tablesMap);
+  const getValuesJson = () => jsonString(valuesMap);
+  const getJson = () => jsonString([tablesMap, valuesMap]);
+  const getTablesSchemaJson = () => jsonString(tablesSchemaMap);
+  const getValuesSchemaJson = () => jsonString(valuesSchemaMap);
+  const getSchemaJson = () => jsonString([tablesSchemaMap, valuesSchemaMap]);
+  const setContent = ([tables, values]) =>
+    fluentTransaction(() => {
+      (objIsEmpty(tables) ? delTables : setTables)(tables);
+      (objIsEmpty(values) ? delValues : setValues)(values);
+    });
+  const setTables = (tables) =>
+    fluentTransaction(() =>
+      validateTables(tables) ? setValidTables(tables) : 0,
+    );
+  const setTable = (tableId, table) =>
+    fluentTransaction(
+      (tableId2) =>
+        validateTable(table, tableId2) ? setValidTable(tableId2, table) : 0,
+      tableId,
+    );
+  const setRow = (tableId, rowId, row) =>
+    fluentTransaction(
+      (tableId2, rowId2) =>
+        validateRow(tableId2, rowId2, row)
+          ? setValidRow(tableId2, getOrCreateTable(tableId2), rowId2, row)
+          : 0,
+      tableId,
+      rowId,
+    );
+  const addRow = (tableId, row, reuseRowIds = true) =>
+    transaction(() => {
+      let rowId = void 0;
+      if (validateRow(tableId, rowId, row)) {
+        tableId = id(tableId);
+        setValidRow(
+          tableId,
+          getOrCreateTable(tableId),
+          (rowId = getNewRowId(tableId, reuseRowIds ? 1 : 0)),
+          row,
+        );
+      }
+      return rowId;
+    });
+  const setPartialRow = (tableId, rowId, partialRow) =>
+    fluentTransaction(
+      (tableId2, rowId2) => {
+        if (validateRow(tableId2, rowId2, partialRow, 1)) {
+          const table = getOrCreateTable(tableId2);
+          objMap(partialRow, (cell, cellId) =>
+            setCellIntoDefaultRow(tableId2, table, rowId2, cellId, cell),
+          );
+        }
+      },
+      tableId,
+      rowId,
+    );
+  const setCell = (tableId, rowId, cellId, cell) =>
+    fluentTransaction(
+      (tableId2, rowId2, cellId2) =>
+        ifNotUndefined(
+          getValidatedCell(
+            tableId2,
+            rowId2,
+            cellId2,
+            isFunction(cell) ? cell(getCell(tableId2, rowId2, cellId2)) : cell,
+          ),
+          (validCell) =>
+            setCellIntoDefaultRow(
+              tableId2,
+              getOrCreateTable(tableId2),
+              rowId2,
+              cellId2,
+              validCell,
+            ),
+        ),
+      tableId,
+      rowId,
+      cellId,
+    );
+  const setValues = (values) =>
+    fluentTransaction(() =>
+      validateValues(values) ? setValidValues(values) : 0,
+    );
+  const setPartialValues = (partialValues) =>
+    fluentTransaction(() =>
+      validateValues(partialValues, 1)
+        ? objMap(partialValues, (value, valueId) =>
+            setValidValue(valueId, value),
+          )
+        : 0,
+    );
+  const setValue = (valueId, value) =>
+    fluentTransaction(
+      (valueId2) =>
+        ifNotUndefined(
+          getValidatedValue(
+            valueId2,
+            isFunction(value) ? value(getValue(valueId2)) : value,
+          ),
+          (validValue) => setValidValue(valueId2, validValue),
+        ),
+      valueId,
+    );
+  const setTransactionChanges = (transactionChanges) =>
+    fluentTransaction(() => {
+      objMap(transactionChanges[0], (table, tableId) =>
+        isUndefined(table)
+          ? delTable(tableId)
+          : objMap(table, (row, rowId) =>
+              isUndefined(row)
+                ? delRow(tableId, rowId)
+                : objMap(row, (cell, cellId) =>
+                    setOrDelCell(store, tableId, rowId, cellId, cell),
+                  ),
+            ),
+      );
+      objMap(transactionChanges[1], (value, valueId) =>
+        setOrDelValue(store, valueId, value),
+      );
+    });
+  const setTablesJson = (tablesJson) => {
+    try {
+      setOrDelTables(jsonParse(tablesJson));
+    } catch {}
+    return store;
+  };
+  const setValuesJson = (valuesJson) => {
+    try {
+      setOrDelValues(jsonParse(valuesJson));
+    } catch {}
+    return store;
+  };
+  const setJson = (tablesAndValuesJson) => {
+    try {
+      const [tables, values] = jsonParse(tablesAndValuesJson);
+      setOrDelTables(tables);
+      setOrDelValues(values);
+    } catch {
+      setTablesJson(tablesAndValuesJson);
+    }
+    return store;
+  };
+  const setTablesSchema = (tablesSchema) =>
+    fluentTransaction(() => {
+      if ((hasTablesSchema = validateTablesSchema(tablesSchema))) {
+        setValidTablesSchema(tablesSchema);
+        if (!collIsEmpty(tablesMap)) {
+          const tables = getTables();
+          delTables();
+          setTables(tables);
+        }
+      }
+    });
+  const setValuesSchema = (valuesSchema) =>
+    fluentTransaction(() => {
+      if ((hasValuesSchema = validateValuesSchema(valuesSchema))) {
+        const values = getValues();
+        delValuesSchema();
+        delValues();
+        hasValuesSchema = true;
+        setValidValuesSchema(valuesSchema);
+        setValues(values);
+      }
+    });
+  const setSchema = (tablesSchema, valuesSchema) =>
+    fluentTransaction(() => {
+      setTablesSchema(tablesSchema);
+      setValuesSchema(valuesSchema);
+    });
+  const delTables = () => fluentTransaction(() => setValidTables({}));
+  const delTable = (tableId) =>
+    fluentTransaction(
+      (tableId2) =>
+        collHas(tablesMap, tableId2) ? delValidTable(tableId2) : 0,
+      tableId,
+    );
+  const delRow = (tableId, rowId) =>
+    fluentTransaction(
+      (tableId2, rowId2) =>
+        ifNotUndefined(mapGet(tablesMap, tableId2), (tableMap) =>
+          collHas(tableMap, rowId2)
+            ? delValidRow(tableId2, tableMap, rowId2)
+            : 0,
+        ),
+      tableId,
+      rowId,
+    );
+  const delCell = (tableId, rowId, cellId, forceDel) =>
+    fluentTransaction(
+      (tableId2, rowId2, cellId2) =>
+        ifNotUndefined(mapGet(tablesMap, tableId2), (tableMap) =>
+          ifNotUndefined(mapGet(tableMap, rowId2), (rowMap) =>
+            collHas(rowMap, cellId2)
+              ? delValidCell(
+                  tableId2,
+                  tableMap,
+                  rowId2,
+                  rowMap,
+                  cellId2,
+                  forceDel,
+                )
+              : 0,
+          ),
+        ),
+      tableId,
+      rowId,
+      cellId,
+    );
+  const delValues = () => fluentTransaction(() => setValidValues({}));
+  const delValue = (valueId) =>
+    fluentTransaction(
+      (valueId2) =>
+        collHas(valuesMap, valueId2) ? delValidValue(valueId2) : 0,
+      valueId,
+    );
+  const delTablesSchema = () =>
+    fluentTransaction(() => {
+      setValidTablesSchema({});
+      hasTablesSchema = false;
+    });
+  const delValuesSchema = () =>
+    fluentTransaction(() => {
+      setValidValuesSchema({});
+      hasValuesSchema = false;
+    });
+  const delSchema = () =>
+    fluentTransaction(() => {
+      delTablesSchema();
+      delValuesSchema();
+    });
+  const transaction = (actions, doRollback) => {
+    if (transactions != -1) {
+      startTransaction();
+      const result = actions();
+      finishTransaction(doRollback);
+      return result;
+    }
+  };
+  const startTransaction = () => {
+    if (transactions != -1) {
+      transactions++;
+    }
+    if (transactions == 1) {
+      callListeners(
+        startTransactionListeners,
+        void 0,
+        getTransactionChanges,
+        getTransactionLog,
+      );
+    }
+    return store;
+  };
+  const finishTransaction = (doRollback) => {
+    if (transactions > 0) {
+      transactions--;
+      if (transactions == 0) {
+        cellsTouched = !collIsEmpty(changedCells);
+        valuesTouched = !collIsEmpty(changedValues);
+        transactions = 1;
+        callInvalidCellListeners(1);
+        if (cellsTouched) {
+          callTabularListenersForChanges(1);
+        }
+        callInvalidValueListeners(1);
+        if (valuesTouched) {
+          callKeyedValuesListenersForChanges(1);
+        }
+        if (doRollback?.(getTransactionChanges, getTransactionLog)) {
+          collForEach(changedCells, (table, tableId) =>
+            collForEach(table, (row, rowId) =>
+              collForEach(row, ([oldCell], cellId) =>
+                setOrDelCell(store, tableId, rowId, cellId, oldCell),
+              ),
+            ),
+          );
+          collForEach(changedValues, ([oldValue], valueId) =>
+            setOrDelValue(store, valueId, oldValue),
+          );
+          cellsTouched = valuesTouched = false;
+        }
+        callListeners(
+          finishTransactionListeners[0],
+          void 0,
+          getTransactionChanges,
+          getTransactionLog,
+        );
+        transactions = -1;
+        callInvalidCellListeners(0);
+        if (cellsTouched) {
+          callTabularListenersForChanges(0);
+        }
+        callInvalidValueListeners(0);
+        if (valuesTouched) {
+          callKeyedValuesListenersForChanges(0);
+        }
+        callListeners(
+          finishTransactionListeners[1],
+          void 0,
+          getTransactionChanges,
+          getTransactionLog,
+        );
+        transactions = 0;
+        cellsTouched = valuesTouched = false;
+        arrayForEach(
+          [
+            changedTableIds,
+            changedTableCellIds,
+            changedRowCount,
+            changedRowIds,
+            changedCellIds,
+            changedCells,
+            invalidCells,
+            changedValueIds,
+            changedValues,
+            invalidValues,
+          ],
+          collClear,
+        );
+      }
+    }
+    return store;
+  };
+  const forEachTable = (tableCallback) =>
+    collForEach(tablesMap, (tableMap, tableId) =>
+      tableCallback(tableId, (rowCallback) =>
+        collForEach(tableMap, (rowMap, rowId) =>
+          rowCallback(rowId, (cellCallback) =>
+            mapForEach(rowMap, cellCallback),
+          ),
+        ),
+      ),
+    );
+  const forEachTableCell = (tableId, tableCellCallback) =>
+    mapForEach(mapGet(tableCellIds, id(tableId)), tableCellCallback);
+  const forEachRow = (tableId, rowCallback) =>
+    collForEach(mapGet(tablesMap, id(tableId)), (rowMap, rowId) =>
+      rowCallback(rowId, (cellCallback) => mapForEach(rowMap, cellCallback)),
+    );
+  const forEachCell = (tableId, rowId, cellCallback) =>
+    mapForEach(mapGet(mapGet(tablesMap, id(tableId)), id(rowId)), cellCallback);
+  const forEachValue = (valueCallback) => mapForEach(valuesMap, valueCallback);
+  const addSortedRowIdsListener = (
+    tableId,
+    cellId,
+    descending,
+    offset,
+    limit,
+    listener,
+    mutator,
+  ) => {
+    let sortedRowIds = getSortedRowIds(
+      tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+    );
+    return addListener(
+      () => {
+        const newSortedRowIds = getSortedRowIds(
+          tableId,
+          cellId,
+          descending,
+          offset,
+          limit,
+        );
+        if (!arrayIsEqual(newSortedRowIds, sortedRowIds)) {
+          sortedRowIds = newSortedRowIds;
+          listener(
+            store,
+            tableId,
+            cellId,
+            descending,
+            offset,
+            limit,
+            sortedRowIds,
+          );
+        }
+      },
+      sortedRowIdsListeners[mutator ? 1 : 0],
+      [tableId, cellId],
+      [getTableIds],
+    );
+  };
+  const addStartTransactionListener = (listener) =>
+    addListener(listener, startTransactionListeners);
+  const addWillFinishTransactionListener = (listener) =>
+    addListener(listener, finishTransactionListeners[0]);
+  const addDidFinishTransactionListener = (listener) =>
+    addListener(listener, finishTransactionListeners[1]);
+  const callListener = (listenerId) => {
+    callListenerImpl(listenerId);
+    return store;
+  };
+  const delListener = (listenerId) => {
+    delListenerImpl(listenerId);
+    return store;
+  };
+  const getListenerStats = () => ({
+    tables: pairCollSize2(tablesListeners),
+    tableIds: pairCollSize2(tableIdsListeners),
+    tableCellIds: pairCollSize2(tableCellIdsListeners),
+    table: pairCollSize2(tableListeners),
+    rowCount: pairCollSize2(rowCountListeners),
+    rowIds: pairCollSize2(rowIdsListeners),
+    sortedRowIds: pairCollSize2(sortedRowIdsListeners),
+    row: pairCollSize2(rowListeners, collSize3),
+    cellIds: pairCollSize2(cellIdsListeners, collSize3),
+    cell: pairCollSize2(cellListeners, collSize4),
+    invalidCell: pairCollSize2(invalidCellListeners, collSize4),
+    values: pairCollSize2(valuesListeners),
+    valueIds: pairCollSize2(valueIdsListeners),
+    value: pairCollSize2(valueListeners),
+    invalidValue: pairCollSize2(invalidValueListeners),
+    transaction:
+      collSize2(startTransactionListeners) +
+      pairCollSize2(finishTransactionListeners),
+  });
+  const store = {
+    getContent,
+    getTables,
+    getTableIds,
+    getTable,
+    getTableCellIds,
+    getRowCount,
+    getRowIds,
+    getSortedRowIds,
+    getRow,
+    getCellIds,
+    getCell,
+    getValues,
+    getValueIds,
+    getValue,
+    hasTables,
+    hasTable,
+    hasTableCell,
+    hasRow,
+    hasCell,
+    hasValues,
+    hasValue,
+    getTablesJson,
+    getValuesJson,
+    getJson,
+    getTablesSchemaJson,
+    getValuesSchemaJson,
+    getSchemaJson,
+    setContent,
+    setTables,
+    setTable,
+    setRow,
+    addRow,
+    setPartialRow,
+    setCell,
+    setValues,
+    setPartialValues,
+    setValue,
+    setTransactionChanges,
+    setTablesJson,
+    setValuesJson,
+    setJson,
+    setTablesSchema,
+    setValuesSchema,
+    setSchema,
+    delTables,
+    delTable,
+    delRow,
+    delCell,
+    delValues,
+    delValue,
+    delTablesSchema,
+    delValuesSchema,
+    delSchema,
+    transaction,
+    startTransaction,
+    finishTransaction,
+    forEachTable,
+    forEachTableCell,
+    forEachRow,
+    forEachCell,
+    forEachValue,
+    addSortedRowIdsListener,
+    addStartTransactionListener,
+    addWillFinishTransactionListener,
+    addDidFinishTransactionListener,
+    callListener,
+    delListener,
+    getListenerStats,
+    createStore,
+  };
+  objMap(
+    {
+      [TABLES]: [0, tablesListeners],
+      [TABLE_IDS]: [0, tableIdsListeners],
+      [TABLE]: [1, tableListeners, [getTableIds]],
+      [TABLE + CELL_IDS]: [1, tableCellIdsListeners, [getTableIds]],
+      [ROW_COUNT]: [1, rowCountListeners, [getTableIds]],
+      [ROW_IDS]: [1, rowIdsListeners, [getTableIds]],
+      [ROW]: [2, rowListeners, [getTableIds, getRowIds]],
+      [CELL_IDS]: [2, cellIdsListeners, [getTableIds, getRowIds]],
+      [CELL]: [
+        3,
+        cellListeners,
+        [getTableIds, getRowIds, getCellIds],
+        (ids) => pairNew(getCell(...ids)),
+      ],
+      InvalidCell: [3, invalidCellListeners],
+      [VALUES]: [0, valuesListeners],
+      [VALUE_IDS]: [0, valueIdsListeners],
+      [VALUE]: [
+        1,
+        valueListeners,
+        [getValueIds],
+        (ids) => pairNew(getValue(ids[0])),
+      ],
+      InvalidValue: [1, invalidValueListeners],
+    },
+    ([argumentCount, idSetNode, pathGetters, extraArgsGetter], listenable) => {
+      store[ADD + listenable + LISTENER] = (...args) =>
+        addListener(
+          args[argumentCount],
+          idSetNode[args[argumentCount + 1] ? 1 : 0],
+          argumentCount > 0 ? arraySlice(args, 0, argumentCount) : void 0,
+          pathGetters,
+          extraArgsGetter,
+        );
+    },
+  );
+  return objFreeze(store);
+};
+
+const App = ({position = 'right', open = false}) => {
+  const s = useCreateStore(createStore);
+  const index = POSITIONS.indexOf(position);
+  useCreatePersister(
+    s,
+    (s2) => createSessionPersister(s2, UNIQUE_ID),
+    void 0,
+    async (persister) => {
+      await persister.load(void 0, {
+        position: index == -1 ? 1 : index,
+        open: !!open,
+      });
+      await persister.startAutoSave();
+    },
+  );
+  return /* @__PURE__ */ createElement(
+    React.Fragment,
+    null,
+    /* @__PURE__ */ createElement(
+      'aside',
+      {id: UNIQUE_ID},
+      /* @__PURE__ */ createElement(Nub, {s}),
+      /* @__PURE__ */ createElement(Panel, {s}),
+    ),
+    /* @__PURE__ */ createElement('style', null, APP_STYLESHEET),
+  );
+};
+
+const StoreInspector = (props) =>
+  /* @__PURE__ */ createElement(App, {...props});
 
 export {
   EditableCellView,
@@ -420,6 +2482,8 @@ export {
   ResultSortedTableInHtmlTable,
   ResultTableInHtmlTable,
   SortedTableInHtmlTable,
+  SortedTablePaginator,
+  StoreInspector,
   TableInHtmlTable,
   ValuesInHtmlTable,
 };