tinybase 6.5.2 → 6.6.0

package/ui-react-inspector/index.js

@@ -3,12 +3,12 @@ import {Fragment, jsx, jsxs} from 'react/jsx-runtime';
 import {
   CellView,
   ResultCellView,
-  useCell,
+  useCell as useCell$1,
   useCreatePersister,
   useCreateStore,
+  useHasCell,
   useIndexes,
   useIndexesIds,
-  useIndexesOrIndexesById,
   useIndexIds,
   useMetric,
   useMetricIds,
@@ -20,30 +20,21 @@ import {
   useRelationshipIds,
   useRelationships,
   useRelationshipsIds,
-  useRelationshipsOrRelationshipsById,
-  useRemoteRowId,
-  useResultRowCount,
-  useResultSortedRowIds,
-  useResultTableCellIds,
-  useRowCount,
-  useRowIds,
-  useSetCellCallback,
-  useSetValueCallback,
+  useSetCellCallback as useSetCellCallback$1,
+  useSetValueCallback as useSetValueCallback$1,
   useSliceIds,
-  useSliceRowIds,
-  useSortedRowIds,
   useStore,
   useStoreIds,
-  useStoreOrStoreById,
-  useTableCellIds,
+  useTableCellIds as useTableCellIds$1,
   useTableIds,
-  useValue,
-  useValueIds,
+  useValue as useValue$1,
+  useValueIds as useValueIds$1,
   useValues,
   ValueView,
 } from '../ui-react/index.js';
 
 const getTypeOf = (thing) => typeof thing;
+const TINYBASE = 'tinybase';
 const EMPTY_STRING = '';
 const DOT = '.';
 const STRING = getTypeOf(EMPTY_STRING);
@@ -53,8 +44,13 @@ const FUNCTION = getTypeOf(getTypeOf);
 const TYPE = 'type';
 const DEFAULT = 'default';
 const LISTENER = 'Listener';
+const RESULT = 'Result';
+const GET = 'get';
+const SET = 'set';
 const ADD = 'add';
+const DEL = 'del';
 const HAS = 'Has';
+const _HAS = 'has';
 const IDS = 'Ids';
 const TABLE = 'Table';
 const TABLES = TABLE + 's';
@@ -62,13 +58,17 @@ const TABLE_IDS = TABLE + IDS;
 const ROW = 'Row';
 const ROW_COUNT = ROW + 'Count';
 const ROW_IDS = ROW + IDS;
+const SORTED_ROW_IDS = 'Sorted' + ROW + IDS;
 const CELL = 'Cell';
 const CELL_IDS = CELL + IDS;
 const VALUE = 'Value';
 const VALUES = VALUE + 's';
 const VALUE_IDS = VALUE + IDS;
+const SLICE = 'Slice';
+const REMOTE_ROW_ID = 'Remote' + ROW + 'Id';
 const CURRENT_TARGET = 'currentTarget';
 const _VALUE = 'value';
+const EXTRA = 'extra';
 const UNDEFINED = '\uFFFC';
 const id = (key) => EMPTY_STRING + key;
 const strSplit = (str, separator = EMPTY_STRING, limit) =>
@@ -91,6 +91,7 @@ const isArray = (thing) => Array.isArray(thing);
 const slice = (arrayOrString, start, end) => arrayOrString.slice(start, end);
 const size = (arrayOrString) => arrayOrString.length;
 const test = (regex, subject) => regex.test(subject);
+const getUndefined = () => void 0;
 const errorNew = (message) => {
   throw new Error(message);
 };
@@ -114,6 +115,7 @@ const arrayJoin = (array, sep = EMPTY_STRING) => array.join(sep);
 const arrayMap = (array, cb) => array.map(cb);
 const arrayIsEmpty = (array) => size(array) == 0;
 const arrayReduce = (array, cb, initial) => array.reduce(cb, initial);
+const arrayFilter = (array, cb) => array.filter(cb);
 const arrayClear = (array, to) => array.splice(0, to);
 const arrayPush = (array, ...values) => array.push(...values);
 const arrayShift = (array) => array.shift();
@@ -136,6 +138,7 @@ const isObject = (obj) =>
 const objIds = object.keys;
 const objFreeze = object.freeze;
 const objNew = (entries = []) => object.fromEntries(entries);
+const objGet = (obj, id) => ifNotUndefined(obj, (obj2) => obj2[id]);
 const objHas = (obj, id) => id in obj;
 const objDel = (obj, id) => {
   delete obj[id];
@@ -149,6 +152,19 @@ const objMap = (obj, cb) =>
   objNew(objToArray(obj, (value, id) => [id, cb(value, id)]));
 const objSize = (obj) => size(objIds(obj));
 const objIsEmpty = (obj) => isObject(obj) && objSize(obj) == 0;
+const objIsEqual = (obj1, obj2) => {
+  const entries1 = objEntries(obj1);
+  return (
+    size(entries1) === objSize(obj2) &&
+    arrayEvery(entries1, ([index, value1]) =>
+      isObject(value1)
+        ? isObject(obj2[index])
+          ? objIsEqual(obj2[index], value1)
+          : false
+        : obj2[index] === value1,
+    )
+  );
+};
 const objValidate = (obj, validateChild, onInvalidObj, emptyIsValid = 0) => {
   if (
     isUndefined(obj) ||
@@ -654,7 +670,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 defaultSorter = (sortKey1, sortKey2) =>
   (sortKey1 ?? 0) < (sortKey2 ?? 0) ? -1 : 1;
@@ -2056,7 +2078,7 @@ const EDITABLE_CELL = 'editable';
 const getUniqueId = (...args) => jsonStringWithMap(args);
 const sortedIdsMap = (ids, callback) => arrayMap(arraySort([...ids]), callback);
 const useEditable = (uniqueId, s) => [
-  !!useCell(STATE_TABLE, uniqueId, EDITABLE_CELL, s),
+  !!useCell$1(STATE_TABLE, uniqueId, EDITABLE_CELL, s),
   useCallback(
     (event) => {
       s.setCell(STATE_TABLE, uniqueId, EDITABLE_CELL, (editable) => !editable);
@@ -2067,9 +2089,9 @@ const useEditable = (uniqueId, s) => [
 ];
 
 const Nub = ({s}) => {
-  const position = useValue(POSITION_VALUE, s) ?? 1;
-  const handleOpen = useSetValueCallback(OPEN_VALUE, () => true, [], s);
-  return useValue(OPEN_VALUE, s)
+  const position = useValue$1(POSITION_VALUE, s) ?? 1;
+  const handleOpen = useSetValueCallback$1(OPEN_VALUE, () => true, [], s);
+  return useValue$1(OPEN_VALUE, s)
     ? null
     : /* @__PURE__ */ jsx('img', {
         onClick: handleOpen,
@@ -2078,13 +2100,373 @@ const Nub = ({s}) => {
       });
 };
 
-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 TINYBASE_CONTEXT = TINYBASE + '_uirc';
+const Context = GLOBAL[TINYBASE_CONTEXT]
+  ? /* istanbul ignore next */
+    GLOBAL[TINYBASE_CONTEXT]
+  : (GLOBAL[TINYBASE_CONTEXT] = createContext([]));
+const useThing = (id, offset) => {
+  const contextValue = useContext(Context);
+  return isUndefined(id)
+    ? contextValue[offset * 2]
+    : isString(id)
+      ? objGet(contextValue[offset * 2 + 1], id)
+      : id;
+};
+const useThingOrThingById = (thingOrThingId, offset) => {
+  const thing = useThing(thingOrThingId, offset);
+  return isUndefined(thingOrThingId) || isString(thingOrThingId)
+    ? thing
+    : thingOrThingId;
+};
+
+const OFFSET_STORE = 0;
+const OFFSET_INDEXES = 2;
+const OFFSET_RELATIONSHIPS = 3;
+const OFFSET_QUERIES = 4;
+
+const EMPTY_ARRAY = [];
+const DEFAULTS = [{}, [], [EMPTY_ARRAY, void 0, EMPTY_ARRAY], void 0, false, 0];
+const IS_EQUALS = [
+  objIsEqual,
+  arrayIsEqual,
+  (
+    [backwardIds1, currentId1, forwardIds1],
+    [backwardIds2, currentId2, forwardIds2],
+  ) =>
+    currentId1 === currentId2 &&
+    arrayIsEqual(backwardIds1, backwardIds2) &&
+    arrayIsEqual(forwardIds1, forwardIds2),
+];
+const isEqual = (thing1, thing2) => thing1 === thing2;
+const addAndDelListener = (thing, listenable, ...args) => {
+  const listenerId = thing?.[ADD + listenable + LISTENER]?.(...args);
+  return () => thing?.delListener?.(listenerId);
+};
+const useListenable = (listenable, thing, returnType, args = EMPTY_ARRAY) => {
+  const lastResult = useRef(DEFAULTS[returnType]);
+  const getResult = useCallback(
+    () => {
+      const nextResult =
+        thing?.[(returnType == 4 /* Boolean */ ? _HAS : GET) + listenable]?.(
+          ...args,
+        ) ?? DEFAULTS[returnType];
+      return !(IS_EQUALS[returnType] ?? isEqual)(nextResult, lastResult.current)
+        ? (lastResult.current = nextResult)
+        : lastResult.current;
+    },
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [thing, returnType, listenable, ...args],
+  );
+  const subscribe = useCallback(
+    (listener) =>
+      addAndDelListener(
+        thing,
+        (returnType == 4 /* Boolean */ ? HAS : EMPTY_STRING) + listenable,
+        ...args,
+        listener,
+      ),
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    [thing, returnType, listenable, ...args],
+  );
+  return useSyncExternalStore(subscribe, getResult, getResult);
+};
+const useSetCallback = (
+  storeOrStoreId,
+  settable,
+  get,
+  getDeps = EMPTY_ARRAY,
+  then = getUndefined,
+  thenDeps = EMPTY_ARRAY,
+  ...args
+) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback(
+    (parameter) =>
+      ifNotUndefined(store, (store2) =>
+        ifNotUndefined(get(parameter, store2), (thing) =>
+          then(
+            store2[SET + settable](
+              ...argsOrGetArgs(args, store2, parameter),
+              thing,
+            ),
+            thing,
+          ),
+        ),
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, settable, ...getDeps, ...thenDeps, ...nonFunctionDeps(args)],
+  );
+};
+const argsOrGetArgs = (args, store, parameter) =>
+  arrayMap(args, (arg) => (isFunction(arg) ? arg(parameter, store) : arg));
+const nonFunctionDeps = (args) => arrayFilter(args, (arg) => !isFunction(arg));
+const useDel = (
+  storeOrStoreId,
+  deletable,
+  then = getUndefined,
+  thenDeps = EMPTY_ARRAY,
+  ...args
+) => {
+  const store = useStoreOrStoreById(storeOrStoreId);
+  return useCallback(
+    (parameter) =>
+      then(store?.[DEL + deletable](...argsOrGetArgs(args, store, parameter))),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, deletable, ...thenDeps, ...nonFunctionDeps(args)],
+  );
+};
+const useSortedRowIdsImpl = (
+  tableId,
+  cellId,
+  descending,
+  offset,
+  limit,
+  storeOrStoreId,
+) =>
+  useListenable(
+    SORTED_ROW_IDS,
+    useStoreOrStoreById(storeOrStoreId),
+    1 /* Array */,
+    [tableId, cellId, descending, offset, limit],
+  );
+const useStoreOrStoreById = (storeOrStoreId) =>
+  useThingOrThingById(storeOrStoreId, OFFSET_STORE);
+const useHasTables = (storeOrStoreId) =>
+  useListenable(
+    TABLES,
+    useStoreOrStoreById(storeOrStoreId),
+    4 /* Boolean */,
+    [],
+  );
+const useTableCellIds = (tableId, storeOrStoreId) =>
+  useListenable(
+    TABLE + CELL_IDS,
+    useStoreOrStoreById(storeOrStoreId),
+    1 /* Array */,
+    [tableId],
+  );
+const useRowCount = (tableId, storeOrStoreId) =>
+  useListenable(
+    ROW_COUNT,
+    useStoreOrStoreById(storeOrStoreId),
+    5 /* Number */,
+    [tableId],
+  );
+const useRowIds = (tableId, storeOrStoreId) =>
+  useListenable(ROW_IDS, useStoreOrStoreById(storeOrStoreId), 1 /* Array */, [
+    tableId,
+  ]);
+const useSortedRowIds = (
+  tableIdOrArgs,
+  cellIdOrStoreOrStoreId,
+  descending,
+  offset,
+  limit,
+  storeOrStoreId,
+) =>
+  useSortedRowIdsImpl(
+    ...(isObject(tableIdOrArgs)
+      ? [
+          tableIdOrArgs.tableId,
+          tableIdOrArgs.cellId,
+          tableIdOrArgs.descending ?? false,
+          tableIdOrArgs.offset ?? 0,
+          tableIdOrArgs.limit,
+          cellIdOrStoreOrStoreId,
+        ]
+      : [
+          tableIdOrArgs,
+          cellIdOrStoreOrStoreId,
+          descending,
+          offset,
+          limit,
+          storeOrStoreId,
+        ]),
+  );
+const useCell = (tableId, rowId, cellId, storeOrStoreId) =>
+  useListenable(
+    CELL,
+    useStoreOrStoreById(storeOrStoreId),
+    3 /* CellOrValue */,
+    [tableId, rowId, cellId],
+  );
+const useHasValues = (storeOrStoreId) =>
+  useListenable(
+    VALUES,
+    useStoreOrStoreById(storeOrStoreId),
+    4 /* Boolean */,
+    [],
+  );
+const useValueIds = (storeOrStoreId) =>
+  useListenable(VALUE_IDS, useStoreOrStoreById(storeOrStoreId), 1 /* Array */);
+const useValue = (valueId, storeOrStoreId) =>
+  useListenable(
+    VALUE,
+    useStoreOrStoreById(storeOrStoreId),
+    3 /* CellOrValue */,
+    [valueId],
+  );
+const useSetTableCallback = (
+  tableId,
+  getTable,
+  getTableDeps,
+  storeOrStoreId,
+  then,
+  thenDeps,
+) =>
+  useSetCallback(
+    storeOrStoreId,
+    TABLE,
+    getTable,
+    getTableDeps,
+    then,
+    thenDeps,
+    tableId,
+  );
+const useSetRowCallback = (
+  tableId,
+  rowId,
+  getRow,
+  getRowDeps,
+  storeOrStoreId,
+  then,
+  thenDeps,
+) =>
+  useSetCallback(
+    storeOrStoreId,
+    ROW,
+    getRow,
+    getRowDeps,
+    then,
+    thenDeps,
+    tableId,
+    rowId,
+  );
+const useSetCellCallback = (
+  tableId,
+  rowId,
+  cellId,
+  getCell,
+  getCellDeps,
+  storeOrStoreId,
+  then,
+  thenDeps,
+) =>
+  useSetCallback(
+    storeOrStoreId,
+    CELL,
+    getCell,
+    getCellDeps,
+    then,
+    thenDeps,
+    tableId,
+    rowId,
+    cellId,
+  );
+const useSetValueCallback = (
+  valueId,
+  getValue,
+  getValueDeps,
+  storeOrStoreId,
+  then,
+  thenDeps,
+) =>
+  useSetCallback(
+    storeOrStoreId,
+    VALUE,
+    getValue,
+    getValueDeps,
+    then,
+    thenDeps,
+    valueId,
+  );
+const useDelTablesCallback = (storeOrStoreId, then, thenDeps) =>
+  useDel(storeOrStoreId, TABLES, then, thenDeps);
+const useDelTableCallback = (tableId, storeOrStoreId, then, thenDeps) =>
+  useDel(storeOrStoreId, TABLE, then, thenDeps, tableId);
+const useDelRowCallback = (tableId, rowId, storeOrStoreId, then, thenDeps) =>
+  useDel(storeOrStoreId, ROW, then, thenDeps, tableId, rowId);
+const useDelCellCallback = (
+  tableId,
+  rowId,
+  cellId,
+  forceDel,
+  storeOrStoreId,
+  then,
+  thenDeps,
+) =>
+  useDel(
+    storeOrStoreId,
+    CELL,
+    then,
+    thenDeps,
+    tableId,
+    rowId,
+    cellId,
+    forceDel,
+  );
+const useDelValuesCallback = (storeOrStoreId, then, thenDeps) =>
+  useDel(storeOrStoreId, VALUES, then, thenDeps);
+const useDelValueCallback = (valueId, storeOrStoreId, then, thenDeps) =>
+  useDel(storeOrStoreId, VALUE, then, thenDeps, valueId);
+const useIndexesOrIndexesById = (indexesOrIndexesId) =>
+  useThingOrThingById(indexesOrIndexesId, OFFSET_INDEXES);
+const useSliceRowIds = (indexId, sliceId, indexesOrIndexesId) =>
+  useListenable(
+    SLICE + ROW_IDS,
+    useIndexesOrIndexesById(indexesOrIndexesId),
+    1 /* Array */,
+    [indexId, sliceId],
+  );
+const useRelationshipsOrRelationshipsById = (relationshipsOrRelationshipsId) =>
+  useThingOrThingById(relationshipsOrRelationshipsId, OFFSET_RELATIONSHIPS);
+const useRemoteRowId = (
+  relationshipId,
+  localRowId,
+  relationshipsOrRelationshipsId,
+) =>
+  useListenable(
+    REMOTE_ROW_ID,
+    useRelationshipsOrRelationshipsById(relationshipsOrRelationshipsId),
+    3 /* CellOrValue */,
+    [relationshipId, localRowId],
+  );
+const useQueriesOrQueriesById = (queriesOrQueriesId) =>
+  useThingOrThingById(queriesOrQueriesId, OFFSET_QUERIES);
+const useResultTableCellIds = (queryId, queriesOrQueriesId) =>
+  useListenable(
+    RESULT + TABLE + CELL_IDS,
+    useQueriesOrQueriesById(queriesOrQueriesId),
+    1 /* Array */,
+    [queryId],
+  );
+const useResultRowCount = (queryId, queriesOrQueriesId) =>
+  useListenable(
+    RESULT + ROW_COUNT,
+    useQueriesOrQueriesById(queriesOrQueriesId),
+    5 /* Number */,
+    [queryId],
+  );
+const useResultSortedRowIds = (
+  queryId,
+  cellId,
+  descending,
+  offset = 0,
+  limit,
+  queriesOrQueriesId,
+) =>
+  useListenable(
+    RESULT + SORTED_ROW_IDS,
+    useQueriesOrQueriesById(queriesOrQueriesId),
+    1 /* Array */,
+    [queryId, cellId, descending, offset, limit],
+  );
+
+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;
@@ -2095,69 +2477,6 @@ const useParams = (...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 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 useCells = (defaultCellIds, customCells, defaultCellComponent) =>
   useMemo(() => {
     const cellIds = customCells ?? defaultCellIds;
@@ -2173,6 +2492,54 @@ const useCells = (defaultCellIds, customCells, defaultCellComponent) =>
       }),
     );
   }, [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),
+    ),
+  );
+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,
@@ -2181,6 +2548,8 @@ const HtmlTable = ({
     cells,
     cellComponentProps,
     rowIds,
+    extraCellsBefore,
+    extraCellsAfter,
     sortAndOffset,
     handleSort,
     paginatorComponent,
@@ -2197,6 +2566,7 @@ const HtmlTable = ({
         : /* @__PURE__ */ jsx('thead', {
             children: /* @__PURE__ */ jsxs('tr', {
               children: [
+                extraHeaders(extraCellsBefore),
                 idColumn === false
                   ? null
                   : /* @__PURE__ */ jsx(HtmlHeaderCell, {
@@ -2216,124 +2586,51 @@ const HtmlTable = ({
                     cellId,
                   ),
                 ),
+                extraHeaders(extraCellsAfter, 1),
               ],
             }),
           }),
       /* @__PURE__ */ jsx('tbody', {
-        children: arrayMap(rowIds, (rowId) =>
-          /* @__PURE__ */ jsxs(
+        children: arrayMap(rowIds, (rowId) => {
+          const rowProps = {...cellComponentProps, rowId};
+          return /* @__PURE__ */ jsxs(
             'tr',
             {
               children: [
+                extraRowCells(extraCellsBefore, rowProps),
                 idColumn === false
                   ? null
-                  : /* @__PURE__ */ jsx('th', {children: rowId}),
+                  : /* @__PURE__ */ jsx('th', {title: rowId, children: rowId}),
                 objToArray(
                   cells,
-                  ({component: CellView2, getComponentProps}, cellId) =>
+                  ({component: CellView, getComponentProps}, cellId) =>
                     /* @__PURE__ */ jsx(
                       'td',
                       {
-                        children: /* @__PURE__ */ jsx(CellView2, {
+                        children: /* @__PURE__ */ jsx(CellView, {
                           ...getProps(getComponentProps, rowId, cellId),
-                          ...cellComponentProps,
-                          rowId,
+                          ...rowProps,
                           cellId,
                         }),
                       },
                       cellId,
                     ),
                 ),
+                extraRowCells(extraCellsAfter, rowProps, 1),
               ],
             },
             rowId,
-          ),
-        ),
+          );
+        }),
       }),
     ],
   });
-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 RelationshipInHtmlRow = ({
-  localRowId,
-  params: [
-    idColumn,
-    cells,
-    localTableId,
-    remoteTableId,
-    relationshipId,
-    relationships,
-    store,
-  ],
-}) => {
-  const remoteRowId = useRemoteRowId(relationshipId, localRowId, relationships);
-  return /* @__PURE__ */ jsxs('tr', {
-    children: [
-      idColumn === false
-        ? null
-        : /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx('th', {children: localRowId}),
-              /* @__PURE__ */ jsx('th', {children: remoteRowId}),
-            ],
-          }),
-      objToArray(
-        cells,
-        ({component: CellView2, getComponentProps}, compoundCellId) => {
-          const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
-          const rowId =
-            tableId === localTableId
-              ? localRowId
-              : tableId === remoteTableId
-                ? remoteRowId
-                : null;
-          return isUndefined(rowId)
-            ? null
-            : /* @__PURE__ */ jsx(
-                'td',
-                {
-                  children: /* @__PURE__ */ jsx(CellView2, {
-                    ...getProps(getComponentProps, rowId, cellId),
-                    store,
-                    tableId,
-                    rowId,
-                    cellId,
-                  }),
-                },
-                compoundCellId,
-              );
-        },
-      ),
-    ],
-  });
-};
-const EditableThing = ({
-  thing,
-  onThingChange,
-  className,
-  hasSchema,
-  showType = true,
+const EditableThing = ({
+  thing,
+  onThingChange,
+  className,
+  hasSchema,
+  showType = true,
 }) => {
   const [thingType, setThingType] = useState();
   const [currentThing, setCurrentThing] = useState();
@@ -2376,181 +2673,172 @@ const EditableThing = ({
     booleanThing,
     thingType,
   ]);
+  const widget = 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,
+    ),
+  );
   return /* @__PURE__ */ jsxs('div', {
     className,
     children: [
-      showType
+      showType && widget
         ? /* @__PURE__ */ jsx('button', {
+            title: thingType,
             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,
-        ),
-      ),
+      widget,
     ],
   });
 };
-const SortedTableInHtmlTable = ({
+
+const EditableCellView = ({
   tableId,
+  rowId,
   cellId,
-  descending,
-  offset,
-  limit,
   store,
-  editable,
-  sortOnClick,
-  paginator = false,
-  onChange,
-  customCells,
-  ...props
-}) => {
-  const [sortAndOffset, handleSort, paginatorComponent] =
-    useSortingAndPagination(
+  className,
+  showType,
+}) =>
+  /* @__PURE__ */ jsx(EditableThing, {
+    thing: useCell(tableId, rowId, cellId, store),
+    onThingChange: useSetCellCallback(
+      tableId,
+      rowId,
       cellId,
-      descending,
-      sortOnClick,
-      offset,
-      limit,
-      useRowCount(tableId, store),
-      paginator,
-      onChange,
-    );
-  return /* @__PURE__ */ jsx(HtmlTable, {
-    ...props,
-    params: useParams(
-      useCells(
-        useTableCellIds(tableId, store),
-        customCells,
-        editable ? EditableCellView : CellView,
-      ),
-      useStoreCellComponentProps(store, tableId),
-      useSortedRowIds(tableId, ...sortAndOffset, limit, store),
-      sortAndOffset,
-      handleSort,
-      paginatorComponent,
+      (cell) => cell,
+      [],
+      store,
     ),
+    className: className ?? EDITABLE + CELL,
+    showType,
+    hasSchema: useStoreOrStoreById(store)?.hasTablesSchema,
   });
-};
-const ValuesInHtmlTable = ({
-  store,
-  editable = false,
-  valueComponent: Value = editable ? EditableValueView : ValueView,
-  getValueComponentProps,
-  className,
-  headerRow,
-  idColumn,
-}) =>
-  /* @__PURE__ */ jsxs('table', {
-    className,
+
+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 useDottedCellIds = (tableId, store) =>
+  arrayMap(useTableCellIds(tableId, store), (cellId) => tableId + DOT + cellId);
+const RelationshipInHtmlRow = ({
+  localRowId,
+  params: [
+    idColumn,
+    cells,
+    localTableId,
+    remoteTableId,
+    relationshipId,
+    relationships,
+    store,
+    extraCellsBefore,
+    extraCellsAfter,
+  ],
+}) => {
+  const remoteRowId = useRemoteRowId(relationshipId, localRowId, relationships);
+  const rowProps = {
+    tableId: localTableId ?? '',
+    rowId: localRowId,
+    store,
+  };
+  return /* @__PURE__ */ jsxs('tr', {
     children: [
-      headerRow === false
+      extraRowCells(extraCellsBefore, rowProps),
+      idColumn === false
         ? null
-        : /* @__PURE__ */ jsx('thead', {
-            children: /* @__PURE__ */ jsxs('tr', {
-              children: [
-                idColumn === false
-                  ? null
-                  : /* @__PURE__ */ jsx('th', {children: 'Id'}),
-                /* @__PURE__ */ jsx('th', {children: VALUE}),
-              ],
-            }),
+        : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx('th', {
+                title: localRowId,
+                children: localRowId,
+              }),
+              /* @__PURE__ */ jsx('th', {
+                title: remoteRowId,
+                children: remoteRowId,
+              }),
+            ],
           }),
-      /* @__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,
+      objToArray(
+        cells,
+        ({component: CellView2, getComponentProps}, compoundCellId) => {
+          const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
+          const rowId =
+            tableId === localTableId
+              ? localRowId
+              : tableId === remoteTableId
+                ? remoteRowId
+                : null;
+          return isUndefined(rowId)
+            ? null
+            : /* @__PURE__ */ jsx(
+                'td',
+                {
+                  children: /* @__PURE__ */ jsx(CellView2, {
+                    ...getProps(getComponentProps, rowId, cellId),
                     store,
+                    tableId,
+                    rowId,
+                    cellId,
                   }),
-                }),
-              ],
-            },
-            valueId,
-          ),
-        ),
-      }),
-    ],
-  });
-const SliceInHtmlTable = ({
-  indexId,
-  sliceId,
-  indexes,
-  editable,
-  customCells,
-  ...props
-}) => {
-  const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
-    useIndexesOrIndexesById(indexes),
-    indexId,
-  );
-  return /* @__PURE__ */ jsx(HtmlTable, {
-    ...props,
-    params: useParams(
-      useCells(
-        useTableCellIds(tableId, store),
-        customCells,
-        editable ? EditableCellView : CellView,
+                },
+                compoundCellId,
+              );
+        },
       ),
-      useStoreCellComponentProps(store, tableId),
-      useSliceRowIds(indexId, sliceId, resolvedIndexes),
-    ),
+      extraRowCells(extraCellsAfter, rowProps, 1),
+    ],
   });
 };
 const RelationshipInHtmlTable = ({
@@ -2558,6 +2846,8 @@ const RelationshipInHtmlTable = ({
   relationships,
   editable,
   customCells,
+  extraCellsBefore,
+  extraCellsAfter,
   className,
   headerRow,
   idColumn = true,
@@ -2583,6 +2873,8 @@ const RelationshipInHtmlTable = ({
     relationshipId,
     resolvedRelationships,
     store,
+    extraCellsBefore,
+    extraCellsAfter,
   );
   return /* @__PURE__ */ jsxs('table', {
     className,
@@ -2592,6 +2884,7 @@ const RelationshipInHtmlTable = ({
         : /* @__PURE__ */ jsx('thead', {
             children: /* @__PURE__ */ jsxs('tr', {
               children: [
+                extraHeaders(extraCellsBefore),
                 idColumn === false
                   ? null
                   : /* @__PURE__ */ jsxs(Fragment, {
@@ -2607,6 +2900,7 @@ const RelationshipInHtmlTable = ({
                 objToArray(cells, ({label}, cellId) =>
                   /* @__PURE__ */ jsx('th', {children: label}, cellId),
                 ),
+                extraHeaders(extraCellsAfter, 1),
               ],
             }),
           }),
@@ -2625,76 +2919,68 @@ const RelationshipInHtmlTable = ({
     ],
   });
 };
-const ResultSortedTableInHtmlTable = ({
-  queryId,
+
+const LEFT_ARROW = '\u2190';
+const RIGHT_ARROW = '\u2192';
+const useSortingAndPagination = (
   cellId,
-  descending,
-  offset,
-  limit,
-  queries,
+  descending = false,
   sortOnClick,
-  paginator = false,
-  customCells,
+  offset = 0,
+  limit,
+  total,
+  paginator,
   onChange,
-  ...props
-}) => {
-  const [sortAndOffset, handleSort, paginatorComponent] =
-    useSortingAndPagination(
-      cellId,
-      descending,
-      sortOnClick,
-      offset,
-      limit,
-      useResultRowCount(queryId, queries),
-      paginator,
-      onChange,
-    );
-  return /* @__PURE__ */ jsx(HtmlTable, {
-    ...props,
-    params: useParams(
-      useCells(
-        useResultTableCellIds(queryId, queries),
-        customCells,
-        ResultCellView,
-      ),
-      useQueriesCellComponentProps(queries, queryId),
-      useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
-      sortAndOffset,
-      handleSort,
-      paginatorComponent,
+) => {
+  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 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 SortedTablePaginator = ({
   onChange,
   total,
@@ -2740,23 +3026,210 @@ const SortedTablePaginator = ({
             ' of ',
           ],
         }),
-      total,
-      ' ',
-      total != 1 ? plural : singular,
+      total,
+      ' ',
+      total != 1 ? plural : singular,
+    ],
+  });
+};
+
+const ResultSortedTableInHtmlTable = ({
+  queryId,
+  cellId,
+  descending,
+  offset,
+  limit,
+  queries,
+  sortOnClick,
+  paginator = false,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  onChange,
+  ...props
+}) => {
+  const [sortAndOffset, handleSort, paginatorComponent] =
+    useSortingAndPagination(
+      cellId,
+      descending,
+      sortOnClick,
+      offset,
+      limit,
+      useResultRowCount(queryId, queries),
+      paginator,
+      onChange,
+    );
+  return /* @__PURE__ */ jsx(HtmlTable, {
+    ...props,
+    params: useParams(
+      useCells(
+        useResultTableCellIds(queryId, queries),
+        customCells,
+        ResultCellView,
+      ),
+      useQueriesCellComponentProps(queries, queryId),
+      useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
+      extraCellsBefore,
+      extraCellsAfter,
+      sortAndOffset,
+      handleSort,
+      paginatorComponent,
+    ),
+  });
+};
+
+const SliceInHtmlTable = ({
+  indexId,
+  sliceId,
+  indexes,
+  editable,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  ...props
+}) => {
+  const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
+    useIndexesOrIndexesById(indexes),
+    indexId,
+  );
+  return /* @__PURE__ */ jsx(HtmlTable, {
+    ...props,
+    params: useParams(
+      useCells(
+        useTableCellIds(tableId, store),
+        customCells,
+        editable ? EditableCellView : CellView,
+      ),
+      useStoreCellComponentProps(store, tableId),
+      useSliceRowIds(indexId, sliceId, resolvedIndexes),
+      extraCellsBefore,
+      extraCellsAfter,
+    ),
+  });
+};
+
+const SortedTableInHtmlTable = ({
+  tableId,
+  cellId,
+  descending,
+  offset,
+  limit,
+  store,
+  editable,
+  sortOnClick,
+  paginator = false,
+  onChange,
+  customCells,
+  extraCellsBefore,
+  extraCellsAfter,
+  ...props
+}) => {
+  const [sortAndOffset, handleSort, paginatorComponent] =
+    useSortingAndPagination(
+      cellId,
+      descending,
+      sortOnClick,
+      offset,
+      limit,
+      useRowCount(tableId, store),
+      paginator,
+      onChange,
+    );
+  return /* @__PURE__ */ jsx(HtmlTable, {
+    ...props,
+    params: useParams(
+      useCells(
+        useTableCellIds(tableId, store),
+        customCells,
+        editable ? EditableCellView : CellView,
+      ),
+      useStoreCellComponentProps(store, tableId),
+      useSortedRowIds(tableId, ...sortAndOffset, limit, store),
+      extraCellsBefore,
+      extraCellsAfter,
+      sortAndOffset,
+      handleSort,
+      paginatorComponent,
+    ),
+  });
+};
+
+const extraValueCells = (
+  extraValueCells2 = [],
+  extraValueCellProps,
+  after = 0,
+) =>
+  arrayMap(extraValueCells2, ({component: Component}, index) =>
+    /* @__PURE__ */ jsx(
+      'td',
+      {
+        className: EXTRA,
+        children: /* @__PURE__ */ jsx(Component, {...extraValueCellProps}),
+      },
+      extraKey(index, after),
+    ),
+  );
+const ValuesInHtmlTable = ({
+  store,
+  editable = false,
+  valueComponent: Value = editable ? EditableValueView : ValueView,
+  getValueComponentProps,
+  extraCellsBefore,
+  extraCellsAfter,
+  className,
+  headerRow,
+  idColumn,
+}) =>
+  /* @__PURE__ */ jsxs('table', {
+    className,
+    children: [
+      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),
+              ],
+            }),
+          }),
+      /* @__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,
+          );
+        }),
+      }),
     ],
   });
-};
 
-const Details = ({
-  uniqueId,
-  summary,
-  editable,
-  handleEditable,
-  children,
-  s,
-}) => {
-  const open = !!useCell(STATE_TABLE, uniqueId, OPEN_CELL, s);
-  const handleToggle = useSetCellCallback(
+const Details = ({uniqueId, title, editable, handleEditable, children, s}) => {
+  const open = !!useCell$1(STATE_TABLE, uniqueId, OPEN_CELL, s);
+  const handleToggle = useSetCellCallback$1(
     STATE_TABLE,
     uniqueId,
     OPEN_CELL,
@@ -2770,16 +3243,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}),
     ],
   });
 };
@@ -2787,7 +3261,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(
@@ -2808,7 +3282,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,
@@ -2827,7 +3301,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'
@@ -2849,7 +3323,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)}),
     ],
@@ -2861,7 +3335,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'
@@ -2891,9 +3365,9 @@ const MetricsView = ({metricsId, s}) => {
 const QueryView = ({queries, queriesId, queryId, s}) => {
   const uniqueId = getUniqueId('q', queriesId, queryId);
   const [cellId, descending, offset] = jsonParse(
-    useCell(STATE_TABLE, uniqueId, SORT_CELL, s) ?? '[]',
+    useCell$1(STATE_TABLE, uniqueId, SORT_CELL, s) ?? '[]',
   );
-  const handleChange = useSetCellCallback(
+  const handleChange = useSetCellCallback$1(
     STATE_TABLE,
     uniqueId,
     SORT_CELL,
@@ -2903,7 +3377,7 @@ const QueryView = ({queries, queriesId, queryId, s}) => {
   );
   return /* @__PURE__ */ jsx(Details, {
     uniqueId,
-    summary: 'Query: ' + queryId,
+    title: 'Query: ' + queryId,
     s,
     children: /* @__PURE__ */ jsx(ResultSortedTableInHtmlTable, {
       queryId,
@@ -2925,7 +3399,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'
@@ -2954,7 +3428,7 @@ const RelationshipView = ({
   const [editable, handleEditable] = useEditable(uniqueId, s);
   return /* @__PURE__ */ jsx(Details, {
     uniqueId,
-    summary: 'Relationship: ' + relationshipId,
+    title: 'Relationship: ' + relationshipId,
     editable,
     handleEditable,
     s,
@@ -2972,7 +3446,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'
@@ -2991,12 +3465,318 @@ 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(
-    useCell(STATE_TABLE, uniqueId, SORT_CELL, s) ?? '[]',
+    useCell$1(STATE_TABLE, uniqueId, SORT_CELL, s) ?? '[]',
   );
-  const handleChange = useSetCellCallback(
+  const handleChange = useSetCellCallback$1(
     STATE_TABLE,
     uniqueId,
     SORT_CELL,
@@ -3005,66 +3785,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 + ': ' + tableId,
+    title: TABLE + ': ' + 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$1(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$1(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}),
         ],
       });
 };
@@ -3184,9 +4081,10 @@ class ErrorBoundary extends PureComponent {
 }
 
 const Header = ({s}) => {
-  const position = useValue(POSITION_VALUE, s) ?? 1;
-  const handleClose = useSetValueCallback(OPEN_VALUE, () => false, [], s);
-  const handleDock = useSetValueCallback(
+  const position = useValue$1(POSITION_VALUE, s) ?? 1;
+  const handleClick = () => open('https://tinybase.org', '_blank');
+  const handleClose = useSetValueCallback$1(OPEN_VALUE, () => false, [], s);
+  const handleDock = useSetValueCallback$1(
     POSITION_VALUE,
     (event) => Number(event[CURRENT_TARGET].dataset.id),
     [],
@@ -3194,7 +4092,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
@@ -3209,14 +4111,18 @@ const Header = ({s}) => {
               p,
             ),
       ),
-      /* @__PURE__ */ jsx('img', {onClick: handleClose, title: 'Close'}),
+      /* @__PURE__ */ jsx('img', {
+        className: 'flat',
+        onClick: handleClose,
+        title: 'Close',
+      }),
     ],
   });
 };
 
 const Panel = ({s}) => {
-  const position = useValue(POSITION_VALUE, s) ?? 1;
-  return useValue(OPEN_VALUE, s)
+  const position = useValue$1(POSITION_VALUE, s) ?? 1;
+  return useValue$1(OPEN_VALUE, s)
     ? /* @__PURE__ */ jsxs('main', {
         'data-position': position,
         children: [
@@ -3232,70 +4138,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) => [
@@ -3303,42 +4376,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(
@@ -3365,7 +4536,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],
+      }),
     ],
   });
 };