npm - @hyperframes/studio - Versions diffs - 0.6.73 → 0.6.75 - Mend

@hyperframes/studio 0.6.73 → 0.6.75

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 (63) hide show

package/dist/assets/index-DcyZuBcU.css +1 -0
package/dist/assets/index-uB_W2GDl.js +140 -0
package/dist/index.html +2 -2
package/package.json +4 -4
package/src/App.tsx +30 -24
package/src/components/StudioPreviewArea.tsx +101 -26
package/src/components/StudioRightPanel.tsx +3 -0
package/src/components/StudioToast.tsx +18 -0
package/src/components/TimelineToolbar.tsx +230 -4
package/src/components/editor/AnimationCard.tsx +68 -4
package/src/components/editor/DomEditOverlay.tsx +70 -1
package/src/components/editor/GridOverlay.tsx +50 -0
package/src/components/editor/KeyframeDiamond.tsx +49 -0
package/src/components/editor/KeyframeNavigation.tsx +139 -0
package/src/components/editor/LayersPanel.test.ts +135 -0
package/src/components/editor/LayersPanel.tsx +151 -15
package/src/components/editor/PropertyPanel.tsx +293 -140
package/src/components/editor/SnapGuideOverlay.tsx +166 -0
package/src/components/editor/SnapToolbar.tsx +163 -0
package/src/components/editor/SpringEaseEditor.tsx +256 -0
package/src/components/editor/domEditOverlayGestures.ts +7 -0
package/src/components/editor/domEditOverlayStartGesture.ts +28 -0
package/src/components/editor/gsapAnimationConstants.ts +42 -0
package/src/components/editor/gsapAnimationHelpers.ts +2 -1
package/src/components/editor/manualEditingAvailability.ts +6 -0
package/src/components/editor/manualEditsDom.ts +56 -2
package/src/components/editor/manualOffsetDrag.ts +19 -3
package/src/components/editor/propertyPanelHelpers.ts +90 -0
package/src/components/editor/propertyPanelTimingSection.tsx +64 -0
package/src/components/editor/snapEngine.test.ts +657 -0
package/src/components/editor/snapEngine.ts +575 -0
package/src/components/editor/snapTargetCollection.ts +147 -0
package/src/components/editor/useDomEditOverlayGestures.ts +137 -10
package/src/components/editor/useLayerDrag.ts +213 -0
package/src/components/nle/NLELayout.tsx +18 -0
package/src/contexts/DomEditContext.tsx +27 -0
package/src/hooks/gsapRuntimeBridge.ts +585 -0
package/src/hooks/gsapRuntimeKeyframes.ts +170 -0
package/src/hooks/useAnimatedPropertyCommit.ts +131 -0
package/src/hooks/useAppHotkeys.ts +63 -1
package/src/hooks/useDomEditCommits.ts +88 -4
package/src/hooks/useDomEditSession.ts +179 -65
package/src/hooks/useGsapScriptCommits.ts +144 -7
package/src/hooks/useGsapSelectionHandlers.ts +202 -0
package/src/hooks/useGsapTweenCache.ts +174 -3
package/src/hooks/useTimelineEditing.ts +93 -0
package/src/icons/SystemIcons.tsx +2 -0
package/src/player/components/ClipContextMenu.tsx +99 -0
package/src/player/components/KeyframeDiamondContextMenu.tsx +164 -0
package/src/player/components/Timeline.test.ts +2 -1
package/src/player/components/Timeline.tsx +108 -68
package/src/player/components/TimelineCanvas.tsx +47 -1
package/src/player/components/TimelineClip.tsx +8 -3
package/src/player/components/TimelineClipDiamonds.tsx +174 -0
package/src/player/components/timelineDragDrop.ts +103 -0
package/src/player/components/timelineLayout.ts +1 -1
package/src/player/store/playerStore.ts +42 -0
package/src/utils/editHistory.ts +1 -1
package/src/utils/optimisticUpdate.test.ts +53 -0
package/src/utils/optimisticUpdate.ts +18 -0
package/src/utils/studioUiPreferences.ts +17 -0
package/dist/assets/index-CrxThtSJ.css +0 -1
package/dist/assets/index-Dc2HfqON.js +0 -140

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-Dc2HfqON.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CrxThtSJ.css">
+    <script type="module" crossorigin src="/assets/index-uB_W2GDl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DcyZuBcU.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.73",
+  "version": "0.6.75",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
     "@codemirror/view": "6.40.0",
     "@phosphor-icons/react": "^2.1.10",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.73",
-    "@hyperframes/player": "0.6.73"
+    "@hyperframes/core": "0.6.75",
+    "@hyperframes/player": "0.6.75"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -46,7 +46,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.73"
+    "@hyperframes/producer": "0.6.75"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx CHANGED Viewed

@@ -44,6 +44,7 @@ import { PanelLayoutProvider } from "./contexts/PanelLayoutContext";
 import { FileManagerProvider } from "./contexts/FileManagerContext";
 import { DomEditProvider } from "./contexts/DomEditContext";
 import { StudioSplash } from "./components/StudioSplash";
+import { StudioToast } from "./components/StudioToast";
 import { useServerConnection } from "./hooks/useServerConnection";
 import {
   normalizeStudioCompositionPath,
@@ -266,8 +267,10 @@ export function StudioApp() {
   const handleDomEditElementDeleteRef = useRef<(s: DomEditSelection) => Promise<void>>(
     async () => {},
   );
-  const domEditDeleteBridge = async (s: DomEditSelection) =>
-    handleDomEditElementDeleteRef.current(s);
+  const domEditDeleteBridge = (s: DomEditSelection) => handleDomEditElementDeleteRef.current(s);
+  const resetKeyframesRef = useRef<() => boolean>(() => false);
+  const deleteSelectedKeyframesRef = useRef<() => void>(() => {});
+  const invalidateGsapCacheRef = useRef<() => void>(() => {});
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
     activeCompPath,
@@ -284,6 +287,7 @@ export function StudioApp() {
   const appHotkeys = useAppHotkeys({
     toggleTimelineVisibility,
     handleTimelineElementDelete: timelineEditing.handleTimelineElementDelete,
+    handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
     domEditSelectionRef: domEditSelectionBridgeRef,
     clearDomSelectionRef,
@@ -299,8 +303,10 @@ export function StudioApp() {
     handleCopy,
     handlePaste,
     handleCut,
+    onResetKeyframes: () => resetKeyframesRef.current(),
+    onDeleteSelectedKeyframes: () => deleteSelectedKeyframesRef.current(),
+    onAfterUndoRedo: () => invalidateGsapCacheRef.current(),
   });
   const selectSidebarTabStable = useCallback(
     (tab: SidebarTab) => leftSidebarRef.current?.selectTab(tab),
     [],
@@ -345,11 +351,20 @@ export function StudioApp() {
     selectSidebarTab: selectSidebarTabStable,
     getSidebarTab: getSidebarTabStable,
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
   clearDomSelectionRef.current = domEditSession.clearDomSelection;
   handleDomEditElementDeleteRef.current = domEditSession.handleDomEditElementDelete;
+  resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
+  invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
+  deleteSelectedKeyframesRef.current = () => {
+    const sk = usePlayerStore.getState().selectedKeyframes;
+    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);
+    });
+  };
   useCaptionDetection({
     projectId,
     activeCompPath,
@@ -470,12 +485,15 @@ export function StudioApp() {
     timelineVisible,
     toggleTimelineVisibility,
   });
-  if (resolving || waitingForServer || !projectId) {
+  if (resolving || waitingForServer || !projectId)
     return <StudioSplash waiting={waitingForServer} />;
-  }
-  const timelineToolbar = <TimelineToolbar toggleTimelineVisibility={toggleTimelineVisibility} />;
+  const timelineToolbar = (
+    <TimelineToolbar
+      toggleTimelineVisibility={toggleTimelineVisibility}
+      domEditSession={domEditSession}
+      onSplitElement={timelineEditing.handleTimelineElementSplit}
+    />
+  );
   return (
     <StudioProvider value={studioCtxValue}>
       <PanelLayoutProvider value={panelLayout}>
@@ -517,6 +535,7 @@ export function StudioApp() {
                   handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
                   handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
                   handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
+                  handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
                   setCompIdToSrc={setCompIdToSrc}
                   setCompositionLoading={setCompositionLoading}
                   shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
@@ -540,7 +559,6 @@ export function StudioApp() {
               {lintModal !== null && (
                 <LintModal findings={lintModal} projectId={projectId} onClose={closeLintModal} />
               )}
               {consoleErrors !== null && consoleErrors.length > 0 && (
                 <LintModal
                   findings={consoleErrors}
@@ -548,7 +566,6 @@ export function StudioApp() {
                   onClose={() => setConsoleErrors(null)}
                 />
               )}
               {domEditSession.agentModalOpen && domEditSession.domEditSelection && (
                 <AskAgentModal
                   selectionLabel={domEditSession.domEditSelection.label}
@@ -567,18 +584,7 @@ export function StudioApp() {
               )}
               {dragOverlay.active && <StudioGlobalDragOverlay />}
-              {appToast && (
-                <div
-                  className={`absolute bottom-6 left-1/2 -translate-x-1/2 z-[91] px-4 py-2 rounded-lg border text-sm shadow-lg animate-in fade-in slide-in-from-bottom-2 ${
-                    appToast.tone === "error"
-                      ? "bg-red-900/90 border-red-700/50 text-red-200"
-                      : "bg-neutral-900/95 border-neutral-700/60 text-neutral-100"
-                  }`}
-                >
-                  {appToast.message}
-                </div>
-              )}
+              {appToast && <StudioToast message={appToast.message} tone={appToast.tone} />}
             </div>
           </DomEditProvider>
         </FileManagerProvider>

package/src/components/StudioPreviewArea.tsx CHANGED Viewed

@@ -1,10 +1,12 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { NLELayout } from "./nle/NLELayout";
 import { CaptionOverlay } from "../captions/components/CaptionOverlay";
 import { CaptionTimeline } from "../captions/components/CaptionTimeline";
 import { DomEditOverlay } from "./editor/DomEditOverlay";
+import { SnapToolbar } from "./editor/SnapToolbar";
 import { StudioFeedbackBar } from "./StudioFeedbackBar";
 import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player/store/playerStore";
 import type { BlockedTimelineEditIntent } from "../player/components/timelineEditing";
 import {
   STUDIO_INSPECTOR_PANELS_ENABLED,
@@ -14,6 +16,7 @@ import {
 import { useStudioContext } from "../contexts/StudioContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
+import { readStudioUiPreferences } from "../utils/studioUiPreferences";
 export interface StudioPreviewAreaProps {
   timelineToolbar: ReactNode;
@@ -48,6 +51,7 @@ export interface StudioPreviewAreaProps {
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
   handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   setCompIdToSrc: (map: Map<string, string>) => void;
   setCompositionLoading: (loading: boolean) => void;
   shouldShowSelectedDomBounds: boolean;
@@ -66,6 +70,7 @@ export function StudioPreviewArea({
   handleTimelineElementMove,
   handleTimelineElementResize,
   handleBlockedTimelineEdit,
+  handleTimelineElementSplit,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowSelectedDomBounds,
@@ -101,8 +106,24 @@ export function StudioPreviewArea({
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
+    selectedGsapAnimations,
+    handleGsapRemoveKeyframe,
+    handleGsapUpdateMeta,
+    handleGsapAddKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapDeleteAnimation,
   } = useDomEditContext();
+  const [snapPrefs, setSnapPrefs] = useState(() => {
+    const p = readStudioUiPreferences();
+    return {
+      snapEnabled: p.snapEnabled ?? true,
+      gridVisible: p.gridVisible ?? false,
+      gridSpacing: p.gridSpacing ?? 50,
+      snapToGrid: p.snapToGrid ?? false,
+    };
+  });
   return (
     <div className="flex-1 flex flex-col relative min-w-0">
       <div className="flex-1 min-h-0 relative">
@@ -120,7 +141,56 @@ export function StudioPreviewArea({
           onMoveElement={handleTimelineElementMove}
           onResizeElement={handleTimelineElementResize}
           onBlockedEditAttempt={handleBlockedTimelineEdit}
+          onSplitElement={handleTimelineElementSplit}
           onSelectTimelineElement={handleTimelineElementSelect}
+          onDeleteAllKeyframes={(_elId) => {
+            const anim =
+              selectedGsapAnimations.find((a) => a.keyframes) ?? selectedGsapAnimations[0];
+            if (anim) handleGsapDeleteAnimation(anim.id);
+          }}
+          onDeleteKeyframe={(_elId, pct) => {
+            const anim = selectedGsapAnimations.find((a) => a.keyframes);
+            if (anim) handleGsapRemoveKeyframe(anim.id, pct);
+          }}
+          onChangeKeyframeEase={(_elId, _pct, ease) => {
+            const anim = selectedGsapAnimations.find((a) => a.keyframes);
+            if (anim) handleGsapUpdateMeta(anim.id, { ease });
+          }}
+          // fallow-ignore-next-line complexity
+          onMoveKeyframe={(_el, oldPct, newPct) => {
+            const anim = selectedGsapAnimations.find((a) => a.keyframes);
+            if (!anim?.keyframes) return;
+            const kf = anim.keyframes.keyframes.find((k) => k.percentage === oldPct);
+            if (!kf) return;
+            handleGsapRemoveKeyframe(anim.id, oldPct);
+            for (const [prop, val] of Object.entries(kf.properties)) {
+              handleGsapAddKeyframe(anim.id, newPct, 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);
+              }
+            } else {
+              const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
+              if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
+            }
+          }}
           onCompIdToSrcChange={setCompIdToSrc}
           onCompositionLoadingChange={setCompositionLoading}
           onCompositionChange={(compPath) => {
@@ -157,31 +227,36 @@ export function StudioPreviewArea({
             ) : 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}
-                onCanvasMouseDown={handlePreviewCanvasMouseDown}
-                onCanvasPointerMove={handlePreviewCanvasPointerMove}
-                onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
-                onSelectionChange={applyDomSelection}
-                onBlockedMove={handleBlockedDomMove}
-                onManualDragStart={handleDomManualDragStart}
-                onPathOffsetCommit={handleDomPathOffsetCommit}
-                onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
-                onBoxSizeCommit={handleDomBoxSizeCommit}
-                onRotationCommit={handleDomRotationCommit}
-              />
+              <>
+                <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}
+                  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}
+                />
+                <SnapToolbar onSnapChange={setSnapPrefs} />
+              </>
             ) : null
           }
           timelineFooter={

package/src/components/StudioRightPanel.tsx CHANGED Viewed

@@ -91,6 +91,7 @@ export function StudioRightPanel({
     handleGsapUpdateFromProperty,
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
+    commitAnimatedProperty,
   } = useDomEditContext();
   const { assets, fontAssets, projectDir, handleImportFiles, handleImportFonts } =
@@ -211,6 +212,7 @@ export function StudioRightPanel({
                   onImportAssets={handleImportFiles}
                   fontAssets={fontAssets}
                   onImportFonts={handleImportFonts}
+                  previewIframeRef={previewIframeRef}
                   gsapAnimations={selectedGsapAnimations}
                   gsapMultipleTimelines={gsapMultipleTimelines}
                   gsapUnsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
@@ -223,6 +225,7 @@ export function StudioRightPanel({
                   onAddGsapFromProperty={handleGsapAddFromProperty}
                   onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
                   onAddGsapAnimation={handleGsapAddAnimation}
+                  onCommitAnimatedProperty={commitAnimatedProperty}
                 />
               ) : motionPanelActive ? (
                 <MotionPanel

package/src/components/StudioToast.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+interface StudioToastProps {
+  message: string;
+  tone?: "error" | "info";
+}
+export function StudioToast({ message, tone }: StudioToastProps) {
+  return (
+    <div
+      className={`absolute bottom-6 left-1/2 -translate-x-1/2 z-[91] px-4 py-2 rounded-lg border text-sm shadow-lg animate-in fade-in slide-in-from-bottom-2 ${
+        tone === "error"
+          ? "bg-red-900/90 border-red-700/50 text-red-200"
+          : "bg-neutral-900/95 border-neutral-700/60 text-neutral-100"
+      }`}
+    >
+      {message}
+    </div>
+  );
+}

package/src/components/TimelineToolbar.tsx CHANGED Viewed

@@ -3,25 +3,251 @@ import {
   getTimelineZoomPercent,
 } from "../player/components/timelineZoom";
 import { getTimelineToggleTitle } from "../utils/timelineDiscovery";
-import { usePlayerStore } from "../player";
+import { usePlayerStore, type TimelineElement } from "../player";
+import { STUDIO_KEYFRAMES_ENABLED } from "./editor/manualEditingAvailability";
 import { Tooltip } from "./ui";
+import { Scissors } from "../icons/SystemIcons";
+import type { GsapAnimation, GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "./editor/domEditingTypes";
+function interpolateKeyframeProperties(
+  keyframes: GsapPercentageKeyframe[],
+  pct: number,
+): Record<string, number> {
+  const sorted = keyframes.slice().sort((a, b) => a.percentage - b.percentage);
+  const allProps = new Set<string>();
+  for (const kf of sorted) {
+    for (const p of Object.keys(kf.properties)) {
+      if (typeof kf.properties[p] === "number") allProps.add(p);
+    }
+  }
+  const result: Record<string, number> = {};
+  for (const prop of allProps) {
+    let prev: { pct: number; val: number } | null = null;
+    let next: { pct: number; val: number } | null = null;
+    for (const kf of sorted) {
+      const v = kf.properties[prop];
+      if (typeof v !== "number") continue;
+      if (kf.percentage <= pct) prev = { pct: kf.percentage, val: v };
+      if (kf.percentage >= pct && !next) next = { pct: kf.percentage, val: v };
+    }
+    if (prev && next && prev.pct !== next.pct) {
+      const t = (pct - prev.pct) / (next.pct - prev.pct);
+      result[prop] = Math.round(prev.val + t * (next.val - prev.val));
+    } else if (prev) {
+      result[prop] = Math.round(prev.val);
+    } else if (next) {
+      result[prop] = Math.round(next.val);
+    }
+  }
+  return result;
+}
+function readRuntimeKeyframeValues(
+  iframe: HTMLIFrameElement | null,
+  sel: DomEditSelection,
+  keyframes: GsapPercentageKeyframe[],
+): Record<string, number> {
+  if (!iframe?.contentWindow) return {};
+  let gsap: { getProperty?: (el: Element, prop: string) => number } | undefined;
+  try {
+    gsap = (iframe.contentWindow as Window & { gsap?: typeof gsap }).gsap;
+  } catch {
+    return {};
+  }
+  if (!gsap?.getProperty) return {};
+  const selector = sel.id ? `#${sel.id}` : sel.selector;
+  if (!selector) return {};
+  let doc: Document | null = null;
+  try {
+    doc = iframe.contentDocument;
+  } catch {
+    return {};
+  }
+  const element = doc?.querySelector(selector);
+  if (!element) return {};
+  const allProps = new Set<string>();
+  for (const kf of keyframes) {
+    for (const p of Object.keys(kf.properties)) {
+      if (typeof kf.properties[p] === "number") allProps.add(p);
+    }
+  }
+  const result: Record<string, number> = {};
+  for (const prop of allProps) {
+    const val = Number(gsap.getProperty(element, prop));
+    if (Number.isFinite(val)) result[prop] = Math.round(val);
+  }
+  return result;
+}
+interface DomEditSessionSlice {
+  domEditSelection: DomEditSelection | null;
+  selectedGsapAnimations: GsapAnimation[];
+  handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
+  handleGsapAddKeyframe: (animId: string, pct: number, prop: string, val: number | string) => void;
+  handleGsapConvertToKeyframes: (animId: string) => void;
+  handleGsapMaterializeKeyframes?: (animId: string) => Promise<void>;
+  handleGsapAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+}
 interface TimelineToolbarProps {
   toggleTimelineVisibility: () => void;
+  domEditSession?: DomEditSessionSlice;
+  onSplitElement?: (element: TimelineElement, splitTime: number) => void;
 }
-export function TimelineToolbar({ toggleTimelineVisibility }: TimelineToolbarProps) {
+// fallow-ignore-next-line complexity
+function useKeyframeToggle(session?: DomEditSessionSlice) {
+  const currentTime = usePlayerStore((s) => s.currentTime);
+  if (!session) return { state: "none" as const, onToggle: undefined };
+  const sel = session.domEditSelection;
+  const anims = session.selectedGsapAnimations;
+  const kfAnim = anims.find((a) => a.keyframes);
+  const flatAnim = anims.find((a) => !a.keyframes);
+  let state: "active" | "inactive" | "none" = "none";
+  if (kfAnim?.keyframes && sel) {
+    const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
+    const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
+    const pct =
+      elDuration > 0
+        ? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 1000) / 10))
+        : 0;
+    state = kfAnim.keyframes.keyframes.some((k) => Math.abs(k.percentage - pct) <= 1)
+      ? "active"
+      : "inactive";
+  }
+  // fallow-ignore-next-line complexity
+  const onToggle = sel
+    ? async () => {
+        const t = usePlayerStore.getState().currentTime;
+        if (kfAnim?.keyframes) {
+          if (kfAnim.hasUnresolvedKeyframes) {
+            await session.handleGsapMaterializeKeyframes?.(kfAnim.id);
+          }
+          const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
+          const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
+          const pct =
+            elDuration > 0
+              ? Math.max(0, Math.min(100, Math.round(((t - elStart) / elDuration) * 1000) / 10))
+              : 0;
+          const existing = kfAnim.keyframes.keyframes.find(
+            (k) => Math.abs(k.percentage - pct) <= 1,
+          );
+          if (existing) {
+            session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
+          } else {
+            const runtimeValues = readRuntimeKeyframeValues(
+              session.previewIframeRef?.current ?? null,
+              sel,
+              kfAnim.keyframes.keyframes,
+            );
+            const values =
+              Object.keys(runtimeValues).length > 0
+                ? runtimeValues
+                : interpolateKeyframeProperties(kfAnim.keyframes.keyframes, pct);
+            for (const [prop, val] of Object.entries(values)) {
+              session.handleGsapAddKeyframe(kfAnim.id, pct, prop, val);
+            }
+          }
+        } else if (flatAnim) {
+          session.handleGsapConvertToKeyframes(flatAnim.id);
+        } else {
+          session.handleGsapAddAnimation("to");
+        }
+      }
+    : undefined;
+  return { state, onToggle };
+}
+export function TimelineToolbar({
+  toggleTimelineVisibility,
+  domEditSession,
+  onSplitElement,
+}: TimelineToolbarProps) {
   const zoomMode = usePlayerStore((s) => s.zoomMode);
   const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
   const setZoomMode = usePlayerStore((s) => s.setZoomMode);
   const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
   const displayedTimelineZoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  const { state: keyframeState, onToggle: onToggleKeyframe } = useKeyframeToggle(domEditSession);
   return (
     <div className="border-b border-neutral-800/40 bg-neutral-950/96">
       <div className="flex items-center justify-between px-3 py-2">
-        <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
-          Timeline
+        <div className="flex items-center gap-3">
+          <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
+            Timeline
+          </div>
+          {STUDIO_KEYFRAMES_ENABLED && onToggleKeyframe && (
+            <Tooltip
+              label={
+                keyframeState === "active"
+                  ? "Remove keyframe at playhead"
+                  : keyframeState === "inactive"
+                    ? "Add keyframe at playhead"
+                    : "Enable keyframes"
+              }
+            >
+              <button
+                type="button"
+                onClick={onToggleKeyframe}
+                className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                  keyframeState === "active"
+                    ? "text-studio-accent"
+                    : keyframeState === "inactive"
+                      ? "text-neutral-400 hover:text-studio-accent"
+                      : "text-neutral-600 hover:text-neutral-400"
+                }`}
+              >
+                <svg width="18" height="18" viewBox="0 0 10 10" fill="currentColor">
+                  {keyframeState === "active" ? (
+                    <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
+                  ) : (
+                    <path
+                      d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.2"
+                    />
+                  )}
+                </svg>
+              </button>
+            </Tooltip>
+          )}
+          {onSplitElement &&
+            (() => {
+              const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
+              const el = selectedElementId
+                ? elements.find((e) => (e.key ?? e.id) === selectedElementId)
+                : null;
+              const splittable =
+                el && !el.compositionSrc && ["video", "audio", "img"].includes(el.tag);
+              if (!splittable) return null;
+              const canSplit = currentTime > el.start && currentTime < el.start + el.duration;
+              return (
+                <Tooltip label="Split clip at playhead (S)">
+                  <button
+                    type="button"
+                    disabled={!canSplit}
+                    onClick={() => {
+                      if (canSplit) onSplitElement(el, currentTime);
+                    }}
+                    className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                      canSplit
+                        ? "text-neutral-500 hover:text-neutral-200"
+                        : "text-neutral-700 cursor-not-allowed"
+                    }`}
+                  >
+                    <Scissors size={15} />
+                  </button>
+                </Tooltip>
+              );
+            })()}
         </div>
         <div className="flex items-center gap-1">
           <Tooltip label="Fit timeline to width">