redweb-client 0.1.0 → 0.2.0

package/dist/live-html.js

@@ -0,0 +1,1021 @@
+// src/protocol.ts
+var ERROR_CODES = Object.freeze({
+  INVALID_MESSAGE: "INVALID_MESSAGE",
+  UNKNOWN_HANDLER: "UNKNOWN_HANDLER",
+  HANDLER_FAILED: "HANDLER_FAILED",
+  BINARY_UNSUPPORTED: "BINARY_UNSUPPORTED",
+  RATE_LIMITED: "RATE_LIMITED",
+  QUEUE_FULL: "QUEUE_FULL",
+  CAPACITY_REACHED: "CAPACITY_REACHED",
+  INITIALIZATION_FAILED: "INITIALIZATION_FAILED"
+});
+function boundedString(value, name, maxLength) {
+  if (typeof value !== "string" || value.length === 0 || value.length > maxLength) {
+    throw new TypeError(`${name} must be a non-empty string of at most ${maxLength} characters.`);
+  }
+  return value;
+}
+function validateMetadata(metadata) {
+  if (metadata.requestId !== void 0) boundedString(metadata.requestId, "requestId", 256);
+  if (metadata.sequence !== void 0 && (!Number.isSafeInteger(metadata.sequence) || metadata.sequence < 0)) {
+    throw new TypeError("sequence must be a non-negative safe integer.");
+  }
+}
+function createProtocolEnvelope(version, type, payload, metadata = {}) {
+  validateMetadata(metadata);
+  return {
+    v: boundedString(version, "version", 64),
+    type: boundedString(type, "type", 256),
+    payload,
+    ...metadata
+  };
+}
+function createLegacyEnvelope(type, payload, metadata = {}) {
+  validateMetadata(metadata);
+  const checkedType = boundedString(type, "type", 256);
+  if (payload !== null && typeof payload === "object" && !Array.isArray(payload)) {
+    return { ...payload, type: checkedType, ...metadata };
+  }
+  return { type: checkedType, payload, ...metadata };
+}
+function parseMessage(input, version) {
+  const value = typeof input === "string" ? JSON.parse(input) : input;
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new TypeError("Received an invalid Redweb message.");
+  }
+  const message = value;
+  if (message.requestId !== void 0) boundedString(message.requestId, "requestId", 256);
+  if (message.sequence !== void 0 && (!Number.isSafeInteger(message.sequence) || message.sequence < 0)) {
+    throw new TypeError("sequence must be a non-negative safe integer.");
+  }
+  if (version !== void 0) {
+    boundedString(message.type, "type", 256);
+    if (message.v !== version) throw new TypeError("Received a Redweb message for a different protocol version.");
+    if (message.type === "error") {
+      if (Object.prototype.hasOwnProperty.call(message, "payload")) {
+        throw new TypeError("Received an invalid Redweb protocol error.");
+      }
+      const error = message.error;
+      if (!error || typeof error !== "object") {
+        throw new TypeError("Received an invalid Redweb protocol error.");
+      }
+      boundedString(error.code, "error.code", 256);
+      boundedString(error.message, "error.message", 1024);
+    } else {
+      if (!Object.prototype.hasOwnProperty.call(message, "payload") || message.error !== void 0) {
+        throw new TypeError("Received an invalid Redweb protocol envelope.");
+      }
+    }
+  } else if (typeof message.type === "string") {
+    boundedString(message.type, "type", 256);
+  } else if (typeof message.error !== "string") {
+    throw new TypeError("Received an invalid Redweb message.");
+  }
+  return message;
+}
+function resolveWebSocketUrl(input, base) {
+  const fallbackBase = base ?? (typeof globalThis.location === "object" ? globalThis.location.href : void 0);
+  let url;
+  try {
+    url = fallbackBase === void 0 ? new URL(input) : new URL(input, fallbackBase);
+  } catch {
+    throw new TypeError("url must be an absolute ws:/wss: URL or resolvable against baseUrl/location.");
+  }
+  if (url.protocol === "http:") url.protocol = "ws:";
+  if (url.protocol === "https:") url.protocol = "wss:";
+  if (url.protocol !== "ws:" && url.protocol !== "wss:") throw new TypeError("url must use ws: or wss:.");
+  return url.toString();
+}
+var RedwebProtocolError = class extends Error {
+  code;
+  envelope;
+  constructor(envelope) {
+    super(envelope.error.message);
+    this.name = "RedwebProtocolError";
+    this.code = envelope.error.code;
+    this.envelope = envelope;
+  }
+};
+
+// src/client.ts
+var OPEN = 1;
+var CONNECTING = 0;
+var defaultReconnect = {
+  enabled: false,
+  maxAttempts: 8,
+  initialDelayMs: 250,
+  maxDelayMs: 1e4,
+  factor: 2,
+  jitter: 0.2,
+  shouldReconnect: (event) => event.code !== 1e3 && event.code !== 1008
+};
+function defaultFactory(url) {
+  if (typeof globalThis.WebSocket !== "function") {
+    throw new Error("WebSocket is unavailable; provide webSocketFactory outside a browser.");
+  }
+  return new globalThis.WebSocket(url);
+}
+function toError(value, fallback) {
+  return value instanceof Error ? value : new Error(fallback);
+}
+function assertNonNegativeInteger(value, name) {
+  if (!Number.isInteger(value) || value < 0) throw new TypeError(`${name} must be a non-negative integer.`);
+}
+var RedwebClient = class {
+  url;
+  version;
+  state = "idle";
+  socket;
+  factory;
+  reconnect;
+  maxQueueSize;
+  requestTimeoutMs;
+  createRequestId;
+  random;
+  listeners = /* @__PURE__ */ new Map();
+  anyListeners = /* @__PURE__ */ new Set();
+  binaryListeners = /* @__PURE__ */ new Set();
+  errorListeners = /* @__PURE__ */ new Set();
+  stateListeners = /* @__PURE__ */ new Set();
+  closeListeners = /* @__PURE__ */ new Set();
+  queue = [];
+  pending = /* @__PURE__ */ new Map();
+  connectPromise;
+  reconnectTimer;
+  reconnectAttempts = 0;
+  manualClose = false;
+  disposed = false;
+  requestSequence = 0;
+  generation = 0;
+  constructor(url, options = {}) {
+    this.url = resolveWebSocketUrl(url, options.baseUrl);
+    const queryVersion = new URL(this.url).searchParams.get("redwebVersion") ?? void 0;
+    if (options.version !== void 0 && queryVersion !== void 0 && options.version !== queryVersion) {
+      throw new TypeError("options.version conflicts with the redwebVersion URL query.");
+    }
+    this.version = options.version ?? queryVersion;
+    if (this.version !== void 0) createProtocolEnvelope(this.version, "validation", null);
+    this.factory = options.webSocketFactory ?? defaultFactory;
+    this.reconnect = { ...defaultReconnect, ...options.reconnect };
+    this.maxQueueSize = options.maxQueueSize ?? 0;
+    this.requestTimeoutMs = options.requestTimeoutMs ?? 1e4;
+    this.createRequestId = options.createRequestId ?? (() => {
+      this.requestSequence += 1;
+      return `${Date.now().toString(36)}-${this.requestSequence.toString(36)}`;
+    });
+    this.random = options.random ?? Math.random;
+    assertNonNegativeInteger(this.maxQueueSize, "maxQueueSize");
+    assertNonNegativeInteger(this.requestTimeoutMs, "requestTimeoutMs");
+    assertNonNegativeInteger(this.reconnect.maxAttempts, "reconnect.maxAttempts");
+    assertNonNegativeInteger(this.reconnect.initialDelayMs, "reconnect.initialDelayMs");
+    assertNonNegativeInteger(this.reconnect.maxDelayMs, "reconnect.maxDelayMs");
+    if (!Number.isFinite(this.reconnect.factor) || this.reconnect.factor < 1) {
+      throw new TypeError("reconnect.factor must be a finite number of at least 1.");
+    }
+    if (!Number.isFinite(this.reconnect.jitter) || this.reconnect.jitter < 0 || this.reconnect.jitter > 1) {
+      throw new TypeError("reconnect.jitter must be between 0 and 1.");
+    }
+  }
+  connect() {
+    if (this.disposed) return Promise.reject(new Error("RedwebClient has been disposed."));
+    if (this.state === "open") return Promise.resolve();
+    if (this.connectPromise) return this.connectPromise;
+    this.manualClose = false;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = void 0;
+    }
+    let resolve;
+    let reject;
+    const promise = new Promise((yes, no) => {
+      resolve = yes;
+      reject = no;
+    });
+    this.connectPromise = promise;
+    const finish = () => this.retire(promise);
+    void this.openSocket(false).then(() => {
+      finish();
+      resolve();
+    }, (error) => {
+      finish();
+      reject(error);
+    });
+    return promise;
+  }
+  current(generation) {
+    return this.generation === generation && !this.manualClose && !this.disposed;
+  }
+  retire(promise) {
+    if (this.connectPromise === promise) this.connectPromise = void 0;
+  }
+  openSocket(reconnecting) {
+    const opening = this.connectPromise;
+    const generation = ++this.generation;
+    this.transition(reconnecting ? "reconnecting" : "connecting");
+    if (!this.current(generation)) return Promise.reject(new Error("WebSocket connection attempt was cancelled."));
+    let socket;
+    try {
+      socket = this.factory(this.connectionUrl());
+    } catch (error) {
+      if (this.current(generation)) {
+        this.retire(opening);
+        this.transition("closed");
+        if (reconnecting && this.current(generation)) this.scheduleReconnect();
+      }
+      return Promise.reject(toError(error, "Unable to create WebSocket."));
+    }
+    if (this.current(generation)) this.socket = socket;
+    if ("binaryType" in socket) socket.binaryType = "arraybuffer";
+    return new Promise((resolve, reject) => {
+      let settled = false;
+      const onOpen = () => {
+        if (this.socket !== socket || !this.current(generation)) {
+          if (!settled) reject(new Error("WebSocket connection attempt was superseded."));
+          socket.close(1e3, "Superseded");
+          return;
+        }
+        settled = true;
+        this.reconnectAttempts = 0;
+        this.transition("open");
+        if (!this.current(generation)) {
+          reject(new Error("WebSocket connection attempt was cancelled."));
+          return;
+        }
+        this.flushQueue();
+        resolve();
+      };
+      const onMessage = (event) => {
+        if (this.socket === socket && this.current(generation)) void this.handleIncoming(event.data);
+      };
+      const onError = (event) => {
+        if (this.socket !== socket) return;
+        const error = toError(event.error, "WebSocket connection failed.");
+        this.emitError(error);
+      };
+      const onClose = (event) => {
+        socket.removeEventListener("open", onOpen);
+        socket.removeEventListener("message", onMessage);
+        socket.removeEventListener("error", onError);
+        socket.removeEventListener("close", onClose);
+        if (this.socket !== socket) {
+          if (!settled) reject(new Error("WebSocket connection attempt was superseded."));
+          return;
+        }
+        this.socket = void 0;
+        if (!settled) {
+          settled = true;
+          reject(new Error("WebSocket closed before opening."));
+        }
+        this.rejectPending(new Error("WebSocket connection closed."));
+        const closedGeneration = this.generation;
+        this.retire(opening);
+        this.transition("closed");
+        this.notify(this.closeListeners, event);
+        if (!this.manualClose && this.reconnect.shouldReconnect(event) && this.generation === closedGeneration) this.scheduleReconnect();
+      };
+      socket.addEventListener("open", onOpen);
+      socket.addEventListener("message", onMessage);
+      socket.addEventListener("error", onError);
+      socket.addEventListener("close", onClose);
+      if (!this.current(generation)) {
+        settled = true;
+        reject(new Error("WebSocket connection attempt was cancelled."));
+        socket.close(1e3, "Cancelled");
+      }
+    });
+  }
+  close(code = 1e3, reason = "Client closed") {
+    this.manualClose = true;
+    this.generation++;
+    this.connectPromise = void 0;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = void 0;
+    }
+    this.rejectPending(new Error("Client closed."));
+    this.queue.length = 0;
+    const socket = this.socket;
+    if (socket && (socket.readyState === OPEN || socket.readyState === CONNECTING)) {
+      this.transition("closing");
+      socket.close(code, reason);
+    } else {
+      this.transition("closed");
+    }
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.close(1e3, "Client disposed");
+    this.queue.length = 0;
+    this.listeners.clear();
+    this.anyListeners.clear();
+    this.binaryListeners.clear();
+    this.errorListeners.clear();
+    this.stateListeners.clear();
+    this.closeListeners.clear();
+  }
+  send(type, payload, metadata = {}) {
+    const envelope = this.version ? createProtocolEnvelope(this.version, type, payload, metadata) : createLegacyEnvelope(type, payload, metadata);
+    this.transmit(JSON.stringify(envelope));
+  }
+  sendRaw(data) {
+    this.transmit(data);
+  }
+  transmit(data, requestId) {
+    if (this.disposed) throw new Error("RedwebClient has been disposed.");
+    if (this.socket?.readyState === OPEN) {
+      this.socket.send(data);
+      return;
+    }
+    if (this.queue.length >= this.maxQueueSize) {
+      throw new Error(this.maxQueueSize === 0 ? "WebSocket is not open." : "Outbound message queue is full.");
+    }
+    this.queue.push(requestId === void 0 ? { data } : { data, requestId });
+  }
+  request(type, payload, options = {}) {
+    const requestId = options.requestId ?? this.createRequestId();
+    const timeoutMs = options.timeoutMs ?? this.requestTimeoutMs;
+    assertNonNegativeInteger(timeoutMs, "timeoutMs");
+    if (options.signal?.aborted) return Promise.reject(new DOMException("The request was aborted.", "AbortError"));
+    if (this.pending.has(requestId)) return Promise.reject(new Error(`A Redweb request with id "${requestId}" is already pending.`));
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.finishPending(requestId);
+        reject(new Error(`Redweb request timed out after ${timeoutMs}ms.`));
+      }, timeoutMs);
+      const pending = { resolve, reject, timer };
+      if (options.signal) {
+        pending.signal = options.signal;
+        pending.abort = () => {
+          this.finishPending(requestId);
+          reject(new DOMException("The request was aborted.", "AbortError"));
+        };
+        options.signal.addEventListener("abort", pending.abort, { once: true });
+      }
+      this.pending.set(requestId, pending);
+      try {
+        const metadata = { requestId, ...options.sequence === void 0 ? {} : { sequence: options.sequence } };
+        const envelope = this.version ? createProtocolEnvelope(this.version, type, payload, metadata) : createLegacyEnvelope(type, payload, metadata);
+        this.transmit(JSON.stringify(envelope), requestId);
+      } catch (error) {
+        this.finishPending(requestId);
+        reject(toError(error, "Unable to send Redweb request."));
+      }
+    });
+  }
+  waitFor(type, options = {}) {
+    const timeoutMs = options.timeoutMs ?? this.requestTimeoutMs;
+    assertNonNegativeInteger(timeoutMs, "timeoutMs");
+    if (options.signal?.aborted) return Promise.reject(new DOMException("The wait was aborted.", "AbortError"));
+    return new Promise((resolve, reject) => {
+      const off = this.on(type, (message) => {
+        cleanup();
+        resolve(message);
+      });
+      const timer = setTimeout(() => {
+        cleanup();
+        reject(new Error(`Timed out waiting for Redweb message "${type}" after ${timeoutMs}ms.`));
+      }, timeoutMs);
+      const abort = () => {
+        cleanup();
+        reject(new DOMException("The wait was aborted.", "AbortError"));
+      };
+      const cleanup = () => {
+        clearTimeout(timer);
+        off();
+        options.signal?.removeEventListener("abort", abort);
+      };
+      options.signal?.addEventListener("abort", abort, { once: true });
+    });
+  }
+  on(type, listener) {
+    let group = this.listeners.get(type);
+    if (!group) {
+      group = /* @__PURE__ */ new Set();
+      this.listeners.set(type, group);
+    }
+    group.add(listener);
+    return () => {
+      group?.delete(listener);
+      if (group?.size === 0) this.listeners.delete(type);
+    };
+  }
+  onAny(listener) {
+    return this.subscribe(this.anyListeners, listener);
+  }
+  onBinary(listener) {
+    return this.subscribe(this.binaryListeners, listener);
+  }
+  onError(listener) {
+    return this.subscribe(this.errorListeners, listener);
+  }
+  onStateChange(listener) {
+    return this.subscribe(this.stateListeners, listener);
+  }
+  onClose(listener) {
+    return this.subscribe(this.closeListeners, listener);
+  }
+  subscribe(set, listener) {
+    set.add(listener);
+    return () => {
+      set.delete(listener);
+    };
+  }
+  connectionUrl() {
+    const url = new URL(this.url);
+    if (this.version && !url.searchParams.has("redwebVersion")) url.searchParams.set("redwebVersion", this.version);
+    return url.toString();
+  }
+  transition(state) {
+    if (this.state === state) return;
+    this.state = state;
+    this.notify(this.stateListeners, state);
+  }
+  async handleIncoming(data) {
+    if (typeof data !== "string") {
+      if (data instanceof Blob || data instanceof ArrayBuffer || ArrayBuffer.isView(data)) {
+        this.notify(this.binaryListeners, data);
+        return;
+      }
+      this.emitError(new TypeError("Received an unsupported WebSocket message type."));
+      return;
+    }
+    let message;
+    try {
+      message = parseMessage(data, this.version);
+    } catch (error) {
+      this.emitError(toError(error, "Unable to parse Redweb message."));
+      return;
+    }
+    const requestId = message.requestId;
+    if (typeof requestId === "string") {
+      const pending = this.pending.get(requestId);
+      if (pending) {
+        this.finishPending(requestId);
+        if (message.type === "error" && "error" in message) pending.reject(new RedwebProtocolError(message));
+        else pending.resolve(message);
+      }
+    }
+    const messageType = "type" in message && typeof message.type === "string" ? message.type : "error";
+    const group = this.listeners.get(messageType);
+    if (group) this.notify(group, message);
+    this.notify(this.anyListeners, message);
+  }
+  finishPending(requestId) {
+    const pending = this.pending.get(requestId);
+    if (!pending) return;
+    clearTimeout(pending.timer);
+    if (pending.signal && pending.abort) pending.signal.removeEventListener("abort", pending.abort);
+    this.pending.delete(requestId);
+    for (let index = this.queue.length - 1; index >= 0; index -= 1) {
+      if (this.queue[index]?.requestId === requestId) this.queue.splice(index, 1);
+    }
+  }
+  rejectPending(error) {
+    for (const [requestId, pending] of this.pending) {
+      this.finishPending(requestId);
+      pending.reject(error);
+    }
+  }
+  emitError(error) {
+    for (const listener of this.errorListeners) {
+      try {
+        listener(error);
+      } catch {
+      }
+    }
+  }
+  notify(listeners, value) {
+    for (const listener of listeners) {
+      try {
+        listener(value);
+      } catch (error) {
+        this.emitError(toError(error, "Redweb listener failed."));
+      }
+    }
+  }
+  flushQueue() {
+    while (this.socket?.readyState === OPEN && this.queue.length > 0) {
+      const entry = this.queue.shift();
+      this.socket.send(entry.data);
+    }
+  }
+  scheduleReconnect() {
+    if (this.disposed || this.manualClose || !this.reconnect.enabled || this.reconnectAttempts >= this.reconnect.maxAttempts) return;
+    const generation = this.generation;
+    const baseDelay = Math.min(
+      this.reconnect.maxDelayMs,
+      this.reconnect.initialDelayMs * this.reconnect.factor ** this.reconnectAttempts
+    );
+    const spread = baseDelay * this.reconnect.jitter;
+    const delay = Math.max(0, Math.round(baseDelay - spread + this.random() * spread * 2));
+    if (!this.current(generation)) return;
+    this.reconnectAttempts += 1;
+    this.transition("reconnecting");
+    if (!this.current(generation)) return;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = void 0;
+      if (!this.current(generation)) return;
+      void this.openSocket(true).catch(() => {
+      });
+    }, delay);
+  }
+};
+
+// src/live-html/morph.js
+function createMorph() {
+  const clientNodes = /* @__PURE__ */ new WeakSet();
+  const marker = (node) => node?.nodeType === 8 && /^rw:[ck][0-9a-f]*$/.test(node.data) ? node.data : null;
+  const units = (parent, start = null, end = null) => {
+    const result = [];
+    const keys = /* @__PURE__ */ new Set();
+    let node = start ? start.nextSibling : parent.firstChild;
+    while (node && node !== end) {
+      if (clientNodes.has(node)) {
+        node = node.nextSibling;
+        continue;
+      }
+      const key = marker(node);
+      let last = node;
+      if (key) {
+        if (key.startsWith("rw:k") && keys.has(key)) throw new Error("Duplicate JSX sibling key.");
+        keys.add(key);
+        while (last && last !== end && !(last.nodeType === 8 && last.data === "/" + key)) last = last.nextSibling;
+        if (!last || last === end) throw new Error("Incomplete Redweb render boundary.");
+      }
+      result.push({ first: node, last, key });
+      node = last.nextSibling;
+    }
+    return result;
+  };
+  const matchKey = (unit) => unit.key || [unit.first.nodeType, unit.first.nodeName, unit.first.namespaceURI, unit.first.id || ""].join(":");
+  const rangeNodes = (unit) => {
+    const nodes = [];
+    for (let node = unit.first; node; node = node.nextSibling) {
+      nodes.push(node);
+      if (node === unit.last) break;
+    }
+    return nodes;
+  };
+  const optionDefaults = (node) => {
+    const seen = /* @__PURE__ */ new Map();
+    return [...node.options].map((option) => {
+      const occurrence = seen.get(option.value) || 0;
+      seen.set(option.value, occurrence + 1);
+      return { option, value: option.value, selected: option.defaultSelected, key: JSON.stringify([option.value, option.id || occurrence]) };
+    });
+  };
+  const defaultsChanged = (previous, node) => {
+    const original = new Map(previous.map((entry) => [entry.option, entry]));
+    const pending = /* @__PURE__ */ new Map();
+    const count = (key, change) => pending.set(key, (pending.get(key) || 0) + change);
+    for (const entry of previous) if (entry.selected) count(entry.key, 1);
+    for (const entry of optionDefaults(node)) {
+      const before = original.get(entry.option);
+      if (before && before.value === entry.value) {
+        if (before.selected !== entry.selected) return true;
+        if (entry.selected) count(before.key, -1);
+      } else if (entry.selected) count(entry.key, -1);
+    }
+    return [...pending.values()].some((value) => value !== 0);
+  };
+  const restoreSelection = (node, incoming, previous, resetToDefaults) => {
+    const options = [...node.options];
+    const selected = /* @__PURE__ */ new Set();
+    if (resetToDefaults) {
+      [...incoming.options].forEach((option, index) => {
+        if (option.selected) selected.add(options[index]);
+      });
+    } else {
+      const available = new Set(options);
+      const missing = /* @__PURE__ */ new Map();
+      for (const entry of previous) {
+        if (available.has(entry.option) && entry.option.value === entry.value) selected.add(entry.option);
+        else missing.set(entry.value, (missing.get(entry.value) || 0) + 1);
+      }
+      for (const option of options) {
+        const count = missing.get(option.value) || 0;
+        if (count && !selected.has(option)) {
+          selected.add(option);
+          missing.set(option.value, count - 1);
+        }
+      }
+    }
+    if (resetToDefaults || selected.size || !previous.length) {
+      for (const option of options) option.selected = selected.has(option);
+    }
+  };
+  const morphNode = (node, incoming) => {
+    if (node.nodeType !== 1) {
+      if (node.nodeValue !== incoming.nodeValue) node.nodeValue = incoming.nodeValue;
+      return;
+    }
+    const input = node.localName === "input";
+    const textarea = node.localName === "textarea";
+    const select = node.localName === "select";
+    const previousValue = node.value;
+    const previousChecked = node.checked;
+    const valueChanged = input ? node.getAttribute("value") !== incoming.getAttribute("value") : textarea && node.defaultValue !== incoming.defaultValue;
+    const checkedChanged = input && node.hasAttribute("checked") !== incoming.hasAttribute("checked");
+    const selections = select ? [...node.selectedOptions].map((option) => ({ option, value: option.value })) : [];
+    const defaults = select ? optionDefaults(node) : null;
+    for (const attribute of [...node.attributes]) if (!incoming.hasAttribute(attribute.name)) node.removeAttribute(attribute.name);
+    for (const attribute of incoming.attributes) if (node.getAttribute(attribute.name) !== attribute.value) node.setAttribute(attribute.name, attribute.value);
+    reconcile(node, incoming);
+    if (input && node.type !== "file" || textarea) node.value = valueChanged ? incoming.value : previousValue;
+    if (input) node.checked = checkedChanged ? incoming.checked : previousChecked;
+    if (select) restoreSelection(node, incoming, selections, defaultsChanged(defaults, node));
+  };
+  const reconcile = (parent, incoming, start = null, end = null, incomingStart = null, incomingEnd = null) => {
+    const previous = units(parent, start, end);
+    const desired = units(incoming, incomingStart, incomingEnd);
+    const remaining = new Set(previous);
+    const candidates = /* @__PURE__ */ new Map();
+    for (const unit of previous) {
+      const key = matchKey(unit);
+      const matches = candidates.get(key) || { units: [], next: 0 };
+      matches.units.push(unit);
+      candidates.set(key, matches);
+    }
+    let cursor = start ? start.nextSibling : parent.firstChild;
+    for (const wanted of desired) {
+      const matches = candidates.get(matchKey(wanted));
+      const found = matches?.units[matches.next++];
+      if (!found) {
+        for (const node of rangeNodes(wanted)) parent.insertBefore(node.cloneNode(true), cursor);
+        continue;
+      }
+      remaining.delete(found);
+      if (found.first !== cursor) for (const node of rangeNodes(found)) parent.insertBefore(node, cursor);
+      if (found.key) reconcile(parent, incoming, found.first, found.last, wanted.first, wanted.last);
+      else morphNode(found.first, wanted.first);
+      cursor = found.last.nextSibling;
+    }
+    for (const unit of remaining) for (const node of rangeNodes(unit)) node.remove();
+  };
+  const preserveFocus = (update) => {
+    const active = document.activeElement;
+    const selection = active && typeof active.selectionStart === "number" ? [active.selectionStart, active.selectionEnd, active.selectionDirection] : null;
+    update();
+    if (active?.isConnected && document.activeElement !== active) active.focus({ preventScroll: true });
+    if (active?.isConnected && selection && typeof active.selectionStart === "number") active.setSelectionRange(...selection);
+  };
+  const morphContent = (node, html) => {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    reconcile(node, range.createContextualFragment(html));
+  };
+  const applyPatch = (patch) => {
+    if (patch.id === "root") {
+      const incoming = new DOMParser().parseFromString(patch.html, "text/html");
+      morphNode(document.documentElement, incoming.documentElement);
+      return;
+    }
+    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
+    const starts = [];
+    while (walker.nextNode()) if (walker.currentNode.data === "rw:" + patch.id) starts.push(walker.currentNode);
+    for (const start of starts) {
+      let end = start.nextSibling;
+      while (end && !(end.nodeType === 8 && end.data === "/rw:" + patch.id)) end = end.nextSibling;
+      if (!end) throw new Error("Missing Redweb component boundary.");
+      const range = document.createRange();
+      range.setStartAfter(start);
+      range.setEndBefore(end);
+      reconcile(start.parentNode, range.createContextualFragment(patch.html), start, end);
+    }
+  };
+  return { clientNodes, marker, units, rangeNodes, morphNode, morphContent, preserveFocus, applyPatch };
+}
+
+// src/live-html/ActionFeedback.js
+var ActionFeedback = class {
+  constructor(changed, report) {
+    this.records = /* @__PURE__ */ new WeakMap();
+    this.pending = 0;
+    this.changed = changed;
+    this.report = report;
+  }
+  get(source) {
+    return this.records.get(source);
+  }
+  async run(source, request) {
+    if (this.get(source)?.status === "pending") return false;
+    const record = { status: "pending", message: "Working\u2026" };
+    this.records.set(source, record);
+    if (this.pending >= 32) {
+      this.fail(source, record, { code: "ACTION_CAPACITY" });
+      return false;
+    }
+    this.pending += 1;
+    try {
+      this.changed(source, record);
+      await request();
+      record.status = "success";
+      record.message = "Done.";
+      this.changed(source, record);
+      return true;
+    } catch (error) {
+      this.fail(source, record, error);
+      return false;
+    } finally {
+      this.pending -= 1;
+    }
+  }
+  fail(source, record, error) {
+    record.status = "error";
+    const messages = {
+      ACTION_INVALID_INPUT: "Check the form values and try again.",
+      ACTION_VALIDATION_TIMEOUT: "Input validation timed out. The action was not run.",
+      ACTION_CANCELLED: "Input validation was cancelled. The action was not run.",
+      ACTION_OFFLINE: "Not connected. The action was not sent.",
+      ACTION_CAPACITY: "Too many pending actions. Wait before trying again. This action was not sent.",
+      ACCESS_DENIED: "You do not have permission to perform this action.",
+      ACCESS_TIMEOUT: "Authorization timed out. The action was not run.",
+      ACCESS_CANCELLED: "Authorization was cancelled. The action was not run."
+    };
+    record.message = Object.hasOwn(messages, error?.code) ? messages[error.code] : "The action could not be confirmed. Check before trying again.";
+    this.changed(source, record);
+    this.report(error);
+  }
+};
+
+// src/live-html/feedback.js
+function createFeedback({ componentOf, report, stateKey, clientNodes, client, listen, active }) {
+  const bindingOf = (source) => JSON.stringify([componentOf(source), source.getAttribute("rw-submit"), source.getAttribute("rw-click")]);
+  const revisions = /* @__PURE__ */ new WeakMap();
+  const feedbackNodes = /* @__PURE__ */ new WeakMap();
+  const feedbackSources = /* @__PURE__ */ new WeakMap();
+  const slotOwners = /* @__PURE__ */ new WeakMap();
+  let feedbackSequence = 0;
+  const feedback = new ActionFeedback((source, record) => {
+    if (!active()) return;
+    if (record.binding === void 0) {
+      record.source = source;
+      record.order = ++feedbackSequence;
+      record.binding = bindingOf(source);
+      record.component = componentOf(source);
+      record.node = feedbackNodes.get(source);
+      record.name = source.getAttribute("rw-submit") || source.getAttribute("rw-click");
+    }
+    showFeedback(source, record);
+  }, report);
+  const clearSlot = (slot, owner) => {
+    if (slot.textContent === owner.message) slot.textContent = "";
+    if (slot.getAttribute("data-rw-status") === owner.status) slot.removeAttribute("data-rw-status");
+    slotOwners.delete(slot);
+  };
+  const indexSlots = () => {
+    const all = document.querySelectorAll("[rw-status]");
+    const byAction = /* @__PURE__ */ new Map();
+    for (const slot of all) {
+      const key = stateKey(componentOf(slot), slot.getAttribute("rw-status"));
+      const entries = byAction.get(key) || [];
+      entries.push(slot);
+      byAction.set(key, entries);
+    }
+    return { all, byAction };
+  };
+  const showFeedback = (source, record, index = indexSlots()) => {
+    if (!source.isConnected || record.binding !== bindingOf(source)) {
+      record.node?.remove();
+      for (const slot of index.all) {
+        const owner = slotOwners.get(slot);
+        if (owner?.record === record) clearSlot(slot, owner);
+      }
+      return;
+    }
+    source.setAttribute("data-rw-status", record.status);
+    const slots = index.byAction.get(stateKey(record.component, record.name)) || [];
+    if (slots.length) {
+      record.node?.remove();
+      for (const slot of slots) {
+        if ((slotOwners.get(slot)?.record.order || 0) > record.order) continue;
+        slot.textContent = record.message;
+        slot.setAttribute("data-rw-status", record.status);
+        slotOwners.set(slot, { record, message: record.message, status: record.status });
+      }
+    } else {
+      if (!record.node) {
+        record.node = document.createElement("span");
+        record.node.setAttribute("data-rw-feedback", "");
+        record.node.setAttribute("role", "status");
+        record.node.setAttribute("aria-live", "polite");
+        clientNodes.add(record.node);
+        feedbackNodes.set(source, record.node);
+        feedbackSources.set(record.node, source);
+      }
+      record.node.textContent = record.message;
+      record.node.setAttribute("data-rw-status", record.status);
+      if (source.localName === "form") source.append(record.node);
+      else source.after(record.node);
+    }
+  };
+  const refreshFeedback = () => {
+    document.documentElement.setAttribute("data-rw-connection", client.state);
+    const slots = indexSlots();
+    for (const slot of slots.all) {
+      const owner = slotOwners.get(slot);
+      if (owner && (!owner.record.source.isConnected || owner.record.binding !== bindingOf(owner.record.source) || slot.getAttribute("rw-status") !== owner.record.name || componentOf(slot) !== owner.record.component)) clearSlot(slot, owner);
+    }
+    for (const node of document.querySelectorAll("[data-rw-feedback]")) {
+      const source = feedbackSources.get(node);
+      if (source && !source.isConnected) node.remove();
+    }
+    for (const source of document.querySelectorAll("[rw-click],form[rw-submit]")) {
+      const record = feedback.get(source);
+      if (record) showFeedback(source, record, slots);
+    }
+  };
+  const performAction = (source, payload, completed) => feedback.run(source, () => {
+    if (client.state !== "open") throw Object.assign(new Error("Action was not sent while disconnected."), { code: "ACTION_OFFLINE" });
+    return client.request("redweb:html", payload);
+  }).then((success) => {
+    if (success && active()) completed?.();
+  });
+  const noteDraftChange = (event) => {
+    const form = event.target.form;
+    if (form) revisions.set(form, (revisions.get(form) || 0) + 1);
+  };
+  listen("input", noteDraftChange);
+  listen("change", noteDraftChange);
+  const dispose = () => {
+    for (const slot of indexSlots().all) {
+      const owner = slotOwners.get(slot);
+      if (owner) clearSlot(slot, owner);
+    }
+    for (const node of document.querySelectorAll("[data-rw-feedback]")) {
+      if (feedbackSources.has(node)) node.remove();
+    }
+    for (const source of document.querySelectorAll("[rw-click],form[rw-submit]")) {
+      const record = feedback.get(source);
+      if (record && source.getAttribute("data-rw-status") === record.status) source.removeAttribute("data-rw-status");
+    }
+  };
+  return { bindingOf, revisions, feedbackNodes, slotOwners, feedback, showFeedback, refreshFeedback, indexSlots, performAction, dispose };
+}
+
+// src/live-html/runtime.js
+var LivePageClient = class {
+  constructor() {
+    this.disposed = false;
+    this.events = new AbortController();
+  }
+  start() {
+    const listen = (type, listener) => document.addEventListener(type, listener, { signal: this.events.signal });
+    const configNode = document.getElementById("__redweb_page");
+    const config = JSON.parse(configNode.textContent);
+    const morph = createMorph();
+    const { clientNodes, morphContent, preserveFocus, applyPatch } = morph;
+    this.morph = morph;
+    const client = this.client = new RedwebClient(config.socketPath + "?pageId=" + encodeURIComponent(config.pageId), {
+      baseUrl: window.location.href,
+      version: config.version,
+      reconnect: { enabled: true, maxAttempts: 8 },
+      maxQueueSize: 0
+    });
+    const emit = (type, detail) => document.dispatchEvent(new CustomEvent(type, { detail }));
+    let stateTargets = /* @__PURE__ */ new Map();
+    const componentOf = (node) => node.closest("[data-rw-component]")?.getAttribute("data-rw-component") || null;
+    const stateKey = (component, name) => (component || "") + "\0" + name;
+    const indexState = () => {
+      stateTargets = /* @__PURE__ */ new Map();
+      document.querySelectorAll("[data-rw-state]").forEach((node) => {
+        const name = node.getAttribute("data-rw-state");
+        const key = stateKey(componentOf(node), name);
+        const targets = stateTargets.get(key) || [];
+        targets.push(node);
+        stateTargets.set(key, targets);
+      });
+    };
+    const named = (attribute, name, component) => attribute === "data-rw-state" ? stateTargets.get(stateKey(component, name)) || [] : [...document.querySelectorAll("[" + attribute + "]")].filter((node) => node.getAttribute(attribute) === name && componentOf(node) === component);
+    indexState();
+    const applyState = (update) => {
+      const component = update.component || null;
+      named("data-rw-state", update.name, component).forEach((node) => {
+        if (update.html) {
+          morphContent(node, update.value);
+          indexState();
+        } else node.textContent = update.value;
+      });
+      named("rw-bind", update.name, component).forEach((node) => {
+        if (node.type === "checkbox") node.checked = update.value === true || update.value === "true";
+        else if (node.value !== update.value) node.value = update.value;
+      });
+    };
+    client.on("redweb:state", (message) => preserveFocus(() => {
+      applyState(message.payload);
+      refreshFeedback();
+    }));
+    client.on("redweb:patch", (message) => {
+      try {
+        preserveFocus(() => {
+          message.payload.patches.forEach(applyPatch);
+          indexState();
+          message.payload.states.forEach(applyState);
+          refreshFeedback();
+        });
+      } catch (error) {
+        report(error);
+      }
+    });
+    const report = (error) => {
+      if (!this.disposed) emit("redweb:error", error);
+    };
+    const feedbackUI = createFeedback({ componentOf, report, stateKey, clientNodes, client, listen, active: () => !this.disposed });
+    const { bindingOf, revisions, refreshFeedback, performAction } = feedbackUI;
+    this.feedback = feedbackUI;
+    const send = (payload) => {
+      try {
+        client.send("redweb:html", payload);
+      } catch (error) {
+        report(error);
+      }
+    };
+    const formValues = (form) => {
+      const values = /* @__PURE__ */ Object.create(null);
+      for (const [name, value] of new FormData(form)) {
+        if (!Object.hasOwn(values, name)) values[name] = value;
+        else values[name] = Array.isArray(values[name]) ? [...values[name], value] : [values[name], value];
+      }
+      return values;
+    };
+    listen("click", (event) => {
+      const target = event.target.closest("[rw-click]");
+      if (!target) return;
+      event.preventDefault();
+      performAction(target, {
+        kind: "action",
+        name: target.getAttribute("rw-click"),
+        component: componentOf(target),
+        args: []
+      }).catch(report);
+    });
+    listen("submit", (event) => {
+      const form = event.target.closest("form[rw-submit]");
+      if (!form) return;
+      event.preventDefault();
+      const values = formValues(form);
+      const revision = revisions.get(form) || 0;
+      const binding = bindingOf(form);
+      performAction(form, {
+        kind: "action",
+        name: form.getAttribute("rw-submit"),
+        component: componentOf(form),
+        args: [values]
+      }, () => {
+        if (form.isConnected && bindingOf(form) === binding && (revisions.get(form) || 0) === revision && JSON.stringify(formValues(form)) === JSON.stringify(values)) {
+          HTMLFormElement.prototype.reset.call(form);
+        }
+      }).catch(report);
+    });
+    listen("input", (event) => {
+      const target = event.target.closest("[rw-bind]");
+      if (target) send({
+        kind: "state",
+        name: target.getAttribute("rw-bind"),
+        component: componentOf(target),
+        value: target.type === "checkbox" ? target.checked : target.value
+      });
+    });
+    this.runtime = { applyState, indexState, formValues, send, client };
+    client.onError(report);
+    client.onStateChange((state) => {
+      if (this.disposed) return;
+      document.documentElement.setAttribute("data-rw-connection", state);
+      emit("redweb:connection", state);
+    });
+    client.connect().catch(report);
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    mounted.delete(document);
+    this.events.abort();
+    this.feedback?.dispose();
+    document.documentElement.setAttribute("data-rw-connection", "closed");
+    this.client?.dispose();
+  }
+};
+var mounted = /* @__PURE__ */ new WeakMap();
+function mountLivePage() {
+  const previous = mounted.get(document);
+  if (previous && !previous.disposed) return previous;
+  const page = new LivePageClient();
+  mounted.set(document, page);
+  try {
+    page.start();
+  } catch (error) {
+    page.dispose();
+    throw error;
+  }
+  return page;
+}
+
+// src/live-html.ts
+function mountLivePage2() {
+  return mountLivePage();
+}
+export {
+  RedwebClient,
+  mountLivePage2 as mountLivePage
+};