@corbado/observe 1.8.0 → 1.9.1

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

@@ -2,64 +2,124 @@
 import { reserveCaptureSeq } from "./capture-sequence.mjs";
 import { v7 as uuidv7 } from "uuid";
 import { createViewportBatcher } from "./viewport-batcher.mjs";
+import { observeWindowLowEvents, readActiveFocus, readFocusedChain } from "../readers/window-events.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();
+    this.removers = observeWindowLowEvents(
+      {
+        key: "page:window.low-events",
+        title: "Window focus, visibility, size and back navigation",
+        accessNote: "window blur/focus, document visibilitychange/focusin/focusout/pointerdown, visualViewport resize/scroll, pagehide, Navigation API currententrychange (traverse)",
+        group: "Window interaction",
+        origin: "observe-external",
+        fields: [
+          { path: "event.blur", label: "Window left", exposure: "presence" },
+          { path: "event.focus", label: "Window selected", exposure: "presence" },
+          {
+            path: "event.visibilitychange",
+            label: "Page hidden or shown again",
+            exposure: "enum",
+            transform: { values: ["hidden", "visible"] }
+          },
+          {
+            path: "event.focusout",
+            label: "Whether a tracked field lost focus",
+            exposure: "computed",
+            transform: { note: "only whether a handed-over input lost focus to nothing" }
+          },
+          {
+            path: "event.focusin",
+            label: "Which tracked field gained focus",
+            exposure: "computed",
+            transform: { note: "only which handed-over input gained focus" }
+          },
+          {
+            path: "event.pointerdown",
+            label: "Whether a tracked field was pressed",
+            exposure: "computed",
+            transform: { note: "only whether the pointer went to a handed-over input" }
+          },
+          {
+            path: "event.visualviewport.resize",
+            label: "Duration of zooming or resizing",
+            exposure: "size",
+            transform: { note: "batched duration only" }
+          },
+          {
+            path: "event.visualviewport.scroll",
+            label: "Duration of scrolling",
+            exposure: "size",
+            transform: { note: "batched duration only" }
+          },
+          { path: "event.pagehide", label: "Leaving the page", exposure: "presence" },
+          {
+            path: "event.navigation.back",
+            label: "Going back within the page",
+            exposure: "enum",
+            transform: { values: [true, false], note: "committed same-document traverse to an earlier entry" }
+          }
+        ]
+      },
+      {
+        blur: () => {
+          this.flushInputs();
+          this.bracket = this.context();
+          this.emit({ lowType: "window-blur", ts: Date.now() }, this.bracket);
+        },
+        focus: () => {
+          this.flushInputs();
+          this.emit({ lowType: "window-focus", ts: Date.now() }, this.bracket ?? this.context());
+          this.bracket = void 0;
+        },
+        visibilityChange: (hidden) => {
+          this.flushInputs();
+          this.emit({
+            lowType: `document-visibilitychange-${hidden ? "hidden" : "visible"}`,
+            ts: Date.now()
+          });
+        },
+        focusOut: (target, hasRelatedTarget) => {
+          const registration = this.findInput(target);
+          this.lastBlur = registration && !hasRelatedTarget && Date.now() - this.unrelatedPointerAt > 250 ? { registration, ts: Date.now() } : void 0;
+        },
+        focusIn: (composedPath) => {
+          this.lastBlur = void 0;
+          const field = this.inputFocusListeners.size > 0 && composedPath().find((target) => this.findInput(target));
+          if (field) this.notifyInputFocus(field);
+        },
+        pointerDown: (target) => {
+          if (!this.findInput(target)) {
+            this.lastBlur = void 0;
+            this.unrelatedPointerAt = Date.now();
+          } else this.unrelatedPointerAt = -Infinity;
+        },
+        viewportResize: () => this.extendViewport("resize"),
+        viewportScroll: () => this.extendViewport("scroll"),
+        pageHide: () => {
+          this.flushInputs();
+          this.resize.flush();
+          this.scroll.flush();
+          this.flushKeepalive();
+        },
+        navigateBack: () => {
+          this.flushInputs();
+          this.emit({ lowType: "window-navigate-back", ts: Date.now() });
+        }
+      },
+      (name, run) => {
+        try {
+          run();
+        } catch (error) {
+          this.logger.error(`Failed to observe window ${name}`, error);
+        }
+      }
+    );
   }
   inputs = /* @__PURE__ */ new Set();
   inputFocusListeners = /* @__PURE__ */ new Set();
@@ -86,7 +146,21 @@ var SharedWindowObserver = class {
     const registration = { fields, context, flush };
     this.inputs.add(registration);
     if (this.inputFocusListeners.size > 0 && typeof document !== "undefined") {
-      const focused = focusedElements();
+      const focused = readFocusedChain({
+        key: "dom:window.focused-element",
+        title: "Which tracked input field has focus",
+        accessNote: "document.activeElement and the focus event path, matched against the passed input elements",
+        group: "Window interaction",
+        origin: "observe-external",
+        fields: [
+          {
+            path: "activeElement",
+            label: "Which tracked field is selected",
+            exposure: "computed",
+            transform: { note: "identity compared against handed-over inputs only" }
+          }
+        ]
+      });
       const field = fields.find((candidate) => focused.includes(candidate));
       if (field) this.notifyInputFocus(field);
     }
@@ -138,10 +212,31 @@ var SharedWindowObserver = class {
     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);
+    const focus = readActiveFocus({
+      key: "dom:window.focused-element",
+      title: "Which tracked input field has focus",
+      accessNote: "document.activeElement and the focus event path, matched against the passed input elements",
+      group: "Window interaction",
+      origin: "observe-external",
+      fields: [
+        {
+          path: "activeElement",
+          label: "Which tracked field is selected",
+          exposure: "computed",
+          transform: { note: "identity compared against handed-over inputs only" }
+        },
+        {
+          path: "activeElement.idle",
+          label: "Whether nothing is selected",
+          exposure: "enum",
+          transform: { values: [true, false], note: "nothing focused (body or none)" }
+        }
+      ]
+    });
+    const input = this.findInput(focus.active);
     if (input) return input.context();
     const previous = this.lastBlur;
-    if (previous && Date.now() - previous.ts <= 250 && (document.activeElement === document.body || !document.activeElement)) {
+    if (previous && Date.now() - previous.ts <= 250 && focus.idle) {
       return previous.registration.context();
     }
     return void 0;
@@ -174,17 +269,6 @@ var SharedWindowObserver = class {
       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];
@@ -193,19 +277,6 @@ var SharedWindowObserver = class {
     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();

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

@@ -7,7 +7,7 @@ var createViewportBatcher = (pushLow, eventType, reserveCaptureSeq) => {
   let timeout = null;
   const flush = () => {
     if (timeout !== null) {
-      window.clearTimeout(timeout);
+      clearTimeout(timeout);
       timeout = null;
     }
     const ts = startTimestamp;
@@ -31,9 +31,9 @@ var createViewportBatcher = (pushLow, eventType, reserveCaptureSeq) => {
       captureSeq = sequence;
     }
     if (timeout !== null) {
-      window.clearTimeout(timeout);
+      clearTimeout(timeout);
     }
-    timeout = window.setTimeout(flush, VIEWPORT_BATCH_TIMEOUT_MS);
+    timeout = setTimeout(flush, VIEWPORT_BATCH_TIMEOUT_MS);
   };
   return { extend, flush };
 };

package/dist/analysis/queue.mjs

@@ -3,6 +3,7 @@ import { v7 as uuidv7 } from "uuid";
 import { AuthEventName } from "./types.mjs";
 import { CONFIG_REQUEST_HEADER, DEFAULT_RELIABILITY_CONFIG } from "./config.mjs";
 import { EventStore } from "./store/event-store.mjs";
+import { listenWindow, readDocumentHidden, readPageUrl } from "./readers/page.mjs";
 var PROBE_QUEUE_MAX_ITEMS = 500;
 var PROBE_QUEUE_MAX_BYTES = 512 * 1024;
 var PROBE_BATCH_MAX_ITEMS = 200;
@@ -96,6 +97,8 @@ var RequestQueue = class {
   dirtySinceSyncFlush = false;
   onVisibilityChange = null;
   onPageHide = null;
+  removeVisibilityChange = null;
+  removePageHide = null;
   batchSize;
   flushIntervalOverride;
   debug;
@@ -743,7 +746,21 @@ var RequestQueue = class {
     this.onVisibilityChange = () => {
       try {
         this.writeLifecycleDebugOutput("cbo_visibility_change_debug");
-        if (document.visibilityState === "hidden" && this.config.tvc) {
+        if (readDocumentHidden({
+          key: "page:lifecycle.visibility",
+          title: "Page visibility",
+          accessNote: "document.visibilityState",
+          group: "Page lifecycle",
+          origin: "observe-external",
+          fields: [
+            {
+              path: "visibilityState",
+              label: "Whether the page is hidden",
+              exposure: "enum",
+              transform: { values: ["hidden", "other"] }
+            }
+          ]
+        }) && this.config.tvc) {
           this.flushSync("visibility-change");
         }
       } catch (error) {
@@ -760,8 +777,44 @@ var RequestQueue = class {
         this.logger.error("Unexpected error in queue flushSync", error);
       }
     };
-    window.addEventListener("visibilitychange", this.onVisibilityChange);
-    window.addEventListener("pagehide", this.onPageHide);
+    this.removeVisibilityChange = listenWindow(
+      {
+        key: "page:lifecycle.visibilitychange",
+        title: "Page visibility changes",
+        accessNote: "visibilitychange event on document",
+        group: "Page lifecycle",
+        origin: "observe-external",
+        fields: [
+          {
+            path: "event.visibilitychange",
+            label: "Page hidden or shown again",
+            exposure: "presence",
+            transform: { note: "flushes pending events when the page is hidden" }
+          }
+        ]
+      },
+      "visibilitychange",
+      this.onVisibilityChange
+    );
+    this.removePageHide = listenWindow(
+      {
+        key: "page:lifecycle.pagehide",
+        title: "Leaving the page",
+        accessNote: "pagehide event on window",
+        group: "Page lifecycle",
+        origin: "observe-external",
+        fields: [
+          {
+            path: "event.pagehide",
+            label: "Leaving the page",
+            exposure: "presence",
+            transform: { note: "flushes pending events on unload" }
+          }
+        ]
+      },
+      "pagehide",
+      this.onPageHide
+    );
   }
   writeLifecycleDebugOutput(key) {
     if (!this.debug || !this.storage) {
@@ -769,7 +822,21 @@ var RequestQueue = class {
     }
     const output = {
       last_executed: Date.now(),
-      url: window.location.href
+      url: readPageUrl({
+        key: "page:location.url",
+        title: "Page address (debug output only)",
+        accessNote: "location.href, only written to the debug log",
+        group: "Page",
+        origin: "observe-external",
+        fields: [
+          {
+            path: "url",
+            label: "Full page address",
+            exposure: "raw",
+            transform: { note: "debug mode only; written to own localStorage, never sent" }
+          }
+        ]
+      })
     };
     this.storage.setItem(key, output);
   }
@@ -862,11 +929,11 @@ var RequestQueue = class {
       this.clearTimer();
       this.dropProbes(this.probeQueue.slice());
       if (typeof window !== "undefined") {
-        if (this.onVisibilityChange) {
-          window.removeEventListener("visibilitychange", this.onVisibilityChange);
+        if (this.removeVisibilityChange) {
+          this.removeVisibilityChange();
         }
-        if (this.onPageHide) {
-          window.removeEventListener("pagehide", this.onPageHide);
+        if (this.removePageHide) {
+          this.removePageHide();
         }
       }
     } catch (error) {

package/dist/analysis/{low-events/input-paste-observer.mjs → readers/input-paste.mjs}

@@ -1,6 +1,6 @@
-// src/low-events/input-paste-observer.ts
+// src/readers/input-paste.ts
 var InputPasteObserver = class {
-  constructor(inputs, logger, changed, reserveCaptureSeq) {
+  constructor(_meta, inputs, logger, changed, reserveCaptureSeq) {
     this.inputs = inputs;
     this.logger = logger;
     this.changed = changed;

package/dist/analysis/readers/input.mjs

@@ -0,0 +1,61 @@
+// src/readers/input.ts
+var FIELD_EVENTS = ["focus", "blur", "pointerdown", "pointerup", "click", "input", "keyup"];
+function observeInputField(_meta, field, handlers, guard, order = FIELD_EVENTS) {
+  const listeners = [];
+  for (const type of order) {
+    const listener = reduceFieldEvent(type, handlers, guard);
+    if (listener) listeners.push([type, listener]);
+  }
+  for (const [type, listener] of listeners) field.addEventListener(type, listener);
+  return () => {
+    for (const [type, listener] of listeners) field.removeEventListener(type, listener);
+  };
+}
+function reduceFieldEvent(type, handlers, guard) {
+  switch (type) {
+    case "focus":
+    case "blur": {
+      const handler = handlers[type];
+      return handler && ((event) => guard(type, () => handler(event.relatedTarget)));
+    }
+    case "pointerdown":
+    case "pointerup":
+    case "click": {
+      const handler = handlers[type];
+      return handler && (() => guard(type, () => handler()));
+    }
+    case "input": {
+      const handler = handlers.input;
+      return handler && ((event) => guard(
+        "input",
+        () => handler(
+          event.isComposing || event.inputType === "insertCompositionText",
+          event
+        )
+      ));
+    }
+    case "keyup": {
+      const handler = handlers.keyupEscape;
+      return handler && ((event) => guard("keyup", () => {
+        if (event.key === "Escape") handler();
+      }));
+    }
+  }
+}
+function readInputContentLength(_meta, field) {
+  if (field.type === "checkbox" || field.type === "radio") return field.checked ? 1 : 0;
+  return field.value.length;
+}
+function readInputGroupValueLength(_meta, fields) {
+  return fields.reduce((total, field) => total + field.value.length, 0);
+}
+function readFocusedField(_meta, fields) {
+  const active = document.activeElement;
+  return fields.find((field) => field === active);
+}
+export {
+  observeInputField,
+  readFocusedField,
+  readInputContentLength,
+  readInputGroupValueLength
+};

package/dist/analysis/readers/loader-global.mjs

@@ -0,0 +1,15 @@
+// src/readers/loader-global.ts
+function drainLoaderQueue(_meta, name, replay) {
+  const global = window.Corbado;
+  if (global?.[name]) {
+    replay(global[name]);
+    delete window.Corbado[name];
+  }
+}
+function installLoaderGlobal(_meta, api) {
+  window.Corbado = api;
+}
+export {
+  drainLoaderQueue,
+  installLoaderGlobal
+};

package/dist/analysis/readers/network.mjs

@@ -0,0 +1,14 @@
+// src/readers/network.ts
+function sendFetch(_meta, url, init) {
+  return fetch(url, init);
+}
+function beaconSender(_meta) {
+  if (typeof navigator?.sendBeacon !== "function") {
+    return void 0;
+  }
+  return (url, data) => navigator.sendBeacon(url, data);
+}
+export {
+  beaconSender,
+  sendFetch
+};

package/dist/analysis/readers/page.mjs

@@ -0,0 +1,30 @@
+// src/readers/page.ts
+import { applySourcePathQuery } from "../utils/source-path.mjs";
+function listenWindow(_meta, type, handler, options) {
+  if (options === void 0) {
+    window.addEventListener(type, handler);
+  } else {
+    window.addEventListener(type, handler, options);
+  }
+  return () => window.removeEventListener(type, handler);
+}
+function readDocumentHidden(_meta) {
+  return document.visibilityState === "hidden";
+}
+function readDocumentComplete(_meta) {
+  return document.readyState === "complete";
+}
+function readPageUrl(_meta) {
+  return window.location.href;
+}
+function readSourcePath(_meta, mode, allow) {
+  const search = applySourcePathQuery(window.location.search, mode, allow);
+  return `${window.location.pathname}${search}`;
+}
+export {
+  listenWindow,
+  readDocumentComplete,
+  readDocumentHidden,
+  readPageUrl,
+  readSourcePath
+};

package/dist/analysis/readers/storage.mjs

@@ -0,0 +1,28 @@
+// src/readers/storage.ts
+function localStorageArea(_meta) {
+  return {
+    getItem: (key) => localStorage.getItem(key),
+    setItem: (key, value) => localStorage.setItem(key, value),
+    removeItem: (key) => localStorage.removeItem(key)
+  };
+}
+function sessionStorageArea(_meta) {
+  return {
+    getItem: (key) => sessionStorage.getItem(key),
+    setItem: (key, value) => sessionStorage.setItem(key, value),
+    removeItem: (key) => sessionStorage.removeItem(key)
+  };
+}
+function cookieJar(_meta) {
+  return {
+    read: () => document.cookie,
+    write: (cookie) => {
+      document.cookie = cookie;
+    }
+  };
+}
+export {
+  cookieJar,
+  localStorageArea,
+  sessionStorageArea
+};

package/dist/analysis/{utils → readers}/web-lock.mjs

@@ -1,5 +1,5 @@
-// src/utils/web-lock.ts
-function withWebLock(name, fn, options = {}) {
+// src/readers/web-lock.ts
+function withWebLock(_meta, name, fn, options = {}) {
   const locks = typeof navigator !== "undefined" ? navigator.locks : void 0;
   if (locks?.request) {
     const timeoutMs = options.timeoutMs;
@@ -47,6 +47,10 @@ function withWebLock(name, fn, options = {}) {
     return Promise.reject(error);
   }
 }
+function hasWebLocks(_meta) {
+  return typeof navigator !== "undefined" && !!navigator.locks?.request;
+}
 export {
+  hasWebLocks,
   withWebLock
 };

package/dist/analysis/readers/window-events.mjs

@@ -0,0 +1,48 @@
+// src/readers/window-events.ts
+function observeWindowLowEvents(_meta, handlers, guard) {
+  const removers = [];
+  const listen = (target, name, handler) => {
+    const safe = (event) => guard(name, () => handler(event));
+    target.addEventListener(name, safe);
+    removers.push(() => target.removeEventListener(name, safe));
+  };
+  listen(window, "blur", () => handlers.blur());
+  listen(window, "focus", () => handlers.focus());
+  listen(document, "visibilitychange", () => handlers.visibilityChange(document.visibilityState === "hidden"));
+  listen(document, "focusout", (event) => handlers.focusOut(event.target, !!event.relatedTarget));
+  listen(document, "focusin", (event) => handlers.focusIn(() => event.composedPath()));
+  listen(document, "pointerdown", (event) => handlers.pointerDown(event.target));
+  if (window.visualViewport) {
+    listen(window.visualViewport, "resize", () => handlers.viewportResize());
+    listen(window.visualViewport, "scroll", () => handlers.viewportScroll());
+  }
+  listen(window, "pagehide", () => handlers.pageHide());
+  const navigation = window.navigation;
+  if (navigation) {
+    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) {
+        handlers.navigateBack();
+      }
+    });
+  }
+  return removers;
+}
+function readFocusedChain(_meta) {
+  const chain = [];
+  for (let active = document.activeElement; active; active = active.shadowRoot?.activeElement ?? null) {
+    chain.push(active);
+  }
+  return chain;
+}
+function readActiveFocus(_meta) {
+  const active = document.activeElement;
+  return { active, idle: active === document.body || !active };
+}
+export {
+  observeWindowLowEvents,
+  readActiveFocus,
+  readFocusedChain
+};