kritzel-stencil 0.0.144 → 0.0.145

package/dist/esm/index.js

@@ -1,2 +1,1359 @@
-export { D as DEFAULT_BRUSH_CONFIG, e as DEFAULT_TEXT_CONFIG, K as KritzelBrushTool, d as KritzelEraserTool, u as KritzelImage, f as KritzelImageTool, t as KritzelPath, c as KritzelSelectionTool, s as KritzelText, a as KritzelTextTool, g as KritzelWorkspace } from './index-YVlgItFD.js';
+import { s as setIfUndefined, c as create, f as fromBase64, v as varStorage, t as toBase64, o as onChange, a as createUint8ArrayFromArrayBuffer, b as offChange, w as writeVarUint, e as encodeStateVector, d as writeVarUint8Array, g as encodeStateAsUpdate, r as readVarUint, h as applyUpdate, i as readVarUint8Array, j as readVarString, O as Observable, k as floor, l as getUnixTime, m as equalityDeep, n as writeVarString, p as toUint8Array, q as createEncoder, u as createDecoder, x as map, y as ObservableV2, z as length, A as isNode, B as min, C as pow, H as HocuspocusProvider, D as HocuspocusProviderWebsocket } from './default-text-tool.config-CsZAW1Cu.js';
+export { N as BroadcastSyncProvider, S as DEFAULT_BRUSH_CONFIG, T as DEFAULT_TEXT_CONFIG, P as IndexedDBSyncProvider, Q as KritzelAppStateMap, G as KritzelBrushTool, I as KritzelEraserTool, F as KritzelImage, J as KritzelImageTool, E as KritzelPath, M as KritzelSelectionTool, K as KritzelText, L as KritzelTextTool, R as KritzelWorkspace } from './default-text-tool.config-CsZAW1Cu.js';
+
+/* eslint-env browser */
+
+
+/**
+ * @typedef {Object} Channel
+ * @property {Set<function(any, any):any>} Channel.subs
+ * @property {any} Channel.bc
+ */
+
+/**
+ * @type {Map<string, Channel>}
+ */
+const channels = new Map();
+
+/* c8 ignore start */
+class LocalStoragePolyfill {
+  /**
+   * @param {string} room
+   */
+  constructor (room) {
+    this.room = room;
+    /**
+     * @type {null|function({data:ArrayBuffer}):void}
+     */
+    this.onmessage = null;
+    /**
+     * @param {any} e
+     */
+    this._onChange = e => e.key === room && this.onmessage !== null && this.onmessage({ data: fromBase64(e.newValue || '') });
+    onChange(this._onChange);
+  }
+
+  /**
+   * @param {ArrayBuffer} buf
+   */
+  postMessage (buf) {
+    varStorage.setItem(this.room, toBase64(createUint8ArrayFromArrayBuffer(buf)));
+  }
+
+  close () {
+    offChange(this._onChange);
+  }
+}
+/* c8 ignore stop */
+
+// Use BroadcastChannel or Polyfill
+/* c8 ignore next */
+const BC = typeof BroadcastChannel === 'undefined' ? LocalStoragePolyfill : BroadcastChannel;
+
+/**
+ * @param {string} room
+ * @return {Channel}
+ */
+const getChannel = room =>
+  setIfUndefined(channels, room, () => {
+    const subs = create();
+    const bc = new BC(room);
+    /**
+     * @param {{data:ArrayBuffer}} e
+     */
+    /* c8 ignore next */
+    bc.onmessage = e => subs.forEach(sub => sub(e.data, 'broadcastchannel'));
+    return {
+      bc, subs
+    }
+  });
+
+/**
+ * Subscribe to global `publish` events.
+ *
+ * @function
+ * @param {string} room
+ * @param {function(any, any):any} f
+ */
+const subscribe = (room, f) => {
+  getChannel(room).subs.add(f);
+  return f
+};
+
+/**
+ * Unsubscribe from `publish` global events.
+ *
+ * @function
+ * @param {string} room
+ * @param {function(any, any):any} f
+ */
+const unsubscribe = (room, f) => {
+  const channel = getChannel(room);
+  const unsubscribed = channel.subs.delete(f);
+  if (unsubscribed && channel.subs.size === 0) {
+    channel.bc.close();
+    channels.delete(room);
+  }
+  return unsubscribed
+};
+
+/**
+ * Publish data to all subscribers (including subscribers on this tab)
+ *
+ * @function
+ * @param {string} room
+ * @param {any} data
+ * @param {any} [origin]
+ */
+const publish = (room, data, origin = null) => {
+  const c = getChannel(room);
+  c.bc.postMessage(data);
+  c.subs.forEach(sub => sub(data, origin));
+};
+
+/**
+ * @module sync-protocol
+ */
+
+
+/**
+ * @typedef {Map<number, number>} StateMap
+ */
+
+/**
+ * Core Yjs defines two message types:
+ * • YjsSyncStep1: Includes the State Set of the sending client. When received, the client should reply with YjsSyncStep2.
+ * • YjsSyncStep2: Includes all missing structs and the complete delete set. When received, the client is assured that it
+ *   received all information from the remote client.
+ *
+ * In a peer-to-peer network, you may want to introduce a SyncDone message type. Both parties should initiate the connection
+ * with SyncStep1. When a client received SyncStep2, it should reply with SyncDone. When the local client received both
+ * SyncStep2 and SyncDone, it is assured that it is synced to the remote client.
+ *
+ * In a client-server model, you want to handle this differently: The client should initiate the connection with SyncStep1.
+ * When the server receives SyncStep1, it should reply with SyncStep2 immediately followed by SyncStep1. The client replies
+ * with SyncStep2 when it receives SyncStep1. Optionally the server may send a SyncDone after it received SyncStep2, so the
+ * client knows that the sync is finished.  There are two reasons for this more elaborated sync model: 1. This protocol can
+ * easily be implemented on top of http and websockets. 2. The server should only reply to requests, and not initiate them.
+ * Therefore it is necessary that the client initiates the sync.
+ *
+ * Construction of a message:
+ * [messageType : varUint, message definition..]
+ *
+ * Note: A message does not include information about the room name. This must to be handled by the upper layer protocol!
+ *
+ * stringify[messageType] stringifies a message definition (messageType is already read from the bufffer)
+ */
+
+const messageYjsSyncStep1 = 0;
+const messageYjsSyncStep2 = 1;
+const messageYjsUpdate = 2;
+
+/**
+ * Create a sync step 1 message based on the state of the current shared document.
+ *
+ * @param {encoding.Encoder} encoder
+ * @param {Y.Doc} doc
+ */
+const writeSyncStep1 = (encoder, doc) => {
+  writeVarUint(encoder, messageYjsSyncStep1);
+  const sv = encodeStateVector(doc);
+  writeVarUint8Array(encoder, sv);
+};
+
+/**
+ * @param {encoding.Encoder} encoder
+ * @param {Y.Doc} doc
+ * @param {Uint8Array} [encodedStateVector]
+ */
+const writeSyncStep2 = (encoder, doc, encodedStateVector) => {
+  writeVarUint(encoder, messageYjsSyncStep2);
+  writeVarUint8Array(encoder, encodeStateAsUpdate(doc, encodedStateVector));
+};
+
+/**
+ * Read SyncStep1 message and reply with SyncStep2.
+ *
+ * @param {decoding.Decoder} decoder The reply to the received message
+ * @param {encoding.Encoder} encoder The received message
+ * @param {Y.Doc} doc
+ */
+const readSyncStep1 = (decoder, encoder, doc) =>
+  writeSyncStep2(encoder, doc, readVarUint8Array(decoder));
+
+/**
+ * Read and apply Structs and then DeleteStore to a y instance.
+ *
+ * @param {decoding.Decoder} decoder
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
+ */
+const readSyncStep2 = (decoder, doc, transactionOrigin) => {
+  try {
+    applyUpdate(doc, readVarUint8Array(decoder), transactionOrigin);
+  } catch (error) {
+    // This catches errors that are thrown by event handlers
+    console.error('Caught error while handling a Yjs update', error);
+  }
+};
+
+/**
+ * @param {encoding.Encoder} encoder
+ * @param {Uint8Array} update
+ */
+const writeUpdate = (encoder, update) => {
+  writeVarUint(encoder, messageYjsUpdate);
+  writeVarUint8Array(encoder, update);
+};
+
+/**
+ * Read and apply Structs and then DeleteStore to a y instance.
+ *
+ * @param {decoding.Decoder} decoder
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
+ */
+const readUpdate = readSyncStep2;
+
+/**
+ * @param {decoding.Decoder} decoder A message received from another client
+ * @param {encoding.Encoder} encoder The reply message. Does not need to be sent if empty.
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
+ */
+const readSyncMessage = (decoder, encoder, doc, transactionOrigin) => {
+  const messageType = readVarUint(decoder);
+  switch (messageType) {
+    case messageYjsSyncStep1:
+      readSyncStep1(decoder, encoder, doc);
+      break
+    case messageYjsSyncStep2:
+      readSyncStep2(decoder, doc, transactionOrigin);
+      break
+    case messageYjsUpdate:
+      readUpdate(decoder, doc, transactionOrigin);
+      break
+    default:
+      throw new Error('Unknown message type')
+  }
+  return messageType
+};
+
+const messagePermissionDenied = 0;
+
+/**
+ * @callback PermissionDeniedHandler
+ * @param {any} y
+ * @param {string} reason
+ */
+
+/**
+ *
+ * @param {decoding.Decoder} decoder
+ * @param {Y.Doc} y
+ * @param {PermissionDeniedHandler} permissionDeniedHandler
+ */
+const readAuthMessage = (decoder, y, permissionDeniedHandler) => {
+  switch (readVarUint(decoder)) {
+    case messagePermissionDenied: permissionDeniedHandler(y, readVarString(decoder));
+  }
+};
+
+/**
+ * @module awareness-protocol
+ */
+
+
+const outdatedTimeout = 30000;
+
+/**
+ * @typedef {Object} MetaClientState
+ * @property {number} MetaClientState.clock
+ * @property {number} MetaClientState.lastUpdated unix timestamp
+ */
+
+/**
+ * The Awareness class implements a simple shared state protocol that can be used for non-persistent data like awareness information
+ * (cursor, username, status, ..). Each client can update its own local state and listen to state changes of
+ * remote clients. Every client may set a state of a remote peer to `null` to mark the client as offline.
+ *
+ * Each client is identified by a unique client id (something we borrow from `doc.clientID`). A client can override
+ * its own state by propagating a message with an increasing timestamp (`clock`). If such a message is received, it is
+ * applied if the known state of that client is older than the new state (`clock < newClock`). If a client thinks that
+ * a remote client is offline, it may propagate a message with
+ * `{ clock: currentClientClock, state: null, client: remoteClient }`. If such a
+ * message is received, and the known clock of that client equals the received clock, it will override the state with `null`.
+ *
+ * Before a client disconnects, it should propagate a `null` state with an updated clock.
+ *
+ * Awareness states must be updated every 30 seconds. Otherwise the Awareness instance will delete the client state.
+ *
+ * @extends {Observable<string>}
+ */
+class Awareness extends Observable {
+  /**
+   * @param {Y.Doc} doc
+   */
+  constructor (doc) {
+    super();
+    this.doc = doc;
+    /**
+     * @type {number}
+     */
+    this.clientID = doc.clientID;
+    /**
+     * Maps from client id to client state
+     * @type {Map<number, Object<string, any>>}
+     */
+    this.states = new Map();
+    /**
+     * @type {Map<number, MetaClientState>}
+     */
+    this.meta = new Map();
+    this._checkInterval = /** @type {any} */ (setInterval(() => {
+      const now = getUnixTime();
+      if (this.getLocalState() !== null && (outdatedTimeout / 2 <= now - /** @type {{lastUpdated:number}} */ (this.meta.get(this.clientID)).lastUpdated)) {
+        // renew local clock
+        this.setLocalState(this.getLocalState());
+      }
+      /**
+       * @type {Array<number>}
+       */
+      const remove = [];
+      this.meta.forEach((meta, clientid) => {
+        if (clientid !== this.clientID && outdatedTimeout <= now - meta.lastUpdated && this.states.has(clientid)) {
+          remove.push(clientid);
+        }
+      });
+      if (remove.length > 0) {
+        removeAwarenessStates(this, remove, 'timeout');
+      }
+    }, floor(outdatedTimeout / 10)));
+    doc.on('destroy', () => {
+      this.destroy();
+    });
+    this.setLocalState({});
+  }
+
+  destroy () {
+    this.emit('destroy', [this]);
+    this.setLocalState(null);
+    super.destroy();
+    clearInterval(this._checkInterval);
+  }
+
+  /**
+   * @return {Object<string,any>|null}
+   */
+  getLocalState () {
+    return this.states.get(this.clientID) || null
+  }
+
+  /**
+   * @param {Object<string,any>|null} state
+   */
+  setLocalState (state) {
+    const clientID = this.clientID;
+    const currLocalMeta = this.meta.get(clientID);
+    const clock = currLocalMeta === undefined ? 0 : currLocalMeta.clock + 1;
+    const prevState = this.states.get(clientID);
+    if (state === null) {
+      this.states.delete(clientID);
+    } else {
+      this.states.set(clientID, state);
+    }
+    this.meta.set(clientID, {
+      clock,
+      lastUpdated: getUnixTime()
+    });
+    const added = [];
+    const updated = [];
+    const filteredUpdated = [];
+    const removed = [];
+    if (state === null) {
+      removed.push(clientID);
+    } else if (prevState == null) {
+      if (state != null) {
+        added.push(clientID);
+      }
+    } else {
+      updated.push(clientID);
+      if (!equalityDeep(prevState, state)) {
+        filteredUpdated.push(clientID);
+      }
+    }
+    if (added.length > 0 || filteredUpdated.length > 0 || removed.length > 0) {
+      this.emit('change', [{ added, updated: filteredUpdated, removed }, 'local']);
+    }
+    this.emit('update', [{ added, updated, removed }, 'local']);
+  }
+
+  /**
+   * @param {string} field
+   * @param {any} value
+   */
+  setLocalStateField (field, value) {
+    const state = this.getLocalState();
+    if (state !== null) {
+      this.setLocalState({
+        ...state,
+        [field]: value
+      });
+    }
+  }
+
+  /**
+   * @return {Map<number,Object<string,any>>}
+   */
+  getStates () {
+    return this.states
+  }
+}
+
+/**
+ * Mark (remote) clients as inactive and remove them from the list of active peers.
+ * This change will be propagated to remote clients.
+ *
+ * @param {Awareness} awareness
+ * @param {Array<number>} clients
+ * @param {any} origin
+ */
+const removeAwarenessStates = (awareness, clients, origin) => {
+  const removed = [];
+  for (let i = 0; i < clients.length; i++) {
+    const clientID = clients[i];
+    if (awareness.states.has(clientID)) {
+      awareness.states.delete(clientID);
+      if (clientID === awareness.clientID) {
+        const curMeta = /** @type {MetaClientState} */ (awareness.meta.get(clientID));
+        awareness.meta.set(clientID, {
+          clock: curMeta.clock + 1,
+          lastUpdated: getUnixTime()
+        });
+      }
+      removed.push(clientID);
+    }
+  }
+  if (removed.length > 0) {
+    awareness.emit('change', [{ added: [], updated: [], removed }, origin]);
+    awareness.emit('update', [{ added: [], updated: [], removed }, origin]);
+  }
+};
+
+/**
+ * @param {Awareness} awareness
+ * @param {Array<number>} clients
+ * @return {Uint8Array}
+ */
+const encodeAwarenessUpdate = (awareness, clients, states = awareness.states) => {
+  const len = clients.length;
+  const encoder = createEncoder();
+  writeVarUint(encoder, len);
+  for (let i = 0; i < len; i++) {
+    const clientID = clients[i];
+    const state = states.get(clientID) || null;
+    const clock = /** @type {MetaClientState} */ (awareness.meta.get(clientID)).clock;
+    writeVarUint(encoder, clientID);
+    writeVarUint(encoder, clock);
+    writeVarString(encoder, JSON.stringify(state));
+  }
+  return toUint8Array(encoder)
+};
+
+/**
+ * @param {Awareness} awareness
+ * @param {Uint8Array} update
+ * @param {any} origin This will be added to the emitted change event
+ */
+const applyAwarenessUpdate = (awareness, update, origin) => {
+  const decoder = createDecoder(update);
+  const timestamp = getUnixTime();
+  const added = [];
+  const updated = [];
+  const filteredUpdated = [];
+  const removed = [];
+  const len = readVarUint(decoder);
+  for (let i = 0; i < len; i++) {
+    const clientID = readVarUint(decoder);
+    let clock = readVarUint(decoder);
+    const state = JSON.parse(readVarString(decoder));
+    const clientMeta = awareness.meta.get(clientID);
+    const prevState = awareness.states.get(clientID);
+    const currClock = clientMeta === undefined ? 0 : clientMeta.clock;
+    if (currClock < clock || (currClock === clock && state === null && awareness.states.has(clientID))) {
+      if (state === null) {
+        // never let a remote client remove this local state
+        if (clientID === awareness.clientID && awareness.getLocalState() != null) {
+          // remote client removed the local state. Do not remote state. Broadcast a message indicating
+          // that this client still exists by increasing the clock
+          clock++;
+        } else {
+          awareness.states.delete(clientID);
+        }
+      } else {
+        awareness.states.set(clientID, state);
+      }
+      awareness.meta.set(clientID, {
+        clock,
+        lastUpdated: timestamp
+      });
+      if (clientMeta === undefined && state !== null) {
+        added.push(clientID);
+      } else if (clientMeta !== undefined && state === null) {
+        removed.push(clientID);
+      } else if (state !== null) {
+        if (!equalityDeep(state, prevState)) {
+          filteredUpdated.push(clientID);
+        }
+        updated.push(clientID);
+      }
+    }
+  }
+  if (added.length > 0 || filteredUpdated.length > 0 || removed.length > 0) {
+    awareness.emit('change', [{
+      added, updated: filteredUpdated, removed
+    }, origin]);
+  }
+  if (added.length > 0 || updated.length > 0 || removed.length > 0) {
+    awareness.emit('update', [{
+      added, updated, removed
+    }, origin]);
+  }
+};
+
+/**
+ * Utility module to work with urls.
+ *
+ * @module url
+ */
+
+
+/**
+ * @param {Object<string,string>} params
+ * @return {string}
+ */
+const encodeQueryParams = params =>
+  map(params, (val, key) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
+
+/**
+ * @module provider/websocket
+ */
+
+
+const messageSync = 0;
+const messageQueryAwareness = 3;
+const messageAwareness = 1;
+const messageAuth = 2;
+
+/**
+ *                       encoder,          decoder,          provider,          emitSynced, messageType
+ * @type {Array<function(encoding.Encoder, decoding.Decoder, WebsocketProvider, boolean,    number):void>}
+ */
+const messageHandlers = [];
+
+messageHandlers[messageSync] = (
+  encoder,
+  decoder,
+  provider,
+  emitSynced,
+  _messageType
+) => {
+  writeVarUint(encoder, messageSync);
+  const syncMessageType = readSyncMessage(
+    decoder,
+    encoder,
+    provider.doc,
+    provider
+  );
+  if (
+    emitSynced && syncMessageType === messageYjsSyncStep2 &&
+    !provider.synced
+  ) {
+    provider.synced = true;
+  }
+};
+
+messageHandlers[messageQueryAwareness] = (
+  encoder,
+  _decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  writeVarUint(encoder, messageAwareness);
+  writeVarUint8Array(
+    encoder,
+    encodeAwarenessUpdate(
+      provider.awareness,
+      Array.from(provider.awareness.getStates().keys())
+    )
+  );
+};
+
+messageHandlers[messageAwareness] = (
+  _encoder,
+  decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  applyAwarenessUpdate(
+    provider.awareness,
+    readVarUint8Array(decoder),
+    provider
+  );
+};
+
+messageHandlers[messageAuth] = (
+  _encoder,
+  decoder,
+  provider,
+  _emitSynced,
+  _messageType
+) => {
+  readAuthMessage(
+    decoder,
+    provider.doc,
+    (_ydoc, reason) => permissionDeniedHandler(provider, reason)
+  );
+};
+
+// @todo - this should depend on awareness.outdatedTime
+const messageReconnectTimeout = 30000;
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {string} reason
+ */
+const permissionDeniedHandler = (provider, reason) =>
+  console.warn(`Permission denied to access ${provider.url}.\n${reason}`);
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {Uint8Array} buf
+ * @param {boolean} emitSynced
+ * @return {encoding.Encoder}
+ */
+const readMessage = (provider, buf, emitSynced) => {
+  const decoder = createDecoder(buf);
+  const encoder = createEncoder();
+  const messageType = readVarUint(decoder);
+  const messageHandler = provider.messageHandlers[messageType];
+  if (/** @type {any} */ (messageHandler)) {
+    messageHandler(encoder, decoder, provider, emitSynced, messageType);
+  } else {
+    console.error('Unable to compute message');
+  }
+  return encoder
+};
+
+/**
+ * Outsource this function so that a new websocket connection is created immediately.
+ * I suspect that the `ws.onclose` event is not always fired if there are network issues.
+ *
+ * @param {WebsocketProvider} provider
+ * @param {WebSocket} ws
+ * @param {CloseEvent | null} event
+ */
+const closeWebsocketConnection = (provider, ws, event) => {
+  if (ws === provider.ws) {
+    provider.emit('connection-close', [event, provider]);
+    provider.ws = null;
+    ws.close();
+    provider.wsconnecting = false;
+    if (provider.wsconnected) {
+      provider.wsconnected = false;
+      provider.synced = false;
+      // update awareness (all users except local left)
+      removeAwarenessStates(
+        provider.awareness,
+        Array.from(provider.awareness.getStates().keys()).filter((client) =>
+          client !== provider.doc.clientID
+        ),
+        provider
+      );
+      provider.emit('status', [{
+        status: 'disconnected'
+      }]);
+    } else {
+      provider.wsUnsuccessfulReconnects++;
+    }
+    // Start with no reconnect timeout and increase timeout by
+    // using exponential backoff starting with 100ms
+    setTimeout(
+      setupWS,
+      min(
+        pow(2, provider.wsUnsuccessfulReconnects) * 100,
+        provider.maxBackoffTime
+      ),
+      provider
+    );
+  }
+};
+
+/**
+ * @param {WebsocketProvider} provider
+ */
+const setupWS = (provider) => {
+  if (provider.shouldConnect && provider.ws === null) {
+    const websocket = new provider._WS(provider.url, provider.protocols);
+    websocket.binaryType = 'arraybuffer';
+    provider.ws = websocket;
+    provider.wsconnecting = true;
+    provider.wsconnected = false;
+    provider.synced = false;
+
+    websocket.onmessage = (event) => {
+      provider.wsLastMessageReceived = getUnixTime();
+      const encoder = readMessage(provider, new Uint8Array(event.data), true);
+      if (length(encoder) > 1) {
+        websocket.send(toUint8Array(encoder));
+      }
+    };
+    websocket.onerror = (event) => {
+      provider.emit('connection-error', [event, provider]);
+    };
+    websocket.onclose = (event) => {
+      closeWebsocketConnection(provider, websocket, event);
+    };
+    websocket.onopen = () => {
+      provider.wsLastMessageReceived = getUnixTime();
+      provider.wsconnecting = false;
+      provider.wsconnected = true;
+      provider.wsUnsuccessfulReconnects = 0;
+      provider.emit('status', [{
+        status: 'connected'
+      }]);
+      // always send sync step 1 when connected
+      const encoder = createEncoder();
+      writeVarUint(encoder, messageSync);
+      writeSyncStep1(encoder, provider.doc);
+      websocket.send(toUint8Array(encoder));
+      // broadcast local awareness state
+      if (provider.awareness.getLocalState() !== null) {
+        const encoderAwarenessState = createEncoder();
+        writeVarUint(encoderAwarenessState, messageAwareness);
+        writeVarUint8Array(
+          encoderAwarenessState,
+          encodeAwarenessUpdate(provider.awareness, [
+            provider.doc.clientID
+          ])
+        );
+        websocket.send(toUint8Array(encoderAwarenessState));
+      }
+    };
+    provider.emit('status', [{
+      status: 'connecting'
+    }]);
+  }
+};
+
+/**
+ * @param {WebsocketProvider} provider
+ * @param {ArrayBuffer} buf
+ */
+const broadcastMessage = (provider, buf) => {
+  const ws = provider.ws;
+  if (provider.wsconnected && ws && ws.readyState === ws.OPEN) {
+    ws.send(buf);
+  }
+  if (provider.bcconnected) {
+    publish(provider.bcChannel, buf, provider);
+  }
+};
+
+/**
+ * Websocket Provider for Yjs. Creates a websocket connection to sync the shared document.
+ * The document name is attached to the provided url. I.e. the following example
+ * creates a websocket connection to http://localhost:1234/my-document-name
+ *
+ * @example
+ *   import * as Y from 'yjs'
+ *   import { WebsocketProvider } from 'y-websocket'
+ *   const doc = new Y.Doc()
+ *   const provider = new WebsocketProvider('http://localhost:1234', 'my-document-name', doc)
+ *
+ * @extends {ObservableV2<{ 'connection-close': (event: CloseEvent | null,  provider: WebsocketProvider) => any, 'status': (event: { status: 'connected' | 'disconnected' | 'connecting' }) => any, 'connection-error': (event: Event, provider: WebsocketProvider) => any, 'sync': (state: boolean) => any }>}
+ */
+class WebsocketProvider extends ObservableV2 {
+  /**
+   * @param {string} serverUrl
+   * @param {string} roomname
+   * @param {Y.Doc} doc
+   * @param {object} opts
+   * @param {boolean} [opts.connect]
+   * @param {awarenessProtocol.Awareness} [opts.awareness]
+   * @param {Object<string,string>} [opts.params] specify url parameters
+   * @param {Array<string>} [opts.protocols] specify websocket protocols
+   * @param {typeof WebSocket} [opts.WebSocketPolyfill] Optionall provide a WebSocket polyfill
+   * @param {number} [opts.resyncInterval] Request server state every `resyncInterval` milliseconds
+   * @param {number} [opts.maxBackoffTime] Maximum amount of time to wait before trying to reconnect (we try to reconnect using exponential backoff)
+   * @param {boolean} [opts.disableBc] Disable cross-tab BroadcastChannel communication
+   */
+  constructor (serverUrl, roomname, doc, {
+    connect = true,
+    awareness = new Awareness(doc),
+    params = {},
+    protocols = [],
+    WebSocketPolyfill = WebSocket,
+    resyncInterval = -1,
+    maxBackoffTime = 2500,
+    disableBc = false
+  } = {}) {
+    super();
+    // ensure that serverUrl does not end with /
+    while (serverUrl[serverUrl.length - 1] === '/') {
+      serverUrl = serverUrl.slice(0, serverUrl.length - 1);
+    }
+    this.serverUrl = serverUrl;
+    this.bcChannel = serverUrl + '/' + roomname;
+    this.maxBackoffTime = maxBackoffTime;
+    /**
+     * The specified url parameters. This can be safely updated. The changed parameters will be used
+     * when a new connection is established.
+     * @type {Object<string,string>}
+     */
+    this.params = params;
+    this.protocols = protocols;
+    this.roomname = roomname;
+    this.doc = doc;
+    this._WS = WebSocketPolyfill;
+    this.awareness = awareness;
+    this.wsconnected = false;
+    this.wsconnecting = false;
+    this.bcconnected = false;
+    this.disableBc = disableBc;
+    this.wsUnsuccessfulReconnects = 0;
+    this.messageHandlers = messageHandlers.slice();
+    /**
+     * @type {boolean}
+     */
+    this._synced = false;
+    /**
+     * @type {WebSocket?}
+     */
+    this.ws = null;
+    this.wsLastMessageReceived = 0;
+    /**
+     * Whether to connect to other peers or not
+     * @type {boolean}
+     */
+    this.shouldConnect = connect;
+
+    /**
+     * @type {number}
+     */
+    this._resyncInterval = 0;
+    if (resyncInterval > 0) {
+      this._resyncInterval = /** @type {any} */ (setInterval(() => {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          // resend sync step 1
+          const encoder = createEncoder();
+          writeVarUint(encoder, messageSync);
+          writeSyncStep1(encoder, doc);
+          this.ws.send(toUint8Array(encoder));
+        }
+      }, resyncInterval));
+    }
+
+    /**
+     * @param {ArrayBuffer} data
+     * @param {any} origin
+     */
+    this._bcSubscriber = (data, origin) => {
+      if (origin !== this) {
+        const encoder = readMessage(this, new Uint8Array(data), false);
+        if (length(encoder) > 1) {
+          publish(this.bcChannel, toUint8Array(encoder), this);
+        }
+      }
+    };
+    /**
+     * Listens to Yjs updates and sends them to remote peers (ws and broadcastchannel)
+     * @param {Uint8Array} update
+     * @param {any} origin
+     */
+    this._updateHandler = (update, origin) => {
+      if (origin !== this) {
+        const encoder = createEncoder();
+        writeVarUint(encoder, messageSync);
+        writeUpdate(encoder, update);
+        broadcastMessage(this, toUint8Array(encoder));
+      }
+    };
+    this.doc.on('update', this._updateHandler);
+    /**
+     * @param {any} changed
+     * @param {any} _origin
+     */
+    this._awarenessUpdateHandler = ({ added, updated, removed }, _origin) => {
+      const changedClients = added.concat(updated).concat(removed);
+      const encoder = createEncoder();
+      writeVarUint(encoder, messageAwareness);
+      writeVarUint8Array(
+        encoder,
+        encodeAwarenessUpdate(awareness, changedClients)
+      );
+      broadcastMessage(this, toUint8Array(encoder));
+    };
+    this._exitHandler = () => {
+      removeAwarenessStates(
+        this.awareness,
+        [doc.clientID],
+        'app closed'
+      );
+    };
+    if (isNode && typeof process !== 'undefined') {
+      process.on('exit', this._exitHandler);
+    }
+    awareness.on('update', this._awarenessUpdateHandler);
+    this._checkInterval = /** @type {any} */ (setInterval(() => {
+      if (
+        this.wsconnected &&
+        messageReconnectTimeout <
+          getUnixTime() - this.wsLastMessageReceived
+      ) {
+        // no message received in a long time - not even your own awareness
+        // updates (which are updated every 15 seconds)
+        closeWebsocketConnection(this, /** @type {WebSocket} */ (this.ws), null);
+      }
+    }, messageReconnectTimeout / 10));
+    if (connect) {
+      this.connect();
+    }
+  }
+
+  get url () {
+    const encodedParams = encodeQueryParams(this.params);
+    return this.serverUrl + '/' + this.roomname +
+      (encodedParams.length === 0 ? '' : '?' + encodedParams)
+  }
+
+  /**
+   * @type {boolean}
+   */
+  get synced () {
+    return this._synced
+  }
+
+  set synced (state) {
+    if (this._synced !== state) {
+      this._synced = state;
+      // @ts-ignore
+      this.emit('synced', [state]);
+      this.emit('sync', [state]);
+    }
+  }
+
+  destroy () {
+    if (this._resyncInterval !== 0) {
+      clearInterval(this._resyncInterval);
+    }
+    clearInterval(this._checkInterval);
+    this.disconnect();
+    if (isNode && typeof process !== 'undefined') {
+      process.off('exit', this._exitHandler);
+    }
+    this.awareness.off('update', this._awarenessUpdateHandler);
+    this.doc.off('update', this._updateHandler);
+    super.destroy();
+  }
+
+  connectBc () {
+    if (this.disableBc) {
+      return
+    }
+    if (!this.bcconnected) {
+      subscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = true;
+    }
+    // send sync step1 to bc
+    // write sync step 1
+    const encoderSync = createEncoder();
+    writeVarUint(encoderSync, messageSync);
+    writeSyncStep1(encoderSync, this.doc);
+    publish(this.bcChannel, toUint8Array(encoderSync), this);
+    // broadcast local state
+    const encoderState = createEncoder();
+    writeVarUint(encoderState, messageSync);
+    writeSyncStep2(encoderState, this.doc);
+    publish(this.bcChannel, toUint8Array(encoderState), this);
+    // write queryAwareness
+    const encoderAwarenessQuery = createEncoder();
+    writeVarUint(encoderAwarenessQuery, messageQueryAwareness);
+    publish(
+      this.bcChannel,
+      toUint8Array(encoderAwarenessQuery),
+      this
+    );
+    // broadcast local awareness state
+    const encoderAwarenessState = createEncoder();
+    writeVarUint(encoderAwarenessState, messageAwareness);
+    writeVarUint8Array(
+      encoderAwarenessState,
+      encodeAwarenessUpdate(this.awareness, [
+        this.doc.clientID
+      ])
+    );
+    publish(
+      this.bcChannel,
+      toUint8Array(encoderAwarenessState),
+      this
+    );
+  }
+
+  disconnectBc () {
+    // broadcast message with local awareness state set to null (indicating disconnect)
+    const encoder = createEncoder();
+    writeVarUint(encoder, messageAwareness);
+    writeVarUint8Array(
+      encoder,
+      encodeAwarenessUpdate(this.awareness, [
+        this.doc.clientID
+      ], new Map())
+    );
+    broadcastMessage(this, toUint8Array(encoder));
+    if (this.bcconnected) {
+      unsubscribe(this.bcChannel, this._bcSubscriber);
+      this.bcconnected = false;
+    }
+  }
+
+  disconnect () {
+    this.shouldConnect = false;
+    this.disconnectBc();
+    if (this.ws !== null) {
+      closeWebsocketConnection(this, this.ws, null);
+    }
+  }
+
+  connect () {
+    this.shouldConnect = true;
+    if (!this.wsconnected && this.ws === null) {
+      setupWS(this);
+      this.connectBc();
+    }
+  }
+}
+
+/**
+ * WebSocket sync provider for real-time collaboration
+ */
+class WebSocketSyncProvider {
+    provider;
+    isConnected = false;
+    constructor(docName, doc, options) {
+        const url = options?.url || 'ws://localhost:1234';
+        const roomName = options?.roomName || docName;
+        this.provider = new WebsocketProvider(url, roomName, doc, {
+            params: options?.params,
+            protocols: options?.protocols,
+            WebSocketPolyfill: options?.WebSocketPolyfill,
+            awareness: options?.awareness,
+            maxBackoffTime: options?.maxBackoffTime,
+            disableBc: true,
+        });
+        this.setupEventListeners();
+        console.info(`WebSocket Provider initialized: ${url}/${roomName}`);
+    }
+    /**
+     * Static factory method for creating WebSocketSyncProvider with configuration options
+     * Returns a ProviderFactory that can be used in sync configuration
+     */
+    static with(options) {
+        return {
+            create: (docName, doc) => {
+                return new WebSocketSyncProvider(docName, doc, options);
+            },
+        };
+    }
+    setupEventListeners() {
+        this.provider.on('status', ({ status }) => {
+            if (status === 'connected') {
+                this.isConnected = true;
+                console.info('WebSocket connected');
+            }
+            else if (status === 'disconnected') {
+                this.isConnected = false;
+                console.info('WebSocket disconnected');
+            }
+        });
+        this.provider.on('sync', (synced) => {
+            if (synced) {
+                console.info('WebSocket synced');
+            }
+        });
+    }
+    async connect() {
+        if (this.isConnected) {
+            return;
+        }
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('WebSocket connection timeout'));
+            }, 10000); // 10 second timeout
+            const statusHandler = ({ status }) => {
+                if (status === 'connected') {
+                    clearTimeout(timeout);
+                    this.provider.off('status', statusHandler);
+                    this.isConnected = true;
+                    resolve();
+                }
+            };
+            this.provider.on('status', statusHandler);
+            // If already connected, resolve immediately
+            if (this.provider.wsconnected) {
+                clearTimeout(timeout);
+                this.provider.off('status', statusHandler);
+                this.isConnected = true;
+                resolve();
+            }
+        });
+    }
+    disconnect() {
+        if (this.provider) {
+            this.provider.disconnect();
+        }
+        this.isConnected = false;
+    }
+    destroy() {
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+    }
+}
+
+/**
+ * Hocuspocus sync provider for real-time collaboration
+ * Supports multiplexing - multiple documents can share the same WebSocket connection
+ */
+class HocuspocusSyncProvider {
+    provider;
+    isConnected = false;
+    isSynced = false;
+    usesSharedSocket = false;
+    // Static shared WebSocket instance for multiplexing
+    static sharedWebSocketProvider = null;
+    constructor(docName, doc, options) {
+        const name = options?.name || docName;
+        const url = options?.url || 'ws://localhost:1234';
+        // Use provided websocketProvider or the static shared one
+        const websocketProvider = options?.websocketProvider || HocuspocusSyncProvider.sharedWebSocketProvider;
+        if (websocketProvider) {
+            // Multiplexing mode - use shared WebSocket connection
+            this.usesSharedSocket = true;
+            const config = {
+                websocketProvider,
+                name,
+                document: doc,
+                token: options?.token || null,
+                onConnect: () => {
+                    this.isConnected = true;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus connected: ${name}`);
+                    }
+                    if (options?.onConnect) {
+                        options.onConnect();
+                    }
+                },
+                onDisconnect: () => {
+                    this.isConnected = false;
+                    this.isSynced = false;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus disconnected: ${name}`);
+                    }
+                    if (options?.onDisconnect) {
+                        options.onDisconnect();
+                    }
+                },
+                onSynced: () => {
+                    this.isSynced = true;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus synced: ${name}`);
+                    }
+                    if (options?.onSynced) {
+                        options.onSynced();
+                    }
+                },
+            };
+            // Add optional settings
+            if (options?.forceSyncInterval !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options?.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            if (options?.onStatus) {
+                config.onStatus = options.onStatus;
+            }
+            this.provider = new HocuspocusProvider(config);
+            // Must call attach() explicitly when using shared socket
+            this.provider.attach();
+            if (!options?.quiet) {
+                console.info(`Hocuspocus Provider initialized (multiplexed): ${name}`);
+            }
+        }
+        else {
+            // Standalone mode - create own WebSocket connection
+            this.usesSharedSocket = false;
+            const config = {
+                url,
+                name,
+                document: doc,
+                token: options?.token || null,
+                onConnect: () => {
+                    this.isConnected = true;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus connected: ${name}`);
+                    }
+                    if (options?.onConnect) {
+                        options.onConnect();
+                    }
+                },
+                onDisconnect: () => {
+                    this.isConnected = false;
+                    this.isSynced = false;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus disconnected: ${name}`);
+                    }
+                    if (options?.onDisconnect) {
+                        options.onDisconnect();
+                    }
+                },
+                onSynced: () => {
+                    this.isSynced = true;
+                    if (!options?.quiet) {
+                        console.info(`Hocuspocus synced: ${name}`);
+                    }
+                    if (options?.onSynced) {
+                        options.onSynced();
+                    }
+                },
+            };
+            // Add optional settings
+            if (options?.forceSyncInterval !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options?.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            if (options?.onStatus) {
+                config.onStatus = options.onStatus;
+            }
+            if (options?.WebSocketPolyfill) {
+                config.WebSocketPolyfill = options.WebSocketPolyfill;
+            }
+            this.provider = new HocuspocusProvider(config);
+            if (!options?.quiet) {
+                console.info(`Hocuspocus Provider initialized: ${url}/${name}`);
+            }
+        }
+    }
+    /**
+     * Create a shared WebSocket connection for multiplexing
+     * Call this once to create a shared connection that multiple providers can use
+     */
+    static createSharedWebSocket(options) {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            console.warn('Shared WebSocket already exists. Returning existing instance.');
+            return HocuspocusSyncProvider.sharedWebSocketProvider;
+        }
+        const config = {
+            url: options.url,
+        };
+        if (options.WebSocketPolyfill) {
+            config.WebSocketPolyfill = options.WebSocketPolyfill;
+        }
+        if (options.onConnect) {
+            config.onConnect = options.onConnect;
+        }
+        if (options.onDisconnect) {
+            config.onDisconnect = options.onDisconnect;
+        }
+        if (options.onStatus) {
+            config.onStatus = options.onStatus;
+        }
+        HocuspocusSyncProvider.sharedWebSocketProvider = new HocuspocusProviderWebsocket(config);
+        console.info(`Shared Hocuspocus WebSocket created: ${options.url}`);
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Destroy the shared WebSocket connection
+     * Call this when you're done with all multiplexed providers
+     */
+    static destroySharedWebSocket() {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            HocuspocusSyncProvider.sharedWebSocketProvider.destroy();
+            HocuspocusSyncProvider.sharedWebSocketProvider = null;
+            console.info('Shared Hocuspocus WebSocket destroyed');
+        }
+    }
+    /**
+     * Get the shared WebSocket provider instance (if it exists)
+     */
+    static getSharedWebSocket() {
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Static factory method for creating HocuspocusSyncProvider with configuration options
+     * Returns a ProviderFactory that can be used in sync configuration
+     */
+    static with(options) {
+        return {
+            create: (docName, doc) => {
+                return new HocuspocusSyncProvider(docName, doc, options);
+            },
+        };
+    }
+    async connect() {
+        if (this.isSynced) {
+            return;
+        }
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('Hocuspocus connection timeout'));
+            }, 10000); // 10 second timeout
+            const syncHandler = () => {
+                clearTimeout(timeout);
+                this.provider.off('synced', syncHandler);
+                resolve();
+            };
+            this.provider.on('synced', syncHandler);
+            // If already synced, resolve immediately
+            if (this.provider.isSynced) {
+                clearTimeout(timeout);
+                this.provider.off('synced', syncHandler);
+                resolve();
+                return;
+            }
+            // Connect if not already connected (standalone mode only)
+            if (!this.isConnected && !this.usesSharedSocket) {
+                this.provider.connect();
+            }
+        });
+    }
+    disconnect() {
+        if (this.provider) {
+            if (this.usesSharedSocket) {
+                // Detach from shared socket instead of disconnecting
+                this.provider.detach();
+            }
+            else {
+                this.provider.disconnect();
+            }
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+    }
+    destroy() {
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+    }
+}
+
+export { HocuspocusSyncProvider, WebSocketSyncProvider };
 //# sourceMappingURL=index.js.map