@crdt-sync/core 0.1.1 → 0.2.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAAqD;AAA5C,mHAAA,cAAc,OAAA;AAEvB,6DAAyD;AAAhD,uHAAA,gBAAgB,OAAA"}
+{"version":3,"sources":["../src/index.ts","../src/CrdtStateProxy.ts","../src/WebSocketManager.ts"],"sourcesContent":["export { CrdtStateProxy } from './CrdtStateProxy.js';\nexport type { WasmStateStore, UpdateEvent, UpdateHandler } from './CrdtStateProxy.js';\nexport { WebSocketManager } from './WebSocketManager.js';\nexport type { WebSocketLike } from './WebSocketManager.js';\n","/**\n * TypeScript interface matching the Wasm-bindgen-generated `WasmStateStore`.\n *\n * In production, import the real `WasmStateStore` from the compiled Wasm\n * package (e.g. `import { WasmStateStore } from './crdt_sync.js'`).\n * In tests the interface can be satisfied by any mock object.\n */\nexport interface WasmStateStore {\n  /** Write a JSON-encoded value to the named LWW register. Returns the Envelope JSON. */\n  set_register(key: string, value_json: string): string;\n  /** Read the current value of a named LWW register as a JSON string, or `undefined`. */\n  get_register(key: string): string | undefined;\n  /** Apply a remote Envelope (serialised as JSON) to this store. */\n  apply_envelope(envelope_json: string): void;\n}\n\n/**\n * Payload delivered to every `onUpdate` listener when a property is written\n * through the proxy.\n */\nexport interface UpdateEvent {\n  /** Dot-separated key path that was updated (e.g. `\"robot.speed\"`). */\n  key: string;\n  /** The new JavaScript value. */\n  value: unknown;\n  /**\n   * The CRDT Envelope returned by `WasmStateStore.set_register`, serialised\n   * as a JSON string.  Broadcast this to peer nodes via `apply_envelope`.\n   */\n  envelope: string;\n}\n\n/** Callback type for `onUpdate` listeners. */\nexport type UpdateHandler = (event: UpdateEvent) => void;\n\n/**\n * A TypeScript proxy wrapper around `WasmStateStore` that gives frontend\n * developers a **magical, object-oriented** experience.\n *\n * ## How it works\n *\n * 1. **JS `Proxy` interception** – accessing a nested path on `state` returns\n *    another `Proxy`.  Assigning a value anywhere in the tree intercepts the\n *    write and forwards it to the underlying Wasm store via\n *    `set_register(dotPath, JSON.stringify(value))`.\n *\n * 2. **Wasm call** – the interceptor immediately calls\n *    `WasmStateStore.set_register()` so the CRDT operation is recorded and\n *    returns an `Envelope` JSON string ready for broadcasting.\n *\n * 3. **Event emitter** – every write fires all `onUpdate` listeners with the\n *    full `UpdateEvent` (key, value, envelope), enabling React / Vue and other\n *    UI frameworks to react to state changes.\n *\n * ## Usage\n *\n * ```ts\n * import init, { WasmStateStore } from './crdt_sync.js';\n * import { CrdtStateProxy } from './CrdtStateProxy.js';\n *\n * await init();\n * const store = new WasmStateStore('node-1');\n * const proxy = new CrdtStateProxy(store);\n *\n * // Register a listener (e.g. trigger a React re-render).\n * const unsubscribe = proxy.onUpdate(({ key, value, envelope }) => {\n *   console.log(`${key} =`, value);\n *   broadcast(envelope); // send to peers\n * });\n *\n * // Write through the proxy — the interceptor handles everything.\n * proxy.state.speed = 100;\n * proxy.state.robot.x = 42;\n *\n * // Clean up when done.\n * unsubscribe();\n * ```\n */\nexport class CrdtStateProxy {\n  private readonly _store: WasmStateStore;\n  private readonly _handlers: Set<UpdateHandler> = new Set();\n  private readonly _state: Record<string, unknown>;\n\n  /**\n   * Create a new `CrdtStateProxy` backed by the given `WasmStateStore`.\n   *\n   * @param store - The Wasm state store instance to proxy.\n   */\n  constructor(store: WasmStateStore) {\n    this._store = store;\n    this._state = this._makeProxy('');\n  }\n\n  // ── Public API ────────────────────────────────────────────────────────\n\n  /**\n   * The proxied state object.\n   *\n   * Assigning any property (or nested property) on this object will\n   * automatically call `WasmStateStore.set_register` and fire `onUpdate`\n   * listeners.\n   *\n   * ```ts\n   * proxy.state.speed = 100;       // key: \"speed\"\n   * proxy.state.robot.speed = 100; // key: \"robot.speed\"\n   * ```\n   */\n  get state(): Record<string, unknown> {\n    return this._state;\n  }\n\n  /**\n   * Register a listener that is called whenever a property is written through\n   * `proxy.state`.\n   *\n   * @param handler - Callback receiving an `UpdateEvent`.\n   * @returns An unsubscribe function — call it to remove the listener.\n   */\n  onUpdate(handler: UpdateHandler): () => void {\n    this._handlers.add(handler);\n    return () => {\n      this._handlers.delete(handler);\n    };\n  }\n\n  // ── Internal helpers ──────────────────────────────────────────────────\n\n  /**\n   * Recursively build a `Proxy` for the given dot-path `prefix`.\n   *\n   * - **`get` trap**: returns a child proxy for the nested path so that deep\n   *   assignments like `proxy.state.robot.speed = 100` work correctly.\n   * - **`set` trap**: serialises the value, calls `set_register`, and fires\n   *   all `onUpdate` listeners.\n   */\n  private _makeProxy(prefix: string): Record<string, unknown> {\n    const children: Record<string, Record<string, unknown>> = {};\n\n    return new Proxy({} as Record<string, unknown>, {\n      get: (_target, prop: string) => {\n        const key = prefix ? `${prefix}.${prop}` : prop;\n        if (!(prop in children)) {\n          children[prop] = this._makeProxy(key);\n        }\n        return children[prop];\n      },\n\n      set: (_target, prop: string, value: unknown) => {\n        const key = prefix ? `${prefix}.${prop}` : prop;\n        const envelope = this._store.set_register(key, JSON.stringify(value));\n        this._emit({ key, value, envelope });\n        return true;\n      },\n    });\n  }\n\n  /** Dispatch an `UpdateEvent` to all registered handlers. */\n  private _emit(event: UpdateEvent): void {\n    this._handlers.forEach((handler) => handler(event));\n  }\n}\n","import { CrdtStateProxy } from './CrdtStateProxy.js';\nimport type { WasmStateStore } from './CrdtStateProxy.js';\n\n/**\n * Minimal subset of the browser `WebSocket` API used by `WebSocketManager`.\n *\n * The real browser `WebSocket` satisfies this interface out-of-the-box.\n * In tests, a plain mock object can be used instead.\n */\nexport interface WebSocketLike {\n  /** Current connection state (0 = CONNECTING, 1 = OPEN, 2 = CLOSING, 3 = CLOSED). */\n  readonly readyState: number;\n  /** Send a UTF-8 string frame to the server. */\n  send(data: string): void;\n  /** Initiate the closing handshake. */\n  close(): void;\n  /** Fired when a message frame is received. */\n  onmessage: ((event: { data: string }) => void) | null;\n  /** Fired when the connection is established. */\n  onopen: ((event: unknown) => void) | null;\n  /** Fired when the connection is closed. */\n  onclose: ((event: unknown) => void) | null;\n  /** Fired when an error occurs. */\n  onerror: ((event: unknown) => void) | null;\n}\n\n/**\n * Bridges a `CrdtStateProxy` to a WebSocket connection so that every CRDT\n * operation produced locally is broadcast to peers, and every envelope\n * received from a peer is applied to the local store.\n *\n * ## Data flow\n *\n * ```\n * Local write\n *   → CrdtStateProxy.onUpdate  (envelope collected in _pendingEnvelopes)\n *   → requestAnimationFrame / setTimeout schedules a batch flush\n *   → WebSocket.send(JSON.stringify(envelopes))   // one payload per frame\n *\n * Incoming message (single envelope or JSON array of envelopes)\n *   → WebSocket.onmessage\n *   → WasmStateStore.apply_envelope()    // merge into local store\n * ```\n *\n * ## Throttling / batching\n *\n * Multiple proxy writes that occur within the same JavaScript task (e.g. a\n * 60 FPS game loop) are collected in `_pendingEnvelopes` and sent as a single\n * JSON array payload on the next animation frame (browser) or the next\n * `setTimeout(fn, 0)` tick (Node.js / non-browser environments).  This keeps\n * network traffic proportional to frame rate rather than to the raw mutation\n * rate.\n *\n * ## Usage\n *\n * ```ts\n * import init, { WasmStateStore } from './crdt_sync.js';\n * import { CrdtStateProxy, WebSocketManager } from './index.js';\n *\n * await init();\n * const store = new WasmStateStore('node-1');\n * const proxy = new CrdtStateProxy(store);\n * const manager = new WebSocketManager(store, proxy, new WebSocket('wss://example.com/sync'));\n *\n * // Writes are automatically batched and broadcast to peers.\n * proxy.state.robot = { x: 10, y: 20 };\n *\n * // Clean up.\n * manager.disconnect();\n * ```\n */\nexport class WebSocketManager {\n  private readonly _store: WasmStateStore;\n  private readonly _proxy: CrdtStateProxy;\n  private readonly _ws: WebSocketLike;\n  private _unsubscribe: (() => void) | null = null;\n  /** Envelopes collected in the current frame, waiting for the batch flush. */\n  private _pendingEnvelopes: string[] = [];\n  /** Cancels the currently scheduled batch flush (rAF or setTimeout handle). */\n  private _cancelFlush: (() => void) | null = null;\n  /** Envelopes queued while the socket is not open, flushed on reconnection. */\n  private _offlineQueue: string[] = [];\n\n  /**\n   * Create a `WebSocketManager` and attach it to the given WebSocket.\n   *\n   * @param store - The Wasm state store. Incoming peer envelopes will be\n   *   applied to this store via `apply_envelope`.\n   * @param proxy - The CRDT state proxy. Outgoing envelopes produced by\n   *   `set_register` calls will be read from the proxy's `onUpdate` events.\n   * @param ws - An open or connecting WebSocket (or any `WebSocketLike` object).\n   */\n  constructor(store: WasmStateStore, proxy: CrdtStateProxy, ws: WebSocketLike) {\n    this._store = store;\n    this._proxy = proxy;\n    this._ws = ws;\n    this._attach();\n  }\n\n  // ── Internal setup ────────────────────────────────────────────────────\n\n  private _attach(): void {\n    const ws = this._ws;\n\n    // Collect envelopes and schedule a batch flush once per frame so that\n    // multiple synchronous writes (e.g. a 60 FPS game loop) are coalesced\n    // into a single network payload instead of one message per mutation.\n    this._unsubscribe = this._proxy.onUpdate(({ envelope }) => {\n      this._pendingEnvelopes.push(envelope);\n      this._scheduleBatchFlush();\n    });\n\n    // On (re)connection, immediately flush pending envelopes together with any\n    // envelopes that were queued while the socket was offline.\n    ws.onopen = () => {\n      // Cancel any scheduled flush — we will drain everything right now.\n      this._cancelFlush?.();\n      this._cancelFlush = null;\n      const offline = this._offlineQueue;\n      const pending = this._pendingEnvelopes;\n      this._offlineQueue = [];\n      this._pendingEnvelopes = [];\n      const batch = [...offline, ...pending];\n      if (batch.length > 0) {\n        ws.send(JSON.stringify(batch));\n      }\n    };\n\n    // Apply envelopes received from peers.  Peers may send either a single\n    // envelope JSON string or a JSON array of envelope strings (batch format).\n    ws.onmessage = (event) => {\n      let parsed: unknown;\n      try {\n        parsed = JSON.parse(event.data);\n      } catch {\n        parsed = null;\n      }\n      if (Array.isArray(parsed)) {\n        for (const env of parsed) {\n          this._store.apply_envelope(env as string);\n        }\n      } else {\n        // Fallback: treat the raw frame data as a single envelope string.\n        this._store.apply_envelope(event.data);\n      }\n    };\n\n    // On close or error the subscription stays active so that writes made\n    // while offline are buffered and flushed when the socket reconnects.\n    ws.onclose = () => { /* keep buffering */ };\n    ws.onerror = () => { /* keep buffering */ };\n  }\n\n  /**\n   * Schedule a single batch flush for the current frame.  Subsequent calls\n   * before the flush fires are no-ops (only one flush is ever outstanding).\n   *\n   * Uses `requestAnimationFrame` when available (browser, ~60 FPS cadence),\n   * falling back to `setTimeout(fn, 0)` in non-browser environments.\n   */\n  private _scheduleBatchFlush(): void {\n    if (this._cancelFlush !== null) return; // already scheduled\n\n    const doFlush = () => {\n      this._cancelFlush = null;\n      this._flushBatch();\n    };\n\n    if (typeof requestAnimationFrame === 'function') {\n      const id = requestAnimationFrame(doFlush);\n      this._cancelFlush = () => cancelAnimationFrame(id);\n    } else {\n      const id = setTimeout(doFlush, 0);\n      this._cancelFlush = () => clearTimeout(id);\n    }\n  }\n\n  /**\n   * Send all pending envelopes as a single JSON-array payload, or move them\n   * to the offline queue if the socket is not currently open.\n   */\n  private _flushBatch(): void {\n    const envelopes = this._pendingEnvelopes.splice(0);\n    if (envelopes.length === 0) return;\n\n    const ws = this._ws;\n    if (ws.readyState === 1 /* OPEN */) {\n      ws.send(JSON.stringify(envelopes));\n    } else {\n      this._offlineQueue.push(...envelopes);\n    }\n  }\n\n  // ── Public API ────────────────────────────────────────────────────────\n\n  /**\n   * Unsubscribe from proxy updates, discard any buffered envelopes, and close\n   * the WebSocket connection.\n   *\n   * Safe to call more than once.\n   */\n  disconnect(): void {\n    this._unsubscribe?.();\n    this._unsubscribe = null;\n    this._cancelFlush?.();\n    this._cancelFlush = null;\n    this._pendingEnvelopes = [];\n    this._offlineQueue = [];\n    this._ws.close();\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,194 @@
+// src/CrdtStateProxy.ts
+var CrdtStateProxy = class {
+  /**
+   * Create a new `CrdtStateProxy` backed by the given `WasmStateStore`.
+   *
+   * @param store - The Wasm state store instance to proxy.
+   */
+  constructor(store) {
+    this._handlers = /* @__PURE__ */ new Set();
+    this._store = store;
+    this._state = this._makeProxy("");
+  }
+  // ── Public API ────────────────────────────────────────────────────────
+  /**
+   * The proxied state object.
+   *
+   * Assigning any property (or nested property) on this object will
+   * automatically call `WasmStateStore.set_register` and fire `onUpdate`
+   * listeners.
+   *
+   * ```ts
+   * proxy.state.speed = 100;       // key: "speed"
+   * proxy.state.robot.speed = 100; // key: "robot.speed"
+   * ```
+   */
+  get state() {
+    return this._state;
+  }
+  /**
+   * Register a listener that is called whenever a property is written through
+   * `proxy.state`.
+   *
+   * @param handler - Callback receiving an `UpdateEvent`.
+   * @returns An unsubscribe function — call it to remove the listener.
+   */
+  onUpdate(handler) {
+    this._handlers.add(handler);
+    return () => {
+      this._handlers.delete(handler);
+    };
+  }
+  // ── Internal helpers ──────────────────────────────────────────────────
+  /**
+   * Recursively build a `Proxy` for the given dot-path `prefix`.
+   *
+   * - **`get` trap**: returns a child proxy for the nested path so that deep
+   *   assignments like `proxy.state.robot.speed = 100` work correctly.
+   * - **`set` trap**: serialises the value, calls `set_register`, and fires
+   *   all `onUpdate` listeners.
+   */
+  _makeProxy(prefix) {
+    const children = {};
+    return new Proxy({}, {
+      get: (_target, prop) => {
+        const key = prefix ? `${prefix}.${prop}` : prop;
+        if (!(prop in children)) {
+          children[prop] = this._makeProxy(key);
+        }
+        return children[prop];
+      },
+      set: (_target, prop, value) => {
+        const key = prefix ? `${prefix}.${prop}` : prop;
+        const envelope = this._store.set_register(key, JSON.stringify(value));
+        this._emit({ key, value, envelope });
+        return true;
+      }
+    });
+  }
+  /** Dispatch an `UpdateEvent` to all registered handlers. */
+  _emit(event) {
+    this._handlers.forEach((handler) => handler(event));
+  }
+};
+
+// src/WebSocketManager.ts
+var WebSocketManager = class {
+  /**
+   * Create a `WebSocketManager` and attach it to the given WebSocket.
+   *
+   * @param store - The Wasm state store. Incoming peer envelopes will be
+   *   applied to this store via `apply_envelope`.
+   * @param proxy - The CRDT state proxy. Outgoing envelopes produced by
+   *   `set_register` calls will be read from the proxy's `onUpdate` events.
+   * @param ws - An open or connecting WebSocket (or any `WebSocketLike` object).
+   */
+  constructor(store, proxy, ws) {
+    this._unsubscribe = null;
+    /** Envelopes collected in the current frame, waiting for the batch flush. */
+    this._pendingEnvelopes = [];
+    /** Cancels the currently scheduled batch flush (rAF or setTimeout handle). */
+    this._cancelFlush = null;
+    /** Envelopes queued while the socket is not open, flushed on reconnection. */
+    this._offlineQueue = [];
+    this._store = store;
+    this._proxy = proxy;
+    this._ws = ws;
+    this._attach();
+  }
+  // ── Internal setup ────────────────────────────────────────────────────
+  _attach() {
+    const ws = this._ws;
+    this._unsubscribe = this._proxy.onUpdate(({ envelope }) => {
+      this._pendingEnvelopes.push(envelope);
+      this._scheduleBatchFlush();
+    });
+    ws.onopen = () => {
+      this._cancelFlush?.();
+      this._cancelFlush = null;
+      const offline = this._offlineQueue;
+      const pending = this._pendingEnvelopes;
+      this._offlineQueue = [];
+      this._pendingEnvelopes = [];
+      const batch = [...offline, ...pending];
+      if (batch.length > 0) {
+        ws.send(JSON.stringify(batch));
+      }
+    };
+    ws.onmessage = (event) => {
+      let parsed;
+      try {
+        parsed = JSON.parse(event.data);
+      } catch {
+        parsed = null;
+      }
+      if (Array.isArray(parsed)) {
+        for (const env of parsed) {
+          this._store.apply_envelope(env);
+        }
+      } else {
+        this._store.apply_envelope(event.data);
+      }
+    };
+    ws.onclose = () => {
+    };
+    ws.onerror = () => {
+    };
+  }
+  /**
+   * Schedule a single batch flush for the current frame.  Subsequent calls
+   * before the flush fires are no-ops (only one flush is ever outstanding).
+   *
+   * Uses `requestAnimationFrame` when available (browser, ~60 FPS cadence),
+   * falling back to `setTimeout(fn, 0)` in non-browser environments.
+   */
+  _scheduleBatchFlush() {
+    if (this._cancelFlush !== null) return;
+    const doFlush = () => {
+      this._cancelFlush = null;
+      this._flushBatch();
+    };
+    if (typeof requestAnimationFrame === "function") {
+      const id = requestAnimationFrame(doFlush);
+      this._cancelFlush = () => cancelAnimationFrame(id);
+    } else {
+      const id = setTimeout(doFlush, 0);
+      this._cancelFlush = () => clearTimeout(id);
+    }
+  }
+  /**
+   * Send all pending envelopes as a single JSON-array payload, or move them
+   * to the offline queue if the socket is not currently open.
+   */
+  _flushBatch() {
+    const envelopes = this._pendingEnvelopes.splice(0);
+    if (envelopes.length === 0) return;
+    const ws = this._ws;
+    if (ws.readyState === 1) {
+      ws.send(JSON.stringify(envelopes));
+    } else {
+      this._offlineQueue.push(...envelopes);
+    }
+  }
+  // ── Public API ────────────────────────────────────────────────────────
+  /**
+   * Unsubscribe from proxy updates, discard any buffered envelopes, and close
+   * the WebSocket connection.
+   *
+   * Safe to call more than once.
+   */
+  disconnect() {
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    this._cancelFlush?.();
+    this._cancelFlush = null;
+    this._pendingEnvelopes = [];
+    this._offlineQueue = [];
+    this._ws.close();
+  }
+};
+export {
+  CrdtStateProxy,
+  WebSocketManager
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CrdtStateProxy.ts","../src/WebSocketManager.ts"],"sourcesContent":["/**\n * TypeScript interface matching the Wasm-bindgen-generated `WasmStateStore`.\n *\n * In production, import the real `WasmStateStore` from the compiled Wasm\n * package (e.g. `import { WasmStateStore } from './crdt_sync.js'`).\n * In tests the interface can be satisfied by any mock object.\n */\nexport interface WasmStateStore {\n  /** Write a JSON-encoded value to the named LWW register. Returns the Envelope JSON. */\n  set_register(key: string, value_json: string): string;\n  /** Read the current value of a named LWW register as a JSON string, or `undefined`. */\n  get_register(key: string): string | undefined;\n  /** Apply a remote Envelope (serialised as JSON) to this store. */\n  apply_envelope(envelope_json: string): void;\n}\n\n/**\n * Payload delivered to every `onUpdate` listener when a property is written\n * through the proxy.\n */\nexport interface UpdateEvent {\n  /** Dot-separated key path that was updated (e.g. `\"robot.speed\"`). */\n  key: string;\n  /** The new JavaScript value. */\n  value: unknown;\n  /**\n   * The CRDT Envelope returned by `WasmStateStore.set_register`, serialised\n   * as a JSON string.  Broadcast this to peer nodes via `apply_envelope`.\n   */\n  envelope: string;\n}\n\n/** Callback type for `onUpdate` listeners. */\nexport type UpdateHandler = (event: UpdateEvent) => void;\n\n/**\n * A TypeScript proxy wrapper around `WasmStateStore` that gives frontend\n * developers a **magical, object-oriented** experience.\n *\n * ## How it works\n *\n * 1. **JS `Proxy` interception** – accessing a nested path on `state` returns\n *    another `Proxy`.  Assigning a value anywhere in the tree intercepts the\n *    write and forwards it to the underlying Wasm store via\n *    `set_register(dotPath, JSON.stringify(value))`.\n *\n * 2. **Wasm call** – the interceptor immediately calls\n *    `WasmStateStore.set_register()` so the CRDT operation is recorded and\n *    returns an `Envelope` JSON string ready for broadcasting.\n *\n * 3. **Event emitter** – every write fires all `onUpdate` listeners with the\n *    full `UpdateEvent` (key, value, envelope), enabling React / Vue and other\n *    UI frameworks to react to state changes.\n *\n * ## Usage\n *\n * ```ts\n * import init, { WasmStateStore } from './crdt_sync.js';\n * import { CrdtStateProxy } from './CrdtStateProxy.js';\n *\n * await init();\n * const store = new WasmStateStore('node-1');\n * const proxy = new CrdtStateProxy(store);\n *\n * // Register a listener (e.g. trigger a React re-render).\n * const unsubscribe = proxy.onUpdate(({ key, value, envelope }) => {\n *   console.log(`${key} =`, value);\n *   broadcast(envelope); // send to peers\n * });\n *\n * // Write through the proxy — the interceptor handles everything.\n * proxy.state.speed = 100;\n * proxy.state.robot.x = 42;\n *\n * // Clean up when done.\n * unsubscribe();\n * ```\n */\nexport class CrdtStateProxy {\n  private readonly _store: WasmStateStore;\n  private readonly _handlers: Set<UpdateHandler> = new Set();\n  private readonly _state: Record<string, unknown>;\n\n  /**\n   * Create a new `CrdtStateProxy` backed by the given `WasmStateStore`.\n   *\n   * @param store - The Wasm state store instance to proxy.\n   */\n  constructor(store: WasmStateStore) {\n    this._store = store;\n    this._state = this._makeProxy('');\n  }\n\n  // ── Public API ────────────────────────────────────────────────────────\n\n  /**\n   * The proxied state object.\n   *\n   * Assigning any property (or nested property) on this object will\n   * automatically call `WasmStateStore.set_register` and fire `onUpdate`\n   * listeners.\n   *\n   * ```ts\n   * proxy.state.speed = 100;       // key: \"speed\"\n   * proxy.state.robot.speed = 100; // key: \"robot.speed\"\n   * ```\n   */\n  get state(): Record<string, unknown> {\n    return this._state;\n  }\n\n  /**\n   * Register a listener that is called whenever a property is written through\n   * `proxy.state`.\n   *\n   * @param handler - Callback receiving an `UpdateEvent`.\n   * @returns An unsubscribe function — call it to remove the listener.\n   */\n  onUpdate(handler: UpdateHandler): () => void {\n    this._handlers.add(handler);\n    return () => {\n      this._handlers.delete(handler);\n    };\n  }\n\n  // ── Internal helpers ──────────────────────────────────────────────────\n\n  /**\n   * Recursively build a `Proxy` for the given dot-path `prefix`.\n   *\n   * - **`get` trap**: returns a child proxy for the nested path so that deep\n   *   assignments like `proxy.state.robot.speed = 100` work correctly.\n   * - **`set` trap**: serialises the value, calls `set_register`, and fires\n   *   all `onUpdate` listeners.\n   */\n  private _makeProxy(prefix: string): Record<string, unknown> {\n    const children: Record<string, Record<string, unknown>> = {};\n\n    return new Proxy({} as Record<string, unknown>, {\n      get: (_target, prop: string) => {\n        const key = prefix ? `${prefix}.${prop}` : prop;\n        if (!(prop in children)) {\n          children[prop] = this._makeProxy(key);\n        }\n        return children[prop];\n      },\n\n      set: (_target, prop: string, value: unknown) => {\n        const key = prefix ? `${prefix}.${prop}` : prop;\n        const envelope = this._store.set_register(key, JSON.stringify(value));\n        this._emit({ key, value, envelope });\n        return true;\n      },\n    });\n  }\n\n  /** Dispatch an `UpdateEvent` to all registered handlers. */\n  private _emit(event: UpdateEvent): void {\n    this._handlers.forEach((handler) => handler(event));\n  }\n}\n","import { CrdtStateProxy } from './CrdtStateProxy.js';\nimport type { WasmStateStore } from './CrdtStateProxy.js';\n\n/**\n * Minimal subset of the browser `WebSocket` API used by `WebSocketManager`.\n *\n * The real browser `WebSocket` satisfies this interface out-of-the-box.\n * In tests, a plain mock object can be used instead.\n */\nexport interface WebSocketLike {\n  /** Current connection state (0 = CONNECTING, 1 = OPEN, 2 = CLOSING, 3 = CLOSED). */\n  readonly readyState: number;\n  /** Send a UTF-8 string frame to the server. */\n  send(data: string): void;\n  /** Initiate the closing handshake. */\n  close(): void;\n  /** Fired when a message frame is received. */\n  onmessage: ((event: { data: string }) => void) | null;\n  /** Fired when the connection is established. */\n  onopen: ((event: unknown) => void) | null;\n  /** Fired when the connection is closed. */\n  onclose: ((event: unknown) => void) | null;\n  /** Fired when an error occurs. */\n  onerror: ((event: unknown) => void) | null;\n}\n\n/**\n * Bridges a `CrdtStateProxy` to a WebSocket connection so that every CRDT\n * operation produced locally is broadcast to peers, and every envelope\n * received from a peer is applied to the local store.\n *\n * ## Data flow\n *\n * ```\n * Local write\n *   → CrdtStateProxy.onUpdate  (envelope collected in _pendingEnvelopes)\n *   → requestAnimationFrame / setTimeout schedules a batch flush\n *   → WebSocket.send(JSON.stringify(envelopes))   // one payload per frame\n *\n * Incoming message (single envelope or JSON array of envelopes)\n *   → WebSocket.onmessage\n *   → WasmStateStore.apply_envelope()    // merge into local store\n * ```\n *\n * ## Throttling / batching\n *\n * Multiple proxy writes that occur within the same JavaScript task (e.g. a\n * 60 FPS game loop) are collected in `_pendingEnvelopes` and sent as a single\n * JSON array payload on the next animation frame (browser) or the next\n * `setTimeout(fn, 0)` tick (Node.js / non-browser environments).  This keeps\n * network traffic proportional to frame rate rather than to the raw mutation\n * rate.\n *\n * ## Usage\n *\n * ```ts\n * import init, { WasmStateStore } from './crdt_sync.js';\n * import { CrdtStateProxy, WebSocketManager } from './index.js';\n *\n * await init();\n * const store = new WasmStateStore('node-1');\n * const proxy = new CrdtStateProxy(store);\n * const manager = new WebSocketManager(store, proxy, new WebSocket('wss://example.com/sync'));\n *\n * // Writes are automatically batched and broadcast to peers.\n * proxy.state.robot = { x: 10, y: 20 };\n *\n * // Clean up.\n * manager.disconnect();\n * ```\n */\nexport class WebSocketManager {\n  private readonly _store: WasmStateStore;\n  private readonly _proxy: CrdtStateProxy;\n  private readonly _ws: WebSocketLike;\n  private _unsubscribe: (() => void) | null = null;\n  /** Envelopes collected in the current frame, waiting for the batch flush. */\n  private _pendingEnvelopes: string[] = [];\n  /** Cancels the currently scheduled batch flush (rAF or setTimeout handle). */\n  private _cancelFlush: (() => void) | null = null;\n  /** Envelopes queued while the socket is not open, flushed on reconnection. */\n  private _offlineQueue: string[] = [];\n\n  /**\n   * Create a `WebSocketManager` and attach it to the given WebSocket.\n   *\n   * @param store - The Wasm state store. Incoming peer envelopes will be\n   *   applied to this store via `apply_envelope`.\n   * @param proxy - The CRDT state proxy. Outgoing envelopes produced by\n   *   `set_register` calls will be read from the proxy's `onUpdate` events.\n   * @param ws - An open or connecting WebSocket (or any `WebSocketLike` object).\n   */\n  constructor(store: WasmStateStore, proxy: CrdtStateProxy, ws: WebSocketLike) {\n    this._store = store;\n    this._proxy = proxy;\n    this._ws = ws;\n    this._attach();\n  }\n\n  // ── Internal setup ────────────────────────────────────────────────────\n\n  private _attach(): void {\n    const ws = this._ws;\n\n    // Collect envelopes and schedule a batch flush once per frame so that\n    // multiple synchronous writes (e.g. a 60 FPS game loop) are coalesced\n    // into a single network payload instead of one message per mutation.\n    this._unsubscribe = this._proxy.onUpdate(({ envelope }) => {\n      this._pendingEnvelopes.push(envelope);\n      this._scheduleBatchFlush();\n    });\n\n    // On (re)connection, immediately flush pending envelopes together with any\n    // envelopes that were queued while the socket was offline.\n    ws.onopen = () => {\n      // Cancel any scheduled flush — we will drain everything right now.\n      this._cancelFlush?.();\n      this._cancelFlush = null;\n      const offline = this._offlineQueue;\n      const pending = this._pendingEnvelopes;\n      this._offlineQueue = [];\n      this._pendingEnvelopes = [];\n      const batch = [...offline, ...pending];\n      if (batch.length > 0) {\n        ws.send(JSON.stringify(batch));\n      }\n    };\n\n    // Apply envelopes received from peers.  Peers may send either a single\n    // envelope JSON string or a JSON array of envelope strings (batch format).\n    ws.onmessage = (event) => {\n      let parsed: unknown;\n      try {\n        parsed = JSON.parse(event.data);\n      } catch {\n        parsed = null;\n      }\n      if (Array.isArray(parsed)) {\n        for (const env of parsed) {\n          this._store.apply_envelope(env as string);\n        }\n      } else {\n        // Fallback: treat the raw frame data as a single envelope string.\n        this._store.apply_envelope(event.data);\n      }\n    };\n\n    // On close or error the subscription stays active so that writes made\n    // while offline are buffered and flushed when the socket reconnects.\n    ws.onclose = () => { /* keep buffering */ };\n    ws.onerror = () => { /* keep buffering */ };\n  }\n\n  /**\n   * Schedule a single batch flush for the current frame.  Subsequent calls\n   * before the flush fires are no-ops (only one flush is ever outstanding).\n   *\n   * Uses `requestAnimationFrame` when available (browser, ~60 FPS cadence),\n   * falling back to `setTimeout(fn, 0)` in non-browser environments.\n   */\n  private _scheduleBatchFlush(): void {\n    if (this._cancelFlush !== null) return; // already scheduled\n\n    const doFlush = () => {\n      this._cancelFlush = null;\n      this._flushBatch();\n    };\n\n    if (typeof requestAnimationFrame === 'function') {\n      const id = requestAnimationFrame(doFlush);\n      this._cancelFlush = () => cancelAnimationFrame(id);\n    } else {\n      const id = setTimeout(doFlush, 0);\n      this._cancelFlush = () => clearTimeout(id);\n    }\n  }\n\n  /**\n   * Send all pending envelopes as a single JSON-array payload, or move them\n   * to the offline queue if the socket is not currently open.\n   */\n  private _flushBatch(): void {\n    const envelopes = this._pendingEnvelopes.splice(0);\n    if (envelopes.length === 0) return;\n\n    const ws = this._ws;\n    if (ws.readyState === 1 /* OPEN */) {\n      ws.send(JSON.stringify(envelopes));\n    } else {\n      this._offlineQueue.push(...envelopes);\n    }\n  }\n\n  // ── Public API ────────────────────────────────────────────────────────\n\n  /**\n   * Unsubscribe from proxy updates, discard any buffered envelopes, and close\n   * the WebSocket connection.\n   *\n   * Safe to call more than once.\n   */\n  disconnect(): void {\n    this._unsubscribe?.();\n    this._unsubscribe = null;\n    this._cancelFlush?.();\n    this._cancelFlush = null;\n    this._pendingEnvelopes = [];\n    this._offlineQueue = [];\n    this._ws.close();\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,18 +1,26 @@
 {
   "name": "@crdt-sync/core",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "TypeScript proxy wrapper for the crdt-sync Wasm StateStore",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "files": [
     "dist",
     "pkg"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsup",
     "build:wasm:bundler": "wasm-pack build ../.. --target bundler --out-dir packages/core/pkg/bundler",
     "build:wasm:web": "wasm-pack build ../.. --target web --out-dir packages/core/pkg/web",
-    "build:wasm": "npm run build:wasm:bundler && npm run build:wasm:web",
+    "build:wasm": "npm run build:wasm:bundler && npm run build:wasm:web && rm -f pkg/bundler/.gitignore pkg/web/.gitignore",
     "test": "jest",
     "lint": "tsc --noEmit"
   },
@@ -21,6 +29,7 @@
     "@types/jest": "^29.5.12",
     "jest": "^29.7.0",
     "ts-jest": "^29.2.4",
+    "tsup": "^8.0.0",
     "typescript": "^5.4.5"
   },
   "jest": {

package/pkg/bundler/README.md

@@ -0,0 +1,346 @@
+# CRDT-sync
+
+[![Crates.io](https://img.shields.io/crates/v/crdt-sync.svg)](https://crates.io/crates/crdt-sync)
+[![Docs.rs](https://docs.rs/crdt-sync/badge.svg)](https://docs.rs/crdt-sync)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+A **generic state synchronization engine** built in Rust, based on
+**CRDTs (Conflict-free Replicated Data Types)**.
+
+Designed to keep a UI (digital twin) and a backend (AI/robotics logic) in
+**perfect harmony** — even when multiple agents write concurrently or the
+network drops for a moment. No locks, no merge conflicts, no data loss.
+
+---
+
+## Features
+
+| CRDT | Type | Use case |
+|------|------|----------|
+| [`LWWRegister`] | Last-Writer-Wins Register | Scalar key-value properties (`robot.x = 10`) |
+| [`ORSet`] | Observed-Remove Set | Collections of unique items |
+| [`RGA`] | Replicated Growable Array | Ordered sequences / lists |
+| [`StateStore`] | Composite sync engine | Hosts all CRDTs under one roof with Lamport clocks and network `Envelope`s |
+| [`StateProxy`] | State observation proxy | Intercepts field mutations and auto-queues CRDT operations (no manual `Envelope` handling) |
+| [`crdt_state!`] | Typed state proxy macro | Generates a typed proxy struct from a field declaration; each field gets `set_<field>` / `get_<field>` methods with compile-time type safety |
+
+### Logical Clocks
+
+Physical wall-clock time (NTP) is unreliable for distributed synchronization.
+This library provides two implementations that track causal ordering without
+relying on system time:
+
+| Clock | Module | Use case |
+|-------|--------|----------|
+| [`LamportClock`] | `lamport_clock` | Scalar logical clock; used internally by `StateStore` for total-order timestamps |
+| [`VectorClock`] | `vector_clock` | Per-node vector clock; detects **concurrent** events in addition to causal ordering |
+
+All CRDTs are **operation-based (CmRDT)** and satisfy:
+- **Commutativity** – apply operations in any order, always converge.
+- **Idempotency** – replaying an operation is safe.
+- **Causal buffering** (RGA) – out-of-order delivery is handled automatically.
+
+---
+
+## Installation
+
+Add to your `Cargo.toml`:
+
+```toml
+[dependencies]
+crdt-sync = "0.1"
+```
+
+---
+
+## Quick Start
+
+### LWW-Register (Last-Writer-Wins)
+
+```rust
+use crdt_sync::LWWRegister;
+
+let mut node_a: LWWRegister<f64> = LWWRegister::new("node-A");
+let mut node_b: LWWRegister<f64> = LWWRegister::new("node-B");
+
+// node-A writes robot.x
+let op = node_a.set_and_apply(10.0, 1);
+
+// Broadcast op to node-B
+node_b.apply(op);
+
+assert_eq!(node_b.get(), Some(&10.0));
+```
+
+### OR-Set (Observed-Remove Set)
+
+```rust
+use crdt_sync::ORSet;
+
+let mut node_a: ORSet<String> = ORSet::new("node-A");
+let mut node_b: ORSet<String> = ORSet::new("node-B");
+
+// Add a robot to the fleet
+let op = node_a.add("robot-1".to_string());
+node_a.apply(op.clone());
+node_b.apply(op);
+
+assert!(node_b.contains(&"robot-1".to_string()));
+```
+
+### RGA (Replicated Growable Array)
+
+```rust
+use crdt_sync::RGA;
+
+let mut node_a: RGA<char> = RGA::new("node-A");
+let mut node_b: RGA<char> = RGA::new("node-B");
+
+// node-A builds a sequence
+let op1 = node_a.insert(0, 'H');
+let op2 = node_a.insert(1, 'i');
+
+// node-B receives operations in reverse order — handled automatically
+node_b.apply(op2);
+node_b.apply(op1);
+
+assert_eq!(node_a.to_vec(), node_b.to_vec()); // ['H', 'i']
+```
+
+### StateStore (Composite Sync Engine)
+
+The `StateStore` is the recommended high-level API. It:
+- Manages named LWW registers, OR-Sets and RGAs in one place.
+- Assigns **Lamport timestamps** automatically (via the built-in `LamportClock`).
+- Produces **`Envelope`** messages ready to send over a network channel.
+
+```rust
+use crdt_sync::StateStore;
+
+let mut node_a = StateStore::new("node-A");
+let mut node_b = StateStore::new("node-B");
+
+// Write a scalar property
+let env = node_a.set_register("robot.x", 42.0_f64);
+node_b.apply_envelope(env);
+assert_eq!(node_b.get_register::<f64>("robot.x"), Some(42.0));
+
+// Add to a set
+let env = node_a.set_add("fleet", "unit-1");
+node_b.apply_envelope(env);
+assert!(node_b.set_contains("fleet", &"unit-1"));
+
+// Append to a sequence
+let env1 = node_a.seq_insert("log", 0, "boot");
+let env2 = node_a.seq_insert("log", 1, "ready");
+node_b.apply_envelope(env2);
+node_b.apply_envelope(env1); // out-of-order — still converges
+assert_eq!(
+    node_a.seq_items::<String>("log"),
+    node_b.seq_items::<String>("log"),
+);
+```
+
+### LamportClock
+
+```rust
+use crdt_sync::LamportClock;
+
+let mut node_a = LamportClock::new();
+let mut node_b = LamportClock::new();
+
+// node_a produces and sends an event
+let ts = node_a.tick(); // ts = 1
+
+// node_b receives it, then produces its own event
+node_b.update(ts);      // b advances to max(0, 1) + 1 = 2
+let ts_b = node_b.tick(); // ts_b = 3
+
+assert!(ts_b > ts);
+```
+
+### VectorClock
+
+```rust
+use crdt_sync::VectorClock;
+
+let mut a = VectorClock::new("A");
+let mut b = VectorClock::new("B");
+
+let v_a = a.increment(); // A sends {A:1}
+let v_b = b.increment(); // B sends {B:1} – concurrent with v_a
+
+// Neither causally precedes the other
+assert!(v_a.concurrent_with(&v_b));
+
+// B receives A's event
+b.update(&v_a);
+let v_b2 = b.increment(); // {A:1, B:2} – causally after v_a
+
+assert!(v_a.happened_before(&v_b2));
+```
+
+---
+
+### StateProxy (State Observation)
+
+`StateProxy` is the Rust equivalent of JavaScript Proxy-based state observation.
+It wraps a `StateStore` and **intercepts every field mutation**, automatically
+converting it into a CRDT operation and queuing it for broadcast.  Developers
+work with plain `set` / `get` calls and never touch `Envelope` values directly.
+
+```rust
+use crdt_sync::state_store::StateStore;
+use crdt_sync::proxy::StateProxy;
+
+let mut store_a = StateStore::new("node-A");
+let mut store_b = StateStore::new("node-B");
+
+// Use the proxy – no manual Envelope handling required.
+let ops = {
+    let mut proxy = store_a.proxy();     // or StateProxy::new(&mut store_a)
+    proxy
+        .set("robot.x", 10.0_f64)       // scalar field
+        .set("robot.y", 20.0_f64)
+        .set_add("fleet", "unit-1")      // set field
+        .seq_push("log", "boot");        // sequence field
+
+    proxy.drain_pending()                // collect queued ops for broadcast
+};
+
+// Broadcast to all peers.
+for env in ops {
+    store_b.apply_envelope(env);
+}
+
+assert_eq!(store_b.get_register::<f64>("robot.x"), Some(10.0));
+assert!(store_b.set_contains("fleet", &"unit-1"));
+assert_eq!(store_b.seq_items::<String>("log"), vec!["boot"]);
+```
+
+---
+
+### `crdt_state!` Macro (Typed State Proxy)
+
+The `crdt_state!` macro generates a **typed proxy struct** from a plain struct-like
+field declaration.  Instead of using string keys (`proxy.set("x", 10.0)`), you get
+compile-time-checked `set_x` / `get_x` methods for every declared field.
+
+```rust
+use crdt_sync::state_store::StateStore;
+use crdt_sync::crdt_state;
+
+// Declare a typed state proxy struct.
+crdt_state! {
+    pub struct RobotState {
+        x: f64,
+        y: f64,
+        speed: f64,
+        name: String,
+        active: bool,
+    }
+}
+
+let mut store_a = StateStore::new("node-A");
+let mut store_b = StateStore::new("node-B");
+
+// Mutations are intercepted; no Envelope handling required.
+let ops = {
+    let mut state = RobotState::new(&mut store_a);
+    state
+        .set_x(3.0)
+        .set_y(4.0)
+        .set_speed(5.0)
+        .set_name("unit-7".to_string())
+        .set_active(true);
+
+    state.drain_pending()   // collect queued ops for broadcast
+};
+
+// Broadcast to all peers.
+for env in ops {
+    store_b.apply_envelope(env);
+}
+
+assert_eq!(store_b.get_register::<f64>("x"),      Some(3.0));
+assert_eq!(store_b.get_register::<f64>("speed"),  Some(5.0));
+assert_eq!(store_b.get_register::<bool>("active"), Some(true));
+```
+
+The generated struct also exposes:
+- `pending_count() -> usize` – number of ops queued for broadcast.
+- `store() -> &StateStore` – read-only access to the underlying store.
+
+---
+
+```
+crdt-sync
+├── lamport_clock – Scalar Lamport logical clock (tick / update rules)
+├── vector_clock  – Per-node vector clock (happened-before / concurrent detection)
+├── lww_register  – LWW-Register CmRDT
+├── or_set        – OR-Set CmRDT
+├── rga           – RGA CmRDT (with causal buffering)
+├── state_store   – Composite sync engine (LamportClock + Envelope)
+├── proxy         – StateProxy: intercepts mutations, auto-queues CRDT ops
+└── macros        – crdt_state! macro: typed proxy structs from field declarations
+```
+
+Each module is self-contained and can be used independently. The `StateStore`
+type-erases values via `serde_json::Value` so heterogeneous data can be stored
+without dynamic dispatch.
+
+---
+
+## TypeScript SDK & React Integration
+
+`crdt-sync` provides a seamless TypeScript monorepo offering a framework-agnostic core (`@crdt-sync/core`) and framework-specific adapters (`@crdt-sync/react`), built on top of WebAssembly.
+
+### Installation
+
+```bash
+npm install @crdt-sync/core @crdt-sync/react
+```
+
+### React usage (`useCrdtState`)
+
+The React hook magically handles Wasm initialization, WebSocket network sync, CRDT proxying, and React component re-renders:
+
+```tsx
+import { useCrdtState } from '@crdt-sync/react';
+
+export function RobotDashboard() {
+  // Binds the CRDT Wasm engine and networking directly to React state
+  const { state, proxy, status } = useCrdtState('wss://api.example.com/sync', {
+    robot: { speed: 0, active: true }
+  });
+
+  if (status !== 'open') return <p>Connecting to sync engine...</p>;
+
+  return (
+    <div>
+      <h1>Speed: {state.robot.speed}</h1>
+      {/* 
+        Direct mutation is intercepted, applied as a CRDT operation, 
+        broadcast over WebSocket, and triggers a local React re-render.
+      */}
+      <button onClick={() => proxy!.state.robot.speed += 10}>
+        Increase Speed
+      </button>
+    </div>
+  );
+}
+```
+
+---
+
+## Running Tests
+
+```bash
+cargo test
+```
+
+---
+
+## License
+
+MIT