@hyperframes/studio 0.6.28 → 0.6.30

package/src/player/components/timelineTheme.ts

@@ -35,33 +35,13 @@ export interface TimelineTheme {
   clipRadius: string;
 }
 
-const TIMELINE_TEAL = "#3CE6AC";
-const TIMELINE_TEAL_LABEL = "#E9FFF6";
-const TIMELINE_TEAL_ICON_BACKGROUND = "rgba(60,230,172,0.12)";
-
-function createTrackStyle(): TimelineTrackStyle {
-  return {
-    clip: TIMELINE_TEAL,
-    accent: TIMELINE_TEAL,
-    label: TIMELINE_TEAL_LABEL,
-    iconBackground: TIMELINE_TEAL_ICON_BACKGROUND,
-  };
-}
-
-const TRACK_STYLES: Record<string, TimelineTrackStyle> = {
-  video: createTrackStyle(),
-  audio: createTrackStyle(),
-  img: createTrackStyle(),
-  div: createTrackStyle(),
-  span: createTrackStyle(),
-  p: createTrackStyle(),
-  h1: createTrackStyle(),
-  section: createTrackStyle(),
-  sfx: createTrackStyle(),
+const TRACK_STYLE: TimelineTrackStyle = {
+  clip: "#1c2028",
+  accent: "#3CE6AC",
+  label: "#dde1e8",
+  iconBackground: "rgba(255,255,255,0.06)",
 };
 
-const DEFAULT_TRACK_STYLE: TimelineTrackStyle = createTrackStyle();
-
 export const defaultTimelineTheme: TimelineTheme = {
   shellBackground: "#0A0A0B",
   shellBorder: "rgba(255,255,255,0.05)",
@@ -75,33 +55,23 @@ export const defaultTimelineTheme: TimelineTheme = {
   tickText: "rgba(131,145,168,0.92)",
   tickMajor: "rgba(255,255,255,0.13)",
   tickMinor: "rgba(255,255,255,0.08)",
-  clipBackground: "linear-gradient(180deg, rgba(20,25,34,0.98), rgba(14,18,27,0.98))",
-  clipBackgroundActive: "linear-gradient(180deg, rgba(24,30,40,0.99), rgba(15,20,29,0.99))",
-  clipBorder: "rgba(255,255,255,0.07)",
-  clipBorderHover: "rgba(255,255,255,0.11)",
-  clipBorderActive: "rgba(255,255,255,0.14)",
-  clipShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.18)",
-  clipShadowHover: "inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 20px rgba(0,0,0,0.2)",
-  clipShadowActive:
-    "inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.035)",
-  clipShadowDragging:
-    "inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.34), 0 8px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04)",
-  handleColor: "rgba(255,255,255,0.11)",
+  clipBackground: "#141922",
+  clipBackgroundActive: "#181e28",
+  clipBorder: "rgba(255,255,255,0.10)",
+  clipBorderHover: "rgba(255,255,255,0.18)",
+  clipBorderActive: "rgba(255,255,255,0.24)",
+  clipShadow: "none",
+  clipShadowHover: "0 2px 8px rgba(0,0,0,0.2)",
+  clipShadowActive: "0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04)",
+  clipShadowDragging: "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)",
+  handleColor: "rgba(255,255,255,0.2)",
   panelResizeSeam: "rgba(255,255,255,0.12)",
   panelResizeActive: "rgba(255,255,255,0.24)",
-  clipRadius: "11px 15px 13px 9px / 10px 14px 12px 10px",
+  clipRadius: "6px",
 };
 
-export function getTimelineTrackStyle(tag: string): TimelineTrackStyle {
-  const normalized = tag.toLowerCase();
-  if (
-    normalized.startsWith("h") &&
-    normalized.length === 2 &&
-    "123456".includes(normalized[1] ?? "")
-  ) {
-    return TRACK_STYLES.h1;
-  }
-  return TRACK_STYLES[normalized] ?? DEFAULT_TRACK_STYLE;
+export function getTimelineTrackStyle(_tag: string): TimelineTrackStyle {
+  return TRACK_STYLE;
 }
 
 export function getClipHandleOpacity({

package/src/player/hooks/usePlaybackKeyboard.test.ts

@@ -172,3 +172,58 @@ describe("usePlaybackKeyboard — keyboard layout independence (#834)", () => {
     expect(spies.play).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
+  it("M toggles audioMuted", () => {
+    const { dispatch } = setupHook();
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+    expect(usePlayerStore.getState().audioMuted).toBe(true);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+  });
+
+  it("M does NOT toggle audioMuted above 1x playback (matches button gating)", () => {
+    const { dispatch } = setupHook();
+    usePlayerStore.setState({ playbackRate: 2, audioMuted: false });
+
+    act(() => {
+      dispatch(keydown({ code: "KeyM", key: "m" }));
+    });
+
+    expect(usePlayerStore.getState().audioMuted).toBe(false);
+  });
+
+  it("Shift+L toggles loopEnabled without starting forward shuttle", () => {
+    const { dispatch, spies } = setupHook();
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "L", shiftKey: true }));
+    });
+    expect(usePlayerStore.getState().loopEnabled).toBe(true);
+    expect(spies.play).not.toHaveBeenCalled();
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "L", shiftKey: true }));
+    });
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+  });
+
+  it("Plain L still starts forward shuttle (regression guard)", () => {
+    const { dispatch, spies } = setupHook();
+
+    act(() => {
+      dispatch(keydown({ code: "KeyL", key: "l" }));
+    });
+
+    expect(spies.play).toHaveBeenCalledTimes(1);
+    expect(usePlayerStore.getState().loopEnabled).toBe(false);
+  });
+});

package/src/player/hooks/usePlaybackKeyboard.ts

@@ -108,6 +108,21 @@ export function usePlaybackKeyboard({
         return;
       }
       if (e.repeat) return;
+      if (key === "m") {
+        e.preventDefault();
+        const state = usePlayerStore.getState();
+        // Audio is force-muted above 1x playback — match the mute button's gating.
+        if (state.playbackRate <= 1) {
+          state.setAudioMuted(!state.audioMuted);
+        }
+        return;
+      }
+      if (key === "l" && e.shiftKey) {
+        e.preventDefault();
+        const state = usePlayerStore.getState();
+        state.setLoopEnabled(!state.loopEnabled);
+        return;
+      }
       if (key === "k") {
         e.preventDefault();
         pause();

package/src/player/lib/mediaProbe.ts

@@ -1,5 +1,3 @@
-import { Input, UrlSource, ALL_FORMATS } from "mediabunny";
-
 export interface MediaProbeResult {
   duration: number;
   width?: number;
@@ -11,6 +9,20 @@ export interface MediaProbeResult {
 const cache = new Map<string, MediaProbeResult>();
 const inflight = new Map<string, Promise<MediaProbeResult | null>>();
 
+let mediabunnyModule: typeof import("mediabunny") | null | false = null;
+
+async function loadMediabunny() {
+  if (mediabunnyModule === false) return null;
+  if (mediabunnyModule) return mediabunnyModule;
+  try {
+    mediabunnyModule = await import("mediabunny");
+    return mediabunnyModule;
+  } catch {
+    mediabunnyModule = false;
+    return null;
+  }
+}
+
 function normalizeUrl(url: string): string {
   try {
     return new URL(url, window.location.href).href;
@@ -20,9 +32,12 @@ function normalizeUrl(url: string): string {
 }
 
 async function probeOne(url: string): Promise<MediaProbeResult | null> {
-  const input = new Input({
-    source: new UrlSource(url),
-    formats: ALL_FORMATS,
+  const mb = await loadMediabunny();
+  if (!mb) return null;
+
+  const input = new mb.Input({
+    source: new mb.UrlSource(url),
+    formats: mb.ALL_FORMATS,
   });
   try {
     const duration = await input.getDurationFromMetadata();

package/src/player/lib/timelineDOM.ts

@@ -280,6 +280,10 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       applyMediaMetadataFromElement(entry, el);
     }
 
+    if (el.hasAttribute("data-timeline-locked")) {
+      entry.timelineLocked = true;
+    }
+
     // Sub-compositions
     const compSrc =
       el.getAttribute("data-composition-src") || el.getAttribute("data-composition-file");

package/src/player/store/playerStore.ts

@@ -26,6 +26,8 @@ export interface TimelineElement {
   compositionSrc?: string;
   /** Whether this row came from authored clip timing or Studio's full-duration layer fallback. */
   timingSource?: "authored" | "implicit";
+  /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
+  timelineLocked?: boolean;
 }
 
 export type ZoomMode = "fit" | "manual";

package/src/styles/studio.css

@@ -152,6 +152,15 @@ body {
   background: rgba(255, 255, 255, 0.1);
 }
 
+@keyframes hf-thumb-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .hf-loader-progress__fill {
   width: 100%;
   height: 100%;

package/src/telemetry/client.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+
+// `shouldTrack()` reads `POSTHOG_API_KEY` from module-level const that's
+// evaluated at module load time, so changing `import.meta.env` after import
+// has no effect on the key. Each test resets module cache and re-imports.
+
+const OPT_OUT_KEY = "hyperframes-studio:telemetryDisabled";
+
+function setKey(value: string | undefined): void {
+  if (value === undefined) {
+    delete (import.meta.env as Record<string, unknown>).VITE_HYPERFRAMES_POSTHOG_KEY;
+  } else {
+    (import.meta.env as Record<string, unknown>).VITE_HYPERFRAMES_POSTHOG_KEY = value;
+  }
+}
+
+function setNoTelemetry(value: string | undefined): void {
+  if (value === undefined) {
+    delete (import.meta.env as Record<string, unknown>).VITE_HYPERFRAMES_NO_TELEMETRY;
+  } else {
+    (import.meta.env as Record<string, unknown>).VITE_HYPERFRAMES_NO_TELEMETRY = value;
+  }
+}
+
+function setDev(value: boolean): void {
+  (import.meta.env as { DEV: boolean }).DEV = value;
+}
+
+async function loadShouldTrack(): Promise<() => boolean> {
+  vi.resetModules();
+  const mod = await import("./client");
+  return mod.shouldTrack;
+}
+
+describe("studio client shouldTrack", () => {
+  beforeEach(() => {
+    setDev(false);
+    setKey("phc_test_key");
+    setNoTelemetry(undefined);
+    localStorage.clear();
+    vi.unstubAllGlobals();
+  });
+
+  it("returns true when key is configured, not in dev mode, and no opt-outs", async () => {
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(true);
+  });
+
+  it("returns false when API key does not start with phc_", async () => {
+    setKey("not_a_real_key");
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false when API key is empty string", async () => {
+    setKey("");
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false when user has opted out via localStorage", async () => {
+    localStorage.setItem(OPT_OUT_KEY, "1");
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false when navigator.doNotTrack is '1'", async () => {
+    vi.stubGlobal("navigator", { ...navigator, doNotTrack: "1" });
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false when VITE_HYPERFRAMES_NO_TELEMETRY=1 at build time", async () => {
+    setNoTelemetry("1");
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false when VITE_HYPERFRAMES_NO_TELEMETRY='true'", async () => {
+    setNoTelemetry("true");
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("returns false in vite dev mode", async () => {
+    setDev(true);
+    const shouldTrack = await loadShouldTrack();
+    expect(shouldTrack()).toBe(false);
+  });
+
+  it("memoizes its decision after the first call", async () => {
+    const shouldTrack = await loadShouldTrack();
+    const first = shouldTrack();
+    // Flip an underlying input — memoized return must not change.
+    localStorage.setItem(OPT_OUT_KEY, "1");
+    expect(shouldTrack()).toBe(first);
+  });
+});

package/src/telemetry/client.ts

@@ -0,0 +1,145 @@
+// ---------------------------------------------------------------------------
+// Lightweight PostHog client for the studio browser bundle.
+// Mirrors `packages/cli/src/telemetry/client.ts` but uses fetch/sendBeacon.
+// All calls are fire-and-forget; telemetry must never break the studio UI.
+// ---------------------------------------------------------------------------
+
+import { getAnonymousId, hasShownNotice, isOptedOut, markNoticeShown } from "./config";
+import { getBrowserSystemMeta } from "./system";
+
+// HeyGen's PostHog project key — write-only, safe to embed in client code.
+// OSS builds can override via `VITE_HYPERFRAMES_POSTHOG_KEY` at build time,
+// or set it to an empty string to disable telemetry entirely.
+const POSTHOG_API_KEY =
+  (import.meta.env.VITE_HYPERFRAMES_POSTHOG_KEY as string | undefined) ??
+  "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
+const POSTHOG_HOST =
+  (import.meta.env.VITE_HYPERFRAMES_POSTHOG_HOST as string | undefined) ??
+  "https://us.i.posthog.com";
+const FLUSH_INTERVAL_MS = 1_000;
+
+type EventProperties = Record<string, string | number | boolean | undefined>;
+
+interface QueuedEvent {
+  event: string;
+  properties: EventProperties;
+  timestamp: string;
+}
+
+let eventQueue: QueuedEvent[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+let telemetryEnabled: boolean | null = null;
+
+function isDoNotTrackOn(): boolean {
+  return typeof navigator !== "undefined" && navigator.doNotTrack === "1";
+}
+
+function isApiKeyConfigured(): boolean {
+  return POSTHOG_API_KEY.startsWith("phc_");
+}
+
+// VITE_HYPERFRAMES_NO_TELEMETRY mirrors the CLI's HYPERFRAMES_NO_TELEMETRY=1
+// opt-out so HeyGen's own dev/CI builds can suppress telemetry from the studio
+// bundle the same way. Vite injects it at build time. Accepts "1" or "true".
+function isBuildTimeOptOut(): boolean {
+  const v = import.meta.env.VITE_HYPERFRAMES_NO_TELEMETRY as string | undefined;
+  return v === "1" || v === "true";
+}
+
+// `import.meta.env.DEV` is true under `vite dev` / `vite preview`. Auto-suppress
+// so developers running `hyperframes preview` don't pollute production telemetry.
+function isViteDevMode(): boolean {
+  return import.meta.env.DEV === true;
+}
+
+export function shouldTrack(): boolean {
+  if (telemetryEnabled !== null) return telemetryEnabled;
+  telemetryEnabled =
+    isApiKeyConfigured() &&
+    !isBuildTimeOptOut() &&
+    !isViteDevMode() &&
+    !isOptedOut() &&
+    !isDoNotTrackOn();
+  return telemetryEnabled;
+}
+
+export function trackEvent(event: string, properties: EventProperties = {}): void {
+  if (!shouldTrack()) return;
+
+  const sys = getBrowserSystemMeta();
+  eventQueue.push({
+    event,
+    properties: { ...properties, ...sys },
+    timestamp: new Date().toISOString(),
+  });
+
+  if (flushTimer === null) {
+    flushTimer = setTimeout(() => {
+      flushTimer = null;
+      flush();
+    }, FLUSH_INTERVAL_MS);
+  }
+  showNoticeOnce();
+}
+
+// Fire-and-forget: the queue is cleared before `send()` resolves, so a network
+// failure drops the batch rather than retrying. Matches the CLI client's
+// design. Do NOT add retry logic here — a retry without cross-batch dedup
+// would risk double-counting events on transient PostHog 5xx responses.
+function flush(): void {
+  if (eventQueue.length === 0) return;
+  const distinctId = getAnonymousId();
+  const batch = eventQueue.map((e) => ({
+    event: e.event,
+    // $ip: null tells PostHog to not record the request IP.
+    properties: { ...e.properties, $ip: null },
+    distinct_id: distinctId,
+    timestamp: e.timestamp,
+  }));
+  eventQueue = [];
+  send(`${POSTHOG_HOST}/batch/`, JSON.stringify({ api_key: POSTHOG_API_KEY, batch }));
+}
+
+function send(url: string, payload: string): void {
+  // Prefer fetch with keepalive (survives page navigation). sendBeacon is a
+  // fallback for older runtimes where fetch isn't available.
+  try {
+    void fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: payload,
+      keepalive: true,
+    }).catch(() => {
+      /* silent */
+    });
+    return;
+  } catch {
+    /* fall through */
+  }
+  try {
+    navigator.sendBeacon(url, new Blob([payload], { type: "application/json" }));
+  } catch {
+    /* silent */
+  }
+}
+
+function showNoticeOnce(): void {
+  if (hasShownNotice()) return;
+  markNoticeShown();
+  // eslint-disable-next-line no-console
+  console.info(
+    "%c[HyperFrames]%c Anonymous studio usage analytics enabled. " +
+      "Disable: localStorage.setItem('hyperframes-studio:telemetryDisabled','1') (then reload).",
+    "color:#7c3aed;font-weight:bold",
+    "color:inherit",
+  );
+}
+
+// Flush queued events when the tab is being hidden or closed so tail events
+// (e.g. a render_start fired moments before the user navigates away) aren't lost.
+if (typeof window !== "undefined") {
+  window.addEventListener("pagehide", () => flush(), { capture: true });
+  window.addEventListener("visibilitychange", () => {
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") flush();
+  });
+}

package/src/telemetry/config.ts

@@ -0,0 +1,78 @@
+// ---------------------------------------------------------------------------
+// LocalStorage-backed config for studio telemetry.
+// Anonymous ID + opt-out flag are stored per-browser-profile.
+// Users opt out via DevTools:
+//   localStorage.setItem('hyperframes-studio:telemetryDisabled','1')
+// ---------------------------------------------------------------------------
+
+const ANON_ID_KEY = "hyperframes-studio:anonymousId";
+const OPT_OUT_KEY = "hyperframes-studio:telemetryDisabled";
+const NOTICE_KEY = "hyperframes-studio:telemetryNoticeShown";
+
+function safeLocalStorage(): Storage | null {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function newAnonymousId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return `anon-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function getAnonymousId(): string {
+  const ls = safeLocalStorage();
+  if (!ls) return "anonymous";
+  const existing = ls.getItem(ANON_ID_KEY);
+  if (existing) return existing;
+  const id = newAnonymousId();
+  try {
+    ls.setItem(ANON_ID_KEY, id);
+  } catch {
+    /* private browsing / quota — return the in-memory ID for this session */
+  }
+  return id;
+}
+
+export function isOptedOut(): boolean {
+  return safeLocalStorage()?.getItem(OPT_OUT_KEY) === "1";
+}
+
+export function hasShownNotice(): boolean {
+  return safeLocalStorage()?.getItem(NOTICE_KEY) === "1";
+}
+
+export function markNoticeShown(): void {
+  try {
+    safeLocalStorage()?.setItem(NOTICE_KEY, "1");
+  } catch {
+    /* ignore */
+  }
+}
+
+// Session-scoped (cleared when the tab closes) so HMR remounts and
+// route-level remounts within one tab don't refire `studio_session_start`.
+// Uses sessionStorage directly because the dedupe is per-tab, not per-browser.
+const SESSION_FIRED_KEY = "hyperframes-studio:sessionStartFired";
+
+function safeSessionStorage(): Storage | null {
+  try {
+    return typeof sessionStorage === "undefined" ? null : sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function hasFiredSessionStart(): boolean {
+  return safeSessionStorage()?.getItem(SESSION_FIRED_KEY) === "1";
+}
+
+export function markSessionStartFired(): void {
+  try {
+    safeSessionStorage()?.setItem(SESSION_FIRED_KEY, "1");
+  } catch {
+    /* ignore */
+  }
+}

package/src/telemetry/events.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+
+// Mock client.trackEvent so we can assert event names and payloads without
+// firing network requests or relying on memoized shouldTrack() state.
+const trackEvent = vi.fn();
+vi.mock("./client", () => ({
+  trackEvent: (...args: unknown[]) => trackEvent(...args),
+}));
+
+const { trackStudioSessionStart, trackStudioRenderStart } = await import("./events");
+
+describe("studio telemetry events", () => {
+  beforeEach(() => {
+    trackEvent.mockClear();
+  });
+
+  it("trackStudioSessionStart emits 'studio_session_start' with has_project", () => {
+    trackStudioSessionStart({ has_project: true });
+    expect(trackEvent).toHaveBeenCalledOnce();
+    expect(trackEvent).toHaveBeenCalledWith("studio_session_start", { has_project: true });
+  });
+
+  it("trackStudioSessionStart preserves false for has_project (scratch open)", () => {
+    trackStudioSessionStart({ has_project: false });
+    expect(trackEvent).toHaveBeenCalledWith("studio_session_start", { has_project: false });
+  });
+
+  it("trackStudioRenderStart emits 'studio_render_start' with all render opts", () => {
+    trackStudioRenderStart({
+      fps: 30,
+      quality: "standard",
+      format: "mp4",
+      resolution: "landscape",
+      composition: "intro.html",
+    });
+    expect(trackEvent).toHaveBeenCalledOnce();
+    expect(trackEvent).toHaveBeenCalledWith("studio_render_start", {
+      fps: 30,
+      quality: "standard",
+      format: "mp4",
+      resolution: "landscape",
+      composition: "intro.html",
+    });
+  });
+
+  it("trackStudioRenderStart leaves optional fields undefined when omitted", () => {
+    trackStudioRenderStart({ fps: 60, quality: "high", format: "webm" });
+    const payload = trackEvent.mock.calls[0][1];
+    expect(payload).toEqual({
+      fps: 60,
+      quality: "high",
+      format: "webm",
+      resolution: undefined,
+      composition: undefined,
+    });
+  });
+});

package/src/telemetry/events.ts

@@ -0,0 +1,27 @@
+import { trackEvent } from "./client";
+
+// Studio frontend events. The corresponding `render_complete` / `render_error`
+// events are emitted server-side by `packages/cli/src/server/studioServer.ts`
+// with `source: "studio"` — keeping rich perf data on a single unified event.
+
+export function trackStudioSessionStart(props: { has_project: boolean }): void {
+  trackEvent("studio_session_start", {
+    has_project: props.has_project,
+  });
+}
+
+export function trackStudioRenderStart(props: {
+  fps: number;
+  quality: string;
+  format: string;
+  resolution?: string;
+  composition?: string;
+}): void {
+  trackEvent("studio_render_start", {
+    fps: props.fps,
+    quality: props.quality,
+    format: props.format,
+    resolution: props.resolution,
+    composition: props.composition,
+  });
+}