fix(studio,producer): post-merge regressions and open issues (#1643)

- fix gsapDragCommit.test.ts import for commitGsapPositionFromDrag
- add generateId() helper with insecure-context fallback (fixes #1637)
- enable STUDIO_KEYFRAMES_ENABLED by default
- prevent clock duration from shrinking during playback (fixes #1636)
- add maxRetries to rmSync cleanup calls to handle ENOTEMPTY race (fixes #1644)

packages/studio/src/components/editor/manualEditingAvailability.ts

@@ -73,7 +73,7 @@ export const STUDIO_COLOR_GRADING_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(

packages/studio/src/components/panels/SlideshowPanel.tsx

@@ -20,6 +20,7 @@ import type { SlideshowManifest, SlideHotspot } from "@hyperframes/core/slidesho
 import { usePlayerStore } from "../../player";
 import { useDomEditSelectionContext } from "../../contexts/DomEditContext";
 import { useFileManagerContext } from "../../contexts/FileManagerContext";
+import { generateId } from "../../utils/generateId";
 import {
   SectionHeader,
   SlideList,
@@ -325,7 +326,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
 
   const handleCreateSequence = useCallback(
     (label: string) => {
-      const id = `seq-${crypto.randomUUID()}`;
+      const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {});
     },
     [applyManifest],

packages/studio/src/components/panels/SlideshowSubPanels.tsx

@@ -7,6 +7,7 @@ import { useState, useCallback, useId } from "react";
 import type { SlideRef, SlideHotspot, SlideSequence } from "@hyperframes/core/slideshow";
 import type { DomEditSelection } from "../editor/domEditing";
 import type { SceneInfo } from "./slideshowPanelHelpers";
+import { generateId } from "../../utils/generateId";
 
 // ── Section header (accordion toggle) ────────────────────────────────────
 
@@ -425,7 +426,7 @@ export function HotspotTool({
   // fallow-ignore-next-line complexity
   const handleMakeHotspot = useCallback(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey) return;
-    const id = `hotspot-${elementKey}-${crypto.randomUUID()}`;
+    const id = `hotspot-${elementKey}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey;
     onAddHotspot(selectedSceneId, { id, label, target: targetSequenceId });
     setHotspotLabel("");

packages/studio/src/components/renders/useRenderQueue.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { trackStudioRenderStart } from "../../telemetry/events";
 import { getAnonymousId } from "../../telemetry/config";
+import { generateId } from "../../utils/generateId";
 
 export interface RenderJob {
   id: string;
@@ -131,7 +132,7 @@ export function useRenderQueue(projectId: string | null) {
         });
       } catch {
         const failedJob: RenderJob = {
-          id: crypto.randomUUID(),
+          id: generateId(),
           status: "failed",
           progress: 0,
           error: "Could not reach render server. Use `hyperframes render` from the CLI instead.",
@@ -143,7 +144,7 @@ export function useRenderQueue(projectId: string | null) {
       }
       if (!res.ok) {
         const failedJob: RenderJob = {
-          id: crypto.randomUUID(),
+          id: generateId(),
           status: "failed",
           progress: 0,
           error: `Server error (${res.status}). Check the terminal for details.`,