@hyperframes/studio 0.6.72 → 0.6.74

package/src/components/editor/KeyframeNavigation.tsx

@@ -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>
+  );
+});

package/src/components/editor/PropertyPanel.tsx

@@ -1,8 +1,6 @@
 import { memo } from "react";
-import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
-import { type DomEditSelection } from "./domEditing";
+import { Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
-import type { ImportedFontAsset } from "./fontAssets";
 import {
   EMPTY_STYLES,
   formatPxMetricValue,
@@ -14,7 +12,11 @@ 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";
+import { TimingSection } from "./propertyPanelTimingSection";
+import { computeFitToChildrenSize, type PropertyPanelProps } from "./propertyPanelHelpers";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -28,109 +30,6 @@ export {
   setCssFilterFunctionPx,
 } from "./propertyPanelHelpers";
 
-interface PropertyPanelProps {
-  projectId: string;
-  projectDir: string | null;
-  assets: string[];
-  element: DomEditSelection | null;
-  multiSelectCount?: number;
-  copiedAgentPrompt: boolean;
-  onClearSelection: () => void;
-  onSetStyle: (prop: string, value: string) => void | Promise<void>;
-  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
-  onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
-  onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
-  onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
-  onSetText: (value: string, fieldKey?: string) => void;
-  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
-  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
-  onRemoveTextField: (fieldKey: string) => void;
-  onAskAgent: () => void;
-  onImportAssets?: (files: FileList) => Promise<string[]>;
-  fontAssets?: ImportedFontAsset[];
-  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
-  gsapAnimations?: import("@hyperframes/core/gsap-parser").GsapAnimation[];
-  gsapMultipleTimelines?: boolean;
-  gsapUnsupportedTimelinePattern?: boolean;
-  onUpdateGsapProperty?: (animId: string, prop: string, value: number | string) => void;
-  onUpdateGsapMeta?: (
-    animId: string,
-    updates: { duration?: number; ease?: string; position?: number },
-  ) => void;
-  onDeleteGsapAnimation?: (animId: string) => void;
-  onAddGsapProperty?: (animId: string, prop: string) => void;
-  onRemoveGsapProperty?: (animId: string, prop: string) => void;
-  onUpdateGsapFromProperty?: (animId: string, prop: string, value: number | string) => void;
-  onAddGsapFromProperty?: (animId: string, prop: string) => void;
-  onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
-  onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
-}
-
-/* ------------------------------------------------------------------ */
-/*  TimingSection                                                      */
-/* ------------------------------------------------------------------ */
-
-function formatTimingValue(seconds: number): string {
-  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
-  return `${seconds.toFixed(2)}s`;
-}
-
-function parseTimingValue(input: string): number | null {
-  const cleaned = input.replace(/s$/i, "").trim();
-  const parsed = Number.parseFloat(cleaned);
-  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
-}
-
-function TimingSection({
-  element,
-  onSetAttribute,
-}: {
-  element: DomEditSelection;
-  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-}) {
-  const start = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
-  const duration =
-    Number.parseFloat(
-      element.dataAttributes.duration ?? element.dataAttributes["hf-authored-duration"] ?? "0",
-    ) || 0;
-  const end = start + duration;
-
-  const commitStart = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null) return;
-    void onSetAttribute("start", parsed.toFixed(2));
-  };
-
-  const commitDuration = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null || parsed <= 0) return;
-    void onSetAttribute("duration", parsed.toFixed(2));
-  };
-
-  const commitEnd = (nextValue: string) => {
-    const parsed = parseTimingValue(nextValue);
-    if (parsed == null || parsed <= start) return;
-    void onSetAttribute("duration", (parsed - start).toFixed(2));
-  };
-
-  return (
-    <Section title="Timing" icon={<Clock size={15} />}>
-      <div className={RESPONSIVE_GRID}>
-        <MetricField label="Start" value={formatTimingValue(start)} onCommit={commitStart} />
-        <MetricField label="End" value={formatTimingValue(end)} onCommit={commitEnd} />
-      </div>
-      <div className="mt-3">
-        <MetricField
-          label="Duration"
-          value={formatTimingValue(duration)}
-          onCommit={commitDuration}
-        />
-      </div>
-    </Section>
-  );
-}
-
 /* ------------------------------------------------------------------ */
 /*  PropertyPanel                                                      */
 /* ------------------------------------------------------------------ */
@@ -158,6 +57,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onImportAssets,
   fontAssets = [],
   onImportFonts,
+  previewIframeRef,
   gsapAnimations = [],
   gsapMultipleTimelines,
   gsapUnsupportedTimelinePattern,
@@ -170,6 +70,11 @@ export const PropertyPanel = memo(function PropertyPanel({
   onAddGsapFromProperty,
   onRemoveGsapFromProperty,
   onAddGsapAnimation,
+  onAddKeyframe,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+  onCommitAnimatedProperty,
+  onSeekToTime,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
 
@@ -223,6 +128,15 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null) return;
+    if (onCommitAnimatedProperty && (gsapAnimId || gsapAnimations.length > 0)) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      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 +170,59 @@ 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;
+
+  // Read ALL GSAP-interpolated values at the current seek time.
+  // Discovers animated properties from the animation's keyframes/tween vars.
+  const gsapRuntimeValues: Record<string, number> | null = (() => {
+    if (!gsapAnimId || gsapAnimations.length === 0) return null;
+    const iframe = previewIframeRef?.current;
+    if (!iframe?.contentWindow) return null;
+    const selector = element.id ? `#${element.id}` : element.selector;
+    if (!selector) return null;
+    try {
+      const gsap = (
+        iframe.contentWindow as unknown as {
+          gsap?: { getProperty: (el: Element, prop: string) => number | string };
+        }
+      ).gsap;
+      if (!gsap?.getProperty) return null;
+      const el = iframe.contentDocument?.querySelector(selector);
+      if (!el) return null;
+      const propKeys = new Set<string>();
+      for (const anim of gsapAnimations) {
+        if (anim.keyframes) {
+          for (const kf of anim.keyframes.keyframes) {
+            for (const p of Object.keys(kf.properties)) propKeys.add(p);
+          }
+        }
+        for (const p of Object.keys(anim.properties)) propKeys.add(p);
+      }
+      const result: Record<string, number> = {};
+      for (const prop of propKeys) {
+        const v = Number(gsap.getProperty(el, prop));
+        if (Number.isFinite(v)) result[prop] = Math.round(v * 100) / 100;
+      }
+      return Object.keys(result).length > 0 ? result : null;
+    } catch {
+      return null;
+    }
+  })();
+
+  const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
+  const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
+  const displayW = gsapRuntimeValues?.width ?? resolvedWidth;
+  const displayH = gsapRuntimeValues?.height ?? resolvedHeight;
+  const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
+
   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,41 +284,227 @@ 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(displayX)}
+                  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={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "x", displayX)
+                  }
+                  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(displayY)}
+                  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={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "y", displayY)
+                  }
+                  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(displayW)}
+                  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={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "width", displayW)
+                  }
+                  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(displayH)}
+                  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={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "height", displayH)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
+            {element.capabilities.canApplyManualSize && (
+              <button
+                type="button"
+                className="flex-shrink-0 rounded p-1 text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+                title="Fit to children"
+                onClick={() => {
+                  const size = computeFitToChildrenSize(element);
+                  if (size) onSetManualSize(element, size);
+                }}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.2"
+                >
+                  <rect x="2" y="2" width="10" height="10" strokeDasharray="2 1.5" rx="1" />
+                  <path d="M2 4.5h1m-1 5h1m8-5h1m-1 5h1M4.5 2v1m5-1v1M4.5 11v1m5-1v1" />
+                </svg>
+              </button>
+            )}
+            <div className="flex items-center gap-1">
+              <div className="flex-1">
+                <MetricField
+                  label="R"
+                  value={`${displayR}°`}
+                  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={() =>
+                    onCommitAnimatedProperty &&
+                    void onCommitAnimatedProperty(element, "rotation", displayR)
+                  }
+                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(gsapAnimId, pct)}
+                  onConvertToKeyframes={() => onConvertToKeyframes?.(gsapAnimId)}
+                />
+              )}
+            </div>
           </div>
+          {gsapRuntimeValues && (
+            <div className="mt-3 border-t border-neutral-800/40 pt-3">
+              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+                3D Transform
+              </div>
+              <div className={RESPONSIVE_GRID}>
+                <div className="flex items-center gap-1">
+                  <div className="flex-1">
+                    <MetricField
+                      label="Z"
+                      value={formatPxMetricValue(gsapRuntimeValues.z ?? 0)}
+                      scrub
+                      onCommit={(next) => {
+                        const v = parsePxMetricValue(next);
+                        if (v != null && onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(element, "z", v);
+                        }
+                      }}
+                    />
+                  </div>
+                  {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+                    <KeyframeNavigation
+                      property="z"
+                      keyframes={gsapKeyframes}
+                      currentPercentage={currentPct}
+                      onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                      onAddKeyframe={() => {
+                        if (onCommitAnimatedProperty) {
+                          void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
+                        }
+                      }}
+                      onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
+                      onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+                    />
+                  )}
+                </div>
+                <MetricField
+                  label="Scale"
+                  value={String(gsapRuntimeValues.scale ?? 1)}
+                  scrub
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next);
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "scale", v);
+                    }
+                  }}
+                />
+                <MetricField
+                  label="RotX"
+                  value={`${gsapRuntimeValues.rotationX ?? 0}°`}
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next.replace("°", ""));
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "rotationX", v);
+                    }
+                  }}
+                />
+                <MetricField
+                  label="RotY"
+                  value={`${gsapRuntimeValues.rotationY ?? 0}°`}
+                  onCommit={(next) => {
+                    const v = Number.parseFloat(next.replace("°", ""));
+                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                      void onCommitAnimatedProperty(element, "rotationY", v);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          )}
           <div className="mt-3">
+            <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+              Stacking
+            </div>
             <MetricField
               label="Z-index"
               value={String(parseInt(styles["z-index"] || "auto", 10) || 0)}