catalyst-core 0.2.0-beta.3 → 0.3.0-beta.2

package/dist/native/bridge/perf/collectors/InteractionCollector.js

@@ -1,4 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.InteractionCollector=void 0;var _constants=require("../core/constants.js");var _session=require("../core/session.js");/**
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InteractionCollector = void 0;
+var _constants = require("../core/constants.js");
+var _session = require("../core/session.js");
+/**
  * InteractionCollector.js
  *
  * Instruments: bugs #6, #8, #13, #17
@@ -27,12 +35,239 @@
  *   On pointerdown, a 2-second interaction session opens.
  *   RenderCollector queries activeSessionId to tag its spans.
  *   Session closes after SESSION_WINDOW_MS (2s) or next pointerdown, whichever comes first.
- */const SESSION_WINDOW_MS=2000;const MAX_RECENT_INTERACTIONS=50;class InteractionCollector{constructor(measure){this._measure=measure;this._pendingTaps=new Map();// pointerId → { startMark, startTime, target }
-this._session=new _session.Session(_constants.PREFIX.SESSION_INTERACTION,measure,_constants.TRACK.INTERACTION);this._sessionTimer=null;this._sessionId=null;this._sessionNetworkCalls=0;this._sessionFpsDrop=false;this._activeInteraction=null;this._recentInteractions=[];this._interactionSeq=0;}// ─── Public API — queried by native API and render collectors ──────────────
-get activeInteractionId(){return this._activeInteraction?.id??null;}interactionIdForRange(startTime,endTime=startTime){const interactions=this._activeInteraction?[...this._recentInteractions,this._activeInteraction]:this._recentInteractions;return interactions.slice().reverse().find(interaction=>startTime<=(interaction.endTime??performance.now())&&endTime>=interaction.startTime)?.id??null;}/** Called by index.js to wire up insights notifications. */setInsightsSource(fn){this._notifyInsights=fn;}/** Called by index.js to feed the normalized perf store. */setWaterfallSource(fn){this._notifyWaterfall=fn;}/** Called by RenderCollector when an fps-drop-episode fires. */onFpsDrop(){if(this._session.isOpen){this._sessionFpsDrop=true;this._session.set("fpsDrop",true);}}/** Called by NetworkTimingCollector when a fetch/XHR starts during an interaction. */onNetworkCall(){if(this._session.isOpen){this._sessionNetworkCalls++;this._session.set("networkCalls",this._sessionNetworkCalls);}}init(){document.addEventListener("pointerdown",this._onPointerDown.bind(this),{passive:true});document.addEventListener("pointerup",this._onPointerUp.bind(this),{passive:true});document.addEventListener("pointercancel",this._onPointerCancel.bind(this),{passive:true});}_openSession(target,startTime){// Close any existing session immediately — new tap = new session
-this._closeSession();this._sessionId=`${Math.round(startTime)}`;this._sessionNetworkCalls=0;this._sessionFpsDrop=false;this._session.open({target,sessionId:this._sessionId,networkCalls:0,fpsDrop:false},startTime);this._notifyWaterfall?.({phase:"start",target,sessionId:this._sessionId,startTime});// Auto-close after 2s
-this._sessionTimer=setTimeout(()=>this._closeSession(),SESSION_WINDOW_MS);}_closeSession(){if(this._sessionTimer){clearTimeout(this._sessionTimer);this._sessionTimer=null;}if(this._session.isOpen){const target=this._session.get("target");const startTime=this._session.startTime;const endTime=performance.now();this._session.close({sessionId:this._sessionId,networkCalls:this._sessionNetworkCalls,fpsDrop:this._sessionFpsDrop},endTime,this._sessionFpsDrop?"error":"secondary");this._notifyWaterfall?.({phase:"end",target,sessionId:this._sessionId,networkCalls:this._sessionNetworkCalls,fpsDrop:this._sessionFpsDrop,startTime,endTime,durationMs:Math.round(endTime-startTime)});}this._sessionId=null;}_onPointerDown(e){const startTime=performance.now();const target=this._describeTarget(e.target);const startMark=`${_constants.PREFIX.INTERACTION}:${e.pointerId}:start`;const interactionId=`Tap #${++this._interactionSeq}`;performance.mark(startMark,{startTime});this._activeInteraction={id:interactionId,startTime,endTime:null};this._measure.marker(`${interactionId}: ${target}`,startTime,{interactionId,target},"secondary");// The old 2s parent session
-// this._openSession(target, startTime)
-// Long-press detection timer
-const longPressTimer=setTimeout(()=>{this._emitLongPress(e.pointerId,target,startTime);},_constants.THRESHOLD.LONG_PRESS_MS);this._pendingTaps.set(e.pointerId,{startMark,startTime,target,interactionId,longPressTimer});// Measure tap → next paint (interaction responsiveness)
-requestAnimationFrame(()=>{const endTime=performance.now();const tap=this._pendingTaps.get(e.pointerId);if(!tap)return;tap.frameComplete=true;if(tap.released)this._pendingTaps.delete(e.pointerId);this._rememberInteraction(interactionId,startTime,endTime);const responseMs=Math.round(endTime-startTime);if(responseMs>_constants.THRESHOLD.INTERACTION_SLOW_MS){this._notifyInsights?.({target,responseMs,startTime,endTime,interactionId});}this._measure.emit(`${interactionId}: ${target} - ${responseMs}ms`,startMark,endTime,{responseMs,loafOverlap:this._measure.overlapsLoaf(startTime,endTime),target,interactionId,simulatorValid:false},_constants.TRACK.INTERACTION);this._notifyWaterfall?.({phase:"end",target,sessionId:interactionId,networkCalls:0,fpsDrop:false,startTime,endTime,durationMs:responseMs,responseMs,shortInteraction:true});});}_onPointerUp(e){const tap=this._pendingTaps.get(e.pointerId);if(tap){clearTimeout(tap.longPressTimer);tap.released=true;if(tap.frameComplete)this._pendingTaps.delete(e.pointerId);}}_onPointerCancel(e){const tap=this._pendingTaps.get(e.pointerId);if(!tap)return;clearTimeout(tap.longPressTimer);this._pendingTaps.delete(e.pointerId);if(this._activeInteraction?.id===tap.interactionId)this._activeInteraction=null;}_rememberInteraction(id,startTime,endTime){this._recentInteractions.push({id,startTime,endTime});if(this._recentInteractions.length>MAX_RECENT_INTERACTIONS){this._recentInteractions.shift();}if(this._activeInteraction?.id===id)this._activeInteraction=null;}_emitLongPress(pointerId,target,startTime){const tap=this._pendingTaps.get(pointerId);if(!tap)return;const endTime=performance.now();const heldMs=Math.round(endTime-startTime);const markName=`${_constants.PREFIX.LONG_PRESS}:${Math.round(startTime)}`;performance.mark(markName,{startTime});this._measure.emit(`${tap.interactionId}: Long press ${target} - ${heldMs}ms`,markName,endTime,{target,heldMs,interactionId:tap.interactionId,simulatorValid:true},_constants.TRACK.INTERACTION,"tertiary");}_describeTarget(el){if(!el)return"unknown";const tag=el.tagName?.toLowerCase()??"unknown";const id=el.id?`#${el.id}`:"";const cls=el.classList?.length?`.${[...el.classList].slice(0,2).join(".")}`:"";return`${tag}${id}${cls}`.slice(0,40);}}exports.InteractionCollector=InteractionCollector;
+ */
+
+const SESSION_WINDOW_MS = 2000;
+const MAX_RECENT_INTERACTIONS = 50;
+class InteractionCollector {
+  constructor(measure) {
+    this._measure = measure;
+    this._pendingTaps = new Map(); // pointerId → { startMark, startTime, target }
+    this._session = new _session.Session(_constants.PREFIX.SESSION_INTERACTION, measure, _constants.TRACK.INTERACTION);
+    this._sessionTimer = null;
+    this._sessionId = null;
+    this._sessionNetworkCalls = 0;
+    this._sessionFpsDrop = false;
+    this._activeInteraction = null;
+    this._recentInteractions = [];
+    this._interactionSeq = 0;
+  }
+
+  // ─── Public API — queried by native API and render collectors ──────────────
+
+  get activeInteractionId() {
+    return this._activeInteraction?.id ?? null;
+  }
+  interactionIdForRange(startTime, endTime = startTime) {
+    const interactions = this._activeInteraction ? [...this._recentInteractions, this._activeInteraction] : this._recentInteractions;
+    return interactions.slice().reverse().find(interaction => startTime <= (interaction.endTime ?? performance.now()) && endTime >= interaction.startTime)?.id ?? null;
+  }
+
+  /** Called by index.js to wire up insights notifications. */
+  setInsightsSource(fn) {
+    this._notifyInsights = fn;
+  }
+
+  /** Called by index.js to feed the normalized perf store. */
+  setWaterfallSource(fn) {
+    this._notifyWaterfall = fn;
+  }
+
+  /** Called by RenderCollector when an fps-drop-episode fires. */
+  onFpsDrop() {
+    if (this._session.isOpen) {
+      this._sessionFpsDrop = true;
+      this._session.set("fpsDrop", true);
+    }
+  }
+
+  /** Called by NetworkTimingCollector when a fetch/XHR starts during an interaction. */
+  onNetworkCall() {
+    if (this._session.isOpen) {
+      this._sessionNetworkCalls++;
+      this._session.set("networkCalls", this._sessionNetworkCalls);
+    }
+  }
+  init() {
+    document.addEventListener("pointerdown", this._onPointerDown.bind(this), {
+      passive: true
+    });
+    document.addEventListener("pointerup", this._onPointerUp.bind(this), {
+      passive: true
+    });
+    document.addEventListener("pointercancel", this._onPointerCancel.bind(this), {
+      passive: true
+    });
+  }
+  _openSession(target, startTime) {
+    // Close any existing session immediately — new tap = new session
+    this._closeSession();
+    this._sessionId = `${Math.round(startTime)}`;
+    this._sessionNetworkCalls = 0;
+    this._sessionFpsDrop = false;
+    this._session.open({
+      target,
+      sessionId: this._sessionId,
+      networkCalls: 0,
+      fpsDrop: false
+    }, startTime);
+    this._notifyWaterfall?.({
+      phase: "start",
+      target,
+      sessionId: this._sessionId,
+      startTime
+    });
+
+    // Auto-close after 2s
+    this._sessionTimer = setTimeout(() => this._closeSession(), SESSION_WINDOW_MS);
+  }
+  _closeSession() {
+    if (this._sessionTimer) {
+      clearTimeout(this._sessionTimer);
+      this._sessionTimer = null;
+    }
+    if (this._session.isOpen) {
+      const target = this._session.get("target");
+      const startTime = this._session.startTime;
+      const endTime = performance.now();
+      this._session.close({
+        sessionId: this._sessionId,
+        networkCalls: this._sessionNetworkCalls,
+        fpsDrop: this._sessionFpsDrop
+      }, endTime, this._sessionFpsDrop ? "error" : "secondary");
+      this._notifyWaterfall?.({
+        phase: "end",
+        target,
+        sessionId: this._sessionId,
+        networkCalls: this._sessionNetworkCalls,
+        fpsDrop: this._sessionFpsDrop,
+        startTime,
+        endTime,
+        durationMs: Math.round(endTime - startTime)
+      });
+    }
+    this._sessionId = null;
+  }
+  _onPointerDown(e) {
+    const startTime = performance.now();
+    const target = this._describeTarget(e.target);
+    const startMark = `${_constants.PREFIX.INTERACTION}:${e.pointerId}:start`;
+    const interactionId = `Tap #${++this._interactionSeq}`;
+    performance.mark(startMark, {
+      startTime
+    });
+    this._activeInteraction = {
+      id: interactionId,
+      startTime,
+      endTime: null
+    };
+    this._measure.marker(`${interactionId}: ${target}`, startTime, {
+      interactionId,
+      target
+    }, "secondary");
+
+    // The old 2s parent session
+    // this._openSession(target, startTime)
+
+    // Long-press detection timer
+    const longPressTimer = setTimeout(() => {
+      this._emitLongPress(e.pointerId, target, startTime);
+    }, _constants.THRESHOLD.LONG_PRESS_MS);
+    this._pendingTaps.set(e.pointerId, {
+      startMark,
+      startTime,
+      target,
+      interactionId,
+      longPressTimer
+    });
+
+    // Measure tap → next paint (interaction responsiveness)
+    requestAnimationFrame(() => {
+      const endTime = performance.now();
+      const tap = this._pendingTaps.get(e.pointerId);
+      if (!tap) return;
+      tap.frameComplete = true;
+      if (tap.released) this._pendingTaps.delete(e.pointerId);
+      this._rememberInteraction(interactionId, startTime, endTime);
+      const responseMs = Math.round(endTime - startTime);
+      if (responseMs > _constants.THRESHOLD.INTERACTION_SLOW_MS) {
+        this._notifyInsights?.({
+          target,
+          responseMs,
+          startTime,
+          endTime,
+          interactionId
+        });
+      }
+      this._measure.emit(`${interactionId}: ${target} - ${responseMs}ms`, startMark, endTime, {
+        responseMs,
+        loafOverlap: this._measure.overlapsLoaf(startTime, endTime),
+        target,
+        interactionId,
+        simulatorValid: false
+      }, _constants.TRACK.INTERACTION);
+      this._notifyWaterfall?.({
+        phase: "end",
+        target,
+        sessionId: interactionId,
+        networkCalls: 0,
+        fpsDrop: false,
+        startTime,
+        endTime,
+        durationMs: responseMs,
+        responseMs,
+        shortInteraction: true
+      });
+    });
+  }
+  _onPointerUp(e) {
+    const tap = this._pendingTaps.get(e.pointerId);
+    if (tap) {
+      clearTimeout(tap.longPressTimer);
+      tap.released = true;
+      if (tap.frameComplete) this._pendingTaps.delete(e.pointerId);
+    }
+  }
+  _onPointerCancel(e) {
+    const tap = this._pendingTaps.get(e.pointerId);
+    if (!tap) return;
+    clearTimeout(tap.longPressTimer);
+    this._pendingTaps.delete(e.pointerId);
+    if (this._activeInteraction?.id === tap.interactionId) this._activeInteraction = null;
+  }
+  _rememberInteraction(id, startTime, endTime) {
+    this._recentInteractions.push({
+      id,
+      startTime,
+      endTime
+    });
+    if (this._recentInteractions.length > MAX_RECENT_INTERACTIONS) {
+      this._recentInteractions.shift();
+    }
+    if (this._activeInteraction?.id === id) this._activeInteraction = null;
+  }
+  _emitLongPress(pointerId, target, startTime) {
+    const tap = this._pendingTaps.get(pointerId);
+    if (!tap) return;
+    const endTime = performance.now();
+    const heldMs = Math.round(endTime - startTime);
+    const markName = `${_constants.PREFIX.LONG_PRESS}:${Math.round(startTime)}`;
+    performance.mark(markName, {
+      startTime
+    });
+    this._measure.emit(`${tap.interactionId}: Long press ${target} - ${heldMs}ms`, markName, endTime, {
+      target,
+      heldMs,
+      interactionId: tap.interactionId,
+      simulatorValid: true
+    }, _constants.TRACK.INTERACTION, "tertiary");
+  }
+  _describeTarget(el) {
+    if (!el) return "unknown";
+    const tag = el.tagName?.toLowerCase() ?? "unknown";
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.classList?.length ? `.${[...el.classList].slice(0, 2).join(".")}` : "";
+    return `${tag}${id}${cls}`.slice(0, 40);
+  }
+}
+exports.InteractionCollector = InteractionCollector;

package/dist/native/bridge/perf/collectors/KeyboardCollector.js

@@ -1,4 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.KeyboardCollector=void 0;var _constants=require("../core/constants.js");var _session=require("../core/session.js");/**
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyboardCollector = void 0;
+var _constants = require("../core/constants.js");
+var _session = require("../core/session.js");
+/**
  * KeyboardCollector.js
  *
  * Instruments: bugs #3, #12
@@ -16,10 +24,101 @@
  *                                 detail: keyboardHeight, viewportDelta, hadScrollDuringSession
  *   catalyst:viewport-resize    — visualViewport resize → next rAF (Track: Keyboard)
  *                                 detail: deltaHeight
- */class KeyboardCollector{constructor(measure,nativeToWeb){this._measure=measure;this._nativeToWeb=nativeToWeb;this._session=new _session.Session(_constants.PREFIX.SESSION_KEYBOARD,measure,_constants.TRACK.INPUT);}init(){this._observeVisualViewport();}setWaterfallSource(fn){this._notifyWaterfall=fn;}// ─── Native event handlers ────────────────────────────────────────────────
-onKeyboardShow(event){const webNow=this._nativeToWeb(event.nativeTime);this._session.open({keyboardHeight:event.keyboardHeight,hadScroll:false},webNow);}onKeyboardHide(event){const webNow=this._nativeToWeb(event.nativeTime);if(this._session.isOpen){this._closeSession(webNow);}// Emit a point mark so keyboard-hide is visible on the timeline
-const hideMark=`catalyst:keyboard-hide:${Math.round(webNow)}`;performance.mark(hideMark,{startTime:webNow});}// Called by ScrollCollector (via index.js) if scroll fires while keyboard open
-onScrollDuringKeyboard(){if(this._session.isOpen){this._session.set("hadScroll",true);}}// ─── Viewport resize ──────────────────────────────────────────────────────
-// Fires when keyboard pushes/pulls the viewport.
-// Also closes the keyboard session — viewport settling = keyboard done.
-_observeVisualViewport(){if(!window.visualViewport)return;let lastHeight=window.visualViewport.height;window.visualViewport.addEventListener("resize",()=>{const now=performance.now();const newHeight=window.visualViewport.height;const delta=Math.abs(newHeight-lastHeight);lastHeight=newHeight;if(delta<_constants.THRESHOLD.VIEWPORT_MIN_DELTA)return;const markName=`${_constants.PREFIX.VIEWPORT_RESIZE}:start:${Math.round(now)}`;performance.mark(markName,{startTime:now});requestAnimationFrame(()=>{const endTime=performance.now();const durationMs=Math.round(endTime-now);this._measure.emit(_constants.PREFIX.VIEWPORT_RESIZE,markName,endTime,{deltaHeight:Math.round(delta),simulatorValid:true},_constants.TRACK.INPUT);this._notifyWaterfall?.({metric:"viewport-resize",startTime:now,endTime,durationMs,deltaHeight:Math.round(delta)});if(this._session.isOpen){this._closeSession(endTime);}});});}_closeSession(endTime){const startTime=this._session.startTime;const detail={keyboardHeight:this._session.get("keyboardHeight"),hadScrollDuringSession:this._session.get("hadScroll"),simulatorValid:false};this._session.close(detail,endTime);this._notifyWaterfall?.({kind:"keyboard",startTime,endTime,durationMs:Math.round(endTime-startTime),...detail});}}exports.KeyboardCollector=KeyboardCollector;
+ */
+
+class KeyboardCollector {
+  constructor(measure, nativeToWeb) {
+    this._measure = measure;
+    this._nativeToWeb = nativeToWeb;
+    this._session = new _session.Session(_constants.PREFIX.SESSION_KEYBOARD, measure, _constants.TRACK.INPUT);
+  }
+  init() {
+    this._observeVisualViewport();
+  }
+  setWaterfallSource(fn) {
+    this._notifyWaterfall = fn;
+  }
+
+  // ─── Native event handlers ────────────────────────────────────────────────
+
+  onKeyboardShow(event) {
+    const webNow = this._nativeToWeb(event.nativeTime);
+    this._session.open({
+      keyboardHeight: event.keyboardHeight,
+      hadScroll: false
+    }, webNow);
+  }
+  onKeyboardHide(event) {
+    const webNow = this._nativeToWeb(event.nativeTime);
+    if (this._session.isOpen) {
+      this._closeSession(webNow);
+    }
+    // Emit a point mark so keyboard-hide is visible on the timeline
+    const hideMark = `catalyst:keyboard-hide:${Math.round(webNow)}`;
+    performance.mark(hideMark, {
+      startTime: webNow
+    });
+  }
+
+  // Called by ScrollCollector (via index.js) if scroll fires while keyboard open
+  onScrollDuringKeyboard() {
+    if (this._session.isOpen) {
+      this._session.set("hadScroll", true);
+    }
+  }
+
+  // ─── Viewport resize ──────────────────────────────────────────────────────
+  // Fires when keyboard pushes/pulls the viewport.
+  // Also closes the keyboard session — viewport settling = keyboard done.
+
+  _observeVisualViewport() {
+    if (!window.visualViewport) return;
+    let lastHeight = window.visualViewport.height;
+    window.visualViewport.addEventListener("resize", () => {
+      const now = performance.now();
+      const newHeight = window.visualViewport.height;
+      const delta = Math.abs(newHeight - lastHeight);
+      lastHeight = newHeight;
+      if (delta < _constants.THRESHOLD.VIEWPORT_MIN_DELTA) return;
+      const markName = `${_constants.PREFIX.VIEWPORT_RESIZE}:start:${Math.round(now)}`;
+      performance.mark(markName, {
+        startTime: now
+      });
+      requestAnimationFrame(() => {
+        const endTime = performance.now();
+        const durationMs = Math.round(endTime - now);
+        this._measure.emit(_constants.PREFIX.VIEWPORT_RESIZE, markName, endTime, {
+          deltaHeight: Math.round(delta),
+          simulatorValid: true
+        }, _constants.TRACK.INPUT);
+        this._notifyWaterfall?.({
+          metric: "viewport-resize",
+          startTime: now,
+          endTime,
+          durationMs,
+          deltaHeight: Math.round(delta)
+        });
+        if (this._session.isOpen) {
+          this._closeSession(endTime);
+        }
+      });
+    });
+  }
+  _closeSession(endTime) {
+    const startTime = this._session.startTime;
+    const detail = {
+      keyboardHeight: this._session.get("keyboardHeight"),
+      hadScrollDuringSession: this._session.get("hadScroll"),
+      simulatorValid: false
+    };
+    this._session.close(detail, endTime);
+    this._notifyWaterfall?.({
+      kind: "keyboard",
+      startTime,
+      endTime,
+      durationMs: Math.round(endTime - startTime),
+      ...detail
+    });
+  }
+}
+exports.KeyboardCollector = KeyboardCollector;