@hyperframes/studio 0.6.97 → 0.6.98

package/src/components/StudioHeader.tsx

@@ -5,9 +5,9 @@ import {
   STUDIO_MANUAL_EDITING_DISABLED_TITLE,
 } from "./editor/manualEditingAvailability";
 import { getHistoryShortcutLabel } from "../utils/studioHelpers";
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useDomEditContext } from "../contexts/DomEditContext";
+import { useDomEditActionsContext } from "../contexts/DomEditContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 
 export interface StudioHeaderProps {
@@ -150,9 +150,9 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo } = useStudioContext();
+  const { projectId, editHistory, handleUndo, handleRedo } = useStudioShellContext();
   const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
-  const { clearDomSelection } = useDomEditContext();
+  const { clearDomSelection } = useDomEditActionsContext();
 
   return (
     <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">

package/src/components/StudioLeftSidebar.tsx

@@ -4,7 +4,7 @@ import { LeftSidebar, type LeftSidebarHandle } from "./sidebar/LeftSidebar";
 import { MediaPreview } from "./MediaPreview";
 import { isMediaFile } from "../utils/mediaTypes";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioShellContext } from "../contexts/StudioContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { getPersistedRenderSettings } from "./renders/renderSettings";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
@@ -39,7 +39,7 @@ export function StudioLeftSidebar({
     handlePanelResizeMove,
     handlePanelResizeEnd,
   } = usePanelLayoutContext();
-  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioContext();
+  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
   const {
     compositions,
     assets,

package/src/components/StudioPreviewArea.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useState, useMemo, type ReactNode } from "react";
 import { NLELayout } from "./nle/NLELayout";
 import { CaptionOverlay } from "../captions/components/CaptionOverlay";
 import { CaptionTimeline } from "../captions/components/CaptionTimeline";
@@ -13,10 +13,13 @@ import {
   STUDIO_PREVIEW_MANUAL_EDITING_ENABLED,
   STUDIO_PREVIEW_SELECTION_ENABLED,
 } from "./editor/manualEditingAvailability";
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
+import { TimelineEditProvider } from "../contexts/TimelineEditContext";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
+import { fetchParsedAnimations } from "../hooks/useGsapTweenCache";
+import { pickKeyframeTween, computeKeyframeMovePlan } from "./editor/keyframeMove";
 import type { GestureRecordingState } from "./editor/GestureRecordControl";
 
 export interface StudioPreviewAreaProps {
@@ -91,18 +94,20 @@ export function StudioPreviewArea({
 }: StudioPreviewAreaProps) {
   const {
     projectId,
-    refreshKey,
     activeCompPath,
     setActiveCompPath,
-    captionEditMode,
-    compositionLoading,
-    isPlaying,
     previewIframeRef,
-    refreshPreviewDocumentVersion,
     handlePreviewIframeRef,
     timelineVisible,
     toggleTimelineVisibility,
-  } = useStudioContext();
+  } = useStudioShellContext();
+  const {
+    refreshKey,
+    captionEditMode,
+    compositionLoading,
+    isPlaying,
+    refreshPreviewDocumentVersion,
+  } = useStudioPlaybackContext();
 
   const {
     domEditHoverSelection,
@@ -125,6 +130,7 @@ export function StudioPreviewArea({
     handleGsapAddKeyframe,
     handleGsapConvertToKeyframes,
     handleGsapDeleteAllForElement,
+    buildDomSelectionForTimelineElement,
   } = useDomEditContext();
 
   const [snapPrefs, setSnapPrefs] = useState(() => {
@@ -137,187 +143,223 @@ export function StudioPreviewArea({
     };
   });
 
+  // fallow-ignore-next-line complexity
+  const timelineEditCallbacks = useMemo(
+    () => ({
+      onMoveElement: handleTimelineElementMove,
+      onResizeElement: handleTimelineElementResize,
+      onBlockedEditAttempt: handleBlockedTimelineEdit,
+      onSplitElement: handleTimelineElementSplit,
+      onRazorSplit: handleRazorSplit,
+      onRazorSplitAll: handleRazorSplitAll,
+      onDeleteAllKeyframes: (elId: string) => {
+        const rawId = elId.includes("#") ? (elId.split("#").pop() ?? elId) : elId;
+        handleGsapDeleteAllForElement(`#${rawId}`);
+      },
+      onDeleteKeyframe: (_elId: string, pct: number) => {
+        const cacheKey = domEditSelection?.id ?? "";
+        const cached = usePlayerStore.getState().keyframeCache.get(cacheKey);
+        const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
+        const group = kf?.propertyGroup;
+        const anim =
+          (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
+          selectedGsapAnimations.find((a) => a.keyframes);
+        if (!anim) return;
+        handleGsapRemoveKeyframe(anim.id, kf?.tweenPercentage ?? pct);
+      },
+      onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {
+        for (const anim of selectedGsapAnimations) {
+          if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease });
+        }
+      },
+      // fallow-ignore-next-line complexity
+      onMoveKeyframe: async (_el: TimelineElement, oldPct: number, newPct: number) => {
+        // Resolve the dragged element's selection + parsed animations on demand
+        // (both awaited and cached) rather than relying on the async DOM-edit
+        // session being loaded for this element — that coupling made the commit
+        // intermittently no-op (revert) when dragging before the session caught up.
+        if (!projectId) return;
+        const sourceFile = _el.sourceFile || activeCompPath || "index.html";
+        const [selection, parsed] = await Promise.all([
+          buildDomSelectionForTimelineElement(_el),
+          fetchParsedAnimations(projectId, sourceFile),
+        ]);
+        if (!selection || !parsed) return;
+
+        const cached = usePlayerStore.getState().keyframeCache.get(_el.key ?? _el.id);
+        const cachedKf = cached?.keyframes.find((k) => Math.abs(k.percentage - oldPct) < 0.2);
+        const origAbsTime = _el.start + (oldPct / 100) * _el.duration;
+        const anim = pickKeyframeTween(
+          parsed.animations,
+          _el,
+          origAbsTime,
+          cachedKf?.propertyGroup,
+        );
+        if (!anim) return;
+
+        const plan = computeKeyframeMovePlan(
+          anim,
+          cachedKf?.tweenPercentage ?? oldPct,
+          _el,
+          newPct,
+        );
+        if (plan.meta) handleGsapUpdateMeta(anim.id, plan.meta, selection);
+        for (const pct of plan.removes) handleGsapRemoveKeyframe(anim.id, pct, selection);
+        for (const add of plan.adds) {
+          for (const [prop, val] of Object.entries(add.properties)) {
+            handleGsapAddKeyframe(anim.id, add.pct, prop, val, selection);
+          }
+        }
+      },
+      onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
+        const currentTime = usePlayerStore.getState().currentTime;
+        const pct =
+          el.duration > 0
+            ? Math.max(0, Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100)))
+            : 0;
+        const anim = selectedGsapAnimations.find((a) => a.keyframes);
+        if (anim?.keyframes) {
+          const existing = anim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1);
+          if (existing) {
+            handleGsapRemoveKeyframe(anim.id, existing.percentage);
+          } else {
+            handleGsapAddKeyframe(anim.id, pct, "x", 0);
+          }
+        } else {
+          const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
+          if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
+        }
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      handleTimelineElementMove,
+      handleTimelineElementResize,
+      handleBlockedTimelineEdit,
+      handleTimelineElementSplit,
+      handleRazorSplit,
+      handleRazorSplitAll,
+      handleGsapDeleteAllForElement,
+      domEditSelection?.id,
+      selectedGsapAnimations,
+      handleGsapRemoveKeyframe,
+      handleGsapUpdateMeta,
+      handleGsapAddKeyframe,
+      handleGsapConvertToKeyframes,
+      buildDomSelectionForTimelineElement,
+      projectId,
+      activeCompPath,
+    ],
+  );
+
   return (
     <div className="flex-1 flex flex-col relative min-w-0">
       <div className="flex-1 min-h-0 relative">
-        <NLELayout
-          projectId={projectId}
-          refreshKey={refreshKey}
-          activeCompositionPath={activeCompPath}
-          timelineToolbar={timelineToolbar}
-          renderClipContent={renderClipContent}
-          onDeleteElement={handleTimelineElementDelete}
-          onAssetDrop={handleTimelineAssetDrop}
-          onBlockDrop={handleTimelineBlockDrop}
-          onPreviewBlockDrop={handlePreviewBlockDrop}
-          onFileDrop={handleTimelineFileDrop}
-          onMoveElement={handleTimelineElementMove}
-          onResizeElement={handleTimelineElementResize}
-          onBlockedEditAttempt={handleBlockedTimelineEdit}
-          onSplitElement={handleTimelineElementSplit}
-          onRazorSplit={handleRazorSplit}
-          onRazorSplitAll={handleRazorSplitAll}
-          onSelectTimelineElement={handleTimelineElementSelect}
-          onDeleteAllKeyframes={(elId) => {
-            const rawId = elId.includes("#") ? elId.split("#").pop()! : elId;
-            handleGsapDeleteAllForElement(`#${rawId}`);
-          }}
-          onDeleteKeyframe={(_elId, pct) => {
-            const cacheKey = domEditSelection?.id ?? "";
-            const cached = usePlayerStore.getState().keyframeCache.get(cacheKey);
-            const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-            const group = kf?.propertyGroup;
-            const anim =
-              (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
-              selectedGsapAnimations.find((a) => a.keyframes);
-            if (!anim) return;
-            handleGsapRemoveKeyframe(anim.id, kf?.tweenPercentage ?? pct);
-          }}
-          onChangeKeyframeEase={(_elId, _pct, ease) => {
-            for (const anim of selectedGsapAnimations) {
-              if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease });
-            }
-          }}
-          // fallow-ignore-next-line complexity
-          onMoveKeyframe={(_el, oldPct, newPct) => {
-            const cacheKey = domEditSelection?.id ?? "";
-            const cached = usePlayerStore.getState().keyframeCache.get(cacheKey);
-            const cachedKf = cached?.keyframes.find((k) => Math.abs(k.percentage - oldPct) < 0.2);
-            const group = cachedKf?.propertyGroup;
-            const anim =
-              (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
-              selectedGsapAnimations.find((a) => a.keyframes);
-            if (!anim?.keyframes) return;
-            const tweenOldPct = cachedKf?.tweenPercentage ?? oldPct;
-            const kf = anim.keyframes.keyframes.find(
-              (k) => Math.abs(k.percentage - tweenOldPct) < 0.2,
-            );
-            if (!kf) return;
-            const tweenStart = anim.resolvedStart ?? 0;
-            const tweenDur = anim.duration ?? 1;
-            const newAbsTime = _el.start + (newPct / 100) * _el.duration;
-            const tweenNewPct =
-              tweenDur > 0
-                ? Math.max(
-                    0,
-                    Math.min(100, Math.round(((newAbsTime - tweenStart) / tweenDur) * 1000) / 10),
-                  )
-                : 0;
-            handleGsapRemoveKeyframe(anim.id, tweenOldPct);
-            for (const [prop, val] of Object.entries(kf.properties)) {
-              handleGsapAddKeyframe(anim.id, tweenNewPct, prop, val);
-            }
-          }}
-          onToggleKeyframeAtPlayhead={(el) => {
-            const currentTime = usePlayerStore.getState().currentTime;
-            const pct =
-              el.duration > 0
-                ? Math.max(
-                    0,
-                    Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100)),
-                  )
-                : 0;
-            const anim = selectedGsapAnimations.find((a) => a.keyframes);
-            if (anim?.keyframes) {
-              const existing = anim.keyframes.keyframes.find(
-                (k) => Math.abs(k.percentage - pct) <= 1,
-              );
-              if (existing) {
-                handleGsapRemoveKeyframe(anim.id, existing.percentage);
-              } else {
-                handleGsapAddKeyframe(anim.id, pct, "x", 0);
+        <TimelineEditProvider value={timelineEditCallbacks}>
+          <NLELayout
+            projectId={projectId}
+            refreshKey={refreshKey}
+            activeCompositionPath={activeCompPath}
+            timelineToolbar={timelineToolbar}
+            renderClipContent={renderClipContent}
+            onDeleteElement={handleTimelineElementDelete}
+            onAssetDrop={handleTimelineAssetDrop}
+            onBlockDrop={handleTimelineBlockDrop}
+            onPreviewBlockDrop={handlePreviewBlockDrop}
+            onFileDrop={handleTimelineFileDrop}
+            onSelectTimelineElement={handleTimelineElementSelect}
+            onCompIdToSrcChange={setCompIdToSrc}
+            onCompositionLoadingChange={setCompositionLoading}
+            onCompositionChange={(compPath) => {
+              // Sync activeCompPath when user drills down via timeline double-click
+              // or navigates back via breadcrumb — keeps sidebar + thumbnails in sync.
+              // Guard against no-op updates to prevent circular refresh cascades
+              // between activeCompPath → compositionStack → onCompositionChange.
+              if (compPath !== activeCompPath) {
+                setActiveCompPath(compPath);
+                refreshPreviewDocumentVersion();
               }
-            } else {
-              const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
-              if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
-            }
-          }}
-          onCompIdToSrcChange={setCompIdToSrc}
-          onCompositionLoadingChange={setCompositionLoading}
-          onCompositionChange={(compPath) => {
-            // Sync activeCompPath when user drills down via timeline double-click
-            // or navigates back via breadcrumb — keeps sidebar + thumbnails in sync.
-            // Guard against no-op updates to prevent circular refresh cascades
-            // between activeCompPath → compositionStack → onCompositionChange.
-            if (compPath !== activeCompPath) {
-              setActiveCompPath(compPath);
-              refreshPreviewDocumentVersion();
-            }
-          }}
-          onIframeRef={handlePreviewIframeRef}
-          previewOverlay={
-            blockPreview ? (
-              <div className="absolute inset-0 z-30 bg-black pointer-events-none">
-                {blockPreview.videoUrl ? (
-                  <video
-                    src={blockPreview.videoUrl}
-                    autoPlay
-                    muted
-                    loop
-                    playsInline
-                    className="w-full h-full object-contain"
-                  />
-                ) : blockPreview.posterUrl ? (
-                  <img
-                    src={blockPreview.posterUrl}
-                    alt={blockPreview.title}
-                    className="w-full h-full object-contain"
+            }}
+            onIframeRef={handlePreviewIframeRef}
+            previewOverlay={
+              blockPreview ? (
+                <div className="absolute inset-0 z-30 bg-black pointer-events-none">
+                  {blockPreview.videoUrl ? (
+                    <video
+                      src={blockPreview.videoUrl}
+                      autoPlay
+                      muted
+                      loop
+                      playsInline
+                      className="w-full h-full object-contain"
+                    />
+                  ) : blockPreview.posterUrl ? (
+                    <img
+                      src={blockPreview.posterUrl}
+                      alt={blockPreview.title}
+                      className="w-full h-full object-contain"
+                    />
+                  ) : null}
+                </div>
+              ) : captionEditMode ? (
+                <CaptionOverlay iframeRef={previewIframeRef} />
+              ) : STUDIO_INSPECTOR_PANELS_ENABLED ? (
+                <>
+                  <DomEditOverlay
+                    iframeRef={previewIframeRef}
+                    activeCompositionPath={activeCompPath}
+                    hoverSelection={
+                      STUDIO_PREVIEW_SELECTION_ENABLED &&
+                      !captionEditMode &&
+                      !compositionLoading &&
+                      !isPlaying
+                        ? domEditHoverSelection
+                        : null
+                    }
+                    selection={shouldShowSelectedDomBounds ? domEditSelection : null}
+                    groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
+                    allowCanvasMovement={
+                      STUDIO_PREVIEW_MANUAL_EDITING_ENABLED && !isGestureRecording
+                    }
+                    onCanvasMouseDown={handlePreviewCanvasMouseDown}
+                    onCanvasPointerMove={handlePreviewCanvasPointerMove}
+                    onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
+                    onSelectionChange={applyDomSelection}
+                    onBlockedMove={handleBlockedDomMove}
+                    onManualDragStart={handleDomManualDragStart}
+                    onPathOffsetCommit={handleDomPathOffsetCommit}
+                    onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
+                    onBoxSizeCommit={handleDomBoxSizeCommit}
+                    onRotationCommit={handleDomRotationCommit}
+                    gridVisible={snapPrefs.gridVisible}
+                    gridSpacing={snapPrefs.gridSpacing}
+                    recordingState={recordingState}
+                    onToggleRecording={onToggleRecording}
                   />
-                ) : null}
-              </div>
-            ) : captionEditMode ? (
-              <CaptionOverlay iframeRef={previewIframeRef} />
-            ) : STUDIO_INSPECTOR_PANELS_ENABLED ? (
-              <>
-                <DomEditOverlay
-                  iframeRef={previewIframeRef}
-                  activeCompositionPath={activeCompPath}
-                  hoverSelection={
-                    STUDIO_PREVIEW_SELECTION_ENABLED &&
-                    !captionEditMode &&
-                    !compositionLoading &&
-                    !isPlaying
-                      ? domEditHoverSelection
-                      : null
-                  }
-                  selection={shouldShowSelectedDomBounds ? domEditSelection : null}
-                  groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
-                  allowCanvasMovement={STUDIO_PREVIEW_MANUAL_EDITING_ENABLED && !isGestureRecording}
-                  onCanvasMouseDown={handlePreviewCanvasMouseDown}
-                  onCanvasPointerMove={handlePreviewCanvasPointerMove}
-                  onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
-                  onSelectionChange={applyDomSelection}
-                  onBlockedMove={handleBlockedDomMove}
-                  onManualDragStart={handleDomManualDragStart}
-                  onPathOffsetCommit={handleDomPathOffsetCommit}
-                  onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
-                  onBoxSizeCommit={handleDomBoxSizeCommit}
-                  onRotationCommit={handleDomRotationCommit}
-                  gridVisible={snapPrefs.gridVisible}
-                  gridSpacing={snapPrefs.gridSpacing}
-                  recordingState={recordingState}
-                  onToggleRecording={onToggleRecording}
-                />
-                <SnapToolbar onSnapChange={setSnapPrefs} />
-                {gestureOverlay}
-              </>
-            ) : null
-          }
-          timelineFooter={
-            captionEditMode ? (
-              <div className="border-t border-neutral-800/30 flex-shrink-0" style={{ height: 60 }}>
-                <div className="flex items-center gap-1.5 px-2 py-0.5">
-                  <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
-                    Captions
-                  </span>
+                  <SnapToolbar onSnapChange={setSnapPrefs} />
+                  {gestureOverlay}
+                </>
+              ) : null
+            }
+            timelineFooter={
+              captionEditMode ? (
+                <div
+                  className="border-t border-neutral-800/30 flex-shrink-0"
+                  style={{ height: 60 }}
+                >
+                  <div className="flex items-center gap-1.5 px-2 py-0.5">
+                    <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                      Captions
+                    </span>
+                  </div>
+                  <CaptionTimeline pixelsPerSecond={100} />
                 </div>
-                <CaptionTimeline pixelsPerSecond={100} />
-              </div>
-            ) : undefined
-          }
-          timelineVisible={timelineVisible}
-          onToggleTimeline={toggleTimelineVisibility}
-        />
+              ) : undefined
+            }
+            timelineVisible={timelineVisible}
+            onToggleTimeline={toggleTimelineVisibility}
+          />
+        </TimelineEditProvider>
       </div>
       <StudioFeedbackBar />
     </div>

package/src/components/StudioRightPanel.tsx

@@ -8,7 +8,7 @@ import type { RenderJob } from "./renders/useRenderQueue";
 import type { BlockParam } from "@hyperframes/core/registry";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "./editor/manualEditingAvailability";
 
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
@@ -47,14 +47,14 @@ export function StudioRightPanel({
   } = usePanelLayoutContext();
 
   const {
-    captionEditMode,
     previewIframeRef,
     projectId,
     activeCompPath,
     compositionDimensions,
     waitForPendingDomEditSaves,
     renderQueue,
-  } = useStudioContext();
+  } = useStudioShellContext();
+  const { captionEditMode } = useStudioPlaybackContext();
 
   const {
     domEditSelection,

package/src/components/TimelineToolbar.tsx

@@ -16,6 +16,7 @@ import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { canSplitElement } from "../utils/timelineElementSplit";
+import { canAddBeatAt, addBeatAtCompositionTime } from "../utils/beatEditActions";
 
 interface DomEditSessionSlice extends EnableKeyframesSession {
   domEditSelection: DomEditSelection | null;
@@ -70,6 +71,9 @@ export function TimelineToolbar({
 }: TimelineToolbarProps) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
+  // Subscribe so the add-beat button reacts to playhead movement and analysis load.
+  const currentTime = usePlayerStore((s) => s.currentTime);
+  const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
   const displayedTimelineZoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
   const { state: keyframeState, onToggle: onToggleKeyframe } = useKeyframeToggle(domEditSession);
@@ -178,6 +182,27 @@ export function TimelineToolbar({
                 </Tooltip>
               );
             })()}
+          {beatAnalysisReady &&
+            canAddBeatAt(currentTime) &&
+            (() => (
+              <Tooltip label="Add beat at playhead">
+                <button
+                  type="button"
+                  onClick={() => addBeatAtCompositionTime(currentTime)}
+                  className="flex h-7 w-7 items-center justify-center rounded text-neutral-500 transition-colors hover:text-[#22c55e]"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              </Tooltip>
+            ))()}
         </div>
         <div className="flex items-center gap-1">
           <Tooltip label="Fit timeline to width">

package/src/components/editor/DomEditOverlay.tsx

@@ -4,6 +4,7 @@ import { type DomEditSelection } from "./domEditing";
 import { resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
 import {
   type BlockedMoveState,
+  type DomEditGroupPathOffsetCommit,
   type FocusableDomEditOverlay,
   type GestureState,
   type GroupGestureState,
@@ -27,11 +28,7 @@ export {
   resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
-
-export interface DomEditGroupPathOffsetCommit {
-  selection: DomEditSelection;
-  next: { x: number; y: number };
-}
+export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
 
 interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;

package/src/components/editor/EaseCurveSection.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useRef, useState } from "react";
 import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
+import { roundToCenti } from "../../utils/rounding";
 
 const PRESET_GRID_EASES = [
   "none",
@@ -75,9 +76,7 @@ const EasePresetGrid = memo(function EasePresetGrid({
   );
 });
 
-function round2(n: number): number {
-  return Math.round(n * 100) / 100;
-}
+const round2 = roundToCenti;
 
 export function EaseCurveSection({
   ease,

package/src/components/editor/GestureTrailOverlay.tsx

@@ -6,7 +6,7 @@ interface GestureTrailOverlayProps {
   sampleCount?: number;
   trail?: Array<{ x: number; y: number }>;
   simplifiedPoints?: Map<number, Record<string, number>>;
-  canvasRect: { left: number; top: number; width: number; height: number };
+  canvasRect: { left: number; top: number; width: number; height: number } | null;
   compositionSize?: { width: number; height: number };
   mode: "recording" | "preview";
   accentColor?: string;
@@ -23,6 +23,7 @@ export const GestureTrailOverlay = memo(function GestureTrailOverlay({
   accentColor = "#3CE6AC",
 }: GestureTrailOverlayProps) {
   const trailPoints = useMemo(() => {
+    if (!canvasRect) return "";
     if (trail && trail.length > 1) {
       return trail.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
     }
@@ -32,7 +33,7 @@ export const GestureTrailOverlay = memo(function GestureTrailOverlay({
       .map((s) => `${s.properties.x},${s.properties.y}`)
       .join(" ");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [samples, trail, sampleCount, canvasRect.left, canvasRect.top]);
+  }, [samples, trail, sampleCount, canvasRect?.left, canvasRect?.top]);
 
   const simplifiedPath = useMemo(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
@@ -58,7 +59,7 @@ export const GestureTrailOverlay = memo(function GestureTrailOverlay({
     return pts.sort((a, b) => a.pct - b.pct);
   }, [simplifiedPoints]);
 
-  if (samples.length < 2 && !simplifiedPoints) return null;
+  if (!canvasRect || (samples.length < 2 && !simplifiedPoints)) return null;
 
   return (
     <svg