feat(studio): design panel, timeline polish, feature flag [6/6] (#1172)

* feat(core): spring physics solver + runtime fixes + spring ease editor * feat(core): spring physics solver + runtime fixes + spring ease editor Revert totalTime nudge that caused black first frames in from() tweens. Keep stale CSS offset cleanup. Regenerate baselines for offset cleanup. * ci: trigger regression run * test(producer): regenerate heygen-promo-preview-assets and style-9-prod baselines Baselines regenerated inside Dockerfile.test on the devbox to match the current runtime init.ts changes. Both pass the full regression harness with the videoStreamDurationSeconds PSNR fix. * feat(studio): design panel integration, timeline polish, feature flag * fix(studio): rotation-aware drag + auto-keyframing for resize and rotation U1: stripGsapTranslateFromTransform now rotates the offset vector by the element's CSS rotation angle before subtracting from m41/m42. Fixes elements drifting from cursor during drag when rotated. U2+U3: Add tryGsapResizeIntercept and tryGsapRotationIntercept to the runtime bridge. Resize and rotation handle changes now create keyframes via the same async pipeline as position drag. CSS path guards prevent double-persistence for GSAP-animated elements. * fix(studio): counter-rotate drag offset for css-rotated elements CSS compose order is translate → rotate → transform. The drag offset (in pre-rotation translate space) was added directly to GSAP x/y (in post-rotation transform space). Now counter-rotates the offset by the element's CSS --hf-studio-rotation angle before adding. * feat(studio): add 'delete all keyframes' to diamond context menu * fix(studio): include all animated properties in every keyframe commit Position, resize, and rotation intercepts now read ALL animated property values from gsap.getProperty() at commit time and include them in the keyframe. Prevents other properties from jumping to interpolated values between surrounding keyframes when only one property (e.g., width) was explicitly changed.
2026-09-03 04:38:33 +00:00 · 2026-06-05 12:05:55 -04:00
parent 7a0883264d
commit a5211954ea
20 changed files with 800 additions and 77 deletions
@@ -266,8 +266,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,
@@ -299,8 +301,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 +349,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 +483,14 @@ 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}
+    />
+  );
  return (
    <StudioProvider value={studioCtxValue}>
      <PanelLayoutProvider value={panelLayout}>
@@ -540,7 +555,6 @@ export function StudioApp() {
              {lintModal !== null && (
                <LintModal findings={lintModal} projectId={projectId} onClose={closeLintModal} />
              )}
-
              {consoleErrors !== null && consoleErrors.length > 0 && (
                <LintModal
                  findings={consoleErrors}
@@ -548,7 +562,6 @@ export function StudioApp() {
                  onClose={() => setConsoleErrors(null)}
                />
              )}
-
              {domEditSession.agentModalOpen && domEditSession.domEditSelection && (
                <AskAgentModal
                  selectionLabel={domEditSession.domEditSelection.label}
@@ -567,7 +580,6 @@ 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 ${
@@ -5,6 +5,7 @@ import { CaptionTimeline } from "../captions/components/CaptionTimeline";
 import { DomEditOverlay } from "./editor/DomEditOverlay";
 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,
@@ -101,6 +102,12 @@ export function StudioPreviewArea({
    handleDomGroupPathOffsetCommit,
    handleDomBoxSizeCommit,
    handleDomRotationCommit,
+    selectedGsapAnimations,
+    handleGsapRemoveKeyframe,
+    handleGsapUpdateMeta,
+    handleGsapAddKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
  } = useDomEditContext();

  return (
@@ -121,6 +128,53 @@ export function StudioPreviewArea({
          onResizeElement={handleTimelineElementResize}
          onBlockedEditAttempt={handleBlockedTimelineEdit}
          onSelectTimelineElement={handleTimelineElementSelect}
+          onDeleteAllKeyframes={(_elId) => {
+            const anim = selectedGsapAnimations.find((a) => a.keyframes);
+            if (anim) handleGsapRemoveAllKeyframes(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) => {
@@ -9,13 +9,29 @@ import {
  METHOD_LABELS,
  METHOD_TOOLTIPS,
  PERCENT_PROPS,
+  PROP_CONSTRAINTS,
  PROP_LABELS,
  PROP_TOOLTIPS,
  PROP_UNITS,
+  clampPropertyValue,
 } from "./gsapAnimationConstants";
 import { buildTweenSummary } from "./gsapAnimationHelpers";
 import { EaseCurveSection } from "./EaseCurveSection";
 const BOOLEAN_PROPS = new Set(["visibility"]);
+const STRING_PROPS = new Set(["filter", "clipPath"]);
+
+const FILTER_PRESETS = [
+  { label: "Blur", value: "blur(4px)" },
+  { label: "Bright", value: "brightness(1.5)" },
+  { label: "Gray", value: "grayscale(1)" },
+  { label: "None", value: "none" },
+];
+
+const CLIP_PATH_PRESETS = [
+  { label: "Circle", value: "circle(50% at 50% 50%)" },
+  { label: "Inset", value: "inset(10%)" },
+  { label: "None", value: "none" },
+];

 function isPercentProp(prop: string): boolean {
  return PERCENT_PROPS.has(prop);
@@ -27,7 +43,11 @@ function displayValue(prop: string, val: number | string): string {
 }

 function adjustedValue(prop: string, raw: string): string {
-  if (isPercentProp(prop)) return String(Math.max(0, Math.min(1, Number(raw) / 100)));
+  if (isPercentProp(prop)) return String(clampPropertyValue(prop, Number(raw) / 100));
+  const num = Number(raw);
+  if (!Number.isNaN(num) && PROP_CONSTRAINTS[prop]) {
+    return String(clampPropertyValue(prop, num));
+  }
  return raw;
 }

@@ -90,6 +110,48 @@ function PropertyRow({
    );
  }

+  if (STRING_PROPS.has(prop)) {
+    const presets =
+      prop === "filter" ? FILTER_PRESETS : prop === "clipPath" ? CLIP_PATH_PRESETS : [];
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
+            <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">
+              {PROP_LABELS[prop] ?? prop}
+            </span>
+            <input
+              type="text"
+              defaultValue={String(val)}
+              className="flex-1 bg-transparent text-[11px] text-neutral-200 outline-none"
+              onBlur={(e) => onCommit(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.currentTarget.blur();
+                }
+              }}
+            />
+          </div>
+          <RemoveButton onClick={onRemove} title={removeTitle} />
+        </div>
+        {presets.length > 0 && (
+          <div className="flex gap-1 pl-1">
+            {presets.map((p) => (
+              <button
+                key={p.value}
+                type="button"
+                onClick={() => onCommit(p.value)}
+                className="px-1.5 py-0.5 rounded text-[9px] font-medium text-neutral-500 bg-neutral-800/50 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
  return (
    <div className="flex items-center gap-1">
      <div className="min-w-0 flex-1">
@@ -292,8 +354,10 @@ export const AnimationCard = memo(function AnimationCard({
          {methodLabel}
        </span>
        <span className="text-[11px] font-medium text-neutral-400" title="When this effect plays">
-          {typeof animation.position === "number" ? `${animation.position}s` : animation.position} –{" "}
-          {typeof endTime === "number" ? `${endTime.toFixed(1)}s` : endTime}
+          {typeof animation.position === "number"
+            ? `${parseFloat(animation.position.toFixed(3))}s`
+            : animation.position}{" "}
+          – {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
        </span>
        <span className="ml-auto text-[10px] text-neutral-500" title={easeName}>
          {easeLabel}
@@ -344,7 +408,7 @@ export const AnimationCard = memo(function AnimationCard({
                value={
                  typeof animation.position === "string"
                    ? animation.position
-                    : String(Math.max(0, animation.position))
+                    : String(parseFloat(Math.max(0, animation.position).toFixed(3)))
                }
                suffix={typeof animation.position === "number" ? "s" : undefined}
                tooltip="When this effect begins on the timeline"
@@ -14,7 +14,9 @@ import { MetricField, Section } from "./propertyPanelPrimitives";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
-import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
+import { KeyframeNavigation } from "./KeyframeNavigation";
+import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import { usePlayerStore } from "../../player";

 // Re-export helpers that external consumers import from this module
 export {
@@ -65,6 +67,15 @@ interface PropertyPanelProps {
  onAddGsapFromProperty?: (animId: string, prop: string) => void;
  onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
  onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
+  onAddKeyframe?: (
+    animationId: string,
+    percentage: number,
+    property: string,
+    value: number | string,
+  ) => void;
+  onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onConvertToKeyframes?: (animationId: string) => void;
+  onSeekToTime?: (time: number) => void;
 }

 /* ------------------------------------------------------------------ */
@@ -170,6 +181,10 @@ export const PropertyPanel = memo(function PropertyPanel({
  onAddGsapFromProperty,
  onRemoveGsapFromProperty,
  onAddGsapAnimation,
+  onAddKeyframe,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+  onSeekToTime,
 }: PropertyPanelProps) {
  const styles = element?.computedStyles ?? EMPTY_STYLES;

@@ -223,6 +238,11 @@ export const PropertyPanel = memo(function PropertyPanel({
  const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
    const parsed = parsePxMetricValue(nextValue);
    if (parsed == null) return;
+    if (gsapKeyframes && gsapAnimId && onAddKeyframe) {
+      const pct = Math.max(0, Math.min(100, Math.round(currentPct * 10) / 10));
+      onAddKeyframe(gsapAnimId, pct, axis, parsed);
+      return;
+    }
    const current = readStudioPathOffset(element.element);
    onSetManualOffset(element, {
      x: axis === "x" ? parsed : current.x,
@@ -256,6 +276,16 @@ export const PropertyPanel = memo(function PropertyPanel({
    onSetManualRotation(element, { angle: parsed });
  };

+  // Keyframe navigation state
+  const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
+  const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
+  const currentTime = usePlayerStore((s) => s.currentTime);
+  const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
+
+  const gsapKeyframes = gsapAnimations?.find((a) => a.keyframes)?.keyframes?.keyframes ?? null;
+  const gsapAnimId =
+    gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null;
+
  return (
    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100">
      <div className="border-b border-neutral-800 px-4 py-5">
@@ -317,39 +347,118 @@ export const PropertyPanel = memo(function PropertyPanel({

        <Section title="Layout" icon={<Move size={15} />}>
          <div className={RESPONSIVE_GRID}>
-            <MetricField
-              label="X"
-              value={formatPxMetricValue(manualOffset.x)}
-              disabled={manualOffsetEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualOffset("x", next)}
-            />
-            <MetricField
-              label="Y"
-              value={formatPxMetricValue(manualOffset.y)}
-              disabled={manualOffsetEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualOffset("y", next)}
-            />
-            <MetricField
-              label="W"
-              value={formatPxMetricValue(resolvedWidth)}
-              disabled={manualSizeEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualSize("width", next)}
-            />
-            <MetricField
-              label="H"
-              value={formatPxMetricValue(resolvedHeight)}
-              disabled={manualSizeEditingDisabled}
-              scrub
-              onCommit={(next) => commitManualSize("height", next)}
-            />
-            <MetricField
-              label="R"
-              value={`${manualRotation.angle}°`}
-              onCommit={(next) => commitManualRotation(next.replace("°", ""))}
-            />
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="X"
+                  value={formatPxMetricValue(manualOffset.x)}
+                  disabled={manualOffsetEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualOffset("x", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="x"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={(pct) => onAddKeyframe?.(gsapAnimId, pct, "x", manualOffset.x)}
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="Y"
+                  value={formatPxMetricValue(manualOffset.y)}
+                  disabled={manualOffsetEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualOffset("y", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="y"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={(pct) => onAddKeyframe?.(gsapAnimId, pct, "y", manualOffset.y)}
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="W"
+                  value={formatPxMetricValue(resolvedWidth)}
+                  disabled={manualSizeEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualSize("width", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="width"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={(pct) => onAddKeyframe?.(gsapAnimId, pct, "width", resolvedWidth)}
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="H"
+                  value={formatPxMetricValue(resolvedHeight)}
+                  disabled={manualSizeEditingDisabled}
+                  scrub
+                  onCommit={(next) => commitManualSize("height", next)}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="height"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={(pct) =>
+                    onAddKeyframe?.(gsapAnimId, pct, "height", resolvedHeight)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="R"
+                  value={`${manualRotation.angle}°`}
+                  onCommit={(next) => commitManualRotation(next.replace("°", ""))}
+                />
+              </div>
+              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                <KeyframeNavigation
+                  property="rotation"
+                  keyframes={gsapKeyframes}
+                  currentPercentage={currentPct}
+                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onAddKeyframe={(pct) =>
+                    onAddKeyframe?.(gsapAnimId, pct, "rotation", manualRotation.angle)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
          </div>
          <div className="mt-3">
            <MetricField
@@ -27,6 +27,16 @@ export const PROP_LABELS: Record<string, string> = {
  autoAlpha: "Visibility",
  visibility: "Visible",
  scaleX_alias: "Stretch X",
+  filter: "Filter",
+  clipPath: "Clip Path",
+  color: "Color",
+  backgroundColor: "Background",
+  borderColor: "Border Color",
+  borderRadius: "Radius",
+  fontSize: "Font Size",
+  letterSpacing: "Tracking",
+  skewX: "Skew X",
+  skewY: "Skew Y",
 };

 export const PROP_UNITS: Record<string, string> = {
@@ -83,6 +93,11 @@ export const EASE_LABELS: Record<string, string> = {
  "expo.out": "Very snappy stop",
  "expo.in": "Very slow start",
  "expo.inOut": "Dramatic ease",
+  "spring-gentle": "Gentle spring",
+  "spring-bouncy": "Bouncy spring",
+  "spring-stiff": "Stiff spring",
+  "spring-wobbly": "Wobbly spring",
+  "spring-heavy": "Heavy spring",
 };

 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
@@ -123,6 +138,33 @@ export function parseCustomEaseFromString(ease: string): {

 export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);

+export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step?: number }> = {
+  opacity: { min: 0, max: 1, step: 0.01 },
+  autoAlpha: { min: 0, max: 1, step: 0.01 },
+  scale: { min: -10, max: 10, step: 0.01 },
+  scaleX: { min: -10, max: 10, step: 0.01 },
+  scaleY: { min: -10, max: 10, step: 0.01 },
+  rotation: { step: 1 },
+  skewX: { min: -90, max: 90, step: 1 },
+  skewY: { min: -90, max: 90, step: 1 },
+  width: { min: 0, step: 1 },
+  height: { min: 0, step: 1 },
+  borderRadius: { min: 0, step: 1 },
+  x: { step: 1 },
+  y: { step: 1 },
+  fontSize: { min: 1, step: 1 },
+  letterSpacing: { step: 0.1 },
+};
+
+export function clampPropertyValue(prop: string, value: number): number {
+  const constraint = PROP_CONSTRAINTS[prop];
+  if (!constraint) return value;
+  let clamped = value;
+  if (constraint.min !== undefined) clamped = Math.max(constraint.min, clamped);
+  if (constraint.max !== undefined) clamped = Math.min(constraint.max, clamped);
+  return clamped;
+}
+
 export const ADD_METHODS = ["to", "from", "fromTo", "set"] as const;

 export const ADD_METHOD_LABELS: Record<string, string> = {
@@ -14,7 +14,8 @@ export function buildTweenSummary(animation: GsapAnimation): string {
  const props = Object.entries(animation.properties);
  const target = animation.targetSelector;
  const dur = animation.duration ?? 0;
-  const pos = animation.position;
+  const rawPos = animation.position;
+  const pos = typeof rawPos === "number" ? parseFloat(rawPos.toFixed(3)) : rawPos;
  const propDescs = props.map(([p, v]) => {
    const label = (PROP_LABELS[p] ?? p).toLowerCase();
    return `${label} to ${formatPropValue(p, v)}`;
@@ -68,6 +68,12 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
  env,
  ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
+  true,
+);
+
+export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
  false,
 );

@@ -223,6 +223,7 @@ function isIdentityAfterTranslateStrip(m: DOMMatrix): boolean {
 }

 function stripGsapTranslateFromTransform(element: HTMLElement): void {
+  if (element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
  const transform = element.style.getPropertyValue("transform");
  if (!transform || transform === "none") return;
  const DOMMatrixCtor = (element.ownerDocument.defaultView as (Window & typeof globalThis) | null)
@@ -233,8 +234,11 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
    if (m.m41 === 0 && m.m42 === 0) return;
    const offsetX = readPxCustomProperty(element, STUDIO_OFFSET_X_PROP);
    const offsetY = readPxCustomProperty(element, STUDIO_OFFSET_Y_PROP);
-    m.m41 -= offsetX;
-    m.m42 -= offsetY;
+    const angle = Math.atan2(m.b, m.a);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    m.m41 -= offsetX * cos - offsetY * sin;
+    m.m42 -= offsetX * sin + offsetY * cos;
    if (Math.abs(m.m41) < 0.01 && Math.abs(m.m42) < 0.01 && isIdentityAfterTranslateStrip(m)) {
      element.style.removeProperty("transform");
    } else {
@@ -236,9 +236,25 @@ export function createManualOffsetDragMember(input: {
  const gestureToken = beginStudioManualEditGesture(input.element);
  const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);
  if (!measured.ok) {
-    restoreStudioPathOffset(input.element, initialPathOffset);
-    endStudioManualEditGesture(input.element, gestureToken);
-    return { ok: false, reason: measured.reason, selection: input.selection };
+    // Fallback: when GSAP transforms interfere with probe measurement, use
+    // the preview scale as an approximation. The commit path reads the actual
+    // GSAP position from the iframe runtime, so visual imprecision during
+    // drag is acceptable — the final committed position is always exact.
+    const scaleX = input.rect.editScaleX || 1;
+    const scaleY = input.rect.editScaleY || 1;
+    return {
+      ok: true,
+      member: {
+        key: input.key,
+        selection: input.selection,
+        element: input.element,
+        initialOffset,
+        initialPathOffset,
+        gestureToken,
+        screenToOffset: { a: 1 / scaleX, b: 0, c: 0, d: 1 / scaleY },
+        originRect: input.rect,
+      },
+    };
  }

  return {
@@ -70,6 +70,11 @@ interface NLELayoutProps {
  ) => Promise<void> | void;
  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
  onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
+  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
  /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
  onCompIdToSrcChange?: (map: Map<string, string>) => void;
  /** Whether the timeline panel is visible (default: true) */
@@ -118,6 +123,11 @@ export const NLELayout = memo(function NLELayout({
  onResizeElement,
  onBlockedEditAttempt,
  onSelectTimelineElement,
+  onDeleteKeyframe,
+  onDeleteAllKeyframes,
+  onChangeKeyframeEase,
+  onMoveKeyframe,
+  onToggleKeyframeAtPlayhead,
  onCompIdToSrcChange,
  timelineVisible,
  onToggleTimeline,
@@ -448,6 +458,11 @@ export const NLELayout = memo(function NLELayout({
                onResizeElement={onResizeElement}
                onBlockedEditAttempt={onBlockedEditAttempt}
                onSelectElement={onSelectTimelineElement}
+                onDeleteKeyframe={onDeleteKeyframe}
+                onDeleteAllKeyframes={onDeleteAllKeyframes}
+                onChangeKeyframeEase={onChangeKeyframeEase}
+                onMoveKeyframe={onMoveKeyframe}
+                onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}
              />
            </div>
            {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
@@ -65,6 +65,13 @@ export function DomEditProvider({
    handleGsapUpdateFromProperty,
    handleGsapAddFromProperty,
    handleGsapRemoveFromProperty,
+    handleGsapAddKeyframe,
+    handleGsapRemoveKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    handleResetSelectedElementKeyframes,
+    invalidateGsapCache,
+    previewIframeRef,
  },
  children,
 }: {
@@ -125,6 +132,13 @@ export function DomEditProvider({
      handleGsapUpdateFromProperty,
      handleGsapAddFromProperty,
      handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      invalidateGsapCache,
+      previewIframeRef,
    }),
    [
      domEditSelection,
@@ -179,6 +193,13 @@ export function DomEditProvider({
      handleGsapUpdateFromProperty,
      handleGsapAddFromProperty,
      handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      invalidateGsapCache,
+      previewIframeRef,
    ],
  );
  return <DomEditContext value={stable}>{children}</DomEditContext>;
@@ -146,7 +146,9 @@ export async function tryGsapDragIntercept(
  const gsapPos = readGsapPositionFromIframe(iframe, selector);
  if (!gsapPos) return false;

-  await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, { commitMutation });
+  await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, {
+    commitMutation,
+  });
  return true;
 }

@@ -171,14 +173,33 @@ async function commitGsapPositionFromDrag(
  anim: GsapAnimation,
  studioOffset: { x: number; y: number },
  gsapPos: { x: number; y: number },
+  iframe: HTMLIFrameElement | null,
+  selector: string,
  callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
-  const newX = Math.round(gsapPos.x + studioOffset.x);
-  const newY = Math.round(gsapPos.y + studioOffset.y);
+  // CSS composition: translate → rotate → transform. The studioOffset is in
+  // pre-rotation space (CSS translate), but GSAP x/y are in post-CSS-rotate
+  // space (CSS transform). Counter-rotate the offset to match GSAP's frame.
+  const rotStyle = selection.element.style.getPropertyValue("--hf-studio-rotation");
+  const rotDeg = Number.parseFloat(rotStyle) || 0;
+  const rad = (-rotDeg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const adjX = studioOffset.x * cos - studioOffset.y * sin;
+  const adjY = studioOffset.x * sin + studioOffset.y * cos;
+  const newX = Math.round(gsapPos.x + adjX);
+  const newY = Math.round(gsapPos.y + adjY);
  const clearOffset = () => clearStudioPathOffset(selection.element);

  if (anim.keyframes) {
-    await commitKeyframedPosition(selection, anim, newX, newY, callbacks, clearOffset);
+    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
+    await commitKeyframedPosition(
+      selection,
+      anim,
+      { ...runtimeProps, x: newX, y: newY },
+      callbacks,
+      clearOffset,
+    );
  } else if (anim.method === "from") {
    await commitFromPosition(selection, anim, studioOffset, callbacks, clearOffset);
  } else if (anim.method === "fromTo") {
@@ -186,7 +207,14 @@ async function commitGsapPositionFromDrag(
  } else {
    // Flat to()/set() — convert to keyframes first so the drag position
    // is captured at the current seek time, not just the tween endpoint.
-    await commitFlatViaKeyframes(selection, anim, newX, newY, callbacks, clearOffset);
+    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
+    await commitFlatViaKeyframes(
+      selection,
+      anim,
+      { ...runtimeProps, x: newX, y: newY },
+      callbacks,
+      clearOffset,
+    );
  }
 }

@@ -194,8 +222,7 @@ async function commitGsapPositionFromDrag(
 async function commitKeyframedPosition(
  selection: DomEditSelection,
  anim: GsapAnimation,
-  newX: number,
-  newY: number,
+  properties: Record<string, number>,
  callbacks: GsapDragCommitCallbacks,
  beforeReload: () => void,
 ): Promise<void> {
@@ -207,7 +234,7 @@ async function commitKeyframedPosition(
      type: "add-keyframe",
      animationId: anim.id,
      percentage: pct,
-      properties: { x: newX, y: newY },
+      properties,
    },
    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
  );
@@ -222,8 +249,7 @@ async function commitKeyframedPosition(
 async function commitFlatViaKeyframes(
  selection: DomEditSelection,
  anim: GsapAnimation,
-  newX: number,
-  newY: number,
+  properties: Record<string, number>,
  callbacks: GsapDragCommitCallbacks,
  beforeReload: () => void,
 ): Promise<void> {
@@ -241,7 +267,7 @@ async function commitFlatViaKeyframes(
      type: "add-keyframe",
      animationId: anim.id,
      percentage: pct,
-      properties: { x: newX, y: newY },
+      properties,
    },
    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
  );
@@ -305,3 +331,161 @@ async function commitFromToPosition(
    { label: "Move (GSAP to y)", softReload: true, beforeReload },
  );
 }
+
+// ── Runtime property reader ───────────────────────────────────────────────
+
+function readAllAnimatedProperties(
+  iframe: HTMLIFrameElement | null,
+  selector: string,
+  anim: GsapAnimation,
+): Record<string, number> {
+  const result: Record<string, number> = {};
+  if (!iframe?.contentWindow) return result;
+  let gsap: IframeGsap | undefined;
+  try {
+    gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
+  } catch {
+    return result;
+  }
+  if (!gsap?.getProperty) return result;
+  let doc: Document | null = null;
+  try {
+    doc = iframe.contentDocument;
+  } catch {
+    return result;
+  }
+  const el = doc?.querySelector(selector);
+  if (!el) return result;
+
+  const propKeys = new Set<string>();
+  if (anim.keyframes) {
+    for (const kf of anim.keyframes.keyframes) {
+      for (const p of Object.keys(kf.properties)) {
+        if (typeof kf.properties[p] === "number") propKeys.add(p);
+      }
+    }
+  } else {
+    for (const p of Object.keys(anim.properties)) propKeys.add(p);
+  }
+
+  for (const prop of propKeys) {
+    const val = Number(gsap.getProperty(el, prop));
+    if (Number.isFinite(val)) result[prop] = Math.round(val);
+  }
+  return result;
+}
+
+// ── Resize intercept ──────────────────────────────────────────────────────
+
+export async function tryGsapResizeIntercept(
+  selection: DomEditSelection,
+  size: { width: number; height: number },
+  animations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  commitMutation: GsapDragCommitCallbacks["commitMutation"],
+  fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+): Promise<boolean> {
+  let anim = animations.find(
+    (a) => "width" in a.properties || "height" in a.properties || a.keyframes,
+  );
+  if (!anim && fetchFallbackAnimations) {
+    const fresh = await fetchFallbackAnimations();
+    anim = fresh.find((a) => "width" in a.properties || "height" in a.properties || a.keyframes);
+  }
+  if (!anim) return false;
+
+  const pct = computeCurrentPercentage(selection);
+
+  if (!anim.keyframes) {
+    await commitMutation(
+      selection,
+      { type: "convert-to-keyframes", animationId: anim.id },
+      { label: "Convert to keyframes for resize", skipReload: true },
+    );
+  }
+
+  const selector = selectorForSelection(selection);
+  const runtimeProps = selector ? readAllAnimatedProperties(iframe, selector, anim) : {};
+  const properties = {
+    ...runtimeProps,
+    width: Math.round(size.width),
+    height: Math.round(size.height),
+  };
+
+  await commitMutation(
+    selection,
+    {
+      type: "add-keyframe",
+      animationId: anim.id,
+      percentage: pct,
+      properties,
+    },
+    { label: `Resize (keyframe ${pct}%)`, softReload: true },
+  );
+  return true;
+}
+
+// ── Rotation intercept ────────────────────────────────────────────────────
+
+export async function tryGsapRotationIntercept(
+  selection: DomEditSelection,
+  angle: number,
+  animations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  commitMutation: GsapDragCommitCallbacks["commitMutation"],
+  fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+): Promise<boolean> {
+  let anim = animations.find((a) => "rotation" in a.properties || a.keyframes);
+  if (!anim && fetchFallbackAnimations) {
+    const fresh = await fetchFallbackAnimations();
+    anim = fresh.find((a) => "rotation" in a.properties || a.keyframes);
+  }
+  if (!anim) return false;
+
+  const selector = selectorForSelection(selection);
+  if (!selector) return false;
+
+  let gsapRotation = 0;
+  if (iframe?.contentWindow) {
+    try {
+      const gsap = (
+        iframe.contentWindow as unknown as {
+          gsap?: { getProperty: (el: Element, prop: string) => number };
+        }
+      ).gsap;
+      const doc = iframe.contentDocument;
+      const el = doc?.querySelector(selector);
+      if (gsap?.getProperty && el) {
+        gsapRotation = Number(gsap.getProperty(el, "rotation")) || 0;
+      }
+    } catch {
+      /* cross-origin guard */
+    }
+  }
+
+  const pct = computeCurrentPercentage(selection);
+  const newRotation = Math.round(gsapRotation + angle);
+
+  if (!anim.keyframes) {
+    await commitMutation(
+      selection,
+      { type: "convert-to-keyframes", animationId: anim.id },
+      { label: "Convert to keyframes for rotation", skipReload: true },
+    );
+  }
+
+  const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
+  const properties = { ...runtimeProps, rotation: newRotation };
+
+  await commitMutation(
+    selection,
+    {
+      type: "add-keyframe",
+      animationId: anim.id,
+      percentage: pct,
+      properties,
+    },
+    { label: `Rotate (keyframe ${pct}%)`, softReload: true },
+  );
+  return true;
+}
@@ -352,23 +352,25 @@ export function useDomEditCommits({
  const handleDomBoxSizeCommit = useCallback(
    (selection: DomEditSelection, next: { width: number; height: number }) => {
      applyStudioBoxSize(selection.element, next);
+      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) return;
      commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
        label: "Resize layer box",
        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
      });
    },
-    [commitPositionPatchToHtml],
+    [commitPositionPatchToHtml, previewIframeRef],
  );

  const handleDomRotationCommit = useCallback(
    (selection: DomEditSelection, next: { angle: number }) => {
      applyStudioRotation(selection.element, next);
+      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) return;
      commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
        label: "Rotate layer",
        coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
      });
    },
-    [commitPositionPatchToHtml],
+    [commitPositionPatchToHtml, previewIframeRef],
  );

  const handleDomManualEditsReset = useCallback(
@@ -23,7 +23,11 @@ import {
  fetchParsedAnimations,
  getAnimationsForElement,
 } from "./useGsapTweenCache";
-import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
+import {
+  tryGsapDragIntercept,
+  tryGsapResizeIntercept,
+  tryGsapRotationIntercept,
+} from "./gsapRuntimeBridge";

 // ── Types ──

@@ -326,6 +330,68 @@ export function useDomEditSession({
    ],
  );

+  const makeFetchFallback = useCallback(
+    (selection: DomEditSelection) => async () => {
+      const pid = projectId;
+      if (!pid) return [];
+      const parsed = await fetchParsedAnimations(pid, gsapSourceFile);
+      if (!parsed) return [];
+      return getAnimationsForElement(parsed.animations, {
+        id: selection.id ?? null,
+        selector: selection.selector ?? null,
+      });
+    },
+    [projectId, gsapSourceFile],
+  );
+
+  const handleGsapAwareBoxSizeCommit = useCallback(
+    async (selection: DomEditSelection, next: { width: number; height: number }) => {
+      if (gsapCommitMutation) {
+        const handled = await tryGsapResizeIntercept(
+          selection,
+          next,
+          selectedGsapAnimations,
+          previewIframeRef.current,
+          gsapCommitMutation,
+          makeFetchFallback(selection),
+        );
+        if (handled) return;
+      }
+      handleDomBoxSizeCommit(selection, next);
+    },
+    [
+      handleDomBoxSizeCommit,
+      selectedGsapAnimations,
+      gsapCommitMutation,
+      previewIframeRef,
+      makeFetchFallback,
+    ],
+  );
+
+  const handleGsapAwareRotationCommit = useCallback(
+    async (selection: DomEditSelection, next: { angle: number }) => {
+      if (gsapCommitMutation) {
+        const handled = await tryGsapRotationIntercept(
+          selection,
+          next.angle,
+          selectedGsapAnimations,
+          previewIframeRef.current,
+          gsapCommitMutation,
+          makeFetchFallback(selection),
+        );
+        if (handled) return;
+      }
+      handleDomRotationCommit(selection, next);
+    },
+    [
+      handleDomRotationCommit,
+      selectedGsapAnimations,
+      gsapCommitMutation,
+      previewIframeRef,
+      makeFetchFallback,
+    ],
+  );
+
  const handleGsapUpdateProperty = useCallback(
    (animId: string, prop: string, value: number | string) => {
      if (!domEditSelection) return;
@@ -552,8 +618,8 @@ export function useDomEditSession({
    handleDomHtmlAttributeCommit,
    handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
    handleDomGroupPathOffsetCommit,
-    handleDomBoxSizeCommit,
-    handleDomRotationCommit,
+    handleDomBoxSizeCommit: handleGsapAwareBoxSizeCommit,
+    handleDomRotationCommit: handleGsapAwareRotationCommit,
    handleDomManualEditsReset,
    handleDomMotionCommit,
    handleDomMotionClear,
@@ -13,6 +13,7 @@ interface KeyframeDiamondContextMenuProps {
  state: KeyframeDiamondContextMenuState;
  onClose: () => void;
  onDelete: (elementId: string, percentage: number) => void;
+  onDeleteAll: (elementId: string) => void;
  onChangeEase: (elementId: string, percentage: number, ease: string) => void;
  onCopyProperties: (elementId: string, percentage: number) => void;
 }
@@ -36,6 +37,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
  state,
  onClose,
  onDelete,
+  onDeleteAll,
  onChangeEase,
  onCopyProperties,
 }: KeyframeDiamondContextMenuProps) {
@@ -135,6 +137,17 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
        Delete Keyframe
      </button>

+      <button
+        type="button"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+        onClick={() => {
+          onDeleteAll(state.elementId);
+          onClose();
+        }}
+      >
+        Delete All Keyframes
+      </button>
+
      {/* Copy Properties */}
      <button
        type="button"
@@ -11,6 +11,10 @@ import { getTimelinePixelsPerSecond } from "./timelineZoom";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
+import {
+  KeyframeDiamondContextMenu,
+  type KeyframeDiamondContextMenuState,
+} from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
 import {
  GUTTER,
@@ -67,6 +71,11 @@ interface TimelineProps {
  ) => Promise<void> | void;
  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
  onSelectElement?: (element: TimelineElement | null) => void;
+  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
+  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
  theme?: Partial<TimelineTheme>;
 }

@@ -83,6 +92,11 @@ export const Timeline = memo(function Timeline({
  onResizeElement,
  onBlockedEditAttempt,
  onSelectElement,
+  onDeleteKeyframe,
+  onDeleteAllKeyframes,
+  onChangeKeyframeEase,
+  onMoveKeyframe,
+  onToggleKeyframeAtPlayhead,
  theme: themeOverrides,
 }: TimelineProps = {}) {
  const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
@@ -120,6 +134,7 @@ export const Timeline = memo(function Timeline({

  const [showPopover, setShowPopover] = useState(false);
  const [showShortcutHint, setShowShortcutHint] = useState(true);
+  const [kfContextMenu, setKfContextMenu] = useState<KeyframeDiamondContextMenuState | null>(null);
  const [viewportWidth, setViewportWidth] = useState(0);
  const roRef = useRef<ResizeObserver | null>(null);
  const shortcutHintRafRef = useRef(0);
@@ -231,6 +246,10 @@ export const Timeline = memo(function Timeline({
  }, [draggedClip, trackOrder]);

  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
+  const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
+
  const selectedElement = useMemo(
    () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
    [elements, selectedElementId],
@@ -477,6 +496,42 @@ export const Timeline = memo(function Timeline({
          shiftClickClipRef={shiftClickClipRef}
          getPreviewElement={getPreviewElement}
          getTrackStyle={getTrackStyle}
+          keyframeCache={keyframeCache}
+          selectedKeyframes={selectedKeyframes}
+          currentTime={currentTime}
+          onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}
+          onClickKeyframe={(el, pct) => {
+            usePlayerStore.getState().clearSelectedKeyframes();
+            const elKey = el.key ?? el.id;
+            setSelectedElementId(elKey);
+            onSelectElement?.(el);
+            const absTime = el.start + (pct / 100) * el.duration;
+            onSeek?.(absTime);
+          }}
+          onShiftClickKeyframe={(elId, pct) => {
+            toggleSelectedKeyframe(`${elId}:${pct}`);
+          }}
+          onDragKeyframe={(el, oldPct, newPct) => {
+            onMoveKeyframe?.(el, oldPct, newPct);
+          }}
+          onContextMenuKeyframe={(e, elId, pct) => {
+            const el = elements.find((x) => (x.key ?? x.id) === elId);
+            if (el) {
+              setSelectedElementId(elId);
+              onSelectElement?.(el);
+              const absTime = el.start + (pct / 100) * el.duration;
+              onSeek?.(absTime);
+            }
+            const kfData = keyframeCache.get(elId);
+            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            setKfContextMenu({
+              x: e.clientX,
+              y: e.clientY,
+              elementId: elId,
+              percentage: pct,
+              currentEase: kf?.ease ?? kfData?.ease,
+            });
+          }}
        />
      </div>

@@ -511,6 +566,23 @@ export const Timeline = memo(function Timeline({
          }}
        />
      )}
+
+      {kfContextMenu && (
+        <KeyframeDiamondContextMenu
+          state={kfContextMenu}
+          onClose={() => setKfContextMenu(null)}
+          onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
+          onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
+          onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
+          onCopyProperties={(elId, pct) => {
+            const kfData = keyframeCache.get(elId);
+            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            if (kf) {
+              void navigator.clipboard.writeText(JSON.stringify(kf.properties, null, 2));
+            }
+          }}
+        />
+      )}
    </div>
  );
 });
@@ -1,5 +1,6 @@
 import { memo, type ReactNode } from "react";
 import { TimelineClip } from "./TimelineClip";
+import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
 import { TimelineRuler } from "./TimelineRuler";
 import {
  getTimelineEditCapabilities,
@@ -8,9 +9,10 @@ import {
 } from "./timelineEditing";
 import { getRenderedTimelineElement, type TimelineTheme } from "./timelineTheme";
 import { GUTTER, TRACK_H, RULER_H, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
-import type { TimelineElement } from "../store/playerStore";
+import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
 import type { TrackVisualStyle } from "./timelineIcons";
+import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";

 interface TimelineCanvasProps {
  major: number[];
@@ -58,6 +60,14 @@ interface TimelineCanvasProps {
  } | null>;
  getPreviewElement: (element: TimelineElement) => TimelineElement;
  getTrackStyle: (tag: string) => TrackVisualStyle;
+  keyframeCache?: Map<string, KeyframeCacheEntry>;
+  selectedKeyframes: Set<string>;
+  currentTime: number;
+  onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
+  onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
+  onDragKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
 }

 export const TimelineCanvas = memo(function TimelineCanvas({
@@ -99,6 +109,14 @@ export const TimelineCanvas = memo(function TimelineCanvas({
  shiftClickClipRef,
  getPreviewElement,
  getTrackStyle,
+  keyframeCache,
+  selectedKeyframes,
+  currentTime,
+  onClickKeyframe,
+  onShiftClickKeyframe,
+  onDragKeyframe,
+  onContextMenuKeyframe,
+  onToggleKeyframeAtPlayhead: _onToggleKeyframeAtPlayhead,
 }: TimelineCanvasProps) {
  const draggedElement = draggedClip?.element ?? null;
  const activeDraggedElement =
@@ -328,6 +346,28 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                    }}
                  >
                    {renderClipChildren(previewElement, clipStyle)}
+                    {STUDIO_KEYFRAMES_ENABLED && keyframeCache?.get(elementKey) && (
+                      <TimelineClipDiamonds
+                        keyframesData={keyframeCache.get(elementKey)!}
+                        clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                        clipHeightPx={TRACK_H - 2 * CLIP_Y}
+                        accentColor={clipStyle.accent}
+                        isSelected={isSelected}
+                        currentPercentage={
+                          previewElement.duration > 0
+                            ? ((currentTime - previewElement.start) / previewElement.duration) * 100
+                            : 0
+                        }
+                        elementId={elementKey}
+                        selectedKeyframes={selectedKeyframes}
+                        onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
+                        onShiftClickKeyframe={onShiftClickKeyframe}
+                        onDragKeyframe={(oldPct, newPct) =>
+                          onDragKeyframe?.(previewElement, oldPct, newPct)
+                        }
+                        onContextMenuKeyframe={onContextMenuKeyframe}
+                      />
+                    )}
                  </TimelineClip>
                );
              })}
@@ -69,7 +69,9 @@ export const TimelineClip = memo(function TimelineClip({
    <div
      data-clip="true"
      className={
-        hasCustomContent ? "absolute overflow-hidden" : "absolute flex items-center overflow-hidden"
+        hasCustomContent
+          ? "absolute overflow-visible"
+          : "absolute flex items-center overflow-visible"
      }
      style={{
        left: leftPx,
@@ -3,7 +3,7 @@ import type { ZoomMode } from "../store/playerStore";

 /* ── Layout constants ──────────────────────────────────────────────── */
 export const GUTTER = 32;
-export const TRACK_H = 72;
+export const TRACK_H = 48;
 export const RULER_H = 24;
 export const CLIP_Y = 3;
 export const CLIP_HANDLE_W = 18;
@@ -61,7 +61,7 @@ export type EditHistoryTransitionResult =
    };

 const DEFAULT_MAX_ENTRIES = 100;
-const DEFAULT_COALESCE_MS = 1500;
+const DEFAULT_COALESCE_MS = 300;

 export function hashEditHistoryContent(content: string): string {
  let hash = 2166136261;