tinybase 5.0.0-beta.1 → 5.0.0-beta.11

package/lib/types/with-schemas/synchronizers/synchronizer-local.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The synchronizer-local module of the TinyBase project lets you synchronize
+ * MergeableStore data to and from other MergeableStore instances on the same
+ * local machine.
+ * @see Synchronizing Data guide
+ * @packageDocumentation
+ * @module synchronizer-local
+ * @since v5.0.0
+ */
+
+import {MergeableStore} from '../mergeable-store';
+import {OptionalSchemas} from '../store';
+import {Synchronizer} from '../synchronizers';
+
+/**
+ * The LocalSynchronizer interface
+ * @category Synchronizer
+ */
+export interface LocalSynchronizer<Schemas extends OptionalSchemas>
+  extends Synchronizer<Schemas> {}
+
+/**
+ * The createLocalSynchronizer function
+ * @category Creation
+ */
+export function createLocalSynchronizer<Schemas extends OptionalSchemas>(
+  store: MergeableStore<Schemas>,
+  onIgnoredError?: (error: any) => void,
+): LocalSynchronizer<Schemas>;

package/lib/types/with-schemas/synchronizers/synchronizer-ws-client.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The synchronizer-ws module of the TinyBase project lets you synchronize
+ * MergeableStore data to and from other MergeableStore instances via WebSockets
+ * facilitated by a server.
+ * @see Synchronizing Data guide
+ * @packageDocumentation
+ * @module synchronizer-ws-client
+ * @since v5.0.0
+ */
+
+import {MergeableStore} from '../mergeable-store';
+import {OptionalSchemas} from '../store';
+import {Synchronizer} from '../synchronizers';
+import {WebSocket as WsWebSocket} from 'ws';
+
+export type WebSocketTypes = WebSocket | WsWebSocket;
+
+/**
+ * The WsSynchronizer interface
+ * @category Synchronizer
+ */
+export interface WsSynchronizer<
+  Schemas extends OptionalSchemas,
+  WebSocketType extends WebSocketTypes,
+> extends Synchronizer<Schemas> {
+  getWebSocket(): WebSocketType;
+}
+
+/**
+ * The createWsSynchronizer function
+ * @category Creation
+ */
+export function createWsSynchronizer<
+  Schemas extends OptionalSchemas,
+  WebSocketType extends WebSocketTypes,
+>(
+  store: MergeableStore<Schemas>,
+  webSocket: WebSocketType,
+  requestTimeoutSeconds?: number,
+  onIgnoredError?: (error: any) => void,
+): Promise<WsSynchronizer<Schemas, WebSocketType>>;

package/lib/types/with-schemas/synchronizers/synchronizer-ws-server.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The synchronizer-ws-server module of the TinyBase project lets you create
+ * a server that facilitates synchronization between clients.
+ * @see Synchronizing Data guide
+ * @packageDocumentation
+ * @module synchronizer-ws-server
+ * @since v5.0.0
+ */
+
+import {Id, IdOrNull, Ids} from '../common';
+import {GetIdChanges} from '../store';
+import {WebSocketServer} from 'ws';
+
+/**
+ * The PathIdsListener type
+ */
+export type PathIdsListener<> = (
+  wsServer: WsServer,
+  getIdChanges: GetIdChanges<Id>,
+) => void;
+
+/**
+ * The ClientIdsListener type
+ */
+export type ClientIdsListener<> = (
+  wsServer: WsServer,
+  pathId: Id,
+  getIdChanges: GetIdChanges<Id>,
+) => void;
+
+/**
+ * The WsServerStats type
+ */
+export type WsServerStats = {
+  paths?: number;
+  clients?: number;
+};
+
+/**
+ * The WsServer interface
+ */
+export interface WsServer {
+  getWebSocketServer: () => WebSocketServer;
+  getPathIds: () => Ids;
+  getClientIds: (pathId: Id) => Ids;
+  addPathIdsListener: (listener: PathIdsListener) => Id;
+  addClientIdsListener: (pathId: IdOrNull, listener: ClientIdsListener) => Id;
+  delListener(listenerId: Id): WsServer;
+  getStats: () => WsServerStats;
+  destroy: () => void;
+}
+
+/**
+ * The createWsServer function
+ * @category Creation
+ */
+export function createWsServer(WebSocketServer: WebSocketServer): WsServer;

package/lib/types/with-schemas/synchronizers.d.ts

@@ -0,0 +1,146 @@
+/**
+ * The persister-sync module of the TinyBase project lets you synchronize
+ * MergeableStore data to and from other MergeableStore instances.
+ * @see Synchronizing Data guide
+ * @packageDocumentation
+ * @module synchronizers
+ * @since v5.0.0
+ */
+
+import {Content, OptionalSchemas} from './store';
+import {Id, IdOrNull} from './common';
+import {MergeableStore} from './mergeable-store';
+import {Persister} from './persisters';
+
+/**
+ * The MessageType type
+ * @category Synchronization
+ */
+export type MessageType = number;
+
+/**
+ * The Receive type
+ * @category Synchronization
+ */
+export type Receive = (
+  fromClientId: Id,
+  requestId: Id,
+  messageType: MessageType,
+  messageBody: any,
+) => void;
+
+/**
+ * The Send type
+ * @category Synchronization
+ */
+export type Send = (
+  toClientId: IdOrNull,
+  requestId: Id,
+  messageType: MessageType,
+  messageBody: any,
+) => void;
+
+/**
+ * The SynchronizerStats type
+ * @category Development
+ */
+export type SynchronizerStats = {
+  sends?: number;
+  receives?: number;
+};
+
+/**
+ * The Synchronizer interface is a minor extension to the Persister interface.
+ *
+ * It provides extra convenience methods for starting and stopping the
+ * synchronization.
+ *
+ * You should use the createCustomSynchronizer function to create a Synchronizer
+ * object.
+ * @category Synchronizer
+ * @since v5.0.0
+ */
+export interface Synchronizer<Schemas extends OptionalSchemas>
+  extends Persister<Schemas, 2> {
+  /**
+   * The startSync method
+   * @category Synchronization
+   */
+  startSync(initialContent?: Content<Schemas, true>): Promise<this>;
+  /**
+   * The stopSync method
+   * @category Synchronization
+   */
+  stopSync(): this;
+  /**
+   * The getSynchronizerStats method
+   * @category Synchronization
+   */
+  getSynchronizerStats(): SynchronizerStats;
+}
+
+/**
+ * The createCustomSynchronizer function creates a Synchronizer object that can
+ * persist one MergeableStore to another.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * createCustomSynchronizer(
+ *   store: MergeableStore,
+ *   send: Send,
+ *   onReceive: (receive: Receive) => void,
+ *   destroy: () => void,
+ *   requestTimeoutSeconds: number,
+ *   onIgnoredError?: (error: any) => void,
+ * ): Synchronizer;
+ * ```
+ *
+ * As well as providing a reference to the MergeableStore to synchronize, you
+ * must provide a `client` parameter which identifies the Client that is used to
+ * transmit changes to and from this MergeableStore and its peers.
+ * @param store The MergeableStore to synchronize.
+ * @param client The reference of the Client.
+ * @param requestTimeoutSeconds An optional number of seconds before a request
+ * to the Client times out, defaulting to 5.
+ * @param onIgnoredError An optional handler for the errors that the
+ * Synchronizer would otherwise ignore when trying to save or load data. This is
+ * suitable for debugging synchronization issues in a development environment.
+ * @returns A reference to the new Synchronizer object.
+ * @example
+ * This example creates a Synchronizer object and synchronizes one
+ * MergeableStore to another.
+ *
+ * ```js
+ * const store1 = createMergeableStore('store1').setTables({
+ *   pets: {fido: {species: 'dog'}},
+ * });
+ * const synchronizer1 = createLocalSynchronizer(store1);
+ *
+ * const store2 = createMergeableStore('store2');
+ * const synchronizer2 = createLocalSynchronizer(store2);
+ * await synchronizer2.startSync();
+ *
+ * await synchronizer1.save();
+ * // ...
+ * // Store2 will be synced with Store1.
+ *
+ * console.log(store2.getTables());
+ * // -> {pets: {fido: {species: 'dog'}}}
+ *
+ * await synchronizer1.load();
+ * // Store1 will be synced with Store2.
+ *
+ * synchronizer1.destroy();
+ * synchronizer2.destroy();
+ * ```
+ * @category Creation
+ */
+export function createCustomSynchronizer<Schemas extends OptionalSchemas>(
+  store: MergeableStore<Schemas>,
+  send: Send,
+  onReceive: (receive: Receive) => void,
+  destroy: () => void,
+  requestTimeoutSeconds: number,
+  onIgnoredError?: (error: any) => void,
+): Synchronizer<Schemas>;

package/lib/types/with-schemas/tinybase.d.ts

@@ -3,11 +3,12 @@
  * @packageDocumentation
  */
 
-export * from './checkpoints.d';
-export * from './common.d';
-export * from './indexes.d';
-export * from './metrics.d';
-export * from './persisters.d';
-export * from './queries.d';
-export * from './relationships.d';
-export * from './store.d';
+export * from './checkpoints.d.ts';
+export * from './common.d.ts';
+export * from './indexes.d.ts';
+export * from './metrics.d.ts';
+export * from './persisters.d.ts';
+export * from './queries.d.ts';
+export * from './relationships.d.ts';
+export * from './mergeable-store.d.ts';
+export * from './store.d.ts';

package/lib/types/with-schemas/tools.d.ts

@@ -9,8 +9,8 @@
  * @since v2.2.0
  */
 
-import {OptionalSchemas, Store} from './store.d';
-import {Id} from './common.d';
+import {OptionalSchemas, Store} from './store.d.ts';
+import {Id} from './common.d.ts';
 
 /**
  * The StoreStats type describes a set of statistics about the Store, and
@@ -416,7 +416,7 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    *   await createTools(store).getPrettyStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
-   * console.log(dTsLines[17]);
+   * console.log(dTsLines[15]);
    * // -> `export type Tables = {pets?: {[rowId: Id]: {price?: number}}};`
    *
    * const tsLines = ts.split('\n');
@@ -436,7 +436,7 @@ export interface Tools<in out Schemas extends OptionalSchemas> {
    *   await createTools(store).getPrettyStoreApi('shop');
    *
    * const dTsLines = dTs.split('\n');
-   * console.log(dTsLines[17]);
+   * console.log(dTsLines[15]);
    * // -> 'export type Tables = {pets?: {[rowId: Id]: {price: number}}};'
    *
    * const tsLines = ts.split('\n');

package/lib/types/with-schemas/ui-react.d.ts

@@ -64,7 +64,7 @@ import {
   ValueProps,
   ValuesProps,
 } from './internal/ui-react';
-import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d';
+import {Callback, Id, IdOrNull, Ids, ParameterizedCallback} from './common.d.ts';
 import {
   Cell,
   CellIdsListener,
@@ -98,21 +98,21 @@ import {
   ValueListener,
   Values,
   ValuesListener,
-} from './store.d';
+} from './store.d.ts';
 import {
   CheckpointIds,
   CheckpointIdsListener,
   CheckpointListener,
   Checkpoints,
-} from './checkpoints.d';
-import {Indexes, SliceIdsListener, SliceRowIdsListener} from './indexes.d';
+} from './checkpoints.d.ts';
+import {Indexes, SliceIdsListener, SliceRowIdsListener} from './indexes.d.ts';
 import {
   LinkedRowIdsListener,
   LocalRowIdsListener,
   Relationships,
   RemoteRowIdListener,
-} from './relationships.d';
-import {MetricListener, Metrics} from './metrics.d';
+} from './relationships.d.ts';
+import {MetricListener, Metrics} from './metrics.d.ts';
 import {
   Queries,
   ResultCell,
@@ -126,9 +126,11 @@ import {
   ResultTable,
   ResultTableCellIdsListener,
   ResultTableListener,
-} from './queries.d';
-import {Persister} from './persisters.d';
+} from './queries.d.ts';
+import {MergeableStore} from './mergeable-store';
+import {Persister} from './persisters.d.ts';
 import {ReactElement} from 'react';
+import {Synchronizer} from './synchronizers.d.ts';
 
 export type WithSchemas<Schemas extends OptionalSchemas> = {
   /**
@@ -380,6 +382,14 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
     createDeps?: React.DependencyList,
   ) => Store<Schemas>;
 
+  /**
+ * The useCreateMergeableStore hook
+ */
+  useCreateMergeableStore: (
+    create: () => MergeableStore<Schemas>,
+    createDeps?: React.DependencyList,
+  ) => MergeableStore<Schemas>;
+
   /**
  * The useStoreIds hook is used to retrieve the Ids of all the named Store
  * objects present in the current Provider component context.
@@ -11628,8 +11638,8 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * // -> '<span>{\"pets\":{\"fido\":{\"species\":\"dog\"}}}</span>'
  *
  * root.render(<App sessionKey="cujoStore" />); // !act
- * // -> 'Persister destroyed for session key fidoStore'
  * // -> 'Persister created for session key cujoStore'
+ * // -> 'Persister destroyed for session key fidoStore'
  *
  * // ... // !act
  * console.log(app.innerHTML);
@@ -11652,6 +11662,164 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
     destroyDeps?: React.DependencyList,
   ) => PersisterOrUndefined;
 
+  /**
+ * The useCreateSynchronizer hook is used to create a Synchronizer within a
+ * React application along with convenient memoization and callbacks.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * useCreateSynchronizer<
+ *   SynchronizerOrUndefined extends Synchronizer | undefined,
+ * >(
+ *   store: MergeableStore,
+ *   create: (store: MergeableStore) => Promise<SynchronizerOrUndefined>,
+ *   createDeps?: React.DependencyList,
+ *   then?: (synchronizer: Synchronizer) => Promise<void>,
+ *   thenDeps?: React.DependencyList,
+ *   destroy?: (synchronizer: Synchronizer) => void,
+ *   destroyDeps?: React.DependencyList,
+ * ): SynchronizerOrUndefined;
+ * ```
+ *
+ * It is possible to create a Synchronizer outside of the React app with the
+ * regular createSynchronizer function and pass it in, but you may prefer to
+ * create it within the app, perhaps inside the top-level component. To prevent
+ * a new Synchronizer being created every time the app renders or re-renders,
+ * the useCreateMetrics hook performs the creation in an effect.
+ *
+ * If your asynchronous `create` function (the second parameter to the hook)
+ * contains dependencies, the changing of which should cause the Synchronizer to
+ * be recreated, you can provide them in an array in the third parameter, just
+ * as you would for any React hook with dependencies. The MergeableStore passed
+ * in as the first parameter of this hook is used as a dependency by default.
+ *
+ * A second callback, called `then`, can be provided as the fourth parameter.
+ * This is called after the creation, and can also be asynchronous, so that you
+ * can configure the Synchronizer with the startSync method, for example. If
+ * this callback contains dependencies, the changing of which should cause the
+ * Synchronizer to be reconfigured, you can provide them in an array in the
+ * fifth parameter. The Synchronizer itself is used as a dependency by default.
+ *
+ * The `create` function can return undefined, meaning that you can enable or
+ * disable synchronization conditionally within this hook. This is useful for
+ * applications which might turn on or off their cloud synchronization or
+ * collaboration features.
+ *
+ * This hook ensures the Synchronizer object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ * @param store A reference to the MergeableStore for which to create a new
+ * Synchronizer object.
+ * @param create An asynchronous function for performing the creation steps of
+ * the Synchronizer object for the Store.
+ * @param createDeps An optional array of dependencies for the `create`
+ * function, which, if any change, result in its rerun. This parameter defaults
+ * to an empty array.
+ * @param then An optional callback for performing asynchronous post-creation
+ * steps on the Synchronizer, such as starting automatic synchronization.
+ * @param thenDeps An optional array of dependencies for the `then` callback,
+ * which, if any change, result in its rerun. This parameter defaults to an
+ * empty array.
+ * @param destroy An optional callback whenever the Synchronizer is destroyed
+ * due to a change in the `createDeps` dependencies.
+ * @param destroyDeps An optional array of dependencies for the `destroy`
+ * callback, which, if any change, result in `destroy` and `then` being rerun.
+ * This parameter defaults to an empty array.
+ * @returns A reference to the Synchronizer.
+ * @example
+ * This example creates a Synchronizer at the top level of a React application.
+ * Even though the App component is rendered twice, the Synchronizer creation
+ * only occurs once by default.
+ *
+ * ```jsx
+ * const App = () => {
+ *   const store = useCreateMergeableStore(() => createMergeableStore('s1'));
+ *   const synchronizer = useCreateSynchronizer(store, async (store) => {
+ *     console.log('Synchronizer created');
+ *     return await createLocalSynchronizer(store, 'pets');
+ *   });
+ *   return <span>{JSON.stringify(useTables(store))}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App />); // !act
+ * // -> 'Synchronizer created'
+ *
+ * // ... // !act
+ * root.render(<App />); // !act
+ * // No second Synchronizer creation
+ *
+ * root.unmount(); // !act
+ * ```
+ * @example
+ * This example creates a Synchronizer at the top level of a React application.
+ * The App component is rendered twice, each with a different top-level prop.
+ * The useCreateSynchronizer hook takes the `url` prop as a dependency, and so
+ * the Synchronizer object is created again on the second render. The first is
+ * destroyed and the `destroy` parameter is called for it.  A `then` parameter
+ * is provided to start both Synchronizers' synchronization.
+ *
+ * ```jsx
+ * const server1 = createWsServer(new ws.WebSocketServer({port: 8044}));
+ * const server2 = createWsServer(new ws.WebSocketServer({port: 8045}));
+ *
+ * const App = ({url}) => {
+ *   const store = useCreateMergeableStore(() => createMergeableStore('s1'));
+ *   const synchronizer = useCreateSynchronizer(
+ *     store,
+ *     async (store) => {
+ *       const webSocket = new WebSocket(url);
+ *       console.log(`Synchronizer created for ${webSocket.url}`);
+ *       return await createWsSynchronizer(store, webSocket);
+ *     },
+ *     [url],
+ *     async (synchronizer) => {
+ *       await synchronizer.startSync();
+ *     },
+ *     [],
+ *     (synchronizer) => {
+ *       const webSocket = synchronizer.getWebSocket();
+ *       console.log(`Synchronizer destroyed for ${webSocket.url}`);
+ *     },
+ *   );
+ *   return <span>{JSON.stringify(useTables(store))}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * const root = ReactDOMClient.createRoot(app);
+ * root.render(<App url="ws://localhost:8044/" />); // !act
+ * // ... // !act
+ * // -> 'Synchronizer created for ws://localhost:8044/'
+ *
+ * root.render(<App url="ws://localhost:8045/" />); // !act
+ * // ... // !act
+ * // -> 'Synchronizer created for ws://localhost:8045/'
+ * // -> 'Synchronizer destroyed for ws://localhost:8044/'
+ *
+ * root.unmount(); // !act
+ * // -> 'Synchronizer destroyed for ws://localhost:8045/'
+ *
+ * server1.destroy();
+ * server2.destroy();
+ * ```
+ * @category Synchronizer hooks
+ * @since v5.0.0
+ */
+  useCreateSynchronizer: <
+    SynchronizerOrUndefined extends Synchronizer<Schemas> | undefined,
+  >(
+    store: MergeableStore<Schemas>,
+    create: (
+      store: MergeableStore<Schemas>,
+    ) => Promise<SynchronizerOrUndefined>,
+    createDeps?: React.DependencyList,
+    then?: (synchronizer: Synchronizer<Schemas>) => Promise<void>,
+    thenDeps?: React.DependencyList,
+    destroy?: (synchronizer: Synchronizer<Schemas>) => void,
+    destroyDeps?: React.DependencyList,
+  ) => SynchronizerOrUndefined;
+
   /**
  * The ExtraProps type represents a set of arbitrary additional props.
  * @category Props

package/lib/ui-react-dom.js

@@ -1 +1 @@
-import e from"react";import{useRowIds as t,useTableCellIds as l,useRowCount as a,useSortedRowIds as n,useValueIds as o,ValueView as r,useIndexesOrIndexesById as i,useSliceRowIds as s,useRelationshipsOrRelationshipsById as d,useResultRowIds as m,useResultTableCellIds as h,useResultRowCount as u,useResultSortedRowIds as c,useCell as g,useSetCellCallback as p,useStoreOrStoreById as b,useValue as f,useSetValueCallback as w,useRemoteRowId as y,CellView as k,ResultCellView as v}from"./ui-react";const C=e=>typeof e,x=C(""),I=C(!0),N=C(0),z="Value",$="currentTarget",T="value",M=isFinite,S=e=>null==e,{PureComponent:R,Fragment:q,createElement:F,useCallback:P,useLayoutEffect:E,useRef:O,useState:V}=e,j=(e,...t)=>S(e)?{}:e(...t),A=(e,t)=>e.map(t),B=Object,L=B.entries,D=(e=[])=>B.fromEntries(e),G=(e,t)=>A(L(e),(([e,l])=>t(l,e))),H="tinybaseStoreInspector",J="M20 80l5-15l40-40l10 10l-40 40l-15 5m5-15l10 10",K='content:url("',Q=K+"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='4' stroke='white' fill='none'>",U='</svg>")',W=K+"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\")",X=A([[20,20,20,60],[20,20,60,20],[20,60,60,20],[60,20,20,60],[30,30,40,40]],(([e,t,l,a])=>Q+`<rect x='20' y='20' width='60' height='60' fill='grey'/><rect x='${e}' y='${t}' width='${l}' height='${a}' fill='white'/>`+U)),Y=Q+"<path d='M20 20l60 60M20 80l60-60' />"+U,Z=Q+`<path d='${J}' />`+U,_=Q+`<path d='${J}M20 20l60 60' />`+U,ee="*::-webkit-scrollbar";((e,t="")=>{e.join(t)})(G({"":"all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999","*":"all:revert","*::before":"all:revert","*::after":"all:revert",[ee]:"width:0.5rem;height:0.5rem;",[ee+"-track"]:"background:#111",[ee+"-thumb"]:"background:#999;border:1px solid #111",[ee+"-thumb:hover"]:"background:#fff",[ee+"-corner"]:"background:#111",img:"width:1rem;height:1rem;background:#111;border:0;vertical-align:text-bottom",">img":"padding:0.25rem;bottom:0;right:0;position:fixed;"+W,...D(A(["bottom:0;left:0","top:0;right:0"],((e,t)=>[`>img[data-position='${t}']`,e]))),main:"display:flex;flex-direction:column;background:#111d;color:#fff;position:fixed;",...D(A(["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"],((e,t)=>[`main[data-position='${t}']`,e]))),header:"display:flex;padding:0.25rem;background:#000;align-items:center","header>img:nth-of-type(1)":W,"header>img:nth-of-type(6)":Y,...D(A(X,((e,t)=>[`header>img[data-id='${t}']`,e]))),"header>span":"flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem",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":Z,"details[open]>summary img.done":_,summary:"margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content",table:"border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem","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,#${H} 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"},((e,t)=>e?`#${H} ${t}{${e}}`:"")));const te=(e,t,l,a)=>e==x?t:e==N?l:a,{useCallback:le,useMemo:ae,useState:ne}=e,oe="editable",re=(e,t)=>A(l(e,t),(t=>e+"."+t)),ie=(e,t,l)=>{const a=le(e,t);return l?a:void 0},se=(...e)=>ae((()=>e),e),de=(e,t)=>ae((()=>({store:e,tableId:t})),[e,t]),me=(e,t)=>ae((()=>({queries:e,queryId:t})),[e,t]),he=(e,t=!1,l,a=0,n,o,r,i)=>{const[[s,d,m],h]=ne([e,t,a]),u=le((e=>{h(e),i?.(e)}),[i]),c=ie((e=>u([e,e==s&&!d,m])),[u,s,d,m],l),g=le((e=>u([s,d,e])),[u,s,d]),p=!0===r?ze:r;return[[s,d,m],c,ae((()=>!1===r?null:F(p,{offset:m,limit:n,total:o,onChange:g})),[r,p,m,n,o,g])]},ue=(e,t,l)=>ae((()=>{const a=t??e;return D(G(Array.isArray(a)?D(A(a,(e=>[e,e]))):a,((e,t)=>{return[t,{label:t,component:l,...(a=e,C(a)==x?{label:e}:e)}];var a})))}),[t,l,e]),ce=({className:e,headerRow:t,idColumn:l,params:[a,n,o,r,i,s]})=>F("table",{className:e},s?F("caption",null,s):null,!1===t?null:F("thead",null,F("tr",null,!1===l?null:F(ge,{sort:r??[],label:"Id",onClick:i}),G(a,(({label:e},t)=>F(ge,{key:t,cellId:t,label:e,sort:r??[],onClick:i}))))),F("tbody",null,A(o,(e=>F("tr",{key:e},!1===l?null:F("th",null,e),G(a,(({component:t,getComponentProps:l},a)=>F("td",{key:a},F(t,{...j(l,e,a),...n,rowId:e,cellId:a}))))))))),ge=({cellId:e,sort:[t,l],label:a=e??"",onClick:n})=>F("th",{onClick:ie((()=>n?.(e)),[n,e],n),className:S(l)||t!=e?void 0:`sorted ${l?"de":"a"}scending`},S(l)||t!=e?null:(l?"↓":"↑")+" ",a),pe=({localRowId:t,params:[l,a,n,o,r,i,s]})=>{const d=y(r,t,i);return F("tr",null,!1===l?null:F(e.Fragment,null,F("th",null,t),F("th",null,d)),G(a,(({component:e,getComponentProps:l},a)=>{const[r,i]=a.split(".",2),m=r===n?t:r===o?d:null;return S(m)?null:F("td",{key:a},F(e,{...j(l,m,i),store:s,tableId:r,rowId:m,cellId:i}))})))},be=({thing:e,onThingChange:t,className:l,hasSchema:a,showType:n=!0})=>{const[o,r]=ne(),[i,s]=ne(),[d,m]=ne(),[h,u]=ne(),[c,g]=ne();i!==e&&(r((e=>{const t=C(e);return(e=>e==x||e==I)(t)||t==N&&M(e)?t:void 0})(e)),s(e),m(e+""),u(Number(e)||0),g(!!e));const p=le(((e,l)=>{l(e),s(e),t(e)}),[t]),b=le((()=>{if(!a?.()){const e=te(o,N,I,x),l=te(e,d,h,c);r(e),s(l),t(l)}}),[a,t,d,h,c,o]);return F("div",{className:l},n?F("button",{className:o,onClick:b},o):null,te(o,F("input",{key:o,value:d,onChange:le((e=>p(e[$][T]+"",m)),[p])}),F("input",{key:o,type:"number",value:h,onChange:le((e=>p(Number(e[$][T]||0),u)),[p])}),F("input",{key:o,type:"checkbox",checked:c,onChange:le((e=>p(!!e[$].checked,g)),[p])})))},fe=({tableId:e,store:a,editable:n,customCells:o,...r})=>F(ce,{...r,params:se(ue(l(e,a),o,n?Ie:k),de(a,e),t(e,a))}),we=({tableId:e,cellId:t,descending:o,offset:r,limit:i,store:s,editable:d,sortOnClick:m,paginator:h=!1,onChange:u,customCells:c,...g})=>{const[p,b,f]=he(t,o,m,r,i,a(e,s),h,u);return F(ce,{...g,params:se(ue(l(e,s),c,d?Ie:k),de(s,e),n(e,...p,i,s),p,b,f)})},ye=({store:e,editable:t=!1,valueComponent:l=(t?Ne:r),getValueComponentProps:a,className:n,headerRow:i,idColumn:s})=>F("table",{className:n},!1===i?null:F("thead",null,F("tr",null,!1===s?null:F("th",null,"Id"),F("th",null,z))),F("tbody",null,A(o(e),(t=>F("tr",{key:t},!1===s?null:F("th",null,t),F("td",null,F(l,{...j(a,t),valueId:t,store:e}))))))),ke=({indexId:e,sliceId:t,indexes:a,editable:n,customCells:o,...r})=>{const[d,m,h]=((e,t)=>[e,e?.getStore(),e?.getTableId(t)])(i(a),e);return F(ce,{...r,params:se(ue(l(h,m),o,n?Ie:k),de(m,h),s(e,t,d))})},ve=({relationshipId:l,relationships:a,editable:n,customCells:o,className:r,headerRow:i,idColumn:s=!0})=>{const[m,h,u,c]=((e,t)=>[e,e?.getStore(),e?.getLocalTableId(t),e?.getRemoteTableId(t)])(d(a),l),g=ue([...re(u,h),...re(c,h)],o,n?Ie:k),p=se(s,g,u,c,l,m,h);return F("table",{className:r},!1===i?null:F("thead",null,F("tr",null,!1===s?null:F(e.Fragment,null,F("th",null,u,".Id"),F("th",null,c,".Id")),G(g,(({label:e},t)=>F("th",{key:t},e))))),F("tbody",null,A(t(u,h),(e=>F(pe,{key:e,localRowId:e,params:p})))))},Ce=({queryId:e,queries:t,customCells:l,...a})=>F(ce,{...a,params:se(ue(h(e,t),l,v),me(t,e),m(e,t))}),xe=({queryId:e,cellId:t,descending:l,offset:a,limit:n,queries:o,sortOnClick:r,paginator:i=!1,customCells:s,onChange:d,...m})=>{const[g,p,b]=he(t,l,r,a,n,u(e,o),i,d);return F(ce,{...m,params:se(ue(h(e,o),s,v),me(o,e),c(e,...g,n,o),g,p,b)})},Ie=({tableId:e,rowId:t,cellId:l,store:a,className:n,showType:o})=>F(be,{thing:g(e,t,l,a),onThingChange:p(e,t,l,(e=>e),[],a),className:n??oe+"Cell",showType:o,hasSchema:b(a)?.hasTablesSchema}),Ne=({valueId:e,store:t,className:l,showType:a})=>F(be,{thing:f(e,t),onThingChange:w(e,(e=>e),[],t),className:l??oe+z,showType:a,hasSchema:b(t)?.hasValuesSchema}),ze=({onChange:t,total:l,offset:a=0,limit:n=l,singular:o="row",plural:r=o+"s"})=>{(a>l||a<0)&&(a=0,t(0));const i=ie((()=>t(a-n)),[t,a,n],a>0),s=ie((()=>t(a+n)),[t,a,n],a+n<l);return F(e.Fragment,null,l>n&&F(e.Fragment,null,F("button",{className:"previous",disabled:0==a,onClick:i},"←"),F("button",{className:"next",disabled:a+n>=l,onClick:s},"→"),a+1," to ",Math.min(l,a+n)," of "),l," ",1!=l?r:o)},$e=e=>new Map(e);$e(),$e();const Te=e=>null;export{Ie as EditableCellView,Ne as EditableValueView,ve as RelationshipInHtmlTable,xe as ResultSortedTableInHtmlTable,Ce as ResultTableInHtmlTable,ke as SliceInHtmlTable,we as SortedTableInHtmlTable,ze as SortedTablePaginator,Te as StoreInspector,fe as TableInHtmlTable,ye as ValuesInHtmlTable};
+import e from"react";import{useRowIds as t,useTableCellIds as l,useRowCount as a,useSortedRowIds as n,useValueIds as o,ValueView as r,useIndexesOrIndexesById as i,useSliceRowIds as s,useRelationshipsOrRelationshipsById as d,useResultRowIds as m,useResultTableCellIds as h,useResultRowCount as u,useResultSortedRowIds as c,useCell as g,useSetCellCallback as p,useStoreOrStoreById as b,useValue as f,useSetValueCallback as w,useRemoteRowId as y,CellView as v,ResultCellView as k}from"./ui-react";const C=e=>typeof e,x=C(""),I=C(!0),N=C(0),z="Value",$="currentTarget",T="value",M=isFinite,S=e=>null==e,{PureComponent:R,Fragment:q,createElement:F,useCallback:P,useLayoutEffect:E,useRef:O,useState:V}=e,j=(e,...t)=>S(e)?{}:e(...t),A=(e,t)=>e.map(t),B=Object,L=B.entries,D=(e=[])=>B.fromEntries(e),G=(e,t)=>A(L(e),(([e,l])=>t(l,e))),H="tinybaseStoreInspector",J="M20 80l5-15l40-40l10 10l-40 40l-15 5m5-15l10 10",K='content:url("',Q=K+"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke-width='4' stroke='white' fill='none'>",U='</svg>")',W=K+"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\")",X=A([[20,20,20,60],[20,20,60,20],[20,60,60,20],[60,20,20,60],[30,30,40,40]],(([e,t,l,a])=>Q+`<rect x='20' y='20' width='60' height='60' fill='grey'/><rect x='${e}' y='${t}' width='${l}' height='${a}' fill='white'/>`+U)),Y=Q+"<path d='M20 20l60 60M20 80l60-60' />"+U,Z=Q+`<path d='${J}' />`+U,_=Q+`<path d='${J}M20 20l60 60' />`+U,ee="*::-webkit-scrollbar";((e,t="")=>{e.join(t)})(G({"":"all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999","*":"all:revert","*::before":"all:revert","*::after":"all:revert",[ee]:"width:0.5rem;height:0.5rem;",[ee+"-track"]:"background:#111",[ee+"-thumb"]:"background:#999;border:1px solid #111",[ee+"-thumb:hover"]:"background:#fff",[ee+"-corner"]:"background:#111",img:"width:1rem;height:1rem;background:#111;border:0;vertical-align:text-bottom",">img":"padding:0.25rem;bottom:0;right:0;position:fixed;"+W,...D(A(["bottom:0;left:0","top:0;right:0"],((e,t)=>[`>img[data-position='${t}']`,e]))),main:"display:flex;flex-direction:column;background:#111d;color:#fff;position:fixed;",...D(A(["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"],((e,t)=>[`main[data-position='${t}']`,e]))),header:"display:flex;padding:0.25rem;background:#000;align-items:center","header>img:nth-of-type(1)":W,"header>img:nth-of-type(6)":Y,...D(A(X,((e,t)=>[`header>img[data-id='${t}']`,e]))),"header>span":"flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem",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":Z,"details[open]>summary img.done":_,summary:"margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content",table:"border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem","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,#${H} 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"},((e,t)=>e?`#${H} ${t}{${e}}`:"")));const te=(e,t,l,a)=>e==x?t:e==N?l:a,{useCallback:le,useMemo:ae,useState:ne}=e,oe="editable",re=(e,t)=>A(l(e,t),(t=>e+"."+t)),ie=(e,t,l)=>{const a=le(e,t);return l?a:void 0},se=(...e)=>ae((()=>e),e),de=(e,t)=>ae((()=>({store:e,tableId:t})),[e,t]),me=(e,t)=>ae((()=>({queries:e,queryId:t})),[e,t]),he=(e,t=!1,l,a=0,n,o,r,i)=>{const[[s,d,m],h]=ne([e,t,a]),u=le((e=>{h(e),i?.(e)}),[i]),c=ie((e=>u([e,e==s&&!d,m])),[u,s,d,m],l),g=le((e=>u([s,d,e])),[u,s,d]),p=!0===r?ze:r;return[[s,d,m],c,ae((()=>!1===r?null:F(p,{offset:m,limit:n,total:o,onChange:g})),[r,p,m,n,o,g])]},ue=(e,t,l)=>ae((()=>{const a=t??e;return n=Array.isArray(a)?D(A(a,(e=>[e,e]))):a,o=(e,t)=>{return{label:t,component:l,...(a=e,C(a)==x?{label:e}:e)};var a},D(G(n,((e,t)=>[t,o(e,t)])));var n,o}),[t,l,e]),ce=({className:e,headerRow:t,idColumn:l,params:[a,n,o,r,i,s]})=>F("table",{className:e},s?F("caption",null,s):null,!1===t?null:F("thead",null,F("tr",null,!1===l?null:F(ge,{sort:r??[],label:"Id",onClick:i}),G(a,(({label:e},t)=>F(ge,{key:t,cellId:t,label:e,sort:r??[],onClick:i}))))),F("tbody",null,A(o,(e=>F("tr",{key:e},!1===l?null:F("th",null,e),G(a,(({component:t,getComponentProps:l},a)=>F("td",{key:a},F(t,{...j(l,e,a),...n,rowId:e,cellId:a}))))))))),ge=({cellId:e,sort:[t,l],label:a=e??"",onClick:n})=>F("th",{onClick:ie((()=>n?.(e)),[n,e],n),className:S(l)||t!=e?void 0:`sorted ${l?"de":"a"}scending`},S(l)||t!=e?null:(l?"↓":"↑")+" ",a),pe=({localRowId:t,params:[l,a,n,o,r,i,s]})=>{const d=y(r,t,i);return F("tr",null,!1===l?null:F(e.Fragment,null,F("th",null,t),F("th",null,d)),G(a,(({component:e,getComponentProps:l},a)=>{const[r,i]=a.split(".",2),m=r===n?t:r===o?d:null;return S(m)?null:F("td",{key:a},F(e,{...j(l,m,i),store:s,tableId:r,rowId:m,cellId:i}))})))},be=({thing:e,onThingChange:t,className:l,hasSchema:a,showType:n=!0})=>{const[o,r]=ne(),[i,s]=ne(),[d,m]=ne(),[h,u]=ne(),[c,g]=ne();i!==e&&(r((e=>{const t=C(e);return(e=>e==x||e==I)(t)||t==N&&M(e)?t:void 0})(e)),s(e),m(e+""),u(Number(e)||0),g(!!e));const p=le(((e,l)=>{l(e),s(e),t(e)}),[t]),b=le((()=>{if(!a?.()){const e=te(o,N,I,x),l=te(e,d,h,c);r(e),s(l),t(l)}}),[a,t,d,h,c,o]);return F("div",{className:l},n?F("button",{className:o,onClick:b},o):null,te(o,F("input",{key:o,value:d,onChange:le((e=>p(e[$][T]+"",m)),[p])}),F("input",{key:o,type:"number",value:h,onChange:le((e=>p(Number(e[$][T]||0),u)),[p])}),F("input",{key:o,type:"checkbox",checked:c,onChange:le((e=>p(!!e[$].checked,g)),[p])})))},fe=({tableId:e,store:a,editable:n,customCells:o,...r})=>F(ce,{...r,params:se(ue(l(e,a),o,n?Ie:v),de(a,e),t(e,a))}),we=({tableId:e,cellId:t,descending:o,offset:r,limit:i,store:s,editable:d,sortOnClick:m,paginator:h=!1,onChange:u,customCells:c,...g})=>{const[p,b,f]=he(t,o,m,r,i,a(e,s),h,u);return F(ce,{...g,params:se(ue(l(e,s),c,d?Ie:v),de(s,e),n(e,...p,i,s),p,b,f)})},ye=({store:e,editable:t=!1,valueComponent:l=(t?Ne:r),getValueComponentProps:a,className:n,headerRow:i,idColumn:s})=>F("table",{className:n},!1===i?null:F("thead",null,F("tr",null,!1===s?null:F("th",null,"Id"),F("th",null,z))),F("tbody",null,A(o(e),(t=>F("tr",{key:t},!1===s?null:F("th",null,t),F("td",null,F(l,{...j(a,t),valueId:t,store:e}))))))),ve=({indexId:e,sliceId:t,indexes:a,editable:n,customCells:o,...r})=>{const[d,m,h]=((e,t)=>[e,e?.getStore(),e?.getTableId(t)])(i(a),e);return F(ce,{...r,params:se(ue(l(h,m),o,n?Ie:v),de(m,h),s(e,t,d))})},ke=({relationshipId:l,relationships:a,editable:n,customCells:o,className:r,headerRow:i,idColumn:s=!0})=>{const[m,h,u,c]=((e,t)=>[e,e?.getStore(),e?.getLocalTableId(t),e?.getRemoteTableId(t)])(d(a),l),g=ue([...re(u,h),...re(c,h)],o,n?Ie:v),p=se(s,g,u,c,l,m,h);return F("table",{className:r},!1===i?null:F("thead",null,F("tr",null,!1===s?null:F(e.Fragment,null,F("th",null,u,".Id"),F("th",null,c,".Id")),G(g,(({label:e},t)=>F("th",{key:t},e))))),F("tbody",null,A(t(u,h),(e=>F(pe,{key:e,localRowId:e,params:p})))))},Ce=({queryId:e,queries:t,customCells:l,...a})=>F(ce,{...a,params:se(ue(h(e,t),l,k),me(t,e),m(e,t))}),xe=({queryId:e,cellId:t,descending:l,offset:a,limit:n,queries:o,sortOnClick:r,paginator:i=!1,customCells:s,onChange:d,...m})=>{const[g,p,b]=he(t,l,r,a,n,u(e,o),i,d);return F(ce,{...m,params:se(ue(h(e,o),s,k),me(o,e),c(e,...g,n,o),g,p,b)})},Ie=({tableId:e,rowId:t,cellId:l,store:a,className:n,showType:o})=>F(be,{thing:g(e,t,l,a),onThingChange:p(e,t,l,(e=>e),[],a),className:n??oe+"Cell",showType:o,hasSchema:b(a)?.hasTablesSchema}),Ne=({valueId:e,store:t,className:l,showType:a})=>F(be,{thing:f(e,t),onThingChange:w(e,(e=>e),[],t),className:l??oe+z,showType:a,hasSchema:b(t)?.hasValuesSchema}),ze=({onChange:t,total:l,offset:a=0,limit:n=l,singular:o="row",plural:r=o+"s"})=>{(a>l||a<0)&&(a=0,t(0));const i=ie((()=>t(a-n)),[t,a,n],a>0),s=ie((()=>t(a+n)),[t,a,n],a+n<l);return F(e.Fragment,null,l>n&&F(e.Fragment,null,F("button",{className:"previous",disabled:0==a,onClick:i},"←"),F("button",{className:"next",disabled:a+n>=l,onClick:s},"→"),a+1," to ",Math.min(l,a+n)," of "),l," ",1!=l?r:o)},$e=e=>new Map(e);$e(),$e();const Te=e=>null;export{Ie as EditableCellView,Ne as EditableValueView,ke as RelationshipInHtmlTable,xe as ResultSortedTableInHtmlTable,Ce as ResultTableInHtmlTable,ve as SliceInHtmlTable,we as SortedTableInHtmlTable,ze as SortedTablePaginator,Te as StoreInspector,fe as TableInHtmlTable,ye as ValuesInHtmlTable};