@hyperframes/studio 0.8.56 → 0.8.57

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -8,7 +8,7 @@
  *  - onIframeLoad             — orchestrates initializeAdapter with a message-based fallback
  */
 
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { liveTime, usePlayerStore } from "../store/playerStore";
 import type { TimelineElement } from "../store/playerStore";
 import type { PlaybackAdapter, IframeWindow } from "../lib/playbackTypes";
@@ -33,7 +33,7 @@ import {
 // Re-exported for the tests and callers that have always imported it from here.
 export { resolveReloadSeekTime } from "./timelineSyncHydration";
 
-interface UseTimelineSyncCallbacksParams {
+export interface UseTimelineSyncCallbacksParams {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
   probeIntervalRef: React.MutableRefObject<ReturnType<typeof setInterval> | undefined>;
   pendingSeekRef: React.MutableRefObject<number | null>;
@@ -46,6 +46,19 @@ interface UseTimelineSyncCallbacksParams {
   setIsPlaying: (v: boolean) => void;
   attachIframeShortcutListeners: () => void;
   applyPreviewAudioState: () => void;
+  /**
+   * Fires once the restore-seek is issued and owns when `commit` (the store hydration) runs.
+   * The default reveals the iframe and commits at once; a shadow reload defers it to promotion.
+   */
+  onAdapterReady?: (
+    iframe: HTMLIFrameElement | null,
+    context: number | undefined,
+    commit: () => void,
+  ) => void;
+  /** False when the load for `context` was superseded: it must then cause no side effects. */
+  isCurrent?: (context?: number) => boolean;
+  /** Fires when no adapter appeared within the wait window. */
+  onLoadGiveUp?: (context?: number) => void;
 }
 
 /**
@@ -62,18 +75,54 @@ interface UseTimelineSyncCallbacksParams {
  * resets currentTime on project switch. Invariant: an edit NEVER moves the
  * playhead (the clamp below is the one sanctioned move — content shrank past it).
  */
-/**
- * Undo the `visibility: hidden` that refreshPlayer sets across a full reload.
- * Safe to call when the iframe was never hidden (idempotent no-op). Every reload
- * completion + failure path funnels through here so the preview can never get
- * stuck invisible.
- */
+/** Undo a hidden `visibility` on an iframe; idempotent no-op otherwise. */
 export function revealIframe(iframe: HTMLIFrameElement | null): void {
   if (iframe && iframe.style.visibility === "hidden") {
     iframe.style.visibility = "";
   }
 }
 
+function revealAndCommit(
+  iframe: HTMLIFrameElement | null,
+  _context: number | undefined,
+  commit: () => void,
+): void {
+  revealIframe(iframe);
+  commit();
+}
+
+export type PreviewIframeRole = "live" | "shadow";
+
+export interface PreviewIframeSlot {
+  gen: number;
+  role: PreviewIframeRole;
+  url?: string;
+}
+
+/** Queue a hidden shadow slot for the reload URL, replacing any earlier unpromoted shadow. */
+export function planShadowReload(
+  slots: PreviewIframeSlot[],
+  nextGen: number,
+  url: string,
+): PreviewIframeSlot[] {
+  const live = slots.find((slot) => slot.role === "live");
+  return live ? [live, { gen: nextGen, role: "shadow", url }] : [{ gen: nextGen, role: "live" }];
+}
+
+/** Drop any pending shadow; the live slot (and its key) is untouched. */
+export function planShadowDiscard(slots: PreviewIframeSlot[]): PreviewIframeSlot[] {
+  return slots.filter((slot) => slot.role === "live");
+}
+
+/** Atomically make the ready shadow the only (live) slot; a stale readyGen is a no-op. */
+export function planShadowPromotion(
+  slots: PreviewIframeSlot[],
+  readyGen: number,
+): PreviewIframeSlot[] {
+  const ready = slots.find((slot) => slot.gen === readyGen && slot.role === "shadow");
+  return ready ? [{ ...ready, role: "live" }] : slots;
+}
+
 /**
  * The transport TOTAL a clip-manifest message should write to the store.
  *
@@ -110,6 +159,9 @@ export function useTimelineSyncCallbacks({
   setIsPlaying,
   attachIframeShortcutListeners,
   applyPreviewAudioState,
+  onAdapterReady = revealAndCommit,
+  isCurrent,
+  onLoadGiveUp,
 }: UseTimelineSyncCallbacksParams) {
   // Convert a runtime timeline message (from iframe postMessage) into TimelineElements
   const processTimelineMessage = useCallback(
@@ -183,94 +235,112 @@ export function useTimelineSyncCallbacks({
     } catch {}
   }, [iframeRef, syncTimelineElements]);
 
-  const initializeAdapter = useCallback(() => {
-    const adapter = getAdapter();
-    if (!adapter || adapter.getDuration() <= 0) return false;
-
-    adapter.pause();
-    const startTime = seekAdapterToRestorePoint(adapter, pendingSeekRef);
-    // The correct frame is now rendered — reveal the iframe that refreshPlayer hid
-    // for the reload, so the user sees the restored frame directly (never the raw
-    // all-clips DOM). Cleared unconditionally: any later failure path must not leave
-    // the preview stuck invisible.
-    revealIframe(iframeRef.current);
-    // Keep non-React listeners such as the capture link and time display in sync
-    // with the initial adapter seek on iframe load.
-    liveTime.notify(startTime);
-    syncAdapterDuration(adapter, setDuration);
-    setCurrentTime(startTime);
-    if (!isRefreshingRef.current) {
-      // Enables Play from actual play-readiness, not just a known duration —
-      // a click before this resolves used to start the timeline with media,
-      // images or fonts still loading and never recover.
-      requestTimelineReady(safeContentDocument(iframeRef.current));
-    }
-    isRefreshingRef.current = false;
-    setIsPlaying(false);
-
-    hydrateTimelineFromPreview({
-      iframe: iframeRef.current,
-      adapter,
+  const initializeAdapter = useCallback(
+    (context?: number) => {
+      if (isCurrent && !isCurrent(context)) return true;
+      const adapter = getAdapter();
+      if (!adapter || adapter.getDuration() <= 0) return false;
+
+      adapter.pause();
+      const startTime = seekAdapterToRestorePoint(adapter, pendingSeekRef);
+      const commit = () => {
+        // Keep non-React listeners such as the capture link and time display in sync
+        // with the initial adapter seek on iframe load.
+        liveTime.notify(startTime);
+        syncAdapterDuration(adapter, setDuration);
+        setCurrentTime(startTime);
+        if (!isRefreshingRef.current) {
+          // Enables Play from actual play-readiness, not just a known duration —
+          // a click before this resolves used to start the timeline with media,
+          // images or fonts still loading and never recover.
+          requestTimelineReady(safeContentDocument(iframeRef.current));
+        }
+        isRefreshingRef.current = false;
+        setIsPlaying(false);
+
+        hydrateTimelineFromPreview({
+          iframe: iframeRef.current,
+          adapter,
+          processTimelineMessage,
+          enrichMissingCompositions,
+          applyPreviewAudioState,
+          attachIframeShortcutListeners,
+          syncTimelineElements,
+        });
+      };
+      onAdapterReady(iframeRef.current, context, commit);
+      return true;
+    },
+    [
+      getAdapter,
+      setDuration,
+      setCurrentTime,
+      requestTimelineReady,
+      setIsPlaying,
       processTimelineMessage,
       enrichMissingCompositions,
-      applyPreviewAudioState,
-      attachIframeShortcutListeners,
       syncTimelineElements,
-    });
-    return true;
-  }, [
-    getAdapter,
-    setDuration,
-    setCurrentTime,
-    requestTimelineReady,
-    setIsPlaying,
-    processTimelineMessage,
-    enrichMissingCompositions,
-    syncTimelineElements,
-    attachIframeShortcutListeners,
-    applyPreviewAudioState,
-    iframeRef,
-    isRefreshingRef,
-    pendingSeekRef,
-  ]);
-
-  const onIframeLoad = useCallback(() => {
-    applyPreviewAudioState();
-    if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+      attachIframeShortcutListeners,
+      applyPreviewAudioState,
+      onAdapterReady,
+      isCurrent,
+      iframeRef,
+      isRefreshingRef,
+      pendingSeekRef,
+    ],
+  );
 
-    // Fast path: adapter already available (in-place reloads, cached compositions)
-    if (initializeAdapter()) return;
+  // Drops the previous load's readiness listener so a superseded load cannot settle later.
+  const stopWaitingRef = useRef<(() => void) | null>(null);
 
-    // The runtime posts "state" or "timeline" messages once ready.
-    // Listen for those instead of polling.
-    const iframe = iframeRef.current;
-    let settled = false;
+  const onIframeLoad = useCallback(
+    (context?: number) => {
+      applyPreviewAudioState();
+      if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+      stopWaitingRef.current?.();
+      stopWaitingRef.current = null;
 
-    const trySettle = () => {
-      if (settled) return;
-      if (initializeAdapter()) {
-        settled = true;
-        window.removeEventListener("message", onMessage);
-        if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
-      }
-    };
+      // Fast path: adapter already available (in-place reloads, cached compositions)
+      if (initializeAdapter(context)) return;
 
-    const onMessage = (e: MessageEvent) => {
-      if (isPreviewReadinessMessage(e, iframe)) trySettle();
-    };
-    window.addEventListener("message", onMessage);
+      // The runtime posts "state" or "timeline" messages once ready.
+      // Listen for those instead of polling.
+      const iframe = iframeRef.current;
+      let settled = false;
 
-    // Safety net: if no message arrives within 5s, try one last time then give up.
-    probeIntervalRef.current = setTimeout(() => {
-      if (!settled) {
-        trySettle();
-      }
-      window.removeEventListener("message", onMessage);
-      // Never leave the preview stuck invisible if the runtime never settled
-      // (initializeAdapter reveals on success; this covers the give-up case).
-      revealIframe(iframeRef.current);
-    }, 5000) as unknown as ReturnType<typeof setInterval>;
-  }, [initializeAdapter, iframeRef, probeIntervalRef, applyPreviewAudioState]);
+      const trySettle = () => {
+        if (settled) return;
+        if (initializeAdapter(context)) {
+          settled = true;
+          window.removeEventListener("message", onMessage);
+          if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+        }
+      };
+
+      const onMessage = (e: MessageEvent) => {
+        if (isPreviewReadinessMessage(e, iframe)) trySettle();
+      };
+      window.addEventListener("message", onMessage);
+      stopWaitingRef.current = () => window.removeEventListener("message", onMessage);
+
+      // Safety net: if no message arrives within 5s, try one last time then give up.
+      probeIntervalRef.current = setTimeout(() => {
+        if (!settled) {
+          trySettle();
+        }
+        window.removeEventListener("message", onMessage);
+        if (!settled) onLoadGiveUp?.(context);
+        revealIframe(iframeRef.current);
+      }, 5000) as unknown as ReturnType<typeof setInterval>;
+    },
+    [initializeAdapter, iframeRef, probeIntervalRef, applyPreviewAudioState, onLoadGiveUp],
+  );
+
+  const cancelPendingLoad = useCallback(() => {
+    if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+    stopWaitingRef.current?.();
+    stopWaitingRef.current = null;
+  }, [probeIntervalRef]);
 
   // Stable refs so mount-effect closures always call the latest version
   const processTimelineMessageRef = { current: processTimelineMessage };
@@ -283,5 +353,6 @@ export function useTimelineSyncCallbacks({
     enrichMissingCompositionsRef,
     initializeAdapter,
     onIframeLoad,
+    cancelPendingLoad,
   };
 }

package/src/telemetry/events.test.ts

@@ -9,6 +9,7 @@ vi.mock("./client", () => ({
 
 const {
   trackStudioSessionStart,
+  trackPreviewFirstFrame,
   trackStudioRenderStart,
   trackStudioRazorSplit,
   trackStudioExpandedClipEdit,
@@ -34,6 +35,23 @@ describe("studio telemetry events", () => {
     expect(trackEvent).toHaveBeenCalledWith("studio_session_start", { has_project: false });
   });
 
+  it("trackPreviewFirstFrame emits timing, composition duration, and version", () => {
+    trackPreviewFirstFrame({
+      duration_ms: 842,
+      composition_seconds: 12.5,
+      clip_count: 8,
+      media_clip_count: 5,
+      studio_version: "0.8.56",
+    });
+    expect(trackEvent).toHaveBeenCalledWith("preview_first_frame", {
+      duration_ms: 842,
+      composition_seconds: 12.5,
+      clip_count: 8,
+      media_clip_count: 5,
+      studio_version: "0.8.56",
+    });
+  });
+
   it("trackStudioRenderStart emits 'studio_render_start' with all render opts", () => {
     trackStudioRenderStart({
       fps: 30,

package/src/telemetry/events.ts

@@ -11,6 +11,16 @@ export function trackStudioSessionStart(props: { has_project: boolean }): void {
   });
 }
 
+export function trackPreviewFirstFrame(props: {
+  duration_ms: number;
+  composition_seconds: number;
+  clip_count: number;
+  media_clip_count: number;
+  studio_version: string;
+}): void {
+  trackEvent("preview_first_frame", props);
+}
+
 export function trackStudioRenderStart(props: {
   fps: number;
   quality: string;

package/src/telemetry/system.test.ts

@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// The `studio_*` transport carries browser metadata built here, and this is its
+// only test. tab_id has a module test of its own, but nothing there fails if
+// this file stops attaching it — the two are separate facts.
+describe("browser system meta", () => {
+  // Both modules are imported AFTER resetModules so they share one tabId
+  // instance; a top-level import would be a different copy of the memo.
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  async function load() {
+    const [{ getBrowserSystemMeta }, tab] = await Promise.all([
+      import("./system"),
+      import("./tabId"),
+    ]);
+    return { getBrowserSystemMeta, resolveTabId: tab.resolveTabId };
+  }
+
+  it("carries the tab id, from the same source as the studio:* transport", async () => {
+    const { getBrowserSystemMeta, resolveTabId } = await load();
+    expect(getBrowserSystemMeta().tab_id).toBe(resolveTabId());
+  });
+
+  it("keeps the meta memoized, so one page reports one tab id", async () => {
+    const { getBrowserSystemMeta } = await load();
+    const first = getBrowserSystemMeta();
+    expect(getBrowserSystemMeta()).toBe(first);
+    expect(getBrowserSystemMeta().tab_id).toBe(first.tab_id);
+  });
+
+  it("has a tab id in the no-DOM fallback, not an empty string", async () => {
+    // The empty-meta branch is taken on SSR. An empty or missing tab_id would
+    // read in PostHog as "this event predates the property" rather than "this
+    // event has no page", which is the encoding mistake this property exists
+    // to avoid. Stubbing the globals is what actually reaches that branch —
+    // happy-dom otherwise satisfies the `typeof window` check every time.
+    vi.stubGlobal("navigator", undefined);
+    vi.stubGlobal("window", undefined);
+    const { getBrowserSystemMeta } = await load();
+    const meta = getBrowserSystemMeta();
+    expect(meta.user_agent).toBe("");
+    expect(typeof meta.tab_id).toBe("string");
+    expect(meta.tab_id.length).toBeGreaterThan(0);
+    vi.unstubAllGlobals();
+  });
+});

package/src/telemetry/system.ts

@@ -5,6 +5,7 @@
 // ---------------------------------------------------------------------------
 
 import { agentRuntimeProperty } from "./agentRuntime";
+import { tabIdProperty } from "./tabId";
 
 export interface BrowserSystemMeta {
   user_agent: string;
@@ -17,6 +18,8 @@ export interface BrowserSystemMeta {
   studio_version: string;
   /** Which coding agent is driving this Studio, or null when a person is. */
   agent_runtime: string;
+  /** One id per page load. distinct_id identifies a browser, not a page. */
+  tab_id: string;
 }
 
 const EMPTY_META: BrowserSystemMeta = {
@@ -29,6 +32,7 @@ const EMPTY_META: BrowserSystemMeta = {
   is_mobile: false,
   studio_version: "dev",
   agent_runtime: "none",
+  tab_id: "unknown",
 };
 
 let cached: BrowserSystemMeta | null = null;
@@ -54,6 +58,8 @@ export function getBrowserSystemMeta(): BrowserSystemMeta {
     // Same value the `studio:*` transport attaches, from the same accessor —
     // two families that disagreed here would split every agent breakdown.
     agent_runtime: agentRuntimeProperty(),
+    // Same shared module as the `studio:*` transport, for the same reason.
+    tab_id: tabIdProperty(),
   };
   return cached;
 }

package/src/telemetry/tabId.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { resetTabIdForTests, resolveTabId, tabIdProperty } from "./tabId";
+
+afterEach(() => {
+  resetTabIdForTests();
+});
+
+describe("tab id", () => {
+  it("is stable for the life of the page", () => {
+    // The whole value of the property: every event from one page load must
+    // carry the SAME id, or a burst still reads as several sources.
+    const first = resolveTabId();
+    expect(resolveTabId()).toBe(first);
+    expect(tabIdProperty()).toBe(first);
+  });
+
+  it("is not empty, since an empty value would read as an absent one", () => {
+    expect(resolveTabId().length).toBeGreaterThan(0);
+  });
+
+  it("mints a new id after a fresh page load", () => {
+    // resetTabIdForTests stands in for a reload: the memo is all that survives
+    // a page, so clearing it is exactly what a reload does.
+    const first = resolveTabId();
+    resetTabIdForTests();
+    expect(resolveTabId()).not.toBe(first);
+  });
+
+  it("never touches storage", () => {
+    // Deliberate: a stored id would drift into a tab-session id, silently
+    // changing what every query means. This asserts the intent directly rather
+    // than inferring it, so adding a read OR a write fails here.
+    const seen: string[] = [];
+    vi.stubGlobal("localStorage", {
+      getItem: (k: string) => (seen.push(`get:${k}`), null),
+      setItem: (k: string) => void seen.push(`set:${k}`),
+      removeItem: (k: string) => void seen.push(`remove:${k}`),
+    });
+    resolveTabId();
+    expect(seen).toEqual([]);
+    vi.unstubAllGlobals();
+  });
+});

package/src/telemetry/tabId.ts

@@ -0,0 +1,44 @@
+/**
+ * A per-page-load identifier, attached to every Studio event from BOTH
+ * transports (`studio:*` via utils/studioTelemetry.ts, `studio_*` via
+ * telemetry/system.ts).
+ *
+ * Why it exists: `distinct_id` identifies a browser, not a page. Several
+ * investigations have stalled on "two tabs or one tab switching?" — a burst of
+ * events alternating between two project hashes is indistinguishable from a
+ * user moving between projects, and `session_start` fires once per page LOAD
+ * (main.tsx), so counting it cannot tell them apart either. Nothing in the
+ * payload named the page. This does.
+ *
+ * Semantics, stated plainly because the name invites the wrong reading: one id
+ * per PAGE LOAD. A hard reload mints a new one. It is not "the same tab across
+ * reloads" — that is a different, harder question, and nobody has needed it yet.
+ *
+ * Deliberately not persisted. Storage would survive a reload and turn this into
+ * a tab-session id, silently changing what every query means; and a blocked or
+ * cleared storage would make the property intermittently absent, which reads as
+ * "old client" rather than "storage unavailable".
+ *
+ * Memoized like agentRuntime.ts and distinctId.ts: fixed for the life of the
+ * page, so a per-event caller does not pay for generation on every emit.
+ */
+
+import { generateId } from "../utils/generateId";
+
+let cached: string | null = null;
+
+/** The page's id. Generated once, on first read. */
+export function resolveTabId(): string {
+  if (cached === null) cached = generateId();
+  return cached;
+}
+
+/** The same value as a telemetry property, for the `studio_*` transport's meta. */
+export function tabIdProperty(): string {
+  return resolveTabId();
+}
+
+/** Test seam: the memo would otherwise leak between cases in one module load. */
+export function resetTabIdForTests(): void {
+  cached = null;
+}

package/src/utils/previewCompositionSize.ts

@@ -0,0 +1,26 @@
+export interface PreviewCompositionSize {
+  width: number;
+  height: number;
+}
+
+/** The root composition's authored size, read from the preview document itself. */
+// fallow-ignore-next-line complexity
+export function readPreviewCompositionSize(
+  iframe: HTMLIFrameElement | null,
+): PreviewCompositionSize | null {
+  try {
+    const doc = iframe?.contentDocument;
+    const root =
+      doc?.querySelector("[data-composition-id][data-width][data-height]") ??
+      doc?.querySelector("[data-width][data-height]");
+    if (!root) return null;
+    const width = Number.parseInt(root.getAttribute("data-width") ?? "", 10);
+    const height = Number.parseInt(root.getAttribute("data-height") ?? "", 10);
+    if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+      return null;
+    }
+    return { width, height };
+  } catch {
+    return null;
+  }
+}

package/src/utils/reloadDebug.ts

@@ -1,10 +1,8 @@
 // Preview full-reload diagnostics — grep [hf-reload]. Off by default; opt in per
 // session with `localStorage.setItem("hf-reload-debug", "1")` (then reload).
 //
-// A full reload blanks the stage for ~100-300ms, so any reload the user did not
-// ask for reads as a flash. These lines answer the only question that matters
-// when one appears: who asked for it, and why the write that triggered it was
-// not recognised as Studio's own.
+// A full reload no longer blanks the stage (see useShadowPreviewReload.ts). These lines answer
+// who asked for a reload and why the write was not recognised as Studio's own.
 import { makeStudioDebugLogger } from "./studioDebug";
 
 export const logReload = makeStudioDebugLogger("reload");

package/src/utils/sourcePatcher.ts

@@ -420,7 +420,7 @@ function findMatchingClosingTagIndex(html: string, tagName: string, contentStart
   return -1;
 }
 
-const HTML_BOOLEAN_ATTRIBUTES = new Set([
+export const HTML_BOOLEAN_ATTRIBUTES = new Set([
   "loop",
   "muted",
   "autoplay",

package/src/utils/studioTelemetry.test.ts

@@ -66,6 +66,20 @@ describe("studioTelemetry — shared opt-out and canary properties", () => {
     });
   });
 
+  // The property is useless if the transport does not attach it: the module
+  // has its own test, but nothing there fails if this line is deleted.
+  it("stamps every event with a tab id that is stable within the page", async () => {
+    trackStudioEvent("first");
+    trackStudioEvent("second");
+    const events = await sentEvents();
+    expect(events).toHaveLength(2);
+    const tabIds = events.map((e) => (e["properties"] as Record<string, unknown>)["tab_id"]);
+    expect(typeof tabIds[0]).toBe("string");
+    expect((tabIds[0] as string).length).toBeGreaterThan(0);
+    // Same page, same id — otherwise a burst still reads as several sources.
+    expect(tabIds[1]).toBe(tabIds[0]);
+  });
+
   it("lets an explicit property win over the canary mixin", async () => {
     trackStudioEvent("thing_happened", { "$feature/canary-test-one": "false" });
     const events = await sentEvents();

package/src/utils/studioTelemetry.ts

@@ -2,6 +2,7 @@ import { resolveStudioDistinctId } from "../telemetry/distinctId";
 import { browserTelemetryAllowed } from "../telemetry/policy";
 import { canaryEventProperties } from "../telemetry/canary";
 import { agentRuntimeProperty } from "../telemetry/agentRuntime";
+import { tabIdProperty } from "../telemetry/tabId";
 
 // PostHog public ingest key — write-only, safe to ship in the client bundle
 const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
@@ -48,6 +49,9 @@ function getSessionProperties(): EventProperties {
     // and a property that only some events carry cannot answer it — the
     // breakdown silently reads as though the agent never used the rest.
     agent_runtime: agentRuntimeProperty(),
+    // Which page load this came from — distinct_id identifies the browser, not
+    // the page, so two tabs are otherwise one indistinguishable stream.
+    tab_id: tabIdProperty(),
     screen_width: window.screen?.width,
     screen_height: window.screen?.height,
     viewport_width: window.innerWidth,