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/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("");