@corbado/observe 1.7.1 → 1.8.0

package/dist/analysis/low-events/input-tracker.mjs

@@ -0,0 +1,223 @@
+// src/low-events/input-tracker.ts
+import { InputChangeRecorder } from "./input-change-recorder.mjs";
+import { InputPasteObserver } from "./input-paste-observer.mjs";
+import { readPasswordManagerDomSignals } from "../readers/password-manager-dom.mjs";
+var MOUNT_PROBE_DELAY_MS = 500;
+var FOCUS_PROBE_DELAY_MS = 250;
+function fieldContentLength(field) {
+  if (field.type === "checkbox" || field.type === "radio") return field.checked ? 1 : 0;
+  return field.value.length;
+}
+var LowEventInputTracker = class {
+  constructor(logger, inputField, sink) {
+    this.logger = logger;
+    this.inputField = inputField;
+    this.sink = sink;
+    this.changes = new InputChangeRecorder(
+      fieldContentLength(inputField),
+      this.pushLow,
+      logger,
+      sink.reserveCaptureSeq
+    );
+    this.pasteObserver = new InputPasteObserver(
+      [inputField],
+      logger,
+      (ts, _inserted, captureSeq) => {
+        this.changes.flush();
+        this.changes.markInputObserved();
+        const oldLength = this.changes.previousLength;
+        this.changes.previousLength = fieldContentLength(inputField);
+        this.pushLow({
+          ...captureSeq === void 0 ? {} : { captureSeq },
+          lowType: "input-paste",
+          ts,
+          inputEffect: fieldContentLength(inputField) === 0 ? "clear" : oldLength === 0 ? "fill" : "modify"
+        });
+      },
+      sink.reserveCaptureSeq
+    );
+    this.boundHandlers = {
+      focus: this.wrapHandler("focus", () => this.handleFocus()),
+      blur: this.wrapHandler("blur", () => this.handleBlur()),
+      pointerdown: this.wrapHandler("pointerdown", () => this.enqueueNonInputEvent("pointerdown")),
+      pointerup: this.wrapHandler("pointerup", () => this.enqueueNonInputEvent("pointerup")),
+      click: this.wrapHandler("click", () => this.enqueueNonInputEvent("click")),
+      input: (event) => {
+        try {
+          this.handleInput(event);
+        } catch (error) {
+          this.logger.error("Failed to observe input", error);
+        }
+      },
+      keyup: this.wrapKeyboardHandler("keyup", (event) => this.handleKeyUp(event)),
+      pageHide: this.wrapHandler("pagehide", () => this.flushForTeardown())
+    };
+    this.unregisterInputs = sink.registerInputs?.([inputField], () => this.flushPending());
+    this.capturePrefill();
+    this.attach();
+  }
+  unregisterInputs;
+  changes;
+  pasteObserver;
+  emittedSignals = /* @__PURE__ */ new Set();
+  firstFocusHandled = false;
+  mountProbeTimer = null;
+  focusProbeTimer = null;
+  destroyed = false;
+  boundHandlers;
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    try {
+      if (this.mountProbeTimer !== null) {
+        clearTimeout(this.mountProbeTimer);
+        this.mountProbeTimer = null;
+      }
+      if (this.focusProbeTimer !== null) {
+        clearTimeout(this.focusProbeTimer);
+        this.focusProbeTimer = null;
+      }
+      this.changes.flush();
+      this.unregisterInputs?.();
+      this.pasteObserver.destroy();
+      this.detach();
+    } catch (error) {
+      this.logger.error("Failed to destroy LowEventInputTracker", error);
+    }
+  }
+  attach() {
+    const input = this.inputField;
+    input.addEventListener("focus", this.boundHandlers.focus);
+    input.addEventListener("blur", this.boundHandlers.blur);
+    input.addEventListener("pointerdown", this.boundHandlers.pointerdown);
+    input.addEventListener("pointerup", this.boundHandlers.pointerup);
+    input.addEventListener("click", this.boundHandlers.click);
+    input.addEventListener("input", this.boundHandlers.input);
+    input.addEventListener("keyup", this.boundHandlers.keyup);
+    if (typeof window !== "undefined") {
+      window.addEventListener("pagehide", this.boundHandlers.pageHide);
+    }
+    if (typeof document !== "undefined") {
+      if (document.activeElement === input) {
+        this.handleFocus();
+      }
+    }
+    if (typeof window !== "undefined") {
+      this.mountProbeTimer = setTimeout(() => this.runEnvProbe(), MOUNT_PROBE_DELAY_MS);
+    }
+  }
+  detach() {
+    const input = this.inputField;
+    input.removeEventListener("focus", this.boundHandlers.focus);
+    input.removeEventListener("blur", this.boundHandlers.blur);
+    input.removeEventListener("pointerdown", this.boundHandlers.pointerdown);
+    input.removeEventListener("pointerup", this.boundHandlers.pointerup);
+    input.removeEventListener("click", this.boundHandlers.click);
+    input.removeEventListener("input", this.boundHandlers.input);
+    input.removeEventListener("keyup", this.boundHandlers.keyup);
+    if (typeof window !== "undefined") {
+      window.removeEventListener("pagehide", this.boundHandlers.pageHide);
+    }
+  }
+  pushLow = (low) => {
+    this.sink.enqueueLowEvent(low);
+  };
+  runEnvProbe() {
+    try {
+      if (typeof __CBO_DATA_PMD__ === "boolean" ? __CBO_DATA_PMD__ : this.sink.passwordManagerDomScan?.() !== false) {
+        const matches = readPasswordManagerDomSignals({
+          key: "dom:password-managers.dom-signals",
+          fields: [
+            {
+              path: "signals[]",
+              exposure: "enum",
+              transform: { values: ["pa-1", "pa-2", "pa-3", "pa-4", "pa-5", "pa-6"] }
+            }
+          ],
+          dataConfig: "pmd"
+        });
+        const now = Date.now();
+        for (const eventType of matches) {
+          if (this.emittedSignals.has(eventType)) {
+            continue;
+          }
+          this.emittedSignals.add(eventType);
+          this.pushLow({ lowType: eventType, ts: now });
+        }
+      }
+    } catch (error) {
+      this.logger.error("Failed to run input env probe", error);
+    }
+  }
+  scheduleFocusProbe() {
+    if (this.firstFocusHandled) {
+      return;
+    }
+    this.firstFocusHandled = true;
+    this.focusProbeTimer = setTimeout(() => this.runEnvProbe(), FOCUS_PROBE_DELAY_MS);
+  }
+  capturePrefill(newCapture = false) {
+    if (this.destroyed) return;
+    this.flushPending();
+    this.changes.capturePrefill(fieldContentLength(this.inputField), newCapture);
+  }
+  flushPending() {
+    this.pasteObserver.flush();
+    this.changes.flush();
+  }
+  enqueueNonInputEvent(eventType) {
+    this.changes.flush();
+    this.pushLow({ lowType: eventType, ts: Date.now() });
+  }
+  handleFocus() {
+    this.scheduleFocusProbe();
+    this.enqueueNonInputEvent("focus");
+  }
+  handleBlur() {
+    this.pasteObserver.flush();
+    this.enqueueNonInputEvent("blur");
+  }
+  handleInput(event) {
+    if (this.pasteObserver.handlesInput(event)) return;
+    this.changes.record(
+      fieldContentLength(this.inputField),
+      Date.now(),
+      event.isComposing || event.inputType === "insertCompositionText"
+    );
+  }
+  handleKeyUp(event) {
+    if (event.key !== "Escape") {
+      return;
+    }
+    this.enqueueNonInputEvent("keyup-escape");
+  }
+  flushForTeardown() {
+    this.pasteObserver.flush();
+    this.changes.flush();
+    this.sink.flushKeepalive();
+  }
+  wrapHandler(name, fn) {
+    return () => {
+      try {
+        fn();
+      } catch (error) {
+        this.logger.error(`Failed to handle low event "${name}"`, error);
+      }
+    };
+  }
+  wrapKeyboardHandler(name, fn) {
+    return (event) => {
+      try {
+        fn(event);
+      } catch (error) {
+        this.logger.error(`Failed to handle low event "${name}"`, error);
+      }
+    };
+  }
+};
+export {
+  LowEventInputTracker,
+  fieldContentLength
+};

package/dist/analysis/low-events/otp-input-binding.mjs

@@ -0,0 +1,67 @@
+// src/low-events/otp-input-binding.ts
+import { LowEventInputTracker } from "./input-tracker.mjs";
+import { LowEventGroupedInputTracker } from "./grouped-input-tracker.mjs";
+var OTPInputBinding = class {
+  constructor(logger, inputSink, groupSink) {
+    this.logger = logger;
+    this.inputSink = inputSink;
+    this.groupSink = groupSink;
+  }
+  collector;
+  fields = [];
+  grouped = false;
+  destroyed = false;
+  prefillClaimed = false;
+  setFields(fields, grouped = true) {
+    try {
+      if (this.destroyed) return;
+      const next = [...new Set(fields)];
+      if (grouped === this.grouped && next.length === this.fields.length && next.every((field, i) => field === this.fields[i]))
+        return;
+      this.collector?.destroy();
+      this.collector = void 0;
+      this.fields = [];
+      this.grouped = grouped;
+      if (next.length === 0) return;
+      const sink = grouped ? this.groupSink : this.inputSink;
+      const filteredSink = { ...sink, enqueueLowEvent: (low) => this.enqueue(sink, low) };
+      this.collector = grouped ? new LowEventGroupedInputTracker(this.logger, next, filteredSink) : new LowEventInputTracker(this.logger, next[0], filteredSink);
+      this.fields = next;
+    } catch (error) {
+      this.logger.error("Failed to bind OTP inputs", error);
+    }
+  }
+  enqueue(sink, low) {
+    if (low.lowType === "input-prefill") {
+      if (this.prefillClaimed) return;
+      this.prefillClaimed = true;
+    } else if ([
+      "input",
+      "input-idle",
+      "input-clear",
+      "input-paste",
+      "big-input-paste",
+      "big-input-add",
+      "big-input-rem"
+    ].includes(low.lowType)) {
+      this.prefillClaimed = true;
+    }
+    sink.enqueueLowEvent(low);
+  }
+  capturePrefill(newCapture = false) {
+    if (newCapture) this.prefillClaimed = false;
+    this.collector?.capturePrefill(newCapture);
+  }
+  flushPending() {
+    this.collector?.flushPending();
+  }
+  destroy() {
+    this.destroyed = true;
+    this.collector?.destroy();
+    this.collector = void 0;
+    this.fields = [];
+  }
+};
+export {
+  OTPInputBinding
+};

package/dist/analysis/low-events/shared-window-observer.mjs

@@ -0,0 +1,225 @@
+// src/low-events/shared-window-observer.ts
+import { reserveCaptureSeq } from "./capture-sequence.mjs";
+import { v7 as uuidv7 } from "uuid";
+import { createViewportBatcher } from "./viewport-batcher.mjs";
+var documentPageId;
+var getCapturePageId = () => documentPageId ??= uuidv7();
+var focusedElements = () => {
+  const chain = [];
+  for (let active = document.activeElement; active; active = active.shadowRoot?.activeElement ?? null) {
+    chain.push(active);
+  }
+  return chain;
+};
+var SharedWindowObserver = class {
+  constructor(logger, enqueue, flushKeepalive) {
+    this.logger = logger;
+    this.enqueue = enqueue;
+    this.flushKeepalive = flushKeepalive;
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    this.listen(window, "blur", () => {
+      this.flushInputs();
+      this.bracket = this.context();
+      this.emit({ lowType: "window-blur", ts: Date.now() }, this.bracket);
+    });
+    this.listen(window, "focus", () => {
+      this.flushInputs();
+      this.emit({ lowType: "window-focus", ts: Date.now() }, this.bracket ?? this.context());
+      this.bracket = void 0;
+    });
+    this.listen(document, "visibilitychange", () => {
+      this.flushInputs();
+      this.emit({
+        lowType: `document-visibilitychange-${document.visibilityState === "hidden" ? "hidden" : "visible"}`,
+        ts: Date.now()
+      });
+    });
+    this.listen(document, "focusout", (event) => {
+      const registration = this.findInput(event.target);
+      this.lastBlur = registration && !event.relatedTarget && Date.now() - this.unrelatedPointerAt > 250 ? { registration, ts: Date.now() } : void 0;
+    });
+    this.listen(document, "focusin", (event) => {
+      this.lastBlur = void 0;
+      const field = this.inputFocusListeners.size > 0 && event.composedPath().find((target) => this.findInput(target));
+      if (field) this.notifyInputFocus(field);
+    });
+    this.listen(document, "pointerdown", (event) => {
+      if (!this.findInput(event.target)) {
+        this.lastBlur = void 0;
+        this.unrelatedPointerAt = Date.now();
+      } else this.unrelatedPointerAt = -Infinity;
+    });
+    if (window.visualViewport) {
+      this.listen(window.visualViewport, "resize", () => this.extendViewport("resize"));
+      this.listen(window.visualViewport, "scroll", () => this.extendViewport("scroll"));
+    }
+    this.listen(window, "pagehide", () => {
+      this.flushInputs();
+      this.resize.flush();
+      this.scroll.flush();
+      this.flushKeepalive();
+    });
+    this.observeNavigation();
+  }
+  inputs = /* @__PURE__ */ new Set();
+  inputFocusListeners = /* @__PURE__ */ new Set();
+  ceremonies = /* @__PURE__ */ new Set();
+  removers = [];
+  lastBlur;
+  bracket;
+  unrelatedPointerAt = -Infinity;
+  destroyed = false;
+  viewportContext = {};
+  resize = createViewportBatcher(
+    (low) => this.emit(low, this.viewportContext.resize),
+    "visualviewport-resize",
+    reserveCaptureSeq
+  );
+  scroll = createViewportBatcher(
+    (low) => this.emit(low, this.viewportContext.scroll),
+    "visualviewport-scroll",
+    reserveCaptureSeq
+  );
+  registerInputs(fields, context, flush) {
+    if (this.destroyed) return () => {
+    };
+    const registration = { fields, context, flush };
+    this.inputs.add(registration);
+    if (this.inputFocusListeners.size > 0 && typeof document !== "undefined") {
+      const focused = focusedElements();
+      const field = fields.find((candidate) => focused.includes(candidate));
+      if (field) this.notifyInputFocus(field);
+    }
+    return () => {
+      this.inputs.delete(registration);
+      if (this.lastBlur?.registration === registration) this.lastBlur = void 0;
+    };
+  }
+  beginCeremony(context) {
+    const registration = { context, settled: false };
+    if (!this.destroyed) {
+      this.flushInputs();
+      this.ceremonies.add(registration);
+    }
+    const destroy = () => {
+      if (registration.timer) clearTimeout(registration.timer);
+      this.ceremonies.delete(registration);
+      if (this.bracket === registration.context) this.bracket = void 0;
+    };
+    return {
+      settle: (tailMs) => {
+        registration.settled = true;
+        if (registration.timer) clearTimeout(registration.timer);
+        registration.timer = setTimeout(destroy, tailMs);
+      },
+      destroy
+    };
+  }
+  /**
+   * Calls `listener` with the field whenever a registered input gains focus, including one already focused when
+   * registered.
+   */
+  onInputFocus(listener) {
+    if (this.destroyed) return () => {
+    };
+    this.inputFocusListeners.add(listener);
+    return () => this.inputFocusListeners.delete(listener);
+  }
+  notifyInputFocus(field) {
+    for (const listener of this.inputFocusListeners) {
+      try {
+        listener(field);
+      } catch (error) {
+        this.logger.error("Failed to notify registered input focus", error);
+      }
+    }
+  }
+  context() {
+    const active = [...this.ceremonies].filter((item) => !item.settled);
+    if (active.length === 1) return active[0].context;
+    if (active.length > 1) return void 0;
+    const input = this.findInput(document.activeElement);
+    if (input) return input.context();
+    const previous = this.lastBlur;
+    if (previous && Date.now() - previous.ts <= 250 && (document.activeElement === document.body || !document.activeElement)) {
+      return previous.registration.context();
+    }
+    return void 0;
+  }
+  findInput(target) {
+    return [...this.inputs].find((registration) => registration.fields.some((field) => field === target));
+  }
+  /** Flush all registered input batches before a high-level lifecycle boundary. */
+  flushInputs() {
+    for (const input of this.inputs) {
+      try {
+        input.flush();
+      } catch (error) {
+        this.logger.error("Failed to flush window input context", error);
+      }
+    }
+  }
+  emit(low, context) {
+    if (this.destroyed) return;
+    const { sessionId, ...capture } = context ?? {};
+    this.enqueue(
+      {
+        ...low,
+        ...capture,
+        captureSeq: low.captureSeq ?? reserveCaptureSeq(),
+        sourceKind: "window",
+        captureVersion: 1,
+        pageId: getCapturePageId()
+      },
+      sessionId
+    );
+  }
+  listen(target, name, handler) {
+    const safe = (event) => {
+      try {
+        handler(event);
+      } catch (error) {
+        this.logger.error(`Failed to observe window ${name}`, error);
+      }
+    };
+    target.addEventListener(name, safe);
+    this.removers.push(() => target.removeEventListener(name, safe));
+  }
+  extendViewport(kind) {
+    const context = this.context();
+    const previous = this.viewportContext[kind];
+    if (previous?.subflowStartEventId !== context?.subflowStartEventId || previous?.fieldRole !== context?.fieldRole || previous?.sessionId !== context?.sessionId)
+      this[kind].flush();
+    this.viewportContext[kind] = context;
+    this[kind].extend();
+  }
+  observeNavigation() {
+    const navigation = window.navigation;
+    if (!navigation) return;
+    this.listen(navigation, "currententrychange", (event) => {
+      const change = event;
+      const from = change.from?.index;
+      const to = navigation.currentEntry?.index;
+      if (change.navigationType === "traverse" && typeof from === "number" && typeof to === "number" && from >= 0 && to >= 0 && to < from) {
+        this.flushInputs();
+        this.emit({ lowType: "window-navigate-back", ts: Date.now() });
+      }
+    });
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.flushInputs();
+    this.resize.flush();
+    this.scroll.flush();
+    this.destroyed = true;
+    for (const remove of this.removers) remove();
+    for (const ceremony of this.ceremonies) if (ceremony.timer) clearTimeout(ceremony.timer);
+    this.ceremonies.clear();
+    this.inputs.clear();
+    this.inputFocusListeners.clear();
+  }
+};
+export {
+  SharedWindowObserver,
+  getCapturePageId
+};

package/dist/analysis/low-events/viewport-batcher.mjs

@@ -0,0 +1,42 @@
+// src/low-events/viewport-batcher.ts
+var VIEWPORT_BATCH_TIMEOUT_MS = 150;
+var createViewportBatcher = (pushLow, eventType, reserveCaptureSeq) => {
+  let active = false;
+  let captureSeq;
+  let startTimestamp = null;
+  let timeout = null;
+  const flush = () => {
+    if (timeout !== null) {
+      window.clearTimeout(timeout);
+      timeout = null;
+    }
+    const ts = startTimestamp;
+    active = false;
+    startTimestamp = null;
+    if (ts === null) {
+      return;
+    }
+    pushLow({
+      ...captureSeq === void 0 ? {} : { captureSeq },
+      lowType: eventType,
+      ts,
+      durationMs: Date.now() - ts
+    });
+  };
+  const extend = () => {
+    if (!active) {
+      const sequence = reserveCaptureSeq?.();
+      active = true;
+      startTimestamp = Date.now();
+      captureSeq = sequence;
+    }
+    if (timeout !== null) {
+      window.clearTimeout(timeout);
+    }
+    timeout = window.setTimeout(flush, VIEWPORT_BATCH_TIMEOUT_MS);
+  };
+  return { extend, flush };
+};
+export {
+  createViewportBatcher
+};

package/dist/analysis/low-events/window-tracker.mjs

@@ -0,0 +1,40 @@
+// src/low-events/window-tracker.ts
+var LowEventWindowTracker = class {
+  constructor(logger, sink) {
+    this.logger = logger;
+    this.sink = sink;
+  }
+  lease;
+  destroyed = false;
+  arm(initiator, conditional = false) {
+    this.disarm();
+    if (this.destroyed || conditional) return;
+    try {
+      this.lease = this.sink.beginCeremony?.(initiator);
+    } catch (error) {
+      this.logger.error("Failed to register ceremony low-event context", error);
+    }
+  }
+  scheduleDisarm(delayMs) {
+    try {
+      this.lease?.settle(delayMs);
+    } catch (error) {
+      this.logger.error("Failed to settle ceremony low-event context", error);
+    }
+  }
+  disarm() {
+    try {
+      this.lease?.destroy();
+    } catch (error) {
+      this.logger.error("Failed to release ceremony low-event context", error);
+    }
+    this.lease = void 0;
+  }
+  destroy() {
+    this.disarm();
+    this.destroyed = true;
+  }
+};
+export {
+  LowEventWindowTracker
+};