npm - @hyperframes/studio - Versions diffs - 0.6.97 → 0.6.98 - Mend

@hyperframes/studio 0.6.97 → 0.6.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/dist/assets/hyperframes-player-DgsMQSvV.js +418 -0
package/dist/assets/index-B62bDCQv.css +1 -0
package/dist/assets/index-Ce3pBm_I.js +252 -0
package/dist/assets/{index-HveJ0MuV.js → index-D-ET9M0b.js} +1 -1
package/dist/assets/index-D-bS9Dxx.js +1 -0
package/dist/index.html +2 -2
package/package.json +7 -5
package/src/App.tsx +182 -177
package/src/captions/store.ts +11 -11
package/src/components/StudioHeader.tsx +4 -4
package/src/components/StudioLeftSidebar.tsx +2 -2
package/src/components/StudioPreviewArea.tsx +225 -183
package/src/components/StudioRightPanel.tsx +3 -3
package/src/components/TimelineToolbar.tsx +25 -0
package/src/components/editor/DomEditOverlay.tsx +2 -5
package/src/components/editor/EaseCurveSection.tsx +2 -3
package/src/components/editor/GestureTrailOverlay.tsx +4 -3
package/src/components/editor/LayersPanel.tsx +3 -9
package/src/components/editor/PropertyPanel.tsx +20 -61
package/src/components/editor/colorValue.ts +3 -1
package/src/components/editor/domEditOverlayGestures.ts +54 -1
package/src/components/editor/domEditOverlayStartGesture.ts +5 -2
package/src/components/editor/gradientValue.ts +3 -3
package/src/components/editor/keyframeMove.test.ts +101 -0
package/src/components/editor/keyframeMove.ts +151 -0
package/src/components/editor/manualEditsDom.ts +0 -12
package/src/components/editor/propertyPanelHelpers.ts +10 -38
package/src/components/editor/propertyPanelMediaSection.tsx +1 -5
package/src/components/editor/propertyPanelTimingSection.tsx +1 -6
package/src/components/editor/propertyPanelTransformCommit.ts +129 -0
package/src/components/editor/studioMotionOps.test.ts +1 -1
package/src/components/editor/studioMotionOps.ts +2 -1
package/src/components/editor/useDomEditOverlayGestures.ts +1 -46
package/src/components/nle/NLELayout.tsx +1 -24
package/src/components/sidebar/BlocksTab.tsx +2 -2
package/src/contexts/DomEditContext.tsx +134 -31
package/src/contexts/StudioContext.tsx +90 -40
package/src/contexts/TimelineEditContext.tsx +47 -0
package/src/hooks/domEditCommitTypes.ts +14 -0
package/src/hooks/gsapDragCommit.ts +9 -24
package/src/hooks/gsapKeyframeCacheHelpers.ts +2 -1
package/src/hooks/gsapKeyframeCommit.ts +5 -15
package/src/hooks/gsapRuntimeBridge.ts +18 -52
package/src/hooks/gsapRuntimeKeyframes.ts +8 -57
package/src/hooks/gsapRuntimeReaders.ts +19 -26
package/src/hooks/gsapScriptCommitHelpers.ts +1 -11
package/src/hooks/gsapScriptCommitTypes.ts +58 -0
package/src/hooks/gsapShared.ts +157 -0
package/src/hooks/timelineEditingHelpers.ts +63 -2
package/src/hooks/useAnimatedPropertyCommit.ts +3 -25
package/src/hooks/useAppHotkeys.ts +299 -377
package/src/hooks/useConsoleErrorCapture.ts +33 -5
package/src/hooks/useDomEditCommits.ts +35 -293
package/src/hooks/useDomEditPositionPatchCommit.ts +1 -1
package/src/hooks/useDomEditSession.ts +78 -249
package/src/hooks/useDomEditTextCommits.ts +1 -1
package/src/hooks/useDomEditWiring.ts +255 -0
package/src/hooks/useDomGeometryCommits.ts +181 -0
package/src/hooks/useDomSelection.ts +10 -27
package/src/hooks/useEditorSave.ts +82 -0
package/src/hooks/useElementLifecycleOps.ts +177 -0
package/src/hooks/useEnableKeyframes.ts +10 -15
package/src/hooks/useFileManager.ts +32 -114
package/src/hooks/useFileTree.ts +80 -0
package/src/hooks/useGestureCommit.ts +7 -5
package/src/hooks/useGestureRecording.ts +1 -1
package/src/hooks/useGsapAnimationOps.ts +122 -0
package/src/hooks/useGsapArcPathOps.ts +61 -0
package/src/hooks/useGsapAwareEditing.ts +242 -0
package/src/hooks/useGsapKeyframeOps.ts +167 -0
package/src/hooks/useGsapPropertyDebounce.ts +135 -0
package/src/hooks/useGsapScriptCommits.ts +58 -570
package/src/hooks/useGsapSelectionHandlers.ts +22 -9
package/src/hooks/useGsapTweenCache.ts +35 -29
package/src/hooks/useLintModal.ts +7 -0
package/src/hooks/useMusicBeatAnalysis.ts +152 -0
package/src/hooks/useRazorSplit.ts +1 -1
package/src/hooks/useRenderClipContent.ts +46 -21
package/src/hooks/useTimelineEditing.ts +48 -4
package/src/player/components/AudioWaveform.tsx +29 -4
package/src/player/components/BeatStrip.tsx +166 -0
package/src/player/components/Timeline.tsx +39 -18
package/src/player/components/TimelineCanvas.tsx +52 -12
package/src/player/components/TimelineClipDiamonds.tsx +130 -20
package/src/player/components/TimelinePropertyRows.tsx +8 -2
package/src/player/components/TimelineRuler.tsx +36 -2
package/src/player/components/timelineEditing.ts +30 -5
package/src/player/components/useTimelineClipDrag.ts +155 -4
package/src/player/components/useTimelinePlayhead.ts +30 -1
package/src/player/hooks/useTimelinePlayer.ts +47 -45
package/src/player/lib/mediaProbe.ts +46 -3
package/src/player/lib/playbackScrub.ts +16 -0
package/src/player/lib/timelineDOM.ts +10 -2
package/src/player/lib/timelineIframeHelpers.ts +89 -0
package/src/player/store/playerStore.ts +92 -33
package/src/utils/beatEditActions.ts +109 -0
package/src/utils/beatEditing.ts +136 -0
package/src/utils/clipboardPayload.ts +3 -2
package/src/utils/compositionPatterns.ts +2 -0
package/src/utils/keyframeSelection.test.ts +45 -0
package/src/utils/keyframeSelection.ts +29 -0
package/src/utils/rounding.ts +9 -0
package/src/utils/studioHelpers.ts +5 -2
package/src/utils/studioUrlState.ts +2 -1
package/src/utils/timelineAssetDrop.ts +6 -5
package/src/utils/timelineInspector.ts +15 -100
package/dist/assets/hyperframes-player-Daj5djxa.js +0 -418
package/dist/assets/index-B0twsRu0.css +0 -1
package/dist/assets/index-Cfye9xzo.js +0 -251
package/src/components/editor/DopesheetStrip.tsx +0 -141
package/src/components/editor/StaggerControls.tsx +0 -61
package/src/components/editor/TimelineLayerPanel.test.ts +0 -42
package/src/components/editor/TimelineLayerPanel.tsx +0 -15
package/src/components/nle/TimelineEditorNotice.tsx +0 -133
package/src/hooks/gsapRuntimePreview.ts +0 -19
package/src/player/components/timelineUtils.ts +0 -211
package/src/utils/audioBeatDetection.ts +0 -58
package/src/utils/keyframeSnapping.test.ts +0 -74
package/src/utils/keyframeSnapping.ts +0 -63
package/src/utils/timelineInspector.test.ts +0 -79

package/dist/assets/{index-HveJ0MuV.js → index-D-ET9M0b.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-Cfye9xzo.js";/*!
+import{n as Qi}from"./index-Ce3pBm_I.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/assets/index-D-bS9Dxx.js ADDED Viewed

@@ -0,0 +1 @@

+ import{g as P}from"./index-Ce3pBm_I.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-Cfye9xzo.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B0twsRu0.css">
+    <script type="module" crossorigin src="/assets/index-Ce3pBm_I.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B62bDCQv.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.97",
+  "version": "0.6.98",
   "description": "",
   "repository": {
     "type": "git",
@@ -16,7 +16,8 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./tailwind-preset": "./src/styles/tailwind-preset.ts"
+    "./tailwind-preset": "./src/styles/tailwind-preset.ts",
+    "./package.json": "./package.json"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
@@ -30,9 +31,10 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "6.40.0",
     "@phosphor-icons/react": "^2.1.10",
+    "bpm-detective": "^2.0.5",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.97",
-    "@hyperframes/player": "0.6.97"
+    "@hyperframes/core": "0.6.98",
+    "@hyperframes/player": "0.6.98"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -46,7 +48,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.97"
+    "@hyperframes/producer": "0.6.98"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { useState, useCallback, useRef, useMemo, useEffect, useLayoutEffect } from "react";
 import type { LeftSidebarHandle, SidebarTab } from "./components/sidebar/LeftSidebar";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
 import { usePlayerStore } from "./player";
@@ -17,6 +17,7 @@ import { useBlockHandlers } from "./hooks/useBlockHandlers";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
 import { useClipboard } from "./hooks/useClipboard";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "./utils/studioUiPreferences";
+import { selectedKeyframePercentagesForElement } from "./utils/keyframeSelection";
 import { useCaptionDetection } from "./hooks/useCaptionDetection";
 import { useRenderClipContent } from "./hooks/useRenderClipContent";
 import { useConsoleErrorCapture } from "./hooks/useConsoleErrorCapture";
@@ -37,13 +38,12 @@ import { StudioGlobalDragOverlay } from "./components/StudioGlobalDragOverlay";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
 import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
 import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
 import { StudioPreviewArea } from "./components/StudioPreviewArea";
 import { StudioRightPanel } from "./components/StudioRightPanel";
 import { TimelineToolbar } from "./components/TimelineToolbar";
-import { StudioProvider } from "./contexts/StudioContext";
+import { StudioPlaybackProvider, StudioShellProvider } from "./contexts/StudioContext";
 import { PanelLayoutProvider } from "./contexts/PanelLayoutContext";
 import { FileManagerProvider } from "./contexts/FileManagerContext";
 import { DomEditProvider } from "./contexts/DomEditContext";
@@ -57,15 +57,13 @@ import {
 import { trackStudioSessionStart } from "./telemetry/events";
 import { hasFiredSessionStart, markSessionStartFired } from "./telemetry/config";
+type CanvasRect = { left: number; top: number; width: number; height: number };
 // fallow-ignore-next-line complexity
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
-  // Fire once per browser tab session — sessionStorage-backed so HMR
-  // remounts, route changes, and any future StudioApp remount within the
-  // same tab don't refire `studio_session_start`. `has_project` lets us
-  // tell scratch-open from project-context-open.
+  // sessionStorage-backed: fires once per tab, survives HMR remounts
   useEffect(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
@@ -83,7 +81,6 @@ export function StudioApp() {
   const [refreshKey, setRefreshKey] = useState(0);
   const [, setPreviewDocumentVersion] = useState(0);
   const [blockPreview, setBlockPreview] = useState<BlockPreviewInfo | null>(null);
   const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
   const activeCompPathRef = useRef(activeCompPath);
   activeCompPathRef.current = activeCompPath;
@@ -107,12 +104,22 @@ export function StudioApp() {
         : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
+  const refreshTimersRef = useRef<number[]>([]);
   const refreshPreviewDocumentVersion = useCallback(() => {
+    for (const id of refreshTimersRef.current) clearTimeout(id);
+    refreshTimersRef.current = [];
     setPreviewDocumentVersion((v) => v + 1);
-    window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 80);
-    window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300);
+    refreshTimersRef.current.push(
+      window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 80),
+      window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300),
+    );
   }, []);
+  useEffect(
+    () => () => {
+      for (const id of refreshTimersRef.current) clearTimeout(id);
+    },
+    [],
+  );
   const [timelineVisible, setTimelineVisible] = useState(
     () =>
       initialUrlStateRef.current.timelineVisible ??
@@ -137,7 +144,6 @@ export function StudioApp() {
   const reloadPreview = useCallback(() => {
     setRefreshKey((k) => k + 1);
   }, []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -145,11 +151,9 @@ export function StudioApp() {
     domEditSaveTimestampRef,
     setRefreshKey,
   });
   useEffect(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
       initialUrlStateRef.current.activeCompPath,
       fileManager.fileTree,
@@ -157,7 +161,6 @@ export function StudioApp() {
     setActiveCompPath((current) => (current === nextCompPath ? current : nextCompPath));
     setActiveCompPathHydrated(true);
   }, [activeCompPathHydrated, fileManager.fileTree, fileManager.fileTreeLoaded]);
   const previewPersistence = usePreviewPersistence({
     projectId,
     showToast,
@@ -170,7 +173,6 @@ export function StudioApp() {
     reloadPreview: () => setRefreshKey((k) => k + 1),
     pendingTimelineEditPathRef,
   });
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,
@@ -185,7 +187,6 @@ export function StudioApp() {
     uploadProjectFiles: fileManager.uploadProjectFiles,
     isRecordingRef: isGestureRecordingRef,
   });
   const {
     activeBlockParams,
     setActiveBlockParams,
@@ -208,7 +209,6 @@ export function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab,
   });
   const clearDomSelectionRef = useRef<() => void>(() => {});
   const domEditSelectionBridgeRef = useRef<DomEditSelection | null>(null);
   const handleDomEditElementDeleteRef = useRef<(s: DomEditSelection) => Promise<void>>(
@@ -265,7 +265,6 @@ export function StudioApp() {
     () => leftSidebarRef.current?.getTab() ?? "compositions",
     [],
   );
   const domEditSession = useDomEditSession({
     projectId,
     activeCompPath,
@@ -307,13 +306,13 @@ export function StudioApp() {
   resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
   invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
   deleteSelectedKeyframesRef.current = () => {
-    const sk = usePlayerStore.getState().selectedKeyframes;
+    const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
     const a = domEditSession.selectedGsapAnimations.find((x) => x.keyframes);
-    if (!a || sk.size === 0) return;
-    sk.forEach((k) => {
-      const p = Number(k.split(":")[1]);
-      if (Number.isFinite(p)) domEditSession.handleGsapRemoveKeyframe(a.id, p);
-    });
+    if (!a) return;
+    // Only the active element's keyframes; a stale cross-element selection must not delete here.
+    for (const p of selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId)) {
+      domEditSession.handleGsapRemoveKeyframe(a.id, p);
+    }
   };
   useCaptionDetection({
     projectId,
@@ -325,20 +324,17 @@ export function StudioApp() {
     captionSync,
     setRightCollapsed: panelLayout.setRightCollapsed,
   });
   const renderClipContent = useRenderClipContent({
     projectIdRef: fileManager.projectIdRef,
     compIdToSrc,
     activePreviewUrl,
     effectiveTimelineDuration,
   });
   const compositionDimensions = useCompositionDimensions();
-  const { lintModal, linting, handleLint, closeLintModal, findingsByElement, findingsByFile } =
-    useLintModal(projectId, refreshKey);
-  useEffect(() => {
-    usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
-  }, [findingsByElement]);
+  const { lintModal, linting, handleLint, closeLintModal, findingsByFile } = useLintModal(
+    projectId,
+    refreshKey,
+  );
   const frameCapture = useFrameCapture({
     projectId,
     activeCompPath,
@@ -350,14 +346,12 @@ export function StudioApp() {
     setConsoleErrors,
     resetErrors: resetConsoleErrors,
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useDragOverlay(fileManager.handleImportFiles);
   // Gesture recording
   const handleToggleRecordingRef = useRef<() => void>(() => {});
   const domEditSessionRef = useRef(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
     previewIframeRef,
@@ -365,6 +359,15 @@ export function StudioApp() {
     isGestureRecordingRef,
   });
   handleToggleRecordingRef.current = handleToggleRecording;
+  const canvasRectRef = useRef<CanvasRect | null>(null);
+  useLayoutEffect(() => {
+    if (gestureState !== "recording" || !previewIframe) {
+      canvasRectRef.current = null;
+      return;
+    }
+    const r = previewIframe.getBoundingClientRect();
+    canvasRectRef.current = { left: r.left, top: r.top, width: r.width, height: r.height };
+  }, [gestureState, previewIframe]);
   const handlePreviewIframeRef = useCallback(
     (iframe: HTMLIFrameElement | null) => {
@@ -388,7 +391,6 @@ export function StudioApp() {
     },
     [projectId, fileManager],
   );
   const {
     designPanelActive,
     inspectorPanelActive,
@@ -400,7 +402,6 @@ export function StudioApp() {
     isPlaying,
     gestureState === "recording",
   );
   useStudioUrlState({
     projectId,
     activeCompPath,
@@ -418,7 +419,17 @@ export function StudioApp() {
     applyDomSelection: domEditSession.applyDomSelection,
     initialState: initialUrlStateRef.current,
   });
+  const { jobs, isRendering, deleteRender, clearCompleted, startRender } = renderQueue;
+  const stableRenderQueue = useMemo(
+    () => ({
+      jobs,
+      isRendering,
+      deleteRender,
+      clearCompleted,
+      startRender: startRender as (options: unknown) => Promise<void>,
+    }),
+    [jobs, isRendering, deleteRender, clearCompleted, startRender],
+  );
   const studioCtxValue = buildStudioContextValue({
     projectId: projectId!,
     activeCompPath,
@@ -434,13 +445,7 @@ export function StudioApp() {
     editHistory,
     handleUndo: appHotkeys.handleUndo,
     handleRedo: appHotkeys.handleRedo,
-    renderQueue: {
-      jobs: renderQueue.jobs,
-      isRendering: renderQueue.isRendering,
-      deleteRender: renderQueue.deleteRender,
-      clearCompleted: renderQueue.clearCompleted,
-      startRender: renderQueue.startRender as (options: unknown) => Promise<void>,
-    },
+    renderQueue: stableRenderQueue,
     compositionDimensions,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handlePreviewIframeRef,
@@ -448,147 +453,147 @@ export function StudioApp() {
     timelineVisible,
     toggleTimelineVisibility,
   });
+  const timelineToolbar = useMemo(
+    () => (
+      <TimelineToolbar
+        toggleTimelineVisibility={toggleTimelineVisibility}
+        domEditSession={domEditSession}
+        onSplitElement={timelineEditing.handleTimelineElementSplit}
+      />
+    ),
+    [toggleTimelineVisibility, domEditSession, timelineEditing.handleTimelineElementSplit],
+  );
   if (resolving || waitingForServer || !projectId)
     return <StudioSplash waiting={waitingForServer} />;
-  const timelineToolbar = (
-    <TimelineToolbar
-      toggleTimelineVisibility={toggleTimelineVisibility}
-      domEditSession={domEditSession}
-      onSplitElement={timelineEditing.handleTimelineElementSplit}
-    />
-  );
   return (
-    <StudioProvider value={studioCtxValue}>
-      <PanelLayoutProvider value={panelLayout}>
-        <FileManagerProvider value={fileManager}>
-          <DomEditProvider value={domEditSession}>
-            <div
-              className="flex flex-col h-full w-full bg-neutral-950 relative"
-              onDragOver={dragOverlay.onDragOver}
-              onDragEnter={dragOverlay.onDragEnter}
-              onDragLeave={dragOverlay.onDragLeave}
-              onDrop={dragOverlay.onDrop}
-            >
-              <StudioHeader
-                captureFrameHref={frameCapture.captureFrameHref}
-                captureFrameFilename={frameCapture.captureFrameFilename}
-                handleCaptureFrameClick={frameCapture.handleCaptureFrameClick}
-                refreshCaptureFrameTime={frameCapture.refreshCaptureFrameTime}
-                inspectorButtonActive={inspectorButtonActive}
-                inspectorPanelActive={inspectorPanelActive}
-                onExport={() => void renderQueue.startRender()}
-              />
-              {previewPersistence.domEditSaveQueuePaused && (
-                <SaveQueuePausedBanner
-                  message={previewPersistence.domEditSaveQueuePaused}
-                  onDismiss={previewPersistence.resetDomEditSaveQueueBreaker}
-                />
-              )}
-              <div className="flex flex-1 min-h-0">
-                <StudioLeftSidebar
-                  leftSidebarRef={leftSidebarRef}
-                  onSelectComposition={handleSelectComposition}
-                  onAddBlock={handleAddBlock}
-                  onPreviewBlock={setBlockPreview}
-                  onLint={handleLint}
-                  linting={linting}
-                  lintFindingCount={lintModal?.length ?? findingsByFile.size}
-                  lintFindingsByFile={findingsByFile}
-                />
-                <StudioPreviewArea
-                  timelineToolbar={timelineToolbar}
-                  renderClipContent={renderClipContent}
-                  handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
-                  handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
-                  handleTimelineBlockDrop={handleTimelineBlockDrop}
-                  handlePreviewBlockDrop={handlePreviewBlockDrop}
-                  handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
-                  handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
-                  handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
-                  handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
-                  handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
-                  handleRazorSplit={timelineEditing.handleRazorSplit}
-                  handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
-                  setCompIdToSrc={setCompIdToSrc}
-                  setCompositionLoading={setCompositionLoading}
-                  shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
-                  isGestureRecording={gestureState === "recording"}
-                  recordingState={gestureState}
-                  onToggleRecording={STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : undefined}
-                  blockPreview={blockPreview}
-                  gestureOverlay={
-                    gestureState === "recording" && previewIframe ? (
-                      <GestureTrailOverlay
-                        samples={gestureRecording.samplesRef.current}
-                        sampleCount={gestureRecording.samplesRef.current.length}
-                        trail={gestureRecording.trailRef.current}
-                        canvasRect={(() => {
-                          const r = previewIframe.getBoundingClientRect();
-                          return { left: r.left, top: r.top, width: r.width, height: r.height };
-                        })()}
-                        compositionSize={compositionDimensions ?? undefined}
-                        mode="recording"
-                      />
-                    ) : undefined
-                  }
+    <StudioShellProvider value={studioCtxValue}>
+      <StudioPlaybackProvider value={studioCtxValue}>
+        <PanelLayoutProvider value={panelLayout}>
+          <FileManagerProvider value={fileManager}>
+            <DomEditProvider value={domEditSession}>
+              <div
+                className="flex flex-col h-full w-full bg-neutral-950 relative"
+                onDragOver={dragOverlay.onDragOver}
+                onDragEnter={dragOverlay.onDragEnter}
+                onDragLeave={dragOverlay.onDragLeave}
+                onDrop={dragOverlay.onDrop}
+              >
+                <StudioHeader
+                  captureFrameHref={frameCapture.captureFrameHref}
+                  captureFrameFilename={frameCapture.captureFrameFilename}
+                  handleCaptureFrameClick={frameCapture.handleCaptureFrameClick}
+                  refreshCaptureFrameTime={frameCapture.refreshCaptureFrameTime}
+                  inspectorButtonActive={inspectorButtonActive}
+                  inspectorPanelActive={inspectorPanelActive}
+                  onExport={() => void renderQueue.startRender()}
                 />
-                {!panelLayout.rightCollapsed && (
-                  <StudioRightPanel
-                    designPanelActive={designPanelActive}
-                    activeBlockParams={activeBlockParams}
-                    onCloseBlockParams={() => {
-                      setActiveBlockParams(null);
-                      panelLayout.setRightPanelTab("design");
-                    }}
+                {previewPersistence.domEditSaveQueuePaused && (
+                  <SaveQueuePausedBanner
+                    message={previewPersistence.domEditSaveQueuePaused}
+                    onDismiss={previewPersistence.resetDomEditSaveQueueBreaker}
+                  />
+                )}
+                <div className="flex flex-1 min-h-0">
+                  <StudioLeftSidebar
+                    leftSidebarRef={leftSidebarRef}
+                    onSelectComposition={handleSelectComposition}
+                    onAddBlock={handleAddBlock}
+                    onPreviewBlock={setBlockPreview}
+                    onLint={handleLint}
+                    linting={linting}
+                    lintFindingCount={lintModal?.length ?? findingsByFile.size}
+                    lintFindingsByFile={findingsByFile}
+                  />
+                  <StudioPreviewArea
+                    timelineToolbar={timelineToolbar}
+                    renderClipContent={renderClipContent}
+                    handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
+                    handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
+                    handleTimelineBlockDrop={handleTimelineBlockDrop}
+                    handlePreviewBlockDrop={handlePreviewBlockDrop}
+                    handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
+                    handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
+                    handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
+                    handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
+                    handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
+                    handleRazorSplit={timelineEditing.handleRazorSplit}
+                    handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                    setCompIdToSrc={setCompIdToSrc}
+                    setCompositionLoading={setCompositionLoading}
+                    shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
+                    isGestureRecording={gestureState === "recording"}
                     recordingState={gestureState}
-                    recordingDuration={gestureRecording.recordingDuration}
                     onToggleRecording={STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : undefined}
+                    blockPreview={blockPreview}
+                    gestureOverlay={
+                      gestureState === "recording" && previewIframe ? (
+                        <GestureTrailOverlay
+                          samples={gestureRecording.samplesRef.current}
+                          sampleCount={gestureRecording.samplesRef.current.length}
+                          trail={gestureRecording.trailRef.current}
+                          canvasRect={canvasRectRef.current!}
+                          compositionSize={compositionDimensions ?? undefined}
+                          mode="recording"
+                        />
+                      ) : undefined
+                    }
                   />
-                )}
-              </div>
-              {lintModal !== null && (
-                <LintModal findings={lintModal} projectId={projectId} onClose={closeLintModal} />
-              )}
-              {consoleErrors !== null && consoleErrors.length > 0 && (
-                <LintModal
-                  findings={consoleErrors}
-                  projectId={projectId}
-                  onClose={() => setConsoleErrors(null)}
-                />
-              )}
-              {domEditSession.agentModalOpen && domEditSession.domEditSelection && (
-                <AskAgentModal
-                  selectionLabel={domEditSession.domEditSelection.label}
-                  contextPreview={buildAgentContextPreview(
-                    domEditSession.domEditSelection,
-                    activeCompPath,
+                  {!panelLayout.rightCollapsed && (
+                    <StudioRightPanel
+                      designPanelActive={designPanelActive}
+                      activeBlockParams={activeBlockParams}
+                      onCloseBlockParams={() => {
+                        setActiveBlockParams(null);
+                        panelLayout.setRightPanelTab("design");
+                      }}
+                      recordingState={gestureState}
+                      recordingDuration={gestureRecording.recordingDuration}
+                      onToggleRecording={
+                        STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : undefined
+                      }
+                    />
                   )}
-                  anchorPoint={domEditSession.agentModalAnchorPoint}
-                  onSubmit={domEditSession.handleAgentModalSubmit}
-                  onClose={() => {
-                    domEditSession.setAgentModalOpen(false);
-                    domEditSession.setAgentPromptSelectionContext(undefined);
-                    domEditSession.setAgentModalAnchorPoint(null);
-                  }}
-                />
-              )}
+                </div>
+                {lintModal !== null && (
+                  <LintModal findings={lintModal} projectId={projectId} onClose={closeLintModal} />
+                )}
+                {consoleErrors !== null && consoleErrors.length > 0 && (
+                  <LintModal
+                    findings={consoleErrors}
+                    projectId={projectId}
+                    onClose={() => setConsoleErrors(null)}
+                  />
+                )}
+                {domEditSession.agentModalOpen && domEditSession.domEditSelection && (
+                  <AskAgentModal
+                    selectionLabel={domEditSession.domEditSelection.label}
+                    contextPreview={buildAgentContextPreview(
+                      domEditSession.domEditSelection,
+                      activeCompPath,
+                    )}
+                    anchorPoint={domEditSession.agentModalAnchorPoint}
+                    onSubmit={domEditSession.handleAgentModalSubmit}
+                    onClose={() => {
+                      domEditSession.setAgentModalOpen(false);
+                      domEditSession.setAgentPromptSelectionContext(undefined);
+                      domEditSession.setAgentModalAnchorPoint(null);
+                    }}
+                  />
+                )}
-              {dragOverlay.active && <StudioGlobalDragOverlay />}
-              {appToast && (
-                <StudioToast
-                  message={appToast.message}
-                  tone={appToast.tone}
-                  onDismiss={dismissToast}
-                />
-              )}
-            </div>
-          </DomEditProvider>
-        </FileManagerProvider>
-      </PanelLayoutProvider>
-    </StudioProvider>
+                {dragOverlay.active && <StudioGlobalDragOverlay />}
+                {appToast && (
+                  <StudioToast
+                    message={appToast.message}
+                    tone={appToast.tone}
+                    onDismiss={dismissToast}
+                  />
+                )}
+              </div>
+            </DomEditProvider>
+          </FileManagerProvider>
+        </PanelLayoutProvider>
+      </StudioPlaybackProvider>
+    </StudioShellProvider>
   );
 }

package/src/captions/store.ts CHANGED Viewed

@@ -59,7 +59,7 @@ const initialState = {
   sourceFilePath: null,
 };
-export const useCaptionStore = create<CaptionState>((set) => ({
+export const useCaptionStore = create<CaptionState>((set, get) => ({
   ...initialState,
   // Basic
@@ -82,15 +82,11 @@ export const useCaptionStore = create<CaptionState>((set) => ({
       return { selectedSegmentIds: new Set([id]), selectedGroupId: null };
     }),
-  selectGroup: (id) =>
-    set((state) => {
-      const group = state.model?.groups.get(id);
-      if (!group) return {};
-      return {
-        selectedSegmentIds: new Set(group.segmentIds),
-        selectedGroupId: id,
-      };
-    }),
+  selectGroup: (id) => {
+    const group = get().model?.groups.get(id);
+    if (!group) return;
+    set({ selectedSegmentIds: new Set(group.segmentIds), selectedGroupId: id });
+  },
   selectAll: () =>
     set((state) => {
@@ -101,7 +97,11 @@ export const useCaptionStore = create<CaptionState>((set) => ({
       };
     }),
-  clearSelection: () => set({ selectedSegmentIds: new Set(), selectedGroupId: null }),
+  clearSelection: () => {
+    const { selectedSegmentIds, selectedGroupId } = get();
+    if (selectedSegmentIds.size === 0 && selectedGroupId === null) return;
+    set({ selectedSegmentIds: new Set(), selectedGroupId: null });
+  },
   // Segment mutations
   updateSegmentStyle: (segmentId, style) =>