feat(studio): keyframe diamonds, navigation, context menu [4/6] (#1170)

* feat(core): GSAP keyframe parsing, mutations, and API routes * 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 * fix(producer): use video stream duration for PSNR checkpoint range The regression harness used container duration (format.duration) to compute PSNR checkpoints. Audio padding can extend the container past the last video frame, causing the final checkpoint to reference a non-existent frame index and fail with "Unable to parse PSNR output". Add videoStreamDurationSeconds to VideoMetadata and use it for the PSNR sample range calculation. * 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. * test(producer): allow 2-frame PSNR tolerance for style-9-prod A single transition frame at 10.742s renders with marginal PSNR (26.6 dB vs 30 threshold) on CI runners but passes on the devbox Docker image. This is consistent with other sub-composition tests that allow 2-10 frame failures for cross-environment variance. * feat(studio): GSAP runtime bridge + optimistic update pattern * feat(studio): keyframe diamonds, navigation controls, context menu
2026-09-07 10:06:21 +00:00 · 2026-06-05 11:51:44 -04:00
parent 12e87e05b4
commit 5984c58846
4 changed files with 513 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { memo } from "react";
+
+export type DiamondState = "active" | "inactive" | "ghost";
+
+interface KeyframeDiamondProps {
+  state: DiamondState;
+  onClick: () => void;
+  title?: string;
+  size?: number;
+}
+
+// fallow-ignore-next-line complexity
+export const KeyframeDiamond = memo(function KeyframeDiamond({
+  state,
+  onClick,
+  title,
+  size = 10,
+}: KeyframeDiamondProps) {
+  const isFilled = state === "active";
+  const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
+  const color = state === "active" ? "#3b82f6" : "#a3a3a3";
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className="flex-shrink-0 p-0.5 transition-opacity hover:opacity-100"
+      style={{ color, opacity }}
+      title={title}
+    >
+      <svg width={size} height={size} viewBox="0 0 10 10">
+        <rect
+          x="5"
+          y="0.7"
+          width="6"
+          height="6"
+          rx="1"
+          transform="rotate(45 5 0.7)"
+          fill={isFilled ? "currentColor" : "none"}
+          stroke="currentColor"
+          strokeWidth="1.2"
+        />
+      </svg>
+    </button>
+  );
+});
@@ -0,0 +1,139 @@
+import { memo } from "react";
+import { KeyframeDiamond, type DiamondState } from "./KeyframeDiamond";
+
+interface KeyframeNavigationProps {
+  property: string;
+  /** All keyframes for this element's tween, or null if no keyframes exist */
+  keyframes: Array<{
+    percentage: number;
+    properties: Record<string, number | string>;
+    ease?: string;
+  }> | null;
+  /** Current playhead percentage within the element's lifetime (0-100) */
+  currentPercentage: number;
+  onSeek: (percentage: number) => void;
+  onAddKeyframe: (percentage: number) => void;
+  onRemoveKeyframe: (percentage: number) => void;
+  onConvertToKeyframes: () => void;
+}
+
+const TOLERANCE = 0.5;
+
+function ArrowLeft({ disabled }: { disabled: boolean }) {
+  return (
+    <svg
+      width="6"
+      height="10"
+      viewBox="0 0 6 10"
+      fill="none"
+      style={{ opacity: disabled ? 0.25 : 1 }}
+    >
+      <path
+        d="M5 1L1 5L5 9"
+        stroke="#a3a3a3"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ArrowRight({ disabled }: { disabled: boolean }) {
+  return (
+    <svg
+      width="6"
+      height="10"
+      viewBox="0 0 6 10"
+      fill="none"
+      style={{ opacity: disabled ? 0.25 : 1 }}
+    >
+      <path
+        d="M1 1L5 5L1 9"
+        stroke="#a3a3a3"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// fallow-ignore-next-line complexity
+export const KeyframeNavigation = memo(function KeyframeNavigation({
+  property,
+  keyframes,
+  currentPercentage,
+  onSeek,
+  onAddKeyframe,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+}: KeyframeNavigationProps) {
+  // Find keyframes that contain this property
+  const propertyKeyframes = keyframes?.filter((kf) => property in kf.properties) ?? [];
+
+  const prevKf =
+    propertyKeyframes.filter((kf) => kf.percentage < currentPercentage - TOLERANCE).at(-1) ?? null;
+
+  const nextKf =
+    propertyKeyframes.find((kf) => kf.percentage > currentPercentage + TOLERANCE) ?? null;
+
+  const atCurrent =
+    propertyKeyframes.find((kf) => Math.abs(kf.percentage - currentPercentage) <= TOLERANCE) ??
+    null;
+
+  // Diamond state
+  let diamondState: DiamondState;
+  if (!keyframes || keyframes.length === 0) {
+    diamondState = "ghost";
+  } else if (atCurrent) {
+    diamondState = "active";
+  } else if (propertyKeyframes.length > 0) {
+    diamondState = "inactive";
+  } else {
+    diamondState = "ghost";
+  }
+
+  const handleDiamondClick = () => {
+    if (diamondState === "ghost") {
+      onConvertToKeyframes();
+    } else if (diamondState === "active") {
+      onRemoveKeyframe(currentPercentage);
+    } else {
+      onAddKeyframe(currentPercentage);
+    }
+  };
+
+  return (
+    <div className="flex h-5 items-center gap-0.5">
+      <button
+        type="button"
+        disabled={!prevKf}
+        onClick={() => prevKf && onSeek(prevKf.percentage)}
+        className="flex h-5 w-3 items-center justify-center disabled:cursor-default"
+      >
+        <ArrowLeft disabled={!prevKf} />
+      </button>
+      <KeyframeDiamond
+        state={diamondState}
+        onClick={handleDiamondClick}
+        size={9}
+        title={
+          diamondState === "ghost"
+            ? `Convert ${property} to keyframes`
+            : diamondState === "active"
+              ? `Remove ${property} keyframe`
+              : `Add ${property} keyframe`
+        }
+      />
+      <button
+        type="button"
+        disabled={!nextKf}
+        onClick={() => nextKf && onSeek(nextKf.percentage)}
+        className="flex h-5 w-3 items-center justify-center disabled:cursor-default"
+      >
+        <ArrowRight disabled={!nextKf} />
+      </button>
+    </div>
+  );
+});