tinybase 7.0.0-beta.1 → 7.0.0-beta.2

package/omni/index.js

@@ -62,6 +62,7 @@ const _VALUE = 'value';
 const OPEN = 'open';
 const MESSAGE = 'message';
 const ERROR = 'error';
+const EXTRA = 'extra';
 const T = 't';
 const V = 'v';
 const UNDEFINED = '\uFFFC';
@@ -159,7 +160,13 @@ const setOrDelCell = (store, 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;
+  type == STRING
+    ? stringCase
+    : type == NUMBER
+      ? numberCase
+      : type == BOOLEAN
+        ? booleanCase
+        : null;
 
 const collSizeN = (collSizer) => (coll) =>
   arrayReduce(collValues(coll), (total, coll2) => total + collSizer(coll2), 0);
@@ -856,7 +863,7 @@ const getUniqueId$1 = (length = 16) =>
   arrayReduce(
     getRandomValues(new Uint8Array(length)),
     (uniqueId, number) => uniqueId + encode(number),
-    '',
+    EMPTY_STRING,
   );
 
 const jsonString = JSON.stringify;
@@ -4484,7 +4491,7 @@ const createAutomergePersister = (
 ) => {
   docHandle.change((doc) => objEnsure(doc, docObjName, objNew));
   const getPersisted = async () => {
-    const doc = await docHandle.doc();
+    const doc = docHandle.doc();
     return objSize(doc?.[docObjName]) == 2
       ? getDocContent(doc, docObjName)
       : void 0;
@@ -4514,7 +4521,7 @@ const createAutomergePersister = (
   );
 };
 
-const STORAGE = 'storage';
+const STORAGE$1 = 'storage';
 const createStoragePersister = (
   store,
   storageName,
@@ -4534,11 +4541,11 @@ const createStoragePersister = (
         );
       }
     };
-    WINDOW.addEventListener(STORAGE, storageListener);
+    WINDOW.addEventListener(STORAGE$1, storageListener);
     return storageListener;
   };
   const delPersisterListener = (storageListener) =>
-    WINDOW.removeEventListener(STORAGE, storageListener);
+    WINDOW.removeEventListener(STORAGE$1, storageListener);
   return createCustomPersister(
     store,
     getPersisted,
@@ -4555,6 +4562,32 @@ const createLocalPersister = (store, storageName, onIgnoredError) =>
   createStoragePersister(store, storageName, localStorage, onIgnoredError);
 const createSessionPersister = (store, storageName, onIgnoredError) =>
   createStoragePersister(store, storageName, sessionStorage, onIgnoredError);
+const createOpfsPersister = (store, handle, onIgnoredError) => {
+  const getPersisted = async () =>
+    jsonParseWithUndefined(await (await handle.getFile()).text());
+  const setPersisted = async (getContent) => {
+    const writable = await handle.createWritable();
+    await writable.write(jsonStringWithUndefined(getContent()));
+    await writable.close();
+  };
+  const addPersisterListener = async (listener) => {
+    const observer = new FileSystemObserver(() => listener());
+    await observer.observe(handle);
+    return observer;
+  };
+  const delPersisterListener = (observer) => observer?.disconnect();
+  return createCustomPersister(
+    store,
+    getPersisted,
+    setPersisted,
+    addPersisterListener,
+    delPersisterListener,
+    onIgnoredError,
+    3,
+    // StoreOrMergeableStore,
+    {getHandle: () => handle},
+  );
+};
 
 const createCrSqliteWasmPersister = (
   store,
@@ -5360,6 +5393,71 @@ const viewUpsert = async (
   );
 };
 
+const STORAGE = 'storage';
+const createReactNativeMmkvPersister = (
+  store,
+  storage,
+  storageName = STORAGE,
+  onIgnoredError,
+) => {
+  const getPersisted = async () => {
+    const data = storage.getString(storageName);
+    const value = data === void 0 ? void 0 : JSON.parse(data);
+    return Promise.resolve(value);
+  };
+  const setPersisted = async (getContent) => {
+    const content = getContent();
+    if (content !== void 0) {
+      storage.set(storageName, JSON.stringify(content));
+    }
+  };
+  const addPersisterListener = (listener) =>
+    storage.addOnValueChangedListener((key) => {
+      if (key === storageName) {
+        const value = storage.getString(storageName);
+        if (value) {
+          listener(JSON.parse(value));
+        }
+      }
+    });
+  const delPersisterListener = (storageListener) => {
+    storageListener.remove();
+  };
+  return createCustomPersister(
+    store,
+    getPersisted,
+    setPersisted,
+    addPersisterListener,
+    delPersisterListener,
+    onIgnoredError,
+    3,
+    // StoreOrMergeableStore
+    {getStorageName: () => storageName},
+  );
+};
+
+const createReactNativeSqlitePersister = (
+  store,
+  db,
+  configOrStoreTableName,
+  onSqlCommand,
+  onIgnoredError,
+) =>
+  createCustomSqlitePersister(
+    store,
+    configOrStoreTableName,
+    async (sql, params = []) =>
+      (await db.executeSql(sql, params))[0].rows.raw(),
+    noop,
+    noop,
+    onSqlCommand,
+    onIgnoredError,
+    noop,
+    3,
+    // StoreOrMergeableStore,
+    db,
+  );
+
 const getETag = (response) => response.headers.get('ETag');
 const createRemotePersister = (
   store,
@@ -7021,17 +7119,6 @@ const getIndexStoreTableId = (indexes, indexId) => [
   indexes?.getTableId(indexId),
 ];
 
-var Offsets = /* @__PURE__ */ ((Offsets2) => {
-  Offsets2[(Offsets2['Store'] = 0)] = 'Store';
-  Offsets2[(Offsets2['Metrics'] = 1)] = 'Metrics';
-  Offsets2[(Offsets2['Indexes'] = 2)] = 'Indexes';
-  Offsets2[(Offsets2['Relationships'] = 3)] = 'Relationships';
-  Offsets2[(Offsets2['Queries'] = 4)] = 'Queries';
-  Offsets2[(Offsets2['Checkpoints'] = 5)] = 'Checkpoints';
-  Offsets2[(Offsets2['Persister'] = 6)] = 'Persister';
-  Offsets2[(Offsets2['Synchronizer'] = 7)] = 'Synchronizer';
-  return Offsets2;
-})(Offsets || {});
 const TINYBASE_CONTEXT = TINYBASE + '_uirc';
 const Context = GLOBAL[TINYBASE_CONTEXT]
   ? /* istanbul ignore next */
@@ -7062,6 +7149,165 @@ const useProvideThing = (thingId, thing, offset) => {
 const useThingIds = (offset) =>
   objIds(useContext(Context)[offset * 2 + 1] ?? {});
 
+const OFFSET_STORE = 0;
+const OFFSET_METRICS = 1;
+const OFFSET_INDEXES = 2;
+const OFFSET_RELATIONSHIPS = 3;
+const OFFSET_QUERIES = 4;
+const OFFSET_CHECKPOINTS = 5;
+const OFFSET_PERSISTER = 6;
+const OFFSET_SYNCHRONIZER = 7;
+const mergeParentThings = (
+  offset,
+  parentValue,
+  defaultThing,
+  thingsById,
+  extraThingsById,
+) => [
+  defaultThing ?? parentValue[offset * 2],
+  {
+    ...parentValue[offset * 2 + 1],
+    ...thingsById,
+    ...extraThingsById[offset],
+  },
+];
+const Provider = ({
+  store,
+  storesById,
+  metrics,
+  metricsById,
+  indexes,
+  indexesById,
+  relationships,
+  relationshipsById,
+  queries,
+  queriesById,
+  checkpoints,
+  checkpointsById,
+  persister,
+  persistersById,
+  synchronizer,
+  synchronizersById,
+  children,
+}) => {
+  const parentValue = useContext(Context);
+  const [extraThingsById, setExtraThingsById] = useState(() =>
+    arrayNew(8, () => ({})),
+  );
+  const addExtraThingById = useCallback(
+    (thingOffset, id, thing) =>
+      setExtraThingsById((extraThingsById2) =>
+        objGet(extraThingsById2[thingOffset], id) == thing
+          ? extraThingsById2
+          : arrayWith(extraThingsById2, thingOffset, {
+              ...extraThingsById2[thingOffset],
+              [id]: thing,
+            }),
+      ),
+    [],
+  );
+  const delExtraThingById = useCallback(
+    (thingOffset, id) =>
+      setExtraThingsById((extraThingsById2) =>
+        !objHas(extraThingsById2[thingOffset], id)
+          ? extraThingsById2
+          : arrayWith(
+              extraThingsById2,
+              thingOffset,
+              objDel(extraThingsById2[thingOffset], id),
+            ),
+      ),
+    [],
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, {
+    value: useMemo(
+      () => [
+        ...mergeParentThings(
+          OFFSET_STORE,
+          parentValue,
+          store,
+          storesById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_METRICS,
+          parentValue,
+          metrics,
+          metricsById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_INDEXES,
+          parentValue,
+          indexes,
+          indexesById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_RELATIONSHIPS,
+          parentValue,
+          relationships,
+          relationshipsById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_QUERIES,
+          parentValue,
+          queries,
+          queriesById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_CHECKPOINTS,
+          parentValue,
+          checkpoints,
+          checkpointsById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_PERSISTER,
+          parentValue,
+          persister,
+          persistersById,
+          extraThingsById,
+        ),
+        ...mergeParentThings(
+          OFFSET_SYNCHRONIZER,
+          parentValue,
+          synchronizer,
+          synchronizersById,
+          extraThingsById,
+        ),
+        addExtraThingById,
+        delExtraThingById,
+      ],
+      [
+        extraThingsById,
+        store,
+        storesById,
+        metrics,
+        metricsById,
+        indexes,
+        indexesById,
+        relationships,
+        relationshipsById,
+        queries,
+        queriesById,
+        checkpoints,
+        checkpointsById,
+        persister,
+        persistersById,
+        synchronizer,
+        synchronizersById,
+        parentValue,
+        addExtraThingById,
+        delExtraThingById,
+      ],
+    ),
+    children,
+  });
+};
+
 const EMPTY_ARRAY = [];
 const DEFAULTS = [{}, [], [EMPTY_ARRAY, void 0, EMPTY_ARRAY], void 0, false, 0];
 const IS_EQUALS = [
@@ -7226,13 +7472,13 @@ const useSortedRowIdsListenerImpl = (
   );
 const useCreateStore = (create, createDeps = EMPTY_ARRAY) =>
   useMemo(create, createDeps);
-const useStoreIds = () => useThingIds(Offsets.Store);
-const useStore = (id) => useThing(id, Offsets.Store);
-const useStores = () => useThings(Offsets.Store);
+const useStoreIds = () => useThingIds(OFFSET_STORE);
+const useStore = (id) => useThing(id, OFFSET_STORE);
+const useStores = () => useThings(OFFSET_STORE);
 const useStoreOrStoreById = (storeOrStoreId) =>
-  useThingOrThingById(storeOrStoreId, Offsets.Store);
+  useThingOrThingById(storeOrStoreId, OFFSET_STORE);
 const useProvideStore = (storeId, store) =>
-  useProvideThing(storeId, store, Offsets.Store);
+  useProvideThing(storeId, store, OFFSET_STORE);
 const useCreateMergeableStore = (create, createDeps = EMPTY_ARRAY) =>
   useMemo(create, createDeps);
 const useHasTables = (storeOrStoreId) =>
@@ -7886,12 +8132,12 @@ const useDidFinishTransactionListener = (
   );
 const useCreateMetrics = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
-const useMetricsIds = () => useThingIds(Offsets.Metrics);
-const useMetrics = (id) => useThing(id, Offsets.Metrics);
+const useMetricsIds = () => useThingIds(OFFSET_METRICS);
+const useMetrics = (id) => useThing(id, OFFSET_METRICS);
 const useMetricsOrMetricsById = (metricsOrMetricsId) =>
-  useThingOrThingById(metricsOrMetricsId, Offsets.Metrics);
+  useThingOrThingById(metricsOrMetricsId, OFFSET_METRICS);
 const useProvideMetrics = (metricsId, metrics) =>
-  useProvideThing(metricsId, metrics, Offsets.Metrics);
+  useProvideThing(metricsId, metrics, OFFSET_METRICS);
 const useMetricIds = (metricsOrMetricsId) =>
   useListenable(
     METRIC + IDS,
@@ -7920,12 +8166,12 @@ const useMetricListener = (
   );
 const useCreateIndexes = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
-const useIndexesIds = () => useThingIds(Offsets.Indexes);
-const useIndexes = (id) => useThing(id, Offsets.Indexes);
+const useIndexesIds = () => useThingIds(OFFSET_INDEXES);
+const useIndexes = (id) => useThing(id, OFFSET_INDEXES);
 const useIndexesOrIndexesById = (indexesOrIndexesId) =>
-  useThingOrThingById(indexesOrIndexesId, Offsets.Indexes);
+  useThingOrThingById(indexesOrIndexesId, OFFSET_INDEXES);
 const useProvideIndexes = (indexesId, indexes) =>
-  useProvideThing(indexesId, indexes, Offsets.Indexes);
+  useProvideThing(indexesId, indexes, OFFSET_INDEXES);
 const useSliceIds = (indexId, indexesOrIndexesId) =>
   useListenable(
     SLICE + IDS,
@@ -7975,12 +8221,12 @@ const useSliceRowIdsListener = (
   );
 const useCreateRelationships = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
-const useRelationshipsIds = () => useThingIds(Offsets.Relationships);
-const useRelationships = (id) => useThing(id, Offsets.Relationships);
+const useRelationshipsIds = () => useThingIds(OFFSET_RELATIONSHIPS);
+const useRelationships = (id) => useThing(id, OFFSET_RELATIONSHIPS);
 const useRelationshipsOrRelationshipsById = (relationshipsOrRelationshipsId) =>
-  useThingOrThingById(relationshipsOrRelationshipsId, Offsets.Relationships);
+  useThingOrThingById(relationshipsOrRelationshipsId, OFFSET_RELATIONSHIPS);
 const useProvideRelationships = (relationshipsId, relationships) =>
-  useProvideThing(relationshipsId, relationships, Offsets.Relationships);
+  useProvideThing(relationshipsId, relationships, OFFSET_RELATIONSHIPS);
 const useRelationshipIds = (relationshipsOrRelationshipsId) =>
   useListenable(
     RELATIONSHIP + IDS,
@@ -8064,12 +8310,12 @@ const useLinkedRowIdsListener = (
   );
 const useCreateQueries = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
-const useQueriesIds = () => useThingIds(Offsets.Queries);
-const useQueries = (id) => useThing(id, Offsets.Queries);
+const useQueriesIds = () => useThingIds(OFFSET_QUERIES);
+const useQueries = (id) => useThing(id, OFFSET_QUERIES);
 const useQueriesOrQueriesById = (queriesOrQueriesId) =>
-  useThingOrThingById(queriesOrQueriesId, Offsets.Queries);
+  useThingOrThingById(queriesOrQueriesId, OFFSET_QUERIES);
 const useProvideQueries = (queriesId, queries) =>
-  useProvideThing(queriesId, queries, Offsets.Queries);
+  useProvideThing(queriesId, queries, OFFSET_QUERIES);
 const useQueryIds = (queriesOrQueriesId) =>
   useListenable(
     QUERY + IDS,
@@ -8253,12 +8499,12 @@ const useResultCellListener = (
   );
 const useCreateCheckpoints = (store, create, createDeps) =>
   useCreate(store, create, createDeps);
-const useCheckpointsIds = () => useThingIds(Offsets.Checkpoints);
-const useCheckpoints = (id) => useThing(id, Offsets.Checkpoints);
+const useCheckpointsIds = () => useThingIds(OFFSET_CHECKPOINTS);
+const useCheckpoints = (id) => useThing(id, OFFSET_CHECKPOINTS);
 const useCheckpointsOrCheckpointsById = (checkpointsOrCheckpointsId) =>
-  useThingOrThingById(checkpointsOrCheckpointsId, Offsets.Checkpoints);
+  useThingOrThingById(checkpointsOrCheckpointsId, OFFSET_CHECKPOINTS);
 const useProvideCheckpoints = (checkpointsId, checkpoints) =>
-  useProvideThing(checkpointsId, checkpoints, Offsets.Checkpoints);
+  useProvideThing(checkpointsId, checkpoints, OFFSET_CHECKPOINTS);
 const useCheckpointIds = (checkpointsOrCheckpointsId) =>
   useListenable(
     CHECKPOINT + IDS,
@@ -8406,12 +8652,12 @@ const useCreatePersister = (
   );
   return persister;
 };
-const usePersisterIds = () => useThingIds(Offsets.Persister);
-const usePersister = (id) => useThing(id, Offsets.Persister);
+const usePersisterIds = () => useThingIds(OFFSET_PERSISTER);
+const usePersister = (id) => useThing(id, OFFSET_PERSISTER);
 const usePersisterOrPersisterById = (persisterOrPersisterId) =>
-  useThingOrThingById(persisterOrPersisterId, Offsets.Persister);
+  useThingOrThingById(persisterOrPersisterId, OFFSET_PERSISTER);
 const useProvidePersister = (persisterId, persister) =>
-  useProvideThing(persisterId, persister, Offsets.Persister);
+  useProvideThing(persisterId, persister, OFFSET_PERSISTER);
 const usePersisterStatus = (persisterOrPersisterId) =>
   useListenable(
     STATUS,
@@ -8461,12 +8707,12 @@ const useCreateSynchronizer = (
   );
   return synchronizer;
 };
-const useSynchronizerIds = () => useThingIds(Offsets.Synchronizer);
-const useSynchronizer = (id) => useThing(id, Offsets.Synchronizer);
+const useSynchronizerIds = () => useThingIds(OFFSET_SYNCHRONIZER);
+const useSynchronizer = (id) => useThing(id, OFFSET_SYNCHRONIZER);
 const useSynchronizerOrSynchronizerById = (synchronizerOrSynchronizerId) =>
-  useThingOrThingById(synchronizerOrSynchronizerId, Offsets.Synchronizer);
+  useThingOrThingById(synchronizerOrSynchronizerId, OFFSET_SYNCHRONIZER);
 const useProvideSynchronizer = (persisterId, persister) =>
-  useProvideThing(persisterId, persister, Offsets.Synchronizer);
+  useProvideThing(persisterId, persister, OFFSET_SYNCHRONIZER);
 const useSynchronizerStatus = (synchronizerOrSynchronizerId) =>
   useListenable(
     STATUS,
@@ -8487,281 +8733,314 @@ const useSynchronizerStatusListener = (
     [],
   );
 
-const mergeParentThings = (
-  offset,
-  parentValue,
-  defaultThing,
-  thingsById,
-  extraThingsById,
-) => [
-  defaultThing ?? parentValue[offset * 2],
-  {
-    ...parentValue[offset * 2 + 1],
-    ...thingsById,
-    ...extraThingsById[offset],
-  },
-];
-const tableView = (
-  {
-    tableId,
-    store,
-    rowComponent: Row = RowView,
-    getRowComponentProps,
-    customCellIds,
-    separator,
-    debugIds,
-  },
-  rowIds,
-) =>
-  wrap(
-    arrayMap(rowIds, (rowId) =>
-      /* @__PURE__ */ jsx(
-        Row,
-        {
-          ...getProps(getRowComponentProps, rowId),
-          tableId,
-          rowId,
-          customCellIds,
-          store,
-          debugIds,
-        },
-        rowId,
-      ),
-    ),
-    separator,
-    debugIds,
-    tableId,
-  );
-const resultTableView = (
-  {
-    queryId,
-    queries,
-    resultRowComponent: ResultRow = ResultRowView,
-    getResultRowComponentProps,
-    separator,
-    debugIds,
-  },
-  rowIds,
-) =>
-  wrap(
-    arrayMap(rowIds, (rowId) =>
-      /* @__PURE__ */ jsx(
-        ResultRow,
-        {
-          ...getProps(getResultRowComponentProps, rowId),
-          queryId,
-          rowId,
-          queries,
-          debugIds,
-        },
-        rowId,
-      ),
-    ),
-    separator,
-    debugIds,
-    queryId,
+const useStoreCellComponentProps = (store, tableId) =>
+  useMemo(() => ({store, tableId}), [store, tableId]);
+const useQueriesCellComponentProps = (queries, queryId) =>
+  useMemo(() => ({queries, queryId}), [queries, queryId]);
+const useCallbackOrUndefined = (callback, deps, test) => {
+  const returnCallback = useCallback(callback, deps);
+  return test ? returnCallback : void 0;
+};
+const useParams = (...args) =>
+  useMemo(
+    () => args,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    args,
   );
-const useComponentPerRow = (
-  {
-    relationshipId,
-    relationships,
-    rowComponent: Row = RowView,
-    getRowComponentProps,
-    separator,
-    debugIds,
-  },
-  getRowIdsHook,
-  rowId,
-) => {
-  const [resolvedRelationships, store, localTableId] =
-    getRelationshipsStoreTableIds(
-      useRelationshipsOrRelationshipsById(relationships),
-      relationshipId,
+const useCells = (defaultCellIds, customCells, defaultCellComponent) =>
+  useMemo(() => {
+    const cellIds = customCells ?? defaultCellIds;
+    return objMap(
+      isArray(cellIds)
+        ? objNew(arrayMap(cellIds, (cellId) => [cellId, cellId]))
+        : cellIds,
+      (labelOrCustomCell, cellId) => ({
+        ...{label: cellId, component: defaultCellComponent},
+        ...(isString(labelOrCustomCell)
+          ? {label: labelOrCustomCell}
+          : labelOrCustomCell),
+      }),
     );
-  const rowIds = getRowIdsHook(relationshipId, rowId, resolvedRelationships);
-  return wrap(
-    arrayMap(rowIds, (rowId2) =>
-      /* @__PURE__ */ jsx(
-        Row,
-        {
-          ...getProps(getRowComponentProps, rowId2),
-          tableId: localTableId,
-          rowId: rowId2,
-          store,
-          debugIds,
-        },
-        rowId2,
-      ),
+  }, [customCells, defaultCellComponent, defaultCellIds]);
+
+const UP_ARROW = '\u2191';
+const DOWN_ARROW = '\u2193';
+const EDITABLE = 'editable';
+const extraRowCells = (extraRowCells2 = [], extraRowCellProps, after = 0) =>
+  arrayMap(extraRowCells2, ({component: Component}, index) =>
+    /* @__PURE__ */ jsx(
+      'td',
+      {
+        className: EXTRA,
+        children: /* @__PURE__ */ jsx(Component, {...extraRowCellProps}),
+      },
+      extraKey(index, after),
     ),
-    separator,
-    debugIds,
-    rowId,
   );
-};
-const getUseCheckpointView =
-  (getCheckpoints) =>
-  ({
-    checkpoints,
-    checkpointComponent: Checkpoint = CheckpointView,
-    getCheckpointComponentProps,
-    separator,
-    debugIds,
-  }) => {
-    const resolvedCheckpoints = useCheckpointsOrCheckpointsById(checkpoints);
-    return wrap(
-      arrayMap(
-        getCheckpoints(useCheckpointIds(resolvedCheckpoints)),
-        (checkpointId) =>
-          /* @__PURE__ */ jsx(
-            Checkpoint,
+const extraKey = (index, after) => (after ? '>' : '<') + index;
+const extraHeaders = (extraCells = [], after = 0) =>
+  arrayMap(extraCells, ({label}, index) =>
+    /* @__PURE__ */ jsx(
+      'th',
+      {className: EXTRA, children: label},
+      extraKey(index, after),
+    ),
+  );
+
+const HtmlHeaderCell = ({
+  cellId,
+  sort: [sortCellId, sortDescending],
+  label = cellId ?? EMPTY_STRING,
+  onClick,
+}) =>
+  /* @__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 HtmlTable = ({
+  className,
+  headerRow,
+  idColumn,
+  params: [
+    cells,
+    cellComponentProps,
+    rowIds,
+    extraCellsBefore,
+    extraCellsAfter,
+    sortAndOffset,
+    handleSort,
+    paginatorComponent,
+  ],
+}) =>
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      paginatorComponent
+        ? /* @__PURE__ */ jsx('caption', {children: paginatorComponent})
+        : null,
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                extraHeaders(extraCellsBefore),
+                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,
+                  ),
+                ),
+                extraHeaders(extraCellsAfter, 1),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(rowIds, (rowId) => {
+          const rowProps = {...cellComponentProps, rowId};
+          return /* @__PURE__ */ jsxs(
+            'tr',
             {
-              ...getProps(getCheckpointComponentProps, checkpointId),
-              checkpoints: resolvedCheckpoints,
-              checkpointId,
-              debugIds,
+              children: [
+                extraRowCells(extraCellsBefore, rowProps),
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {title: rowId, children: rowId}),
+                objToArray(
+                  cells,
+                  ({component: CellView, getComponentProps}, cellId) =>
+                    /* @__PURE__ */ jsx(
+                      'td',
+                      {
+                        children: /* @__PURE__ */ jsx(CellView, {
+                          ...getProps(getComponentProps, rowId, cellId),
+                          ...rowProps,
+                          cellId,
+                        }),
+                      },
+                      cellId,
+                    ),
+                ),
+                extraRowCells(extraCellsAfter, rowProps, 1),
+              ],
             },
-            checkpointId,
-          ),
-      ),
-      separator,
-    );
-  };
-const Provider = ({
-  store,
-  storesById,
-  metrics,
-  metricsById,
-  indexes,
-  indexesById,
-  relationships,
-  relationshipsById,
-  queries,
-  queriesById,
-  checkpoints,
-  checkpointsById,
-  persister,
-  persistersById,
-  synchronizer,
-  synchronizersById,
-  children,
+            rowId,
+          );
+        }),
+      }),
+    ],
+  });
+const EditableThing = ({
+  thing,
+  onThingChange,
+  className,
+  hasSchema,
+  showType = true,
 }) => {
-  const parentValue = useContext(Context);
-  const [extraThingsById, setExtraThingsById] = useState(() =>
-    arrayNew(8, () => ({})),
-  );
-  const addExtraThingById = useCallback(
-    (thingOffset, id, thing) =>
-      setExtraThingsById((extraThingsById2) =>
-        objGet(extraThingsById2[thingOffset], id) == thing
-          ? extraThingsById2
-          : arrayWith(extraThingsById2, thingOffset, {
-              ...extraThingsById2[thingOffset],
-              [id]: thing,
-            }),
-      ),
-    [],
+  const [thingType, setThingType] = useState();
+  const [currentThing, setCurrentThing] = useState();
+  const [stringThing, setStringThing] = useState();
+  const [numberThing, setNumberThing] = useState();
+  const [booleanThing, setBooleanThing] = useState();
+  if (currentThing !== thing) {
+    setThingType(getCellOrValueType(thing));
+    setCurrentThing(thing);
+    setStringThing(String(thing));
+    setNumberThing(Number(thing) || 0);
+    setBooleanThing(Boolean(thing));
+  }
+  const handleThingChange = useCallback(
+    (thing2, setTypedThing) => {
+      setTypedThing(thing2);
+      setCurrentThing(thing2);
+      onThingChange(thing2);
+    },
+    [onThingChange],
   );
-  const delExtraThingById = useCallback(
-    (thingOffset, id) =>
-      setExtraThingsById((extraThingsById2) =>
-        !objHas(extraThingsById2[thingOffset], id)
-          ? extraThingsById2
-          : arrayWith(
-              extraThingsById2,
-              thingOffset,
-              objDel(extraThingsById2[thingOffset], id),
+  const handleTypeChange = useCallback(() => {
+    if (!hasSchema?.()) {
+      const nextType = getTypeCase(thingType, NUMBER, BOOLEAN, STRING);
+      const thing2 = getTypeCase(
+        nextType,
+        stringThing,
+        numberThing,
+        booleanThing,
+      );
+      setThingType(nextType);
+      setCurrentThing(thing2);
+      onThingChange(thing2);
+    }
+  }, [
+    hasSchema,
+    onThingChange,
+    stringThing,
+    numberThing,
+    booleanThing,
+    thingType,
+  ]);
+  const widget = getTypeCase(
+    thingType,
+    /* @__PURE__ */ jsx(
+      'input',
+      {
+        value: stringThing,
+        onChange: useCallback(
+          (event) =>
+            handleThingChange(
+              String(event[CURRENT_TARGET][_VALUE]),
+              setStringThing,
             ),
-      ),
-    [],
-  );
-  return /* @__PURE__ */ jsx(Context.Provider, {
-    value: useMemo(
-      () => [
-        ...mergeParentThings(
-          0 /* Store */,
-          parentValue,
-          store,
-          storesById,
-          extraThingsById,
-        ),
-        ...mergeParentThings(
-          1 /* Metrics */,
-          parentValue,
-          metrics,
-          metricsById,
-          extraThingsById,
-        ),
-        ...mergeParentThings(
-          2 /* Indexes */,
-          parentValue,
-          indexes,
-          indexesById,
-          extraThingsById,
-        ),
-        ...mergeParentThings(
-          3 /* Relationships */,
-          parentValue,
-          relationships,
-          relationshipsById,
-          extraThingsById,
-        ),
-        ...mergeParentThings(
-          4 /* Queries */,
-          parentValue,
-          queries,
-          queriesById,
-          extraThingsById,
+          [handleThingChange],
         ),
-        ...mergeParentThings(
-          5 /* Checkpoints */,
-          parentValue,
-          checkpoints,
-          checkpointsById,
-          extraThingsById,
-        ),
-        ...mergeParentThings(
-          6 /* Persister */,
-          parentValue,
-          persister,
-          persistersById,
-          extraThingsById,
+      },
+      thingType,
+    ),
+    /* @__PURE__ */ jsx(
+      'input',
+      {
+        type: 'number',
+        value: numberThing,
+        onChange: useCallback(
+          (event) =>
+            handleThingChange(
+              Number(event[CURRENT_TARGET][_VALUE] || 0),
+              setNumberThing,
+            ),
+          [handleThingChange],
         ),
-        ...mergeParentThings(
-          7 /* Synchronizer */,
-          parentValue,
-          synchronizer,
-          synchronizersById,
-          extraThingsById,
+      },
+      thingType,
+    ),
+    /* @__PURE__ */ jsx(
+      'input',
+      {
+        type: 'checkbox',
+        checked: booleanThing,
+        onChange: useCallback(
+          (event) =>
+            handleThingChange(
+              Boolean(event[CURRENT_TARGET].checked),
+              setBooleanThing,
+            ),
+          [handleThingChange],
         ),
-        addExtraThingById,
-        delExtraThingById,
-      ],
-      [
-        extraThingsById,
-        store,
-        storesById,
-        metrics,
-        metricsById,
-        indexes,
-        indexesById,
-        relationships,
-        relationshipsById,
-        queries,
-        queriesById,
-        checkpoints,
-        checkpointsById,
-        persister,
-        persistersById,
-        synchronizer,
-        synchronizersById,
-        parentValue,
-        addExtraThingById,
-        delExtraThingById,
-      ],
+      },
+      thingType,
     ),
-    children,
+  );
+  return /* @__PURE__ */ jsxs('div', {
+    className,
+    children: [
+      showType && widget
+        ? /* @__PURE__ */ jsx('button', {
+            title: thingType,
+            className: thingType,
+            onClick: handleTypeChange,
+            children: thingType,
+          })
+        : null,
+      widget,
+    ],
   });
 };
+
+const EditableCellView = ({
+  tableId,
+  rowId,
+  cellId,
+  store,
+  className,
+  showType,
+}) =>
+  /* @__PURE__ */ jsx(EditableThing, {
+    thing: useCell(tableId, rowId, cellId, store),
+    onThingChange: useSetCellCallback(
+      tableId,
+      rowId,
+      cellId,
+      (cell) => cell,
+      [],
+      store,
+    ),
+    className: className ?? EDITABLE + CELL,
+    showType,
+    hasSchema: useStoreOrStoreById(store)?.hasTablesSchema,
+  });
+
+const EditableValueView = ({valueId, store, className, showType}) =>
+  /* @__PURE__ */ jsx(EditableThing, {
+    thing: useValue(valueId, store),
+    onThingChange: useSetValueCallback(valueId, (value) => value, [], store),
+    className: className ?? EDITABLE + VALUE,
+    showType,
+    hasSchema: useStoreOrStoreById(store)?.hasValuesSchema,
+  });
+
 const wrap = (children, separator, encloseWithId, id) => {
   const separated =
     isUndefined(separator) || !isArray(children)
@@ -8769,10 +9048,53 @@ const wrap = (children, separator, encloseWithId, id) => {
       : arrayMap(children, (child, c) => (c > 0 ? [separator, child] : child));
   return encloseWithId ? [id, ':{', separated, '}'] : separated;
 };
-const useCustomOrDefaultCellIds = (customCellIds, tableId, rowId, store) => {
-  const defaultCellIds = useCellIds(tableId, rowId, store);
-  return customCellIds ?? defaultCellIds;
-};
+
+const CheckpointView = ({checkpoints, checkpointId, debugIds}) =>
+  wrap(
+    useCheckpoint(checkpointId, checkpoints) ?? EMPTY_STRING,
+    void 0,
+    debugIds,
+    checkpointId,
+  );
+
+const ResultCellView = ({queryId, rowId, cellId, queries, debugIds}) =>
+  wrap(
+    EMPTY_STRING +
+      (useResultCell(queryId, rowId, cellId, queries) ?? EMPTY_STRING),
+    void 0,
+    debugIds,
+    cellId,
+  );
+
+const ResultRowView = ({
+  queryId,
+  rowId,
+  queries,
+  resultCellComponent: ResultCell = ResultCellView,
+  getResultCellComponentProps,
+  separator,
+  debugIds,
+}) =>
+  wrap(
+    arrayMap(useResultCellIds(queryId, rowId, queries), (cellId) =>
+      /* @__PURE__ */ jsx(
+        ResultCell,
+        {
+          ...getProps(getResultCellComponentProps, cellId),
+          queryId,
+          rowId,
+          cellId,
+          queries,
+          debugIds,
+        },
+        cellId,
+      ),
+    ),
+    separator,
+    debugIds,
+    rowId,
+  );
+
 const CellView = ({tableId, rowId, cellId, store, debugIds}) =>
   wrap(
     EMPTY_STRING + (useCell(tableId, rowId, cellId, store) ?? EMPTY_STRING),
@@ -8780,6 +9102,12 @@ const CellView = ({tableId, rowId, cellId, store, debugIds}) =>
     debugIds,
     cellId,
   );
+
+const useCustomOrDefaultCellIds = (customCellIds, tableId, rowId, store) => {
+  const defaultCellIds = useCellIds(tableId, rowId, store);
+  return customCellIds ?? defaultCellIds;
+};
+
 const RowView = ({
   tableId,
   rowId,
@@ -8811,93 +9139,20 @@ const RowView = ({
     debugIds,
     rowId,
   );
-const TableView$1 = (props) =>
-  tableView(props, useRowIds(props.tableId, props.store));
-const SortedTableView = ({cellId, descending, offset, limit, ...props}) =>
-  tableView(
-    props,
-    useSortedRowIds(
-      props.tableId,
-      cellId,
-      descending,
-      offset,
-      limit,
-      props.store,
-    ),
-  );
-const TablesView = ({
-  store,
-  tableComponent: Table = TableView$1,
-  getTableComponentProps,
-  separator,
-  debugIds,
-}) =>
-  wrap(
-    arrayMap(useTableIds(store), (tableId) =>
-      /* @__PURE__ */ jsx(
-        Table,
-        {
-          ...getProps(getTableComponentProps, tableId),
-          tableId,
-          store,
-          debugIds,
-        },
-        tableId,
-      ),
-    ),
+
+const tableView = (
+  {
+    tableId,
+    store,
+    rowComponent: Row = RowView,
+    getRowComponentProps,
+    customCellIds,
     separator,
-  );
-const ValueView = ({valueId, store, debugIds}) =>
-  wrap(
-    EMPTY_STRING + (useValue(valueId, store) ?? EMPTY_STRING),
-    void 0,
     debugIds,
-    valueId,
-  );
-const ValuesView$1 = ({
-  store,
-  valueComponent: Value = ValueView,
-  getValueComponentProps,
-  separator,
-  debugIds,
-}) =>
-  wrap(
-    arrayMap(useValueIds(store), (valueId) =>
-      /* @__PURE__ */ jsx(
-        Value,
-        {
-          ...getProps(getValueComponentProps, valueId),
-          valueId,
-          store,
-          debugIds,
-        },
-        valueId,
-      ),
-    ),
-    separator,
-  );
-const MetricView = ({metricId, metrics, debugIds}) =>
+  },
+  rowIds,
+) =>
   wrap(
-    useMetric(metricId, metrics) ?? EMPTY_STRING,
-    void 0,
-    debugIds,
-    metricId,
-  );
-const SliceView$1 = ({
-  indexId,
-  sliceId,
-  indexes,
-  rowComponent: Row = RowView,
-  getRowComponentProps,
-  separator,
-  debugIds,
-}) => {
-  const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
-    useIndexesOrIndexesById(indexes),
-    indexId,
-  );
-  const rowIds = useSliceRowIds(indexId, sliceId, resolvedIndexes);
-  return wrap(
     arrayMap(rowIds, (rowId) =>
       /* @__PURE__ */ jsx(
         Row,
@@ -8905,6 +9160,7 @@ const SliceView$1 = ({
           ...getProps(getRowComponentProps, rowId),
           tableId,
           rowId,
+          customCellIds,
           store,
           debugIds,
         },
@@ -8913,340 +9169,316 @@ const SliceView$1 = ({
     ),
     separator,
     debugIds,
-    sliceId,
+    tableId,
   );
-};
-const IndexView$1 = ({
-  indexId,
-  indexes,
-  sliceComponent: Slice = SliceView$1,
-  getSliceComponentProps,
-  separator,
-  debugIds,
-}) =>
+const resultTableView = (
+  {
+    queryId,
+    queries,
+    resultRowComponent: ResultRow = ResultRowView,
+    getResultRowComponentProps,
+    separator,
+    debugIds,
+  },
+  rowIds,
+) =>
   wrap(
-    arrayMap(useSliceIds(indexId, indexes), (sliceId) =>
+    arrayMap(rowIds, (rowId) =>
       /* @__PURE__ */ jsx(
-        Slice,
+        ResultRow,
         {
-          ...getProps(getSliceComponentProps, sliceId),
-          indexId,
-          sliceId,
-          indexes,
+          ...getProps(getResultRowComponentProps, rowId),
+          queryId,
+          rowId,
+          queries,
           debugIds,
         },
-        sliceId,
+        rowId,
       ),
     ),
     separator,
     debugIds,
-    indexId,
+    queryId,
   );
-const RemoteRowView = ({
-  relationshipId,
-  localRowId,
-  relationships,
-  rowComponent: Row = RowView,
-  getRowComponentProps,
-  debugIds,
-}) => {
-  const [resolvedRelationships, store, , remoteTableId] =
+const useComponentPerRow = (
+  {
+    relationshipId,
+    relationships,
+    rowComponent: Row = RowView,
+    getRowComponentProps,
+    separator,
+    debugIds,
+  },
+  getRowIdsHook,
+  rowId,
+) => {
+  const [resolvedRelationships, store, localTableId] =
     getRelationshipsStoreTableIds(
       useRelationshipsOrRelationshipsById(relationships),
       relationshipId,
     );
-  const rowId = useRemoteRowId(
-    relationshipId,
-    localRowId,
-    resolvedRelationships,
-  );
+  const rowIds = getRowIdsHook(relationshipId, rowId, resolvedRelationships);
   return wrap(
-    isUndefined(remoteTableId) || isUndefined(rowId)
-      ? null
-      : /* @__PURE__ */ jsx(
-          Row,
-          {
-            ...getProps(getRowComponentProps, rowId),
-            tableId: remoteTableId,
-            rowId,
-            store,
-            debugIds,
-          },
-          rowId,
-        ),
-    void 0,
-    debugIds,
-    localRowId,
-  );
-};
-const LocalRowsView = (props) =>
-  useComponentPerRow(props, useLocalRowIds, props.remoteRowId);
-const LinkedRowsView = (props) =>
-  useComponentPerRow(props, useLinkedRowIds, props.firstRowId);
-const ResultCellView = ({queryId, rowId, cellId, queries, debugIds}) =>
-  wrap(
-    EMPTY_STRING +
-      (useResultCell(queryId, rowId, cellId, queries) ?? EMPTY_STRING),
-    void 0,
-    debugIds,
-    cellId,
-  );
-const ResultRowView = ({
-  queryId,
-  rowId,
-  queries,
-  resultCellComponent: ResultCell = ResultCellView,
-  getResultCellComponentProps,
-  separator,
-  debugIds,
-}) =>
-  wrap(
-    arrayMap(useResultCellIds(queryId, rowId, queries), (cellId) =>
+    arrayMap(rowIds, (rowId2) =>
       /* @__PURE__ */ jsx(
-        ResultCell,
+        Row,
         {
-          ...getProps(getResultCellComponentProps, cellId),
-          queryId,
-          rowId,
-          cellId,
-          queries,
+          ...getProps(getRowComponentProps, rowId2),
+          tableId: localTableId,
+          rowId: rowId2,
+          store,
           debugIds,
         },
-        cellId,
+        rowId2,
       ),
     ),
     separator,
     debugIds,
     rowId,
   );
-const ResultTableView = (props) =>
-  resultTableView(props, useResultRowIds(props.queryId, props.queries));
-const ResultSortedTableView = ({cellId, descending, offset, limit, ...props}) =>
-  resultTableView(
-    props,
-    useResultSortedRowIds(
-      props.queryId,
-      cellId,
-      descending,
-      offset,
-      limit,
-      props.queries,
-    ),
-  );
-const CheckpointView = ({checkpoints, checkpointId, debugIds}) =>
-  wrap(
-    useCheckpoint(checkpointId, checkpoints) ?? EMPTY_STRING,
-    void 0,
+};
+const getUseCheckpointView =
+  (getCheckpoints) =>
+  ({
+    checkpoints,
+    checkpointComponent: Checkpoint = CheckpointView,
+    getCheckpointComponentProps,
+    separator,
     debugIds,
-    checkpointId,
-  );
+  }) => {
+    const resolvedCheckpoints = useCheckpointsOrCheckpointsById(checkpoints);
+    return wrap(
+      arrayMap(
+        getCheckpoints(useCheckpointIds(resolvedCheckpoints)),
+        (checkpointId) =>
+          /* @__PURE__ */ jsx(
+            Checkpoint,
+            {
+              ...getProps(getCheckpointComponentProps, checkpointId),
+              checkpoints: resolvedCheckpoints,
+              checkpointId,
+              debugIds,
+            },
+            checkpointId,
+          ),
+      ),
+      separator,
+    );
+  };
+
 const BackwardCheckpointsView = getUseCheckpointView(
   (checkpointIds) => checkpointIds[0],
 );
+
 const CurrentCheckpointView = getUseCheckpointView((checkpointIds) =>
   isUndefined(checkpointIds[1]) ? [] : [checkpointIds[1]],
 );
+
 const ForwardCheckpointsView = getUseCheckpointView(
   (checkpointIds) => checkpointIds[2],
 );
 
-const EDITABLE = 'editable';
-const LEFT_ARROW = '\u2190';
-const UP_ARROW = '\u2191';
-const RIGHT_ARROW = '\u2192';
-const DOWN_ARROW = '\u2193';
-const useDottedCellIds = (tableId, store) =>
-  arrayMap(useTableCellIds(tableId, store), (cellId) => tableId + DOT + cellId);
-const useCallbackOrUndefined = (callback, deps, test) => {
-  const returnCallback = useCallback(callback, deps);
-  return test ? returnCallback : void 0;
-};
-const useParams = (...args) =>
-  useMemo(
-    () => args,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    args,
-  );
-const useStoreCellComponentProps = (store, tableId) =>
-  useMemo(() => ({store, tableId}), [store, tableId]);
-const useQueriesCellComponentProps = (queries, queryId) =>
-  useMemo(() => ({queries, queryId}), [queries, queryId]);
-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 SliceView$1 = ({
+  indexId,
+  sliceId,
+  indexes,
+  rowComponent: Row = RowView,
+  getRowComponentProps,
+  separator,
+  debugIds,
+}) => {
+  const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
+    useIndexesOrIndexesById(indexes),
+    indexId,
   );
-  const PaginatorComponent =
-    paginator === true ? SortedTablePaginator : paginator;
-  return [
-    [currentCellId, currentDescending, currentOffset],
-    handleSort,
-    useMemo(
-      () =>
-        paginator === false
-          ? null
-          : /* @__PURE__ */ jsx(PaginatorComponent, {
-              offset: currentOffset,
-              limit,
-              total,
-              onChange: handleChangeOffset,
-            }),
-      [
-        paginator,
-        PaginatorComponent,
-        currentOffset,
-        limit,
-        total,
-        handleChangeOffset,
-      ],
+  const rowIds = useSliceRowIds(indexId, sliceId, resolvedIndexes);
+  return wrap(
+    arrayMap(rowIds, (rowId) =>
+      /* @__PURE__ */ jsx(
+        Row,
+        {
+          ...getProps(getRowComponentProps, rowId),
+          tableId,
+          rowId,
+          store,
+          debugIds,
+        },
+        rowId,
+      ),
     ),
-  ];
+    separator,
+    debugIds,
+    sliceId,
+  );
 };
-const useCells = (defaultCellIds, customCells, defaultCellComponent) =>
-  useMemo(() => {
-    const cellIds = customCells ?? defaultCellIds;
-    return objMap(
-      isArray(cellIds)
-        ? objNew(arrayMap(cellIds, (cellId) => [cellId, cellId]))
-        : cellIds,
-      (labelOrCustomCell, cellId) => ({
-        ...{label: cellId, component: defaultCellComponent},
-        ...(isString(labelOrCustomCell)
-          ? {label: labelOrCustomCell}
-          : labelOrCustomCell),
-      }),
-    );
-  }, [customCells, defaultCellComponent, defaultCellIds]);
-const HtmlTable = ({
-  className,
-  headerRow,
-  idColumn,
-  params: [
-    cells,
-    cellComponentProps,
-    rowIds,
-    sortAndOffset,
-    handleSort,
-    paginatorComponent,
-  ],
-}) =>
-  /* @__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',
-            {
-              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,
-                    ),
-                ),
-              ],
-            },
+
+const IndexView$1 = ({
+  indexId,
+  indexes,
+  sliceComponent: Slice = SliceView$1,
+  getSliceComponentProps,
+  separator,
+  debugIds,
+}) =>
+  wrap(
+    arrayMap(useSliceIds(indexId, indexes), (sliceId) =>
+      /* @__PURE__ */ jsx(
+        Slice,
+        {
+          ...getProps(getSliceComponentProps, sliceId),
+          indexId,
+          sliceId,
+          indexes,
+          debugIds,
+        },
+        sliceId,
+      ),
+    ),
+    separator,
+    debugIds,
+    indexId,
+  );
+
+const LinkedRowsView = (props) =>
+  useComponentPerRow(props, useLinkedRowIds, props.firstRowId);
+
+const LocalRowsView = (props) =>
+  useComponentPerRow(props, useLocalRowIds, props.remoteRowId);
+
+const MetricView = ({metricId, metrics, debugIds}) =>
+  wrap(
+    useMetric(metricId, metrics) ?? EMPTY_STRING,
+    void 0,
+    debugIds,
+    metricId,
+  );
+
+const RemoteRowView = ({
+  relationshipId,
+  localRowId,
+  relationships,
+  rowComponent: Row = RowView,
+  getRowComponentProps,
+  debugIds,
+}) => {
+  const [resolvedRelationships, store, , remoteTableId] =
+    getRelationshipsStoreTableIds(
+      useRelationshipsOrRelationshipsById(relationships),
+      relationshipId,
+    );
+  const rowId = useRemoteRowId(
+    relationshipId,
+    localRowId,
+    resolvedRelationships,
+  );
+  return wrap(
+    isUndefined(remoteTableId) || isUndefined(rowId)
+      ? null
+      : /* @__PURE__ */ jsx(
+          Row,
+          {
+            ...getProps(getRowComponentProps, rowId),
+            tableId: remoteTableId,
             rowId,
-          ),
+            store,
+            debugIds,
+          },
+          rowId,
         ),
-      }),
-    ],
-  });
-const HtmlHeaderCell = ({
-  cellId,
-  sort: [sortCellId, sortDescending],
-  label = cellId ?? EMPTY_STRING,
-  onClick,
+    void 0,
+    debugIds,
+    localRowId,
+  );
+};
+
+const ResultSortedTableView = ({cellId, descending, offset, limit, ...props}) =>
+  resultTableView(
+    props,
+    useResultSortedRowIds(
+      props.queryId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      props.queries,
+    ),
+  );
+
+const ResultTableView = (props) =>
+  resultTableView(props, useResultRowIds(props.queryId, props.queries));
+
+const SortedTableView = ({cellId, descending, offset, limit, ...props}) =>
+  tableView(
+    props,
+    useSortedRowIds(
+      props.tableId,
+      cellId,
+      descending,
+      offset,
+      limit,
+      props.store,
+    ),
+  );
+
+const TableView$1 = (props) =>
+  tableView(props, useRowIds(props.tableId, props.store));
+
+const TablesView$1 = ({
+  store,
+  tableComponent: Table = TableView$1,
+  getTableComponentProps,
+  separator,
+  debugIds,
 }) =>
-  /* @__PURE__ */ jsxs('th', {
-    onClick: useCallbackOrUndefined(
-      () => onClick?.(cellId),
-      [onClick, cellId],
-      onClick,
+  wrap(
+    arrayMap(useTableIds(store), (tableId) =>
+      /* @__PURE__ */ jsx(
+        Table,
+        {
+          ...getProps(getTableComponentProps, tableId),
+          tableId,
+          store,
+          debugIds,
+        },
+        tableId,
+      ),
     ),
-    className:
-      isUndefined(sortDescending) || sortCellId != cellId
-        ? void 0
-        : `sorted ${sortDescending ? 'de' : 'a'}scending`,
-    children: [
-      isUndefined(sortDescending) || sortCellId != cellId
-        ? null
-        : (sortDescending ? DOWN_ARROW : UP_ARROW) + ' ',
-      label,
-    ],
-  });
+    separator,
+  );
+
+const ValueView = ({valueId, store, debugIds}) =>
+  wrap(
+    EMPTY_STRING + (useValue(valueId, store) ?? EMPTY_STRING),
+    void 0,
+    debugIds,
+    valueId,
+  );
+
+const ValuesView$1 = ({
+  store,
+  valueComponent: Value = ValueView,
+  getValueComponentProps,
+  separator,
+  debugIds,
+}) =>
+  wrap(
+    arrayMap(useValueIds(store), (valueId) =>
+      /* @__PURE__ */ jsx(
+        Value,
+        {
+          ...getProps(getValueComponentProps, valueId),
+          valueId,
+          store,
+          debugIds,
+        },
+        valueId,
+      ),
+    ),
+    separator,
+  );
+
+const useDottedCellIds = (tableId, store) =>
+  arrayMap(useTableCellIds(tableId, store), (cellId) => tableId + DOT + cellId);
 const RelationshipInHtmlRow = ({
   localRowId,
   params: [
@@ -9257,17 +9489,31 @@ const RelationshipInHtmlRow = ({
     relationshipId,
     relationships,
     store,
+    extraCellsBefore,
+    extraCellsAfter,
   ],
 }) => {
   const remoteRowId = useRemoteRowId(relationshipId, localRowId, relationships);
+  const rowProps = {
+    tableId: localTableId ?? '',
+    rowId: localRowId,
+    store,
+  };
   return /* @__PURE__ */ jsxs('tr', {
     children: [
+      extraRowCells(extraCellsBefore, rowProps),
       idColumn === false
         ? null
         : /* @__PURE__ */ jsxs(Fragment, {
             children: [
-              /* @__PURE__ */ jsx('th', {children: localRowId}),
-              /* @__PURE__ */ jsx('th', {children: remoteRowId}),
+              /* @__PURE__ */ jsx('th', {
+                title: localRowId,
+                children: localRowId,
+              }),
+              /* @__PURE__ */ jsx('th', {
+                title: remoteRowId,
+                children: remoteRowId,
+              }),
             ],
           }),
       objToArray(
@@ -9297,145 +9543,215 @@ const RelationshipInHtmlRow = ({
               );
         },
       ),
+      extraRowCells(extraCellsAfter, rowProps, 1),
+    ],
+  });
+};
+const RelationshipInHtmlTable = ({
+  relationshipId,
+  relationships,
+  editable,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  className,
+  headerRow,
+  idColumn = true,
+}) => {
+  const [resolvedRelationships, store, localTableId, remoteTableId] =
+    getRelationshipsStoreTableIds(
+      useRelationshipsOrRelationshipsById(relationships),
+      relationshipId,
+    );
+  const cells = useCells(
+    [
+      ...useDottedCellIds(localTableId, store),
+      ...useDottedCellIds(remoteTableId, store),
+    ],
+    customCells,
+    editable ? EditableCellView : CellView,
+  );
+  const params = useParams(
+    idColumn,
+    cells,
+    localTableId,
+    remoteTableId,
+    relationshipId,
+    resolvedRelationships,
+    store,
+    extraCellsBefore,
+    extraCellsAfter,
+  );
+  return /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                extraHeaders(extraCellsBefore),
+                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),
+                ),
+                extraHeaders(extraCellsAfter, 1),
+              ],
+            }),
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useRowIds(localTableId, store), (localRowId) =>
+          /* @__PURE__ */ jsx(
+            RelationshipInHtmlRow,
+            {
+              localRowId,
+              params,
+            },
+            localRowId,
+          ),
+        ),
+      }),
     ],
   });
 };
-const EditableThing = ({
-  thing,
-  onThingChange,
-  className,
-  hasSchema,
-  showType = true,
+
+const LEFT_ARROW = '\u2190';
+const RIGHT_ARROW = '\u2192';
+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__ */ jsx(PaginatorComponent, {
+              offset: currentOffset,
+              limit,
+              total,
+              onChange: handleChangeOffset,
+            }),
+      [
+        paginator,
+        PaginatorComponent,
+        currentOffset,
+        limit,
+        total,
+        handleChangeOffset,
+      ],
+    ),
+  ];
+};
+const SortedTablePaginator = ({
+  onChange,
+  total,
+  offset = 0,
+  limit = total,
+  singular = 'row',
+  plural = singular + 's',
 }) => {
-  const [thingType, setThingType] = useState();
-  const [currentThing, setCurrentThing] = useState();
-  const [stringThing, setStringThing] = useState();
-  const [numberThing, setNumberThing] = useState();
-  const [booleanThing, setBooleanThing] = useState();
-  if (currentThing !== thing) {
-    setThingType(getCellOrValueType(thing));
-    setCurrentThing(thing);
-    setStringThing(String(thing));
-    setNumberThing(Number(thing) || 0);
-    setBooleanThing(Boolean(thing));
+  if (offset > total || offset < 0) {
+    offset = 0;
+    onChange(0);
   }
-  const handleThingChange = useCallback(
-    (thing2, setTypedThing) => {
-      setTypedThing(thing2);
-      setCurrentThing(thing2);
-      onThingChange(thing2);
-    },
-    [onThingChange],
+  const handlePrevClick = useCallbackOrUndefined(
+    () => onChange(offset - limit),
+    [onChange, offset, limit],
+    offset > 0,
   );
-  const handleTypeChange = useCallback(() => {
-    if (!hasSchema?.()) {
-      const nextType = getTypeCase(thingType, NUMBER, BOOLEAN, STRING);
-      const thing2 = getTypeCase(
-        nextType,
-        stringThing,
-        numberThing,
-        booleanThing,
-      );
-      setThingType(nextType);
-      setCurrentThing(thing2);
-      onThingChange(thing2);
-    }
-  }, [
-    hasSchema,
-    onThingChange,
-    stringThing,
-    numberThing,
-    booleanThing,
-    thingType,
-  ]);
-  return /* @__PURE__ */ jsxs('div', {
-    className,
+  const handleNextClick = useCallbackOrUndefined(
+    () => onChange(offset + limit),
+    [onChange, offset, limit],
+    offset + limit < total,
+  );
+  return /* @__PURE__ */ jsxs(Fragment, {
     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],
-            ),
-          },
-          thingType,
-        ),
-        /* @__PURE__ */ jsx(
-          'input',
-          {
-            type: 'number',
-            value: numberThing,
-            onChange: useCallback(
-              (event) =>
-                handleThingChange(
-                  Number(event[CURRENT_TARGET][_VALUE] || 0),
-                  setNumberThing,
-                ),
-              [handleThingChange],
-            ),
-          },
-          thingType,
-        ),
-        /* @__PURE__ */ jsx(
-          'input',
-          {
-            type: 'checkbox',
-            checked: booleanThing,
-            onChange: useCallback(
-              (event) =>
-                handleThingChange(
-                  Boolean(event[CURRENT_TARGET].checked),
-                  setBooleanThing,
-                ),
-              [handleThingChange],
-            ),
-          },
-          thingType,
-        ),
-      ),
+      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 TableInHtmlTable = ({tableId, store, editable, customCells, ...props}) =>
-  /* @__PURE__ */ jsx(HtmlTable, {
-    ...props,
-    params: useParams(
-      useCells(
-        useTableCellIds(tableId, store),
-        customCells,
-        editable ? EditableCellView : CellView,
-      ),
-      useStoreCellComponentProps(store, tableId),
-      useRowIds(tableId, store),
-    ),
-  });
-const SortedTableInHtmlTable = ({
-  tableId,
+
+const ResultSortedTableInHtmlTable = ({
+  queryId,
   cellId,
   descending,
   offset,
   limit,
-  store,
-  editable,
+  queries,
   sortOnClick,
   paginator = false,
-  onChange,
   customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  onChange,
   ...props
 }) => {
   const [sortAndOffset, handleSort, paginatorComponent] =
@@ -9445,7 +9761,7 @@ const SortedTableInHtmlTable = ({
       sortOnClick,
       offset,
       limit,
-      useRowCount(tableId, store),
+      useResultRowCount(queryId, queries),
       paginator,
       onChange,
     );
@@ -9453,72 +9769,52 @@ const SortedTableInHtmlTable = ({
     ...props,
     params: useParams(
       useCells(
-        useTableCellIds(tableId, store),
+        useResultTableCellIds(queryId, queries),
         customCells,
-        editable ? EditableCellView : CellView,
+        ResultCellView,
       ),
-      useStoreCellComponentProps(store, tableId),
-      useSortedRowIds(tableId, ...sortAndOffset, limit, store),
+      useQueriesCellComponentProps(queries, queryId),
+      useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
+      extraCellsBefore,
+      extraCellsAfter,
       sortAndOffset,
       handleSort,
       paginatorComponent,
     ),
   });
-};
-const ValuesInHtmlTable = ({
-  store,
-  editable = false,
-  valueComponent: Value = editable ? EditableValueView : ValueView,
-  getValueComponentProps,
-  className,
-  headerRow,
-  idColumn,
-}) =>
-  /* @__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 ResultTableInHtmlTable = ({
+  queryId,
+  queries,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  ...props
+}) =>
+  /* @__PURE__ */ jsx(HtmlTable, {
+    ...props,
+    params: useParams(
+      useCells(
+        useResultTableCellIds(queryId, queries),
+        customCells,
+        ResultCellView,
+      ),
+      useQueriesCellComponentProps(queries, queryId),
+      useResultRowIds(queryId, queries),
+      extraCellsBefore,
+      extraCellsAfter,
+    ),
   });
+
 const SliceInHtmlTable = ({
   indexId,
   sliceId,
   indexes,
   editable,
   customCells,
+  extraCellsBefore,
+  extraCellsAfter,
   ...props
 }) => {
   const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
@@ -9535,105 +9831,26 @@ const SliceInHtmlTable = ({
       ),
       useStoreCellComponentProps(store, tableId),
       useSliceRowIds(indexId, sliceId, resolvedIndexes),
+      extraCellsBefore,
+      extraCellsAfter,
     ),
   });
 };
-const RelationshipInHtmlTable = ({
-  relationshipId,
-  relationships,
-  editable,
-  customCells,
-  className,
-  headerRow,
-  idColumn = true,
-}) => {
-  const [resolvedRelationships, store, localTableId, remoteTableId] =
-    getRelationshipsStoreTableIds(
-      useRelationshipsOrRelationshipsById(relationships),
-      relationshipId,
-    );
-  const cells = useCells(
-    [
-      ...useDottedCellIds(localTableId, store),
-      ...useDottedCellIds(remoteTableId, store),
-    ],
-    customCells,
-    editable ? EditableCellView : CellView,
-  );
-  const params = useParams(
-    idColumn,
-    cells,
-    localTableId,
-    remoteTableId,
-    relationshipId,
-    resolvedRelationships,
-    store,
-  );
-  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),
-                ),
-              ],
-            }),
-          }),
-      /* @__PURE__ */ jsx('tbody', {
-        children: arrayMap(useRowIds(localTableId, store), (localRowId) =>
-          /* @__PURE__ */ jsx(
-            RelationshipInHtmlRow,
-            {
-              localRowId,
-              params,
-            },
-            localRowId,
-          ),
-        ),
-      }),
-    ],
-  });
-};
-const ResultTableInHtmlTable = ({queryId, queries, customCells, ...props}) =>
-  /* @__PURE__ */ jsx(HtmlTable, {
-    ...props,
-    params: useParams(
-      useCells(
-        useResultTableCellIds(queryId, queries),
-        customCells,
-        ResultCellView,
-      ),
-      useQueriesCellComponentProps(queries, queryId),
-      useResultRowIds(queryId, queries),
-    ),
-  });
-const ResultSortedTableInHtmlTable = ({
-  queryId,
+
+const SortedTableInHtmlTable = ({
+  tableId,
   cellId,
   descending,
   offset,
   limit,
-  queries,
+  store,
+  editable,
   sortOnClick,
   paginator = false,
-  customCells,
   onChange,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
   ...props
 }) => {
   const [sortAndOffset, handleSort, paginatorComponent] =
@@ -9643,7 +9860,7 @@ const ResultSortedTableInHtmlTable = ({
       sortOnClick,
       offset,
       limit,
-      useResultRowCount(queryId, queries),
+      useRowCount(tableId, store),
       paginator,
       onChange,
     );
@@ -9651,99 +9868,117 @@ const ResultSortedTableInHtmlTable = ({
     ...props,
     params: useParams(
       useCells(
-        useResultTableCellIds(queryId, queries),
+        useTableCellIds(tableId, store),
         customCells,
-        ResultCellView,
+        editable ? EditableCellView : CellView,
       ),
-      useQueriesCellComponentProps(queries, queryId),
-      useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
+      useStoreCellComponentProps(store, tableId),
+      useSortedRowIds(tableId, ...sortAndOffset, limit, store),
+      extraCellsBefore,
+      extraCellsAfter,
       sortAndOffset,
       handleSort,
       paginatorComponent,
     ),
   });
 };
-const EditableCellView = ({
+
+const TableInHtmlTable = ({
   tableId,
-  rowId,
-  cellId,
   store,
-  className,
-  showType,
+  editable,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  ...props
 }) =>
-  /* @__PURE__ */ jsx(EditableThing, {
-    thing: useCell(tableId, rowId, cellId, store),
-    onThingChange: useSetCellCallback(
-      tableId,
-      rowId,
-      cellId,
-      (cell) => cell,
-      [],
-      store,
+  /* @__PURE__ */ jsx(HtmlTable, {
+    ...props,
+    params: useParams(
+      useCells(
+        useTableCellIds(tableId, store),
+        customCells,
+        editable ? EditableCellView : CellView,
+      ),
+      useStoreCellComponentProps(store, tableId),
+      useRowIds(tableId, store),
+      extraCellsBefore,
+      extraCellsAfter,
     ),
-    className: className ?? EDITABLE + CELL,
-    showType,
-    hasSchema: useStoreOrStoreById(store)?.hasTablesSchema,
-  });
-const EditableValueView = ({valueId, store, className, showType}) =>
-  /* @__PURE__ */ jsx(EditableThing, {
-    thing: useValue(valueId, store),
-    onThingChange: useSetValueCallback(valueId, (value) => value, [], store),
-    className: className ?? EDITABLE + VALUE,
-    showType,
-    hasSchema: useStoreOrStoreById(store)?.hasValuesSchema,
   });
-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,
+
+const extraValueCells = (
+  extraValueCells2 = [],
+  extraValueCellProps,
+  after = 0,
+) =>
+  arrayMap(extraValueCells2, ({component: Component}, index) =>
+    /* @__PURE__ */ jsx(
+      'td',
+      {
+        className: EXTRA,
+        children: /* @__PURE__ */ jsx(Component, {...extraValueCellProps}),
+      },
+      extraKey(index, after),
+    ),
   );
-  return /* @__PURE__ */ jsxs(Fragment, {
+const ValuesInHtmlTable = ({
+  store,
+  editable = false,
+  valueComponent: Value = editable ? EditableValueView : ValueView,
+  getValueComponentProps,
+  extraCellsBefore,
+  extraCellsAfter,
+  className,
+  headerRow,
+  idColumn,
+}) =>
+  /* @__PURE__ */ jsxs('table', {
+    className,
     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,
+      headerRow === false
+        ? null
+        : /* @__PURE__ */ jsx('thead', {
+            children: /* @__PURE__ */ jsxs('tr', {
+              children: [
+                extraHeaders(extraCellsBefore),
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {children: 'Id'}),
+                /* @__PURE__ */ jsx('th', {children: VALUE}),
+                extraHeaders(extraCellsAfter, 1),
+              ],
             }),
-            offset + 1,
-            ' to ',
-            mathMin(total, offset + limit),
-            ' of ',
-          ],
+          }),
+      /* @__PURE__ */ jsx('tbody', {
+        children: arrayMap(useValueIds(store), (valueId) => {
+          const valueProps = {valueId, store};
+          return /* @__PURE__ */ jsxs(
+            'tr',
+            {
+              children: [
+                extraValueCells(extraCellsBefore, valueProps),
+                idColumn === false
+                  ? null
+                  : /* @__PURE__ */ jsx('th', {
+                      title: valueId,
+                      children: valueId,
+                    }),
+                /* @__PURE__ */ jsx('td', {
+                  children: /* @__PURE__ */ jsx(Value, {
+                    ...getProps(getValueComponentProps, valueId),
+                    ...valueProps,
+                  }),
+                }),
+                extraValueCells(extraCellsAfter, valueProps, 1),
+              ],
+            },
+            valueId,
+          );
         }),
-      total,
-      ' ',
-      total != 1 ? plural : singular,
+      }),
     ],
   });
-};
 
 const UNIQUE_ID = 'tinybaseInspector';
 const TITLE = 'TinyBase Inspector';
@@ -9777,16 +10012,9 @@ const Nub = ({s}) => {
         title: TITLE,
         'data-position': position,
       });
-};
-
-const Details = ({
-  uniqueId,
-  summary,
-  editable,
-  handleEditable,
-  children,
-  s,
-}) => {
+};
+
+const Details = ({uniqueId, title, editable, handleEditable, children, s}) => {
   const open = !!useCell(STATE_TABLE, uniqueId, OPEN_CELL, s);
   const handleToggle = useSetCellCallback(
     STATE_TABLE,
@@ -9802,16 +10030,17 @@ const Details = ({
     children: [
       /* @__PURE__ */ jsxs('summary', {
         children: [
-          summary,
+          /* @__PURE__ */ jsx('span', {children: title}),
           handleEditable
             ? /* @__PURE__ */ jsx('img', {
                 onClick: handleEditable,
                 className: editable ? 'done' : 'edit',
+                title: editable ? 'Done editing' : 'Edit',
               })
             : null,
         ],
       }),
-      children,
+      /* @__PURE__ */ jsx('div', {children}),
     ],
   });
 };
@@ -9819,7 +10048,7 @@ const Details = ({
 const IndexView = ({indexes, indexesId, indexId, s}) =>
   /* @__PURE__ */ jsx(Details, {
     uniqueId: getUniqueId('i', indexesId, indexId),
-    summary: 'Index: ' + indexId,
+    title: 'Index: ' + indexId,
     s,
     children: arrayMap(useSliceIds(indexId, indexes), (sliceId) =>
       /* @__PURE__ */ jsx(
@@ -9840,7 +10069,7 @@ const SliceView = ({indexes, indexesId, indexId, sliceId, s}) => {
   const [editable, handleEditable] = useEditable(uniqueId, s);
   return /* @__PURE__ */ jsx(Details, {
     uniqueId,
-    summary: 'Slice: ' + sliceId,
+    title: 'Slice: ' + sliceId,
     editable,
     handleEditable,
     s,
@@ -9859,7 +10088,7 @@ const IndexesView = ({indexesId, s}) => {
     ? null
     : /* @__PURE__ */ jsx(Details, {
         uniqueId: getUniqueId('i', indexesId),
-        summary: 'Indexes: ' + (indexesId ?? DEFAULT),
+        title: 'Indexes: ' + (indexesId ?? DEFAULT),
         s,
         children: arrayIsEmpty(indexIds)
           ? 'No indexes defined'
@@ -9881,7 +10110,7 @@ const IndexesView = ({indexesId, s}) => {
 const MetricRow = ({metrics, metricId}) =>
   /* @__PURE__ */ jsxs('tr', {
     children: [
-      /* @__PURE__ */ jsx('th', {children: metricId}),
+      /* @__PURE__ */ jsx('th', {title: metricId, children: metricId}),
       /* @__PURE__ */ jsx('td', {children: metrics?.getTableId(metricId)}),
       /* @__PURE__ */ jsx('td', {children: useMetric(metricId, metrics)}),
     ],
@@ -9893,7 +10122,7 @@ const MetricsView = ({metricsId, s}) => {
     ? null
     : /* @__PURE__ */ jsx(Details, {
         uniqueId: getUniqueId('m', metricsId),
-        summary: 'Metrics: ' + (metricsId ?? DEFAULT),
+        title: 'Metrics: ' + (metricsId ?? DEFAULT),
         s,
         children: arrayIsEmpty(metricIds)
           ? 'No metrics defined'
@@ -9935,7 +10164,7 @@ const QueryView = ({queries, queriesId, queryId, s}) => {
   );
   return /* @__PURE__ */ jsx(Details, {
     uniqueId,
-    summary: 'Query: ' + queryId,
+    title: 'Query: ' + queryId,
     s,
     children: /* @__PURE__ */ jsx(ResultSortedTableInHtmlTable, {
       queryId,
@@ -9957,7 +10186,7 @@ const QueriesView = ({queriesId, s}) => {
     ? null
     : /* @__PURE__ */ jsx(Details, {
         uniqueId: getUniqueId('q', queriesId),
-        summary: 'Queries: ' + (queriesId ?? DEFAULT),
+        title: 'Queries: ' + (queriesId ?? DEFAULT),
         s,
         children: arrayIsEmpty(queryIds)
           ? 'No queries defined'
@@ -9986,7 +10215,7 @@ const RelationshipView = ({
   const [editable, handleEditable] = useEditable(uniqueId, s);
   return /* @__PURE__ */ jsx(Details, {
     uniqueId,
-    summary: 'Relationship: ' + relationshipId,
+    title: 'Relationship: ' + relationshipId,
     editable,
     handleEditable,
     s,
@@ -10004,7 +10233,7 @@ const RelationshipsView = ({relationshipsId, s}) => {
     ? null
     : /* @__PURE__ */ jsx(Details, {
         uniqueId: getUniqueId('r', relationshipsId),
-        summary: 'Relationships: ' + (relationshipsId ?? DEFAULT),
+        title: 'Relationships: ' + (relationshipsId ?? DEFAULT),
         s,
         children: arrayIsEmpty(relationshipIds)
           ? 'No relationships defined'
@@ -10023,6 +10252,312 @@ const RelationshipsView = ({relationshipsId, s}) => {
       });
 };
 
+const getNewIdFromSuggestedId = (suggestedId, has) => {
+  let newId;
+  let suffix = 0;
+  while (
+    has(
+      (newId =
+        suggestedId +
+        (suffix > 0 ? ' (copy' + (suffix > 1 ? ' ' + suffix : '') + ')' : '')),
+    )
+  ) {
+    suffix++;
+  }
+  return newId;
+};
+const ConfirmableActions = ({actions, ...props}) => {
+  const [confirming, setConfirming] = useState();
+  const handleDone = useCallback(() => setConfirming(null), []);
+  useEffect(() => {
+    if (confirming != null) {
+      const handleKeyDown = (e) => {
+        if (confirming != null && e.key === 'Escape') {
+          e.preventDefault();
+          handleDone();
+        }
+      };
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [confirming, handleDone]);
+  if (confirming != null) {
+    const [, , Component] = actions[confirming];
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(Component, {onDone: handleDone, ...props}),
+        /* @__PURE__ */ jsx('img', {
+          onClick: handleDone,
+          title: 'Cancel',
+          className: 'cancel',
+        }),
+      ],
+    });
+  } else {
+    return actions.map(([icon, title], index) =>
+      /* @__PURE__ */ jsx(
+        'img',
+        {
+          title,
+          className: icon,
+          onClick: () => setConfirming(index),
+        },
+        index,
+      ),
+    );
+  }
+};
+const NewId = ({onDone, suggestedId, has, set, prompt = 'New Id'}) => {
+  const [newId, setNewId] = useState(suggestedId);
+  const [newIdOk, setNewIdOk] = useState(true);
+  const [previousSuggestedId, setPreviousSuggestedNewId] =
+    useState(suggestedId);
+  const handleNewIdChange = (e) => {
+    setNewId(e.target.value);
+    setNewIdOk(!has(e.target.value));
+  };
+  const handleClick = useCallback(() => {
+    if (has(newId)) {
+      setNewIdOk(false);
+    } else {
+      set(newId);
+      onDone();
+    }
+  }, [onDone, setNewIdOk, has, set, newId]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleClick();
+      }
+    },
+    [handleClick],
+  );
+  if (suggestedId != previousSuggestedId) {
+    setNewId(suggestedId);
+    setPreviousSuggestedNewId(suggestedId);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      prompt + ': ',
+      /* @__PURE__ */ jsx('input', {
+        type: 'text',
+        value: newId,
+        onChange: handleNewIdChange,
+        onKeyDown: handleKeyDown,
+        autoFocus: true,
+      }),
+      ' ',
+      /* @__PURE__ */ jsx('img', {
+        onClick: handleClick,
+        title: newIdOk ? 'Confirm' : 'Id already exists',
+        className: newIdOk ? 'ok' : 'okDis',
+      }),
+    ],
+  });
+};
+const Delete = ({onClick, prompt = 'Delete'}) => {
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClick();
+      }
+    },
+    [onClick],
+  );
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      prompt,
+      '? ',
+      /* @__PURE__ */ jsx('img', {onClick, title: 'Confirm', className: 'ok'}),
+    ],
+  });
+};
+const Actions = ({left, right}) =>
+  /* @__PURE__ */ jsxs('div', {
+    className: 'actions',
+    children: [
+      /* @__PURE__ */ jsx('div', {children: left}),
+      /* @__PURE__ */ jsx('div', {children: right}),
+    ],
+  });
+
+const useHasTableCallback = (storeOrStoreId) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback((tableId) => store?.hasTable(tableId) ?? false, [store]);
+};
+const AddTable = ({onDone, store}) => {
+  const has = useHasTableCallback(store);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId('table', has),
+    has,
+    set: useSetTableCallback(
+      (newId) => newId,
+      () => ({row: {cell: ''}}),
+      [],
+      store,
+    ),
+    prompt: 'Add table',
+  });
+};
+const DeleteTables = ({onDone, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelTablesCallback(store, onDone),
+    prompt: 'Delete all tables',
+  });
+const TablesActions = ({store}) =>
+  /* @__PURE__ */ jsx(Actions, {
+    left: /* @__PURE__ */ jsx(ConfirmableActions, {
+      actions: [['add', 'Add table', AddTable]],
+      store,
+    }),
+    right: useHasTables(store)
+      ? /* @__PURE__ */ jsx(ConfirmableActions, {
+          actions: [['delete', 'Delete all tables', DeleteTables]],
+          store,
+        })
+      : null,
+  });
+const AddRow = ({onDone, tableId, store}) => {
+  const has = useHasRowCallback(store, tableId);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId('row', has),
+    has,
+    set: useSetRowCallback(
+      tableId,
+      (newId) => newId,
+      (_, store2) =>
+        objNew(
+          arrayMap(store2.getTableCellIds(tableId), (cellId) => [cellId, '']),
+        ),
+    ),
+    prompt: 'Add row',
+  });
+};
+const CloneTable = ({onDone, tableId, store: storeOrStoreId}) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  const has = useHasTableCallback(store);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId(tableId, has),
+    has,
+    set: useSetTableCallback(
+      (tableId2) => tableId2,
+      (_, store2) => store2.getTable(tableId),
+    ),
+    prompt: 'Clone table to',
+  });
+};
+const DeleteTable = ({onDone, tableId, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelTableCallback(tableId, store, onDone),
+    prompt: 'Delete table',
+  });
+const TableActions1 = ({tableId, store}) =>
+  /* @__PURE__ */ jsx(ConfirmableActions, {
+    actions: [['add', 'Add row', AddRow]],
+    store,
+    tableId,
+  });
+const TableActions2 = ({tableId, store}) =>
+  /* @__PURE__ */ jsx(ConfirmableActions, {
+    actions: [
+      ['clone', 'Clone table', CloneTable],
+      ['delete', 'Delete table', DeleteTable],
+    ],
+    store,
+    tableId,
+  });
+const useHasRowCallback = (storeOrStoreId, tableId) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback(
+    (rowId) => store?.hasRow(tableId, rowId) ?? false,
+    [store, tableId],
+  );
+};
+const AddCell = ({onDone, tableId, rowId, store: storeOrStoreId}) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  const has = useCallback(
+    (cellId) => store.hasCell(tableId, rowId, cellId),
+    [store, tableId, rowId],
+  );
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId('cell', has),
+    has,
+    set: useSetCellCallback(
+      tableId,
+      rowId,
+      (newId) => newId,
+      () => '',
+      [],
+      store,
+    ),
+    prompt: 'Add cell',
+  });
+};
+const CloneRow = ({onDone, tableId, rowId, store: storeOrStoreId}) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  const has = useHasRowCallback(store, tableId);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId(rowId, has),
+    has,
+    set: useSetRowCallback(
+      tableId,
+      (newId) => newId,
+      (_, store2) => store2.getRow(tableId, rowId),
+      [rowId],
+    ),
+    prompt: 'Clone row to',
+  });
+};
+const DeleteRow = ({onDone, tableId, rowId, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelRowCallback(tableId, rowId, store, onDone),
+    prompt: 'Delete row',
+  });
+const RowActions = ({tableId, rowId, store}) =>
+  /* @__PURE__ */ jsx(ConfirmableActions, {
+    actions: [
+      ['add', 'Add cell', AddCell],
+      ['clone', 'Clone row', CloneRow],
+      ['delete', 'Delete row', DeleteRow],
+    ],
+    store,
+    tableId,
+    rowId,
+  });
+const CellDelete = ({onDone, tableId, rowId, cellId, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelCellCallback(tableId, rowId, cellId, true, store, onDone),
+    prompt: 'Delete cell',
+  });
+const CellActions = ({tableId, rowId, cellId, store}) =>
+  /* @__PURE__ */ jsx(ConfirmableActions, {
+    actions: [['delete', 'Delete cell', CellDelete]],
+    store,
+    tableId,
+    rowId,
+    cellId,
+  });
+
+const rowActions = [{label: '', component: RowActions}];
+const EditableCellViewWithActions = (props) =>
+  /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(EditableCellView, {...props}),
+      useHasCell(props.tableId, props.rowId, props.cellId, props.store) &&
+        /* @__PURE__ */ jsx(CellActions, {...props}),
+    ],
+  });
 const TableView = ({tableId, store, storeId, s}) => {
   const uniqueId = getUniqueId('t', storeId, tableId);
   const [cellId, descending, offset] = jsonParse(
@@ -10037,66 +10572,183 @@ const TableView = ({tableId, store, storeId, s}) => {
     s,
   );
   const [editable, handleEditable] = useEditable(uniqueId, s);
-  return /* @__PURE__ */ jsx(Details, {
+  const CellComponent = editable ? EditableCellViewWithActions : CellView;
+  return /* @__PURE__ */ jsxs(Details, {
     uniqueId,
-    summary: TABLE$1 + ': ' + tableId,
+    title: TABLE$1 + ': ' + tableId,
     editable,
     handleEditable,
     s,
-    children: /* @__PURE__ */ jsx(SortedTableInHtmlTable, {
-      tableId,
+    children: [
+      /* @__PURE__ */ jsx(SortedTableInHtmlTable, {
+        tableId,
+        store,
+        cellId,
+        descending,
+        offset,
+        limit: 10,
+        paginator: true,
+        sortOnClick: true,
+        onChange: handleChange,
+        editable,
+        extraCellsAfter: editable ? rowActions : [],
+        customCells: objNew(
+          arrayMap(useTableCellIds(tableId, store), (cellId2) => [
+            cellId2,
+            {label: cellId2, component: CellComponent},
+          ]),
+        ),
+      }),
+      editable
+        ? /* @__PURE__ */ jsxs('div', {
+            className: 'actions',
+            children: [
+              /* @__PURE__ */ jsx('div', {
+                children: /* @__PURE__ */ jsx(TableActions1, {tableId, store}),
+              }),
+              /* @__PURE__ */ jsx('div', {
+                children: /* @__PURE__ */ jsx(TableActions2, {tableId, store}),
+              }),
+            ],
+          })
+        : null,
+    ],
+  });
+};
+const TablesView = ({store, storeId, s}) => {
+  const uniqueId = getUniqueId('ts', storeId);
+  const [editable, handleEditable] = useEditable(uniqueId, s);
+  const tableIds = useTableIds(store);
+  return /* @__PURE__ */ jsxs(Details, {
+    uniqueId,
+    title: TABLES,
+    editable,
+    handleEditable,
+    s,
+    children: [
+      arrayIsEmpty(tableIds)
+        ? /* @__PURE__ */ jsx('caption', {children: 'No tables.'})
+        : sortedIdsMap(tableIds, (tableId) =>
+            /* @__PURE__ */ jsx(
+              TableView,
+              {
+                store,
+                storeId,
+                tableId,
+                s,
+              },
+              tableId,
+            ),
+          ),
+      editable ? /* @__PURE__ */ jsx(TablesActions, {store}) : null,
+    ],
+  });
+};
+
+const useHasValueCallback = (storeOrStoreId) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback((valueId) => store?.hasValue(valueId) ?? false, [store]);
+};
+const AddValue = ({onDone, store}) => {
+  const has = useHasValueCallback(store);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId('value', has),
+    has,
+    set: useSetValueCallback(
+      (newId) => newId,
+      () => '',
+      [],
+      store,
+    ),
+    prompt: 'Add value',
+  });
+};
+const DeleteValues = ({onDone, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelValuesCallback(store, onDone),
+    prompt: 'Delete all values',
+  });
+const ValuesActions = ({store}) =>
+  /* @__PURE__ */ jsx(Actions, {
+    left: /* @__PURE__ */ jsx(ConfirmableActions, {
+      actions: [['add', 'Add value', AddValue]],
       store,
-      cellId,
-      descending,
-      offset,
-      limit: 10,
-      paginator: true,
-      sortOnClick: true,
-      onChange: handleChange,
-      editable,
     }),
+    right: useHasValues(store)
+      ? /* @__PURE__ */ jsx(ConfirmableActions, {
+          actions: [['delete', 'Delete all values', DeleteValues]],
+          store,
+        })
+      : null,
+  });
+const CloneValue = ({onDone, valueId, store}) => {
+  const has = useHasValueCallback(store);
+  return /* @__PURE__ */ jsx(NewId, {
+    onDone,
+    suggestedId: getNewIdFromSuggestedId(valueId, has),
+    has,
+    set: useSetValueCallback(
+      (newId) => newId,
+      (_, store2) => store2.getValue(valueId) ?? '',
+      [valueId],
+      store,
+    ),
+    prompt: 'Clone value to',
   });
 };
+const DeleteValue = ({onDone, valueId, store}) =>
+  /* @__PURE__ */ jsx(Delete, {
+    onClick: useDelValueCallback(valueId, store, onDone),
+    prompt: 'Delete value',
+  });
+const ValueActions = ({valueId, store}) =>
+  /* @__PURE__ */ jsx(ConfirmableActions, {
+    actions: [
+      ['clone', 'Clone value', CloneValue],
+      ['delete', 'Delete value', DeleteValue],
+    ],
+    store,
+    valueId,
+  });
+
+const valueActions = [{label: '', component: ValueActions}];
 const ValuesView = ({store, storeId, s}) => {
   const uniqueId = getUniqueId('v', storeId);
   const [editable, handleEditable] = useEditable(uniqueId, s);
-  return arrayIsEmpty(useValueIds(store))
-    ? null
-    : /* @__PURE__ */ jsx(Details, {
-        uniqueId,
-        summary: VALUES,
-        editable,
-        handleEditable,
-        s,
-        children: /* @__PURE__ */ jsx(ValuesInHtmlTable, {store, editable}),
-      });
+  return /* @__PURE__ */ jsxs(Details, {
+    uniqueId,
+    title: VALUES,
+    editable,
+    handleEditable,
+    s,
+    children: [
+      arrayIsEmpty(useValueIds(store))
+        ? /* @__PURE__ */ jsx('caption', {children: 'No values.'})
+        : /* @__PURE__ */ jsx(ValuesInHtmlTable, {
+            store,
+            editable,
+            extraCellsAfter: editable ? valueActions : [],
+          }),
+      editable ? /* @__PURE__ */ jsx(ValuesActions, {store}) : null,
+    ],
+  });
 };
+
 const StoreView = ({storeId, s}) => {
   const store = useStore(storeId);
-  const tableIds = useTableIds(store);
   return isUndefined(store)
     ? null
     : /* @__PURE__ */ jsxs(Details, {
         uniqueId: getUniqueId('s', storeId),
-        summary:
+        title:
           (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,
-            ),
-          ),
+          /* @__PURE__ */ jsx(TablesView, {storeId, store, s}),
         ],
       });
 };
@@ -10217,6 +10869,7 @@ class ErrorBoundary extends PureComponent {
 
 const Header = ({s}) => {
   const position = useValue(POSITION_VALUE, s) ?? 1;
+  const handleClick = () => open('https://tinybase.org', '_blank');
   const handleClose = useSetValueCallback(OPEN_VALUE, () => false, [], s);
   const handleDock = useSetValueCallback(
     POSITION_VALUE,
@@ -10226,7 +10879,11 @@ const Header = ({s}) => {
   );
   return /* @__PURE__ */ jsxs('header', {
     children: [
-      /* @__PURE__ */ jsx('img', {title: TITLE}),
+      /* @__PURE__ */ jsx('img', {
+        className: 'flat',
+        title: TITLE,
+        onClick: handleClick,
+      }),
       /* @__PURE__ */ jsx('span', {children: TITLE}),
       arrayMap(POSITIONS, (name, p) =>
         p == position
@@ -10241,7 +10898,11 @@ const Header = ({s}) => {
               p,
             ),
       ),
-      /* @__PURE__ */ jsx('img', {onClick: handleClose, title: 'Close'}),
+      /* @__PURE__ */ jsx('img', {
+        className: 'flat',
+        onClick: handleClose,
+        title: 'Close',
+      }),
     ],
   });
 };
@@ -10264,70 +10925,237 @@ const Panel = ({s}) => {
 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 PENCIL = 'M20 80l5-15l40-40l10 10l-40 40l-15 5m5-15l10 10';
-const PRE_CSS = 'content:url("';
+const PRE_CSS = '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' fill='none'>`;
-const POST = `</svg>` + POST_CSS;
-const LOGO_SVG = PRE_CSS + img + POST_CSS;
+const getCssSvg = (path, color = 'white') => ({
+  content:
+    PRE_CSS +
+    `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='${color}'><path d='${path}' /></svg>` +
+    POST_CSS,
+});
+const VERTICAL_THIN = 'v560h120v-560h-120Z';
+const VERTICAL_THICK = 'v560h360v-560h-360Z';
+const HORIZONTAL_THIN = 'v120h560v-120h-560Z';
+const HORIZONTAL_THICK = 'v360h560v-360h-560Z';
+const LOGO_SVG = {content: 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],
+    `M200-760${VERTICAL_THIN} M400-760${VERTICAL_THICK}`,
+    `M200-760${HORIZONTAL_THIN} M200-560${HORIZONTAL_THICK}`,
+    `M200-760${HORIZONTAL_THICK} M200-320${HORIZONTAL_THIN}`,
+    `M200-760${VERTICAL_THICK} M640-760${VERTICAL_THIN}`,
   ],
-  ([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,
+  (path) =>
+    getCssSvg(
+      'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z' +
+        path,
+    ),
+);
+arrayPush(
+  POSITIONS_SVG,
+  getCssSvg(
+    'M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z',
+  ),
+);
+const CLOSE_SVG = getCssSvg(
+  'm336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z',
+);
+const EDIT_SVG = getCssSvg(
+  'M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z',
+);
+const DONE_SVG = getCssSvg(
+  'm622-453-56-56 82-82-57-57-82 82-56-56 195-195q12-12 26.5-17.5T705-840q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L622-453ZM200-200h57l195-195-28-29-29-28-195 195v57ZM792-56 509-338 290-120H120v-169l219-219L56-792l57-57 736 736-57 57Zm-32-648-56-56 56 56Zm-169 56 57 57-57-57ZM424-424l-29-28 57 57-28-29Z',
+);
+const ADD_SVG = getCssSvg(
+  'M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z',
+);
+const CLONE_SVG = getCssSvg(
+  'M520-400h80v-120h120v-80H600v-120h-80v120H400v80h120v120ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z',
+);
+const DELETE_SVG = getCssSvg(
+  'M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z',
+);
+const OK_SVG = getCssSvg(
+  'm424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z',
+  'rgb(127,255,127)',
+);
+const OK_SVG_DISABLED = getCssSvg(
+  'm40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z',
+  'rgb(255,255,127)',
+);
+const CANCEL_SVG = getCssSvg(
+  'm336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z',
+  'rgb(255,127,127)',
+);
+const DOWN_SVG = getCssSvg(
+  'M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z',
+);
+const RIGHT_SVG = getCssSvg(
+  'M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z',
 );
-const CLOSE_SVG = PRE + `<path d='M20 20l60 60M20 80l60-60' />` + POST;
-const EDIT_SVG = PRE + `<path d='${PENCIL}' />` + POST;
-const DONE_SVG = PRE + `<path d='${PENCIL}M20 20l60 60' />` + POST;
 
 const SCROLLBAR = '*::-webkit-scrollbar';
+const BACKGROUND = 'background';
+const WIDTH = 'width';
+const MAX_WIDTH = 'max-' + WIDTH;
+const MIN_WIDTH = 'min-' + WIDTH;
+const HEIGHT = 'height';
+const BORDER = 'border';
+const BORDER_RADIUS = BORDER + '-radius';
+const PADDING = 'padding';
+const MARGIN = 'margin';
+const MARGIN_RIGHT = MARGIN + '-right';
+const TOP = 'top';
+const BOTTOM = 'bottom';
+const LEFT = 'left';
+const RIGHT = 'right';
+const COLOR = 'color';
+const POSITION = 'position';
+const BOX_SHADOW = 'box-shadow';
+const FONT_SIZE = 'font-size';
+const DISPLAY = 'display';
+const OVERFLOW = 'overflow';
+const CURSOR = 'cursor';
+const VERTICAL_ALIGN = 'vertical-align';
+const TEXT_ALIGN = 'text-align';
+const JUSTIFY_CONTENT = 'justify-content';
+const FIXED = 'fixed';
+const REVERT = 'revert';
+const UNSET = 'unset';
+const NONE = 'none';
+const FLEX = 'flex';
+const POINTER = 'pointer';
+const AUTO = 'auto';
+const HIDDEN = 'hidden';
+const NOWRAP = 'nowrap';
+const oklch = (lPercent, remainder = '% 0.01 ' + cssVar('hue')) =>
+  `oklch(${lPercent}${remainder})`;
+const cssVar = (name) => `var(--${name})`;
+const rem = (...rems) => `${rems.join('rem ')}rem`;
+const px = (...pxs) => `${pxs.join('px ')}px`;
+const vw = (vw2 = 100) => `${vw2}vw`;
+const vh = (vh2 = 100) => `${vh2}vh`;
 const APP_STYLESHEET = arrayJoin(
   objToArray(
     {
-      '': 'all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999',
-      '*': 'all:revert',
-      '*::before': 'all:revert',
-      '*::after': 'all:revert',
-      [SCROLLBAR]: 'width:0.5rem;height:0.5rem;',
-      [SCROLLBAR + '-track']: 'background:#111',
-      [SCROLLBAR + '-thumb']: 'background:#999;border:1px solid #111',
-      [SCROLLBAR + '-thumb:hover']: 'background:#fff',
-      [SCROLLBAR + '-corner']: 'background:#111',
-      img: 'width:1rem;height:1rem;background:#111;border:0;vertical-align:text-bottom',
+      '': {
+        all: 'initial',
+        [FONT_SIZE]: rem(0.75),
+        [POSITION]: FIXED,
+        'font-family': 'inter,sans-serif',
+        'z-index': 999999,
+        '--bg': oklch(20),
+        '--bg2': oklch(15),
+        '--bg3': oklch(25),
+        '--bg4': oklch(30),
+        '--fg': oklch(85),
+        '--fg2': oklch(60),
+        ['--' + BORDER]: px(1) + ' solid ' + cssVar('bg4'),
+        ['--' + BOX_SHADOW]: px(0, 1, 2, 0) + ' #0007',
+      },
+      '*': {all: REVERT},
+      '*::before': {all: REVERT},
+      '*::after': {all: REVERT},
+      [SCROLLBAR]: {[WIDTH]: rem(0.5), [HEIGHT]: rem(0.5)},
+      [SCROLLBAR + '-thumb']: {[BACKGROUND]: cssVar('bg4')},
+      [SCROLLBAR + '-thumb:hover']: {[BACKGROUND]: cssVar('bg4')},
+      [SCROLLBAR + '-corner']: {[BACKGROUND]: NONE},
+      [SCROLLBAR + '-track']: {[BACKGROUND]: NONE},
+      img: {
+        [WIDTH]: rem(0.8),
+        [HEIGHT]: rem(0.8),
+        [VERTICAL_ALIGN]: 'text-' + BOTTOM,
+        [CURSOR]: POINTER,
+        [MARGIN]: px(-2.5, 2, -2.5, 0),
+        [PADDING]: px(2),
+        [BORDER]: cssVar(BORDER),
+        [BACKGROUND]: cssVar('bg3'),
+        [BOX_SHADOW]: cssVar(BOX_SHADOW),
+        [BORDER_RADIUS]: rem(0.25),
+      },
+      'img.flat': {[BORDER]: NONE, [BACKGROUND]: NONE, [BOX_SHADOW]: NONE},
       // Nub
-      '>img': 'padding:0.25rem;bottom:0;right:0;position:fixed;' + LOGO_SVG,
+      '>img': {
+        [PADDING]: rem(0.25),
+        [BOTTOM]: 0,
+        [RIGHT]: 0,
+        [POSITION]: FIXED,
+        [HEIGHT]: UNSET,
+        [MARGIN]: 0,
+        ...LOGO_SVG,
+      },
       ...objNew(
-        arrayMap(['bottom:0;left:0', 'top:0;right:0'], (css, p) => [
-          `>img[data-position='${p}']`,
-          css,
-        ]),
+        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;',
+      main: {
+        [DISPLAY]: FLEX,
+        [COLOR]: cssVar('fg'),
+        [BACKGROUND]: cssVar('bg'),
+        [OVERFLOW]: HIDDEN,
+        [POSITION]: FIXED,
+        [BOX_SHADOW]: cssVar(BOX_SHADOW),
+        'flex-direction': 'column',
+      },
       ...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',
+            {
+              [BOTTOM]: 0,
+              [LEFT]: 0,
+              [WIDTH]: vw(35),
+              [HEIGHT]: vh(),
+              [BORDER + '-' + RIGHT]: cssVar(BORDER),
+            },
+            {
+              [TOP]: 0,
+              [RIGHT]: 0,
+              [WIDTH]: vw(),
+              [HEIGHT]: vh(30),
+              [BORDER + '-' + BOTTOM]: cssVar(BORDER),
+            },
+            {
+              [BOTTOM]: 0,
+              [LEFT]: 0,
+              [WIDTH]: vw(),
+              [HEIGHT]: vh(30),
+              [BORDER + '-' + TOP]: cssVar(BORDER),
+            },
+            {
+              [TOP]: 0,
+              [RIGHT]: 0,
+              [WIDTH]: vw(35),
+              [HEIGHT]: vh(),
+              [BORDER + '-' + LEFT]: cssVar(BORDER),
+            },
+            {[TOP]: 0, [RIGHT]: 0, [WIDTH]: vw(), [HEIGHT]: vh()},
           ],
           (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: {
+        [DISPLAY]: FLEX,
+        [PADDING]: rem(0.5),
+        [BOX_SHADOW]: cssVar(BOX_SHADOW),
+        [BACKGROUND]: oklch(30, '% 0.008 var(--hue) / .5'),
+        [WIDTH]: 'calc(100% - .5rem)',
+        [POSITION]: 'absolute',
+        [BORDER + '-' + BOTTOM]: cssVar(BORDER),
+        'align-items': 'center',
+        'backdrop-filter': 'blur(4px)',
+      },
+      'header>img:nth-of-type(1)': {
+        [HEIGHT]: rem(1),
+        [WIDTH]: rem(1),
+        ...LOGO_SVG,
+      },
       'header>img:nth-of-type(6)': CLOSE_SVG,
       ...objNew(
         arrayMap(POSITIONS_SVG, (SVG, p) => [
@@ -10335,42 +11163,140 @@ const APP_STYLESHEET = arrayJoin(
           SVG,
         ]),
       ),
-      'header>span':
-        'flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem',
+      'header>span': {
+        [OVERFLOW]: HIDDEN,
+        [FLEX]: 1,
+        'font-weight': 800,
+        'white-space': NOWRAP,
+        'text-overflow': 'ellipsis',
+      },
       // Body
-      article: 'padding:0.25rem 0.25rem 0.25rem 0.5rem;overflow:auto;flex:1',
-      details: 'margin-left:0.75rem;width:fit-content;',
-      'details img': 'display:none',
-      'details[open]>summary img':
-        'display:unset;background:none;margin-left:0.25rem',
-      'details[open]>summary img.edit': EDIT_SVG,
-      'details[open]>summary img.done': DONE_SVG,
-      summary:
-        'margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content',
+      article: {[OVERFLOW]: AUTO, [FLEX]: 1, [PADDING + '-' + TOP]: rem(2)},
+      details: {
+        [MARGIN]: rem(0.5),
+        [BORDER]: cssVar(BORDER),
+        [BORDER_RADIUS]: rem(0.25),
+      },
+      summary: {
+        [BACKGROUND]: cssVar('bg3'),
+        [MARGIN]: px(-1),
+        [BORDER]: cssVar(BORDER),
+        [PADDING]: rem(0.25, 0.125),
+        [DISPLAY]: FLEX,
+        [BORDER_RADIUS]: rem(0.25),
+        'user-select': NONE,
+        [JUSTIFY_CONTENT]: 'space-between',
+        'align-items': 'center',
+      },
+      'summary>span::before': {
+        [DISPLAY]: 'inline-block',
+        [VERTICAL_ALIGN]: 'sub',
+        [MARGIN]: px(2),
+        [WIDTH]: rem(1),
+        [HEIGHT]: rem(1),
+        ...RIGHT_SVG,
+      },
+      'details[open]>summary': {
+        'border-bottom-left-radius': 0,
+        'border-bottom-right-radius': 0,
+        [MARGIN + '-' + BOTTOM]: 0,
+      },
+      'details[open]>summary>span::before': DOWN_SVG,
+      'details>summary img': {[DISPLAY]: NONE},
+      'details[open]>summary img': {
+        [DISPLAY]: UNSET,
+        [MARGIN + '-' + LEFT]: rem(0.25),
+      },
+      'details>div': {[OVERFLOW]: AUTO},
+      caption: {
+        [COLOR]: cssVar('fg2'),
+        [PADDING]: rem(0.25, 0.5),
+        [TEXT_ALIGN]: LEFT,
+        'white-space': NOWRAP,
+      },
+      'caption button': {
+        [WIDTH]: rem(1.5),
+        [BORDER]: NONE,
+        [BACKGROUND]: NONE,
+        [COLOR]: cssVar('fg'),
+        [PADDING]: 0,
+        [CURSOR]: POINTER,
+      },
+      'caption button[disabled]': {[COLOR]: cssVar('fg2')},
+      '.actions': {
+        [PADDING]: rem(0.75, 0.5),
+        [MARGIN]: 0,
+        [DISPLAY]: FLEX,
+        [BORDER + '-' + TOP]: cssVar(BORDER),
+        [JUSTIFY_CONTENT]: 'space-between',
+      },
       // tables
-      table: 'border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem',
-      'table input':
-        'background:#111;color:unset;padding:0 0.25rem;border:0;font-size:unset;vertical-align:top;margin:0',
-      'table input[type="number"]': 'width:4rem',
-      'table tbody button':
-        'font-size:0;background:#fff;border-radius:50%;margin:0 0.125rem 0 0;width:0.85rem;color:#111',
-      'table button:first-letter': 'font-size:0.75rem',
-      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',
-      'span.warn': 'margin:0.25rem;color:#d81b60',
+      table: {
+        [MIN_WIDTH]: '100%',
+        'border-collapse': 'collapse',
+        'table-layout': FIXED,
+      },
+      thead: {[BACKGROUND]: cssVar('bg')},
+      [`th,#${UNIQUE_ID} td`]: {
+        [OVERFLOW]: HIDDEN,
+        [PADDING]: rem(0.25, 0.5),
+        [MAX_WIDTH]: rem(20),
+        [BORDER]: cssVar(BORDER),
+        'text-overflow': 'ellipsis',
+        'white-space': NOWRAP,
+        'border-width': px(1, 0, 0),
+        [TEXT_ALIGN]: LEFT,
+      },
+      'th:first-child': {
+        [WIDTH]: rem(3),
+        [MIN_WIDTH]: rem(3),
+        [MAX_WIDTH]: rem(3),
+      },
+      'th.sorted': {[BACKGROUND]: cssVar('bg3')},
+      'td.extra': {[TEXT_ALIGN]: RIGHT},
+      'tbody button': {
+        [BACKGROUND]: NONE,
+        [BORDER]: NONE,
+        [FONT_SIZE]: 0,
+        [WIDTH]: rem(0.8),
+        [HEIGHT]: rem(0.8),
+        [COLOR]: cssVar('fg2'),
+        [MARGIN]: rem(0, 0.25, 0, -0.25),
+        'line-height': rem(0.8),
+      },
+      'tbody button:first-letter': {[FONT_SIZE]: rem(0.8)},
+      input: {
+        [BACKGROUND]: cssVar('bg2'),
+        [COLOR]: UNSET,
+        [PADDING]: px(4),
+        [BORDER]: 0,
+        [MARGIN]: px(-4, 0),
+        [FONT_SIZE]: UNSET,
+        [MAX_WIDTH]: rem(6),
+      },
+      'input:focus': {'outline-width': 0},
+      'input[type="number"]': {[WIDTH]: rem(3)},
+      'input[type="checkbox"]': {[VERTICAL_ALIGN]: px(-2)},
+      '.editableCell': {[DISPLAY]: 'inline-block', [MARGIN_RIGHT]: px(2)},
+      'button.next': {[MARGIN_RIGHT]: rem(0.5)},
+      'img.edit': EDIT_SVG,
+      'img.done': DONE_SVG,
+      'img.add': ADD_SVG,
+      'img.clone': CLONE_SVG,
+      'img.delete': DELETE_SVG,
+      'img.ok': OK_SVG,
+      'img.okDis': OK_SVG_DISABLED,
+      'img.cancel': CANCEL_SVG,
+      'span.warn': {[MARGIN]: rem(2, 0.25), [COLOR]: '#d81b60'},
     },
-    (style, selector) => (style ? `#${UNIQUE_ID} ${selector}{${style}}` : ''),
+    (style, selector) =>
+      `#${UNIQUE_ID} ${selector}{${arrayJoin(
+        objToArray(style, (value, property) => `${property}:${value};`),
+      )}}`,
   ),
 );
 
-const Inspector = ({position = 'right', open = false}) => {
+const Inspector = ({position = 'right', open = false, hue = 270}) => {
   const s = useCreateStore(createStore);
   const index = POSITIONS.indexOf(position);
   useCreatePersister(
@@ -10397,7 +11323,9 @@ const Inspector = ({position = 'right', open = false}) => {
           /* @__PURE__ */ jsx(Panel, {s}),
         ],
       }),
-      /* @__PURE__ */ jsx('style', {children: APP_STYLESHEET}),
+      /* @__PURE__ */ jsxs('style', {
+        children: [`#${UNIQUE_ID}{--hue:${hue}}`, APP_STYLESHEET],
+      }),
     ],
   });
 };
@@ -10427,11 +11355,14 @@ export {
   createLocalSynchronizer,
   createMergeableStore,
   createMetrics,
+  createOpfsPersister,
   createPartyKitPersister,
   createPglitePersister,
   createPostgresPersister,
   createPowerSyncPersister,
   createQueries,
+  createReactNativeMmkvPersister,
+  createReactNativeSqlitePersister,
   createRelationships,
   createRemotePersister,
   createSessionPersister,
@@ -10471,8 +11402,17 @@ export {
   Message,
   MetricView,
   objectStoreMatch,
+  OFFSET_CHECKPOINTS,
+  OFFSET_INDEXES,
+  OFFSET_METRICS,
+  OFFSET_PERSISTER,
+  OFFSET_QUERIES,
+  OFFSET_RELATIONSHIPS,
+  OFFSET_STORE,
+  OFFSET_SYNCHRONIZER,
   Persists,
   Provider,
+  RelationshipInHtmlRow,
   RelationshipInHtmlTable,
   RemoteRowView,
   ResultCellView,
@@ -10489,7 +11429,7 @@ export {
   SortedTableView,
   Status,
   TableInHtmlTable,
-  TablesView,
+  TablesView$1 as TablesView,
   TableView$1 as TableView,
   TinyBasePartyKitServer,
   useAddRowCallback,
@@ -10613,6 +11553,7 @@ export {
   useSortedRowIds,
   useSortedRowIdsListener,
   useSortedRowIdsListenerImpl,
+  useSortingAndPagination,
   useStartTransactionListener,
   useStore,
   useStoreIds,