tinybase 6.0.0-beta.0 → 6.0.0-beta.2

package/ui-react-inspector/with-schemas/index.js

@@ -1,3 +1,4 @@
+import {jsx, jsxs, Fragment} from 'react/jsx-runtime';
 import React from 'react';
 import {
   useCell,
@@ -93,34 +94,6 @@ const errorNew = (message) => {
   throw new Error(message);
 };
 
-const {
-  PureComponent,
-  Fragment,
-  createContext,
-  createElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} = React;
-const getProps = (getProps2, ...ids) =>
-  isUndefined(getProps2) ? {} : getProps2(...ids);
-const getRelationshipsStoreTableIds = (relationships, relationshipId) => [
-  relationships,
-  relationships?.getStore(),
-  relationships?.getLocalTableId(relationshipId),
-  relationships?.getRemoteTableId(relationshipId),
-];
-const getIndexStoreTableId = (indexes, indexId) => [
-  indexes,
-  indexes?.getStore(),
-  indexes?.getTableId(indexId),
-];
-
 const arrayHas = (array, value) => array.includes(value);
 const arrayEvery = (array, cb) => array.every(cb);
 const arrayIsEqual = (array1, array2) =>
@@ -196,6 +169,32 @@ const jsonStringWithUndefined = (obj) =>
 const jsonParseWithUndefined = (str) =>
   jsonParse(str, (_key, value) => (value === UNDEFINED ? void 0 : value));
 
+const {
+  PureComponent,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} = React;
+const getProps = (getProps2, ...ids) =>
+  isUndefined(getProps2) ? {} : getProps2(...ids);
+const getRelationshipsStoreTableIds = (relationships, relationshipId) => [
+  relationships,
+  relationships?.getStore(),
+  relationships?.getLocalTableId(relationshipId),
+  relationships?.getRemoteTableId(relationshipId),
+];
+const getIndexStoreTableId = (indexes, indexId) => [
+  indexes,
+  indexes?.getStore(),
+  indexes?.getTableId(indexId),
+];
+
 const UNIQUE_ID = 'tinybaseInspector';
 const TITLE = 'TinyBase Inspector';
 const POSITIONS = ['left', 'top', 'bottom', 'right', 'full'];
@@ -332,7 +331,7 @@ const Nub = ({s}) => {
   const handleOpen = useSetValueCallback(OPEN_VALUE, () => true, [], s);
   return useValue(OPEN_VALUE, s)
     ? null
-    : /* @__PURE__ */ createElement('img', {
+    : /* @__PURE__ */ jsx('img', {
         onClick: handleOpen,
         title: TITLE,
         'data-position': position,
@@ -356,22 +355,24 @@ const Details = ({
     [],
     s,
   );
-  return /* @__PURE__ */ createElement(
-    'details',
-    {open, onToggle: handleToggle},
-    /* @__PURE__ */ createElement(
-      'summary',
-      null,
-      summary,
-      handleEditable
-        ? /* @__PURE__ */ createElement('img', {
-            onClick: handleEditable,
-            className: editable ? 'done' : 'edit',
-          })
-        : null,
-    ),
-    children,
-  );
+  return /* @__PURE__ */ jsxs('details', {
+    open,
+    onToggle: handleToggle,
+    children: [
+      /* @__PURE__ */ jsxs('summary', {
+        children: [
+          summary,
+          handleEditable
+            ? /* @__PURE__ */ jsx('img', {
+                onClick: handleEditable,
+                className: editable ? 'done' : 'edit',
+              })
+            : null,
+        ],
+      }),
+      children,
+    ],
+  });
 };
 
 const getCellOrValueType = (cellOrValue) => {
@@ -454,7 +455,7 @@ const useSortingAndPagination = (
       () =>
         paginator === false
           ? null
-          : /* @__PURE__ */ createElement(PaginatorComponent, {
+          : /* @__PURE__ */ jsx(PaginatorComponent, {
               offset: currentOffset,
               limit,
               total,
@@ -499,90 +500,95 @@ const HtmlTable = ({
     paginatorComponent,
   ],
 }) =>
-  /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    paginatorComponent
-      ? /* @__PURE__ */ createElement('caption', null, paginatorComponent)
-      : null,
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      paginatorComponent
+        ? /* @__PURE__ */ jsx('caption', {children: paginatorComponent})
+        : null,
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx(HtmlHeaderCell, {
+                      sort: sortAndOffset ?? [],
+                      label: 'Id',
+                      onClick: handleSort,
+                    }),
+                objToArray(cells, ({label}, cellId) =>
+                  /* @__PURE__ */ jsx(
+                    HtmlHeaderCell,
+                    {
+                      cellId,
+                      label,
+                      sort: sortAndOffset ?? [],
+                      onClick: handleSort,
+                    },
+                    cellId,
+                  ),
+                ),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(rowIds, (rowId) =>
+          /* @__PURE__ */ jsxs(
             'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement(HtmlHeaderCell, {
-                  sort: sortAndOffset ?? [],
-                  label: 'Id',
-                  onClick: handleSort,
-                }),
-            objToArray(cells, ({label}, cellId) =>
-              /* @__PURE__ */ createElement(HtmlHeaderCell, {
-                key: cellId,
-                cellId,
-                label,
-                sort: sortAndOffset ?? [],
-                onClick: handleSort,
-              }),
-            ),
-          ),
-        ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(rowIds, (rowId) =>
-        /* @__PURE__ */ createElement(
-          'tr',
-          {key: rowId},
-          idColumn === false
-            ? null
-            : /* @__PURE__ */ createElement('th', null, rowId),
-          objToArray(
-            cells,
-            ({component: CellView2, getComponentProps}, cellId) =>
-              /* @__PURE__ */ createElement(
-                'td',
-                {key: cellId},
-                /* @__PURE__ */ createElement(CellView2, {
-                  ...getProps(getComponentProps, rowId, cellId),
-                  ...cellComponentProps,
-                  rowId,
-                  cellId,
-                }),
-              ),
+            {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: rowId}),
+                objToArray(
+                  cells,
+                  ({component: CellView2, getComponentProps}, cellId) =>
+                    /* @__PURE__ */ jsx(
+                      'td',
+                      {
+                        children: /* @__PURE__ */ jsx(CellView2, {
+                          ...getProps(getComponentProps, rowId, cellId),
+                          ...cellComponentProps,
+                          rowId,
+                          cellId,
+                        }),
+                      },
+                      cellId,
+                    ),
+                ),
+              ],
+            },
+            rowId,
           ),
         ),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 const HtmlHeaderCell = ({
   cellId,
   sort: [sortCellId, sortDescending],
   label = cellId ?? EMPTY_STRING,
   onClick,
 }) =>
-  /* @__PURE__ */ createElement(
-    'th',
-    {
-      onClick: useCallbackOrUndefined(
-        () => onClick?.(cellId),
-        [onClick, cellId],
-        onClick,
-      ),
-      className:
-        isUndefined(sortDescending) || sortCellId != cellId
-          ? void 0
-          : `sorted ${sortDescending ? 'de' : 'a'}scending`,
-    },
-    isUndefined(sortDescending) || sortCellId != cellId
-      ? null
-      : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
-    label,
-  );
+  /* @__PURE__ */ jsxs('th', {
+    onClick: useCallbackOrUndefined(
+      () => onClick?.(cellId),
+      [onClick, cellId],
+      onClick,
+    ),
+    className:
+      isUndefined(sortDescending) || sortCellId != cellId
+        ? void 0
+        : `sorted ${sortDescending ? 'de' : 'a'}scending`,
+    children: [
+      isUndefined(sortDescending) || sortCellId != cellId
+        ? null
+        : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
+      label,
+    ],
+  });
 const RelationshipInHtmlRow = ({
   localRowId,
   params: [
@@ -596,43 +602,45 @@ const RelationshipInHtmlRow = ({
   ],
 }) => {
   const remoteRowId = useRemoteRowId(relationshipId, localRowId, relationships);
-  return /* @__PURE__ */ createElement(
-    'tr',
-    null,
-    idColumn === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          Fragment,
-          null,
-          /* @__PURE__ */ createElement('th', null, localRowId),
-          /* @__PURE__ */ createElement('th', null, remoteRowId),
-        ),
-    objToArray(
-      cells,
-      ({component: CellView2, getComponentProps}, compoundCellId) => {
-        const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
-        const rowId =
-          tableId === localTableId
-            ? localRowId
-            : tableId === remoteTableId
-              ? remoteRowId
-              : null;
-        return isUndefined(rowId)
-          ? null
-          : /* @__PURE__ */ createElement(
-              'td',
-              {key: compoundCellId},
-              /* @__PURE__ */ createElement(CellView2, {
-                ...getProps(getComponentProps, rowId, cellId),
-                store,
-                tableId,
-                rowId,
-                cellId,
-              }),
-            );
-      },
-    ),
-  );
+  return /* @__PURE__ */ jsxs('tr', {
+    children: [
+      idColumn === false
+        ? null
+        : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx('th', {children: localRowId}),
+              /* @__PURE__ */ jsx('th', {children: remoteRowId}),
+            ],
+          }),
+      objToArray(
+        cells,
+        ({component: CellView2, getComponentProps}, compoundCellId) => {
+          const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
+          const rowId =
+            tableId === localTableId
+              ? localRowId
+              : tableId === remoteTableId
+                ? remoteRowId
+                : null;
+          return isUndefined(rowId)
+            ? null
+            : /* @__PURE__ */ jsx(
+                'td',
+                {
+                  children: /* @__PURE__ */ jsx(CellView2, {
+                    ...getProps(getComponentProps, rowId, cellId),
+                    store,
+                    tableId,
+                    rowId,
+                    cellId,
+                  }),
+                },
+                compoundCellId,
+              );
+        },
+      ),
+    ],
+  });
 };
 const EditableThing = ({
   thing,
@@ -682,58 +690,68 @@ const EditableThing = ({
     booleanThing,
     thingType,
   ]);
-  return /* @__PURE__ */ createElement(
-    'div',
-    {className},
-    showType
-      ? /* @__PURE__ */ createElement(
-          'button',
-          {className: thingType, onClick: handleTypeChange},
-          thingType,
-        )
-      : null,
-    getTypeCase(
-      thingType,
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        value: stringThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              String(event[CURRENT_TARGET][_VALUE]),
-              setStringThing,
+  return /* @__PURE__ */ jsxs('div', {
+    className,
+    children: [
+      showType
+        ? /* @__PURE__ */ jsx('button', {
+            className: thingType,
+            onClick: handleTypeChange,
+            children: thingType,
+          })
+        : null,
+      getTypeCase(
+        thingType,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            value: stringThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  String(event[CURRENT_TARGET][_VALUE]),
+                  setStringThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        type: 'number',
-        value: numberThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              Number(event[CURRENT_TARGET][_VALUE] || 0),
-              setNumberThing,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            type: 'number',
+            value: numberThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  Number(event[CURRENT_TARGET][_VALUE] || 0),
+                  setNumberThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-      /* @__PURE__ */ createElement('input', {
-        key: thingType,
-        type: 'checkbox',
-        checked: booleanThing,
-        onChange: useCallback(
-          (event) =>
-            handleThingChange(
-              Boolean(event[CURRENT_TARGET].checked),
-              setBooleanThing,
+        /* @__PURE__ */ jsx(
+          'input',
+          {
+            type: 'checkbox',
+            checked: booleanThing,
+            onChange: useCallback(
+              (event) =>
+                handleThingChange(
+                  Boolean(event[CURRENT_TARGET].checked),
+                  setBooleanThing,
+                ),
+              [handleThingChange],
             ),
-          [handleThingChange],
+          },
+          thingType,
         ),
-      }),
-    ),
-  );
+      ),
+    ],
+  });
 };
 const SortedTableInHtmlTable = ({
   tableId,
@@ -760,7 +778,7 @@ const SortedTableInHtmlTable = ({
       paginator,
       onChange,
     );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -785,46 +803,45 @@ const ValuesInHtmlTable = ({
   headerRow,
   idColumn,
 }) =>
-  /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
-            'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement('th', null, 'Id'),
-            /* @__PURE__ */ createElement('th', null, VALUE),
-          ),
-        ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(useValueIds(store), (valueId) =>
-        /* @__PURE__ */ createElement(
-          'tr',
-          {key: valueId},
-          idColumn === false
-            ? null
-            : /* @__PURE__ */ createElement('th', null, valueId),
-          /* @__PURE__ */ createElement(
-            'td',
-            null,
-            /* @__PURE__ */ createElement(Value, {
-              ...getProps(getValueComponentProps, valueId),
-              valueId,
-              store,
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: 'Id'}),
+                /* @__PURE__ */ jsx('th', {children: VALUE}),
+              ],
             }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useValueIds(store), (valueId) =>
+          /* @__PURE__ */ jsxs(
+            'tr',
+            {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: valueId}),
+                /* @__PURE__ */ jsx('td', {
+                  children: /* @__PURE__ */ jsx(Value, {
+                    ...getProps(getValueComponentProps, valueId),
+                    valueId,
+                    store,
+                  }),
+                }),
+              ],
+            },
+            valueId,
           ),
         ),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 const SliceInHtmlTable = ({
   indexId,
   sliceId,
@@ -837,7 +854,7 @@ const SliceInHtmlTable = ({
     useIndexesOrIndexesById(indexes),
     indexId,
   );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -881,52 +898,46 @@ const RelationshipInHtmlTable = ({
     resolvedRelationships,
     store,
   );
-  return /* @__PURE__ */ createElement(
-    'table',
-    {className},
-    headerRow === false
-      ? null
-      : /* @__PURE__ */ createElement(
-          'thead',
-          null,
-          /* @__PURE__ */ createElement(
-            'tr',
-            null,
-            idColumn === false
-              ? null
-              : /* @__PURE__ */ createElement(
-                  Fragment,
-                  null,
-                  /* @__PURE__ */ createElement(
-                    'th',
-                    null,
-                    localTableId,
-                    '.Id',
-                  ),
-                  /* @__PURE__ */ createElement(
-                    'th',
-                    null,
-                    remoteTableId,
-                    '.Id',
-                  ),
+  return /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsxs(Fragment, {
+                      children: [
+                        /* @__PURE__ */ jsxs('th', {
+                          children: [localTableId, '.Id'],
+                        }),
+                        /* @__PURE__ */ jsxs('th', {
+                          children: [remoteTableId, '.Id'],
+                        }),
+                      ],
+                    }),
+                objToArray(cells, ({label}, cellId) =>
+                  /* @__PURE__ */ jsx('th', {children: label}, cellId),
                 ),
-            objToArray(cells, ({label}, cellId) =>
-              /* @__PURE__ */ createElement('th', {key: cellId}, label),
-            ),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useRowIds(localTableId, store), (localRowId) =>
+          /* @__PURE__ */ jsx(
+            RelationshipInHtmlRow,
+            {
+              localRowId,
+              params,
+            },
+            localRowId,
           ),
         ),
-    /* @__PURE__ */ createElement(
-      'tbody',
-      null,
-      arrayMap(useRowIds(localTableId, store), (localRowId) =>
-        /* @__PURE__ */ createElement(RelationshipInHtmlRow, {
-          key: localRowId,
-          localRowId,
-          params,
-        }),
-      ),
-    ),
-  );
+      }),
+    ],
+  });
 };
 const ResultSortedTableInHtmlTable = ({
   queryId,
@@ -952,7 +963,7 @@ const ResultSortedTableInHtmlTable = ({
       paginator,
       onChange,
     );
-  return /* @__PURE__ */ createElement(HtmlTable, {
+  return /* @__PURE__ */ jsx(HtmlTable, {
     ...props,
     params: useParams(
       useCells(
@@ -976,7 +987,7 @@ const EditableCellView = ({
   className,
   showType,
 }) =>
-  /* @__PURE__ */ createElement(EditableThing, {
+  /* @__PURE__ */ jsx(EditableThing, {
     thing: useCell(tableId, rowId, cellId, store),
     onThingChange: useSetCellCallback(
       tableId,
@@ -991,7 +1002,7 @@ const EditableCellView = ({
     hasSchema: useStoreOrStoreById(store)?.hasTablesSchema,
   });
 const EditableValueView = ({valueId, store, className, showType}) =>
-  /* @__PURE__ */ createElement(EditableThing, {
+  /* @__PURE__ */ jsx(EditableThing, {
     thing: useValue(valueId, store),
     onThingChange: useSetValueCallback(valueId, (value) => value, [], store),
     className: className ?? EDITABLE + VALUE,
@@ -1020,152 +1031,138 @@ const SortedTablePaginator = ({
     [onChange, offset, limit],
     offset + limit < total,
   );
-  return /* @__PURE__ */ createElement(
-    Fragment,
-    null,
-    total > limit &&
-      /* @__PURE__ */ createElement(
-        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 ',
-        mathMin(total, offset + limit),
-        ' of ',
-      ),
-    total,
-    ' ',
-    total != 1 ? plural : singular,
-  );
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      total > limit &&
+        /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx('button', {
+              className: 'previous',
+              disabled: offset == 0,
+              onClick: handlePrevClick,
+              children: LEFT_ARROW,
+            }),
+            /* @__PURE__ */ jsx('button', {
+              className: 'next',
+              disabled: offset + limit >= total,
+              onClick: handleNextClick,
+              children: RIGHT_ARROW,
+            }),
+            offset + 1,
+            ' to ',
+            mathMin(total, offset + limit),
+            ' of ',
+          ],
+        }),
+      total,
+      ' ',
+      total != 1 ? plural : singular,
+    ],
+  });
 };
 
 const IndexView = ({indexes, indexesId, indexId, s}) =>
-  /* @__PURE__ */ createElement(
-    Details,
-    {
-      uniqueId: getUniqueId('i', indexesId, indexId),
-      summary: 'Index: ' + indexId,
-      s,
-    },
-    arrayMap(useSliceIds(indexId, indexes), (sliceId) =>
-      /* @__PURE__ */ createElement(SliceView, {
-        indexes,
-        indexesId,
-        indexId,
+  /* @__PURE__ */ jsx(Details, {
+    uniqueId: getUniqueId('i', indexesId, indexId),
+    summary: 'Index: ' + indexId,
+    s,
+    children: arrayMap(useSliceIds(indexId, indexes), (sliceId) =>
+      /* @__PURE__ */ jsx(
+        SliceView,
+        {
+          indexes,
+          indexesId,
+          indexId,
+          sliceId,
+          s,
+        },
         sliceId,
-        s,
-        key: sliceId,
-      }),
+      ),
     ),
-  );
+  });
 const SliceView = ({indexes, indexesId, indexId, sliceId, s}) => {
   const uniqueId = getUniqueId('i', indexesId, indexId, sliceId);
   const [editable, handleEditable] = useEditable(uniqueId, s);
-  return /* @__PURE__ */ createElement(
-    Details,
-    {
-      uniqueId,
-      summary: 'Slice: ' + sliceId,
-      editable,
-      handleEditable,
-      s,
-    },
-    /* @__PURE__ */ createElement(SliceInHtmlTable, {
+  return /* @__PURE__ */ jsx(Details, {
+    uniqueId,
+    summary: 'Slice: ' + sliceId,
+    editable,
+    handleEditable,
+    s,
+    children: /* @__PURE__ */ jsx(SliceInHtmlTable, {
       sliceId,
       indexId,
       indexes,
       editable,
     }),
-  );
+  });
 };
 const IndexesView = ({indexesId, s}) => {
   const indexes = useIndexes(indexesId);
   const indexIds = useIndexIds(indexes);
   return isUndefined(indexes)
     ? null
-    : /* @__PURE__ */ createElement(
-        Details,
-        {
-          uniqueId: getUniqueId('i', indexesId),
-          summary: 'Indexes: ' + (indexesId ?? DEFAULT),
-          s,
-        },
-        arrayIsEmpty(indexIds)
+    : /* @__PURE__ */ jsx(Details, {
+        uniqueId: getUniqueId('i', indexesId),
+        summary: 'Indexes: ' + (indexesId ?? DEFAULT),
+        s,
+        children: arrayIsEmpty(indexIds)
           ? 'No indexes defined'
           : sortedIdsMap(indexIds, (indexId) =>
-              /* @__PURE__ */ createElement(IndexView, {
-                indexes,
-                indexesId,
+              /* @__PURE__ */ jsx(
+                IndexView,
+                {
+                  indexes,
+                  indexesId,
+                  indexId,
+                  s,
+                },
                 indexId,
-                s,
-                key: indexId,
-              }),
+              ),
             ),
-      );
+      });
 };
 
 const MetricRow = ({metrics, metricId}) =>
-  /* @__PURE__ */ createElement(
-    'tr',
-    null,
-    /* @__PURE__ */ createElement('th', null, metricId),
-    /* @__PURE__ */ createElement('td', null, metrics?.getTableId(metricId)),
-    /* @__PURE__ */ createElement('td', null, useMetric(metricId, metrics)),
-  );
+  /* @__PURE__ */ jsxs('tr', {
+    children: [
+      /* @__PURE__ */ jsx('th', {children: metricId}),
+      /* @__PURE__ */ jsx('td', {children: metrics?.getTableId(metricId)}),
+      /* @__PURE__ */ jsx('td', {children: useMetric(metricId, metrics)}),
+    ],
+  });
 const MetricsView = ({metricsId, s}) => {
   const metrics = useMetrics(metricsId);
   const metricIds = useMetricIds(metrics);
   return isUndefined(metrics)
     ? null
-    : /* @__PURE__ */ createElement(
-        Details,
-        {
-          uniqueId: getUniqueId('m', metricsId),
-          summary: 'Metrics: ' + (metricsId ?? DEFAULT),
-          s,
-        },
-        arrayIsEmpty(metricIds)
+    : /* @__PURE__ */ jsx(Details, {
+        uniqueId: getUniqueId('m', metricsId),
+        summary: 'Metrics: ' + (metricsId ?? DEFAULT),
+        s,
+        children: arrayIsEmpty(metricIds)
           ? 'No metrics defined'
-          : /* @__PURE__ */ createElement(
-              'table',
-              null,
-              /* @__PURE__ */ createElement(
-                'thead',
-                null,
-                /* @__PURE__ */ createElement('th', null, 'Metric Id'),
-                /* @__PURE__ */ createElement('th', null, 'Table Id'),
-                /* @__PURE__ */ createElement('th', null, 'Metric'),
-              ),
-              /* @__PURE__ */ createElement(
-                'tbody',
-                null,
-                arrayMap(metricIds, (metricId) =>
-                  /* @__PURE__ */ createElement(MetricRow, {
-                    metrics,
-                    metricId,
-                    key: metricId,
-                  }),
-                ),
-              ),
-            ),
-      );
+          : /* @__PURE__ */ jsxs('table', {
+              children: [
+                /* @__PURE__ */ jsxs('thead', {
+                  children: [
+                    /* @__PURE__ */ jsx('th', {children: 'Metric Id'}),
+                    /* @__PURE__ */ jsx('th', {children: 'Table Id'}),
+                    /* @__PURE__ */ jsx('th', {children: 'Metric'}),
+                  ],
+                }),
+                /* @__PURE__ */ jsx('tbody', {
+                  children: arrayMap(metricIds, (metricId) =>
+                    /* @__PURE__ */ jsx(
+                      MetricRow,
+                      {metrics, metricId},
+                      metricId,
+                    ),
+                  ),
+                }),
+              ],
+            }),
+      });
 };
 
 const QueryView = ({queries, queriesId, queryId, s}) => {
@@ -1181,10 +1178,11 @@ const QueryView = ({queries, queriesId, queryId, s}) => {
     [],
     s,
   );
-  return /* @__PURE__ */ createElement(
-    Details,
-    {uniqueId, summary: 'Query: ' + queryId, s},
-    /* @__PURE__ */ createElement(ResultSortedTableInHtmlTable, {
+  return /* @__PURE__ */ jsx(Details, {
+    uniqueId,
+    summary: 'Query: ' + queryId,
+    s,
+    children: /* @__PURE__ */ jsx(ResultSortedTableInHtmlTable, {
       queryId,
       queries,
       cellId,
@@ -1195,32 +1193,32 @@ const QueryView = ({queries, queriesId, queryId, s}) => {
       sortOnClick: true,
       onChange: handleChange,
     }),
-  );
+  });
 };
 const QueriesView = ({queriesId, s}) => {
   const queries = useQueries(queriesId);
   const queryIds = useQueryIds(queries);
   return isUndefined(queries)
     ? null
-    : /* @__PURE__ */ createElement(
-        Details,
-        {
-          uniqueId: getUniqueId('q', queriesId),
-          summary: 'Queries: ' + (queriesId ?? DEFAULT),
-          s,
-        },
-        arrayIsEmpty(queryIds)
+    : /* @__PURE__ */ jsx(Details, {
+        uniqueId: getUniqueId('q', queriesId),
+        summary: 'Queries: ' + (queriesId ?? DEFAULT),
+        s,
+        children: arrayIsEmpty(queryIds)
           ? 'No queries defined'
           : sortedIdsMap(queryIds, (queryId) =>
-              /* @__PURE__ */ createElement(QueryView, {
-                queries,
-                queriesId,
+              /* @__PURE__ */ jsx(
+                QueryView,
+                {
+                  queries,
+                  queriesId,
+                  queryId,
+                  s,
+                },
                 queryId,
-                s,
-                key: queryId,
-              }),
+              ),
             ),
-      );
+      });
 };
 
 const RelationshipView = ({
@@ -1231,46 +1229,43 @@ const RelationshipView = ({
 }) => {
   const uniqueId = getUniqueId('r', relationshipsId, relationshipId);
   const [editable, handleEditable] = useEditable(uniqueId, s);
-  return /* @__PURE__ */ createElement(
-    Details,
-    {
-      uniqueId,
-      summary: 'Relationship: ' + relationshipId,
-      editable,
-      handleEditable,
-      s,
-    },
-    /* @__PURE__ */ createElement(RelationshipInHtmlTable, {
+  return /* @__PURE__ */ jsx(Details, {
+    uniqueId,
+    summary: 'Relationship: ' + relationshipId,
+    editable,
+    handleEditable,
+    s,
+    children: /* @__PURE__ */ jsx(RelationshipInHtmlTable, {
       relationshipId,
       relationships,
       editable,
     }),
-  );
+  });
 };
 const RelationshipsView = ({relationshipsId, s}) => {
   const relationships = useRelationships(relationshipsId);
   const relationshipIds = useRelationshipIds(relationships);
   return isUndefined(relationships)
     ? null
-    : /* @__PURE__ */ createElement(
-        Details,
-        {
-          uniqueId: getUniqueId('r', relationshipsId),
-          summary: 'Relationships: ' + (relationshipsId ?? DEFAULT),
-          s,
-        },
-        arrayIsEmpty(relationshipIds)
+    : /* @__PURE__ */ jsx(Details, {
+        uniqueId: getUniqueId('r', relationshipsId),
+        summary: 'Relationships: ' + (relationshipsId ?? DEFAULT),
+        s,
+        children: arrayIsEmpty(relationshipIds)
           ? 'No relationships defined'
           : sortedIdsMap(relationshipIds, (relationshipId) =>
-              /* @__PURE__ */ createElement(RelationshipView, {
-                relationships,
-                relationshipsId,
+              /* @__PURE__ */ jsx(
+                RelationshipView,
+                {
+                  relationships,
+                  relationshipsId,
+                  relationshipId,
+                  s,
+                },
                 relationshipId,
-                s,
-                key: relationshipId,
-              }),
+              ),
             ),
-      );
+      });
 };
 
 const TableView = ({tableId, store, storeId, s}) => {
@@ -1287,16 +1282,13 @@ const TableView = ({tableId, store, storeId, s}) => {
     s,
   );
   const [editable, handleEditable] = useEditable(uniqueId, s);
-  return /* @__PURE__ */ createElement(
-    Details,
-    {
-      uniqueId,
-      summary: TABLE + ': ' + tableId,
-      editable,
-      handleEditable,
-      s,
-    },
-    /* @__PURE__ */ createElement(SortedTableInHtmlTable, {
+  return /* @__PURE__ */ jsx(Details, {
+    uniqueId,
+    summary: TABLE + ': ' + tableId,
+    editable,
+    handleEditable,
+    s,
+    children: /* @__PURE__ */ jsx(SortedTableInHtmlTable, {
       tableId,
       store,
       cellId,
@@ -1308,51 +1300,50 @@ const TableView = ({tableId, store, storeId, s}) => {
       onChange: handleChange,
       editable,
     }),
-  );
+  });
 };
 const ValuesView = ({store, storeId, s}) => {
   const uniqueId = getUniqueId('v', storeId);
   const [editable, handleEditable] = useEditable(uniqueId, s);
   return arrayIsEmpty(useValueIds(store))
     ? null
-    : /* @__PURE__ */ createElement(
-        Details,
-        {
-          uniqueId,
-          summary: VALUES,
-          editable,
-          handleEditable,
-          s,
-        },
-        /* @__PURE__ */ createElement(ValuesInHtmlTable, {store, editable}),
-      );
+    : /* @__PURE__ */ jsx(Details, {
+        uniqueId,
+        summary: VALUES,
+        editable,
+        handleEditable,
+        s,
+        children: /* @__PURE__ */ jsx(ValuesInHtmlTable, {store, editable}),
+      });
 };
 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.isMergeable() ? 'Mergeable' : '') +
-            'Store: ' +
-            (storeId ?? DEFAULT),
-          s,
-        },
-        /* @__PURE__ */ createElement(ValuesView, {storeId, store, s}),
-        sortedIdsMap(tableIds, (tableId) =>
-          /* @__PURE__ */ createElement(TableView, {
-            store,
-            storeId,
-            tableId,
-            s,
-            key: tableId,
-          }),
-        ),
-      );
+    : /* @__PURE__ */ jsxs(Details, {
+        uniqueId: getUniqueId('s', storeId),
+        summary:
+          (store.isMergeable() ? 'Mergeable' : '') +
+          'Store: ' +
+          (storeId ?? DEFAULT),
+        s,
+        children: [
+          /* @__PURE__ */ jsx(ValuesView, {storeId, store, s}),
+          sortedIdsMap(tableIds, (tableId) =>
+            /* @__PURE__ */ jsx(
+              TableView,
+              {
+                store,
+                storeId,
+                tableId,
+                s,
+              },
+              tableId,
+            ),
+          ),
+        ],
+      });
 };
 
 const Body = ({s}) => {
@@ -1407,51 +1398,44 @@ const Body = ({s}) => {
     arrayIsEmpty(relationshipsIds) &&
     isUndefined(queries) &&
     arrayIsEmpty(queriesIds)
-    ? /* @__PURE__ */ createElement(
-        'span',
-        {className: 'warn'},
-        'There are no Stores or other objects to inspect. Make sure you placed the Inspector inside a Provider component.',
-      )
-    : /* @__PURE__ */ createElement(
-        'article',
-        {ref: articleRef, onScroll: handleScroll},
-        /* @__PURE__ */ createElement(StoreView, {s}),
-        arrayMap(storeIds, (storeId) =>
-          /* @__PURE__ */ createElement(StoreView, {storeId, s, key: storeId}),
-        ),
-        /* @__PURE__ */ createElement(MetricsView, {s}),
-        arrayMap(metricsIds, (metricsId) =>
-          /* @__PURE__ */ createElement(MetricsView, {
-            metricsId,
-            s,
-            key: metricsId,
-          }),
-        ),
-        /* @__PURE__ */ createElement(IndexesView, {s}),
-        arrayMap(indexesIds, (indexesId) =>
-          /* @__PURE__ */ createElement(IndexesView, {
-            indexesId,
-            s,
-            key: indexesId,
-          }),
-        ),
-        /* @__PURE__ */ createElement(RelationshipsView, {s}),
-        arrayMap(relationshipsIds, (relationshipsId) =>
-          /* @__PURE__ */ createElement(RelationshipsView, {
-            relationshipsId,
-            s,
-            key: relationshipsId,
-          }),
-        ),
-        /* @__PURE__ */ createElement(QueriesView, {s}),
-        arrayMap(queriesIds, (queriesId) =>
-          /* @__PURE__ */ createElement(QueriesView, {
-            queriesId,
-            s,
-            key: queriesId,
-          }),
-        ),
-      );
+    ? /* @__PURE__ */ jsx('span', {
+        className: 'warn',
+        children:
+          'There are no Stores or other objects to inspect. Make sure you placed the Inspector inside a Provider component.',
+      })
+    : /* @__PURE__ */ jsxs('article', {
+        ref: articleRef,
+        onScroll: handleScroll,
+        children: [
+          /* @__PURE__ */ jsx(StoreView, {s}),
+          arrayMap(storeIds, (storeId) =>
+            /* @__PURE__ */ jsx(StoreView, {storeId, s}, storeId),
+          ),
+          /* @__PURE__ */ jsx(MetricsView, {s}),
+          arrayMap(metricsIds, (metricsId) =>
+            /* @__PURE__ */ jsx(MetricsView, {metricsId, s}, metricsId),
+          ),
+          /* @__PURE__ */ jsx(IndexesView, {s}),
+          arrayMap(indexesIds, (indexesId) =>
+            /* @__PURE__ */ jsx(IndexesView, {indexesId, s}, indexesId),
+          ),
+          /* @__PURE__ */ jsx(RelationshipsView, {s}),
+          arrayMap(relationshipsIds, (relationshipsId) =>
+            /* @__PURE__ */ jsx(
+              RelationshipsView,
+              {
+                relationshipsId,
+                s,
+              },
+              relationshipsId,
+            ),
+          ),
+          /* @__PURE__ */ jsx(QueriesView, {s}),
+          arrayMap(queriesIds, (queriesId) =>
+            /* @__PURE__ */ jsx(QueriesView, {queriesId, s}, queriesId),
+          ),
+        ],
+      });
 };
 
 class ErrorBoundary extends PureComponent {
@@ -1468,11 +1452,10 @@ class ErrorBoundary extends PureComponent {
     console.error(error, info.componentStack);
   render() {
     return this.state.e
-      ? /* @__PURE__ */ createElement(
-          'span',
-          {className: 'warn'},
-          'Inspector error: please see console for details.',
-        )
+      ? /* @__PURE__ */ jsx('span', {
+          className: 'warn',
+          children: 'Inspector error: please see console for details.',
+        })
       : // eslint-disable-next-line react/prop-types
         this.props.children;
   }
@@ -1487,41 +1470,40 @@ const Header = ({s}) => {
     [],
     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',
-    }),
-  );
+  return /* @__PURE__ */ jsxs('header', {
+    children: [
+      /* @__PURE__ */ jsx('img', {title: TITLE}),
+      /* @__PURE__ */ jsx('span', {children: TITLE}),
+      arrayMap(POSITIONS, (name, p) =>
+        p == position
+          ? null
+          : /* @__PURE__ */ jsx(
+              'img',
+              {
+                onClick: handleDock,
+                'data-id': p,
+                title: 'Dock to ' + name,
+              },
+              p,
+            ),
+      ),
+      /* @__PURE__ */ jsx('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(
-          ErrorBoundary,
-          null,
-          /* @__PURE__ */ createElement(Body, {s}),
-        ),
-      )
+    ? /* @__PURE__ */ jsxs('main', {
+        'data-position': position,
+        children: [
+          /* @__PURE__ */ jsx(Header, {s}),
+          /* @__PURE__ */ jsx(ErrorBoundary, {
+            children: /* @__PURE__ */ jsx(Body, {s}),
+          }),
+        ],
+      })
     : null;
 };
 
@@ -3324,17 +3306,18 @@ const Inspector = ({position = 'right', open = false}) => {
       await persister.startAutoSave();
     },
   );
-  return /* @__PURE__ */ createElement(
-    Fragment,
-    null,
-    /* @__PURE__ */ createElement(
-      'aside',
-      {id: UNIQUE_ID},
-      /* @__PURE__ */ createElement(Nub, {s}),
-      /* @__PURE__ */ createElement(Panel, {s}),
-    ),
-    /* @__PURE__ */ createElement('style', null, APP_STYLESHEET),
-  );
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs('aside', {
+        id: UNIQUE_ID,
+        children: [
+          /* @__PURE__ */ jsx(Nub, {s}),
+          /* @__PURE__ */ jsx(Panel, {s}),
+        ],
+      }),
+      /* @__PURE__ */ jsx('style', {children: APP_STYLESHEET}),
+    ],
+  });
 };
 
 export {Inspector};