@hyperframes/core 0.9.19 → 0.9.21

package/dist/index.d.ts

@@ -68,3 +68,4 @@ export { canaryBucket, evaluateCanary, parseCanaryOverride, type CanaryDecision,
 export { CANARIES, canaryEnvVar, findCanary, overdueCanaries, type CanaryDefinition, } from "./canaryRegistry.js";
 export { HF_VFX_ATTR, HF_VFX_CHAIN_VERSION, HF_VFX, chainCapture, getVfxDef, parseVfxChain, serializeVfxChain, normalizeVfxParams, type HfVfxCapture, type HfVfxChain, type HfVfxDef, type HfVfxNode, type HfVfxParam, type HfVfxParamValues, } from "./vfx.js";
 export { PAGE_DEVICE_SCALE_GLOBAL, PAGE_MOTION_BLUR_OFF_GLOBAL, acceleratedCanvasTrackerSource, } from "./pageMotionBlur.js";
+export { MOTION_BLUR_FINGERPRINT_FIELDS, type MotionBlurFingerprint, type MotionBlurFingerprintField, } from "./motionBlurFingerprint.js";

package/dist/index.js

@@ -71,3 +71,4 @@ export { CANARIES, canaryEnvVar, findCanary, overdueCanaries, } from "./canaryRe
 // VFX chain (data-vfx-chain) — defs, chain parse/serialize/normalize
 export { HF_VFX_ATTR, HF_VFX_CHAIN_VERSION, HF_VFX, chainCapture, getVfxDef, parseVfxChain, serializeVfxChain, normalizeVfxParams, } from "./vfx.js";
 export { PAGE_DEVICE_SCALE_GLOBAL, PAGE_MOTION_BLUR_OFF_GLOBAL, acceleratedCanvasTrackerSource, } from "./pageMotionBlur.js";
+export { MOTION_BLUR_FINGERPRINT_FIELDS, } from "./motionBlurFingerprint.js";

package/dist/inline-scripts/pickerApi.d.ts

@@ -6,6 +6,7 @@ export type HyperframePickerBoundingBox = {
 };
 export type HyperframePickerElementInfo = {
     id: string | null;
+    className?: string | null;
     tagName: string;
     selector: string;
     label: string;

package/dist/motionBlurFingerprint.d.ts

@@ -0,0 +1,4 @@
+export declare const MOTION_BLUR_FINGERPRINT_FIELDS: readonly ["canvas2d", "webgl", "video", "iframe", "customElement", "svgClip", "mask", "scrollContainer", "threeD", "overflowingMover", "frontOfMover", "blendMode", "fixedInMover", "pseudoOutside"];
+export type MotionBlurFingerprintField = (typeof MOTION_BLUR_FINGERPRINT_FIELDS)[number];
+export type MotionBlurFingerprint = Record<MotionBlurFingerprintField, number>;
+export declare function emptyMotionBlurFingerprint(): MotionBlurFingerprint;

package/dist/motionBlurFingerprint.js

@@ -0,0 +1,34 @@
+export const MOTION_BLUR_FINGERPRINT_FIELDS = [
+    "canvas2d",
+    "webgl",
+    "video",
+    "iframe",
+    "customElement",
+    "svgClip",
+    "mask",
+    "scrollContainer",
+    "threeD",
+    "overflowingMover",
+    "frontOfMover",
+    "blendMode",
+    "fixedInMover",
+    "pseudoOutside",
+];
+export function emptyMotionBlurFingerprint() {
+    return {
+        canvas2d: 0,
+        webgl: 0,
+        video: 0,
+        iframe: 0,
+        customElement: 0,
+        svgClip: 0,
+        mask: 0,
+        scrollContainer: 0,
+        threeD: 0,
+        overflowingMover: 0,
+        frontOfMover: 0,
+        blendMode: 0,
+        fixedInMover: 0,
+        pseudoOutside: 0,
+    };
+}

package/dist/runtime/bridge.js

@@ -1,3 +1,4 @@
+import { wallSetTimeout } from "./wallClock.js";
 import { swallow } from "./diagnostics.js";
 import { inspectRuntimeProtocol, runtimeProtocolFpsToNumber, runtimeProtocolMetadata, } from "./protocol.js";
 let runtimeProtocolFps = 30;
@@ -134,7 +135,7 @@ function flashElements(selectors, duration) {
             const els = document.querySelectorAll(selector);
             els.forEach((el) => {
                 el.classList.add("__hf-flash");
-                setTimeout(() => el.classList.remove("__hf-flash"), duration);
+                wallSetTimeout(() => el.classList.remove("__hf-flash"), duration);
             });
         }
         catch (err) {

package/dist/runtime/clock.d.ts

@@ -30,6 +30,8 @@ export declare class TransportClock {
     private _lastReadMs;
     private _lastNow;
     private _audioStart;
+    private _reading;
+    private _ahead;
     constructor(opts?: {
         initialTime?: number;
         rate?: number;
@@ -38,6 +40,9 @@ export declare class TransportClock {
     });
     now(): number;
     private _elementTimeNeverBehind;
+    private _betweenUpdates;
+    private _runAhead;
+    aheadOf(el: HTMLMediaElement): number;
     private _heldUntilAudioOutputStarts;
     private _pendingAudioStart;
     /** Folds a >500ms gap since the last read into `_playStartMs` so it's never reported as played time. */

package/dist/runtime/clock.js

@@ -6,6 +6,15 @@ const STALL_ADJUSTED_LAG_MS = 33;
 const HAVE_FUTURE_DATA = 3;
 const AUDIO_START_WAIT_MS = 1500;
 const MEDIA_SYNC_STEER_TOLERANCE_SECONDS = 0.04;
+const MAX_MEDIA_STEP_SECONDS = 0.25;
+const MEDIA_STEPS_KEPT = 8;
+const furthestAhead = (reading) => reading ? Math.max(0, ...reading.steps) : 0;
+function noteStep(reading, time) {
+    const step = time - reading.time;
+    if (step > 0 && step <= MAX_MEDIA_STEP_SECONDS)
+        reading.steps = [...reading.steps.slice(1 - MEDIA_STEPS_KEPT), step];
+    reading.time = time;
+}
 export class TransportClock {
     _baseTime = 0;
     _playStartMs = null;
@@ -20,6 +29,8 @@ export class TransportClock {
     _lastReadMs = null;
     _lastNow = 0;
     _audioStart = null;
+    _reading = null;
+    _ahead = null;
     constructor(opts) {
         this._baseTime = opts?.initialTime ?? 0;
         this._rate = opts?.rate ?? 1;
@@ -27,6 +38,7 @@ export class TransportClock {
         this._nowMs = opts?.nowMs ?? (() => performance.now());
     }
     now() {
+        this._ahead = null;
         if (this._playStartMs === null)
             return this._baseTime;
         // Audio-master: drift is impossible because audio IS the clock. Clearing
@@ -63,13 +75,42 @@ export class TransportClock {
         const spec = rate ?? 1;
         const time = timeAtSourceTime(spec, el.currentTime - mediaStart) + compositionStart;
         const held = this._heldUntilAudioOutputStarts(el.seeking, time);
-        if (held !== undefined)
+        if (held !== undefined) {
+            this._reading = null;
             return held;
-        if (time >= this._lastNow)
-            return time;
+        }
+        const between = this._betweenUpdates(el, time);
+        if (between !== null)
+            return between;
         const wrapped = el.loop && this._lastNow - time > timeAtSourceTime(spec, el.duration) / 2;
         return !wrapped && el.readyState < HAVE_FUTURE_DATA ? this._lastNow : null;
     }
+    // Chromium moves currentTime in 10-50 ms steps, so reading it as is holds a frame, then jumps. Run on at the play
+    // rate, kept within [element time, element time + its largest recent step], never back; null when time is behind
+    // the playhead by more than that step (a late clip, not a step).
+    _betweenUpdates(el, time) {
+        const nowMs = this._nowMs();
+        const last = this._reading?.el === el ? this._reading : null;
+        if (time < this._lastNow - furthestAhead(last))
+            return null;
+        if (!last) {
+            this._reading = { el, time, steps: [], from: time, fromMs: nowMs };
+            return this._runAhead(el, time, Math.max(time, this._lastNow));
+        }
+        noteStep(last, time);
+        const run = last.from + ((nowMs - last.fromMs) / 1000) * this._rate;
+        const held = Math.min(Math.max(run, time), time + furthestAhead(last));
+        if (held !== run)
+            Object.assign(last, { from: held, fromMs: nowMs });
+        return this._runAhead(el, time, Math.max(held, this._lastNow));
+    }
+    _runAhead(el, time, now) {
+        this._ahead = { el, seconds: now - time };
+        return now;
+    }
+    aheadOf(el) {
+        return this._ahead?.el === el ? this._ahead.seconds : 0;
+    }
     _heldUntilAudioOutputStarts(seeking, time) {
         const pending = this._pendingAudioStart();
         if (seeking)
@@ -110,6 +151,7 @@ export class TransportClock {
         this._playStartMs = this._nowMs();
         this._audioStart = { sinceMs: this._playStartMs, at: this._baseTime, from: null };
         this._lastNow = this._baseTime;
+        this._reading = null;
         // Not a stall: the gap since the clock was last read (possibly a long
         // paused idle) says nothing about lost playback time, since none was
         // playing. `_applyStallCorrection` treats null as "nothing to compare
@@ -122,6 +164,7 @@ export class TransportClock {
             return false;
         this._baseTime = this.now();
         this._playStartMs = null;
+        this._reading = null;
         return true;
     }
     seek(timeSeconds) {
@@ -130,6 +173,7 @@ export class TransportClock {
             : Math.max(0, timeSeconds);
         this._baseTime = clamped;
         this._lastNow = clamped;
+        this._reading = null;
         if (this._playStartMs !== null) {
             this._playStartMs = this._nowMs();
             this._audioStart = { sinceMs: this._playStartMs, at: clamped, from: null };
@@ -143,6 +187,7 @@ export class TransportClock {
     }
     setRate(rate) {
         const safe = Number.isFinite(rate) && rate > 0 ? Math.max(0.1, Math.min(5, rate)) : 1;
+        this._reading = null;
         if (this._playStartMs !== null) {
             this._baseTime = this.now();
             this._playStartMs = this._nowMs();
@@ -189,6 +234,7 @@ export class TransportClock {
             this._lastReadMs = null;
         }
         this._audioSource = null;
+        this._reading = null;
     }
     /** The element the playhead currently follows, if the source is one. */
     // fallow-ignore-next-line unused-class-member

package/dist/runtime/wallClock.d.ts

@@ -0,0 +1,8 @@
+type TimeoutId = ReturnType<typeof setTimeout>;
+type IntervalId = ReturnType<typeof setInterval>;
+type Handler = (...args: never[]) => void;
+export declare function wallSetTimeout(handler: Handler, timeout?: number, ...args: unknown[]): TimeoutId;
+export declare function wallClearTimeout(id: TimeoutId | null | undefined): void;
+export declare function wallSetInterval(handler: Handler, timeout?: number, ...args: unknown[]): IntervalId;
+export declare function wallClearInterval(id: IntervalId | null | undefined): void;
+export {};

package/dist/runtime/wallClock.js

@@ -0,0 +1,13 @@
+const shim = () => globalThis.__HF_VIRTUAL_TIME__;
+export function wallSetTimeout(handler, timeout, ...args) {
+    return (shim()?.originalSetTimeout ?? setTimeout)(handler, timeout, ...args);
+}
+export function wallClearTimeout(id) {
+    (shim()?.originalClearTimeout ?? clearTimeout)(id ?? undefined);
+}
+export function wallSetInterval(handler, timeout, ...args) {
+    return (shim()?.originalSetInterval ?? setInterval)(handler, timeout, ...args);
+}
+export function wallClearInterval(id) {
+    (shim()?.originalClearInterval ?? clearInterval)(id ?? undefined);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.9.19",
+  "version": "0.9.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -437,9 +437,9 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "wawoff2": "^2.0.1",
-    "@hyperframes/parsers": "0.9.19",
-    "@hyperframes/lint": "0.9.19",
-    "@hyperframes/studio-server": "0.9.19"
+    "@hyperframes/lint": "0.9.21",
+    "@hyperframes/parsers": "0.9.21",
+    "@hyperframes/studio-server": "0.9.21"
   },
   "devDependencies": {
     "@fontsource/archivo-black": "^5.2.8",