@hyperframes/studio 0.7.60 → 0.7.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.60",
+  "version": "0.7.61",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.60",
-    "@hyperframes/player": "0.7.60",
-    "@hyperframes/sdk": "0.7.60",
-    "@hyperframes/parsers": "0.7.60",
-    "@hyperframes/studio-server": "0.7.60"
+    "@hyperframes/core": "0.7.61",
+    "@hyperframes/parsers": "0.7.61",
+    "@hyperframes/player": "0.7.61",
+    "@hyperframes/sdk": "0.7.61",
+    "@hyperframes/studio-server": "0.7.61"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.60"
+    "@hyperframes/producer": "0.7.61"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -23,6 +23,7 @@ import { useDomEditSession } from "./hooks/useDomEditSession";
 import { useSdkSelectionSync } from "./hooks/useSdkSelectionSync";
 import { useStudioSdkSessions } from "./hooks/useStudioSdkSessions";
 import { useBlockHandlers } from "./hooks/useBlockHandlers";
+import { useAddAssetAtPlayhead } from "./hooks/useAddAssetAtPlayhead";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
 import { useClipboard } from "./hooks/useClipboard";
 import { deleteSelectedKeyframes } from "./hooks/timelineEditingHelpers";
@@ -195,14 +196,7 @@ export function StudioApp() {
     },
     [timelineEditing.handleTimelineGroupMove],
   );
-  const handleAddAssetAtPlayhead = useCallback(
-    (assetPath: string) =>
-      timelineEditing.handleTimelineAssetDrop(assetPath, {
-        start: usePlayerStore.getState().currentTime,
-        track: 0,
-      }),
-    [timelineEditing],
-  );
+  const handleAddAssetAtPlayhead = useAddAssetAtPlayhead(timelineEditing.handleTimelineAssetDrop);
   const {
     activeBlockParams,
     setActiveBlockParams,
@@ -533,6 +527,7 @@ export function StudioApp() {
                           onToggleRecording={recordingToggle}
                           sdkSession={sdkHandle.session}
                           publishSdkSession={sdkHandle.publish}
+                          forceReloadSdkSession={sdkHandle.forceReload}
                           reloadPreview={reloadPreview}
                           domEditSaveTimestampRef={domEditSaveTimestampRef}
                           recordEdit={editHistory.recordEdit}

package/src/components/DesignPanelPromoteProvider.tsx

@@ -10,6 +10,7 @@
  */
 
 import { useCallback, type ReactNode } from "react";
+import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { useSdkSession } from "../hooks/useSdkSession";
 import { useVariablesPersist, type UseVariablesPersistParams } from "../hooks/useVariablesPersist";
@@ -24,6 +25,7 @@ export function DesignPanelPromoteProvider({
   projectId,
   activeCompPath,
   showToast,
+  forceReloadSharedSdkSession,
   children,
   ...persistDeps
 }: PersistDeps & {
@@ -31,16 +33,40 @@ export function DesignPanelPromoteProvider({
   projectId: string | null;
   activeCompPath: string | null;
   showToast: (message: string, tone?: "error" | "info") => void;
+  /**
+   * Forces the app's SHARED SDK session (Variables tab, Slideshow, etc.) to
+   * re-open from disk. This provider opens its OWN session, separate from
+   * that shared one, so a persist through it never fires the shared session's
+   * own "change" event. When the target happens to be the same file the
+   * shared session already has open, that session is left holding stale
+   * in-memory content after a successful persist — worse, the self-write-echo
+   * registry that would normally reload it on the next file-change
+   * notification is keyed by file path only (not by session instance), so it
+   * mistakes this provider's write for its own echo and stays stale
+   * indefinitely. Called unconditionally (not gated on targetPath matching
+   * activeCompPath): re-opening a file that didn't change is a harmless
+   * no-op re-parse, cheaper than the bug class a subtly-wrong path guard
+   * could reintroduce.
+   */
+  forceReloadSharedSdkSession?: () => void;
   children: ReactNode;
 }) {
   const targetPath = selection?.sourceFile || activeCompPath || "index.html";
   const handle = useSdkSession(projectId, targetPath, persistDeps.domEditSaveTimestampRef);
-  const persist = useVariablesPersist({
+  const rawPersist = useVariablesPersist({
     ...persistDeps,
     sdkSession: handle.session,
     publishSdkSession: handle.publish,
     activeCompPath: targetPath,
   });
+  const persist = useCallback(
+    async (label: string, mutate: (session: Composition) => void) => {
+      const committed = await rawPersist(label, mutate);
+      if (committed) forceReloadSharedSdkSession?.();
+      return committed;
+    },
+    [rawPersist, forceReloadSharedSdkSession],
+  );
   const handlePersistError = useCallback(
     (error: unknown) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast],

package/src/components/StudioHeader.tsx

@@ -149,14 +149,13 @@ const VIEW_MODE_OPTIONS: Array<{ mode: StudioViewMode; label: string }> = [
 ];
 
 /** Segmented control switching the main stage between storyboard and preview. */
-function ViewModeToggle() {
+export function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
 
   const selectMode = (mode: StudioViewMode) => {
     if (mode === viewMode) return;
-    trackStudioEvent("view_mode_toggle", { mode });
-    setViewMode(mode);
+    if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
   };
 
   // Complete APG tabs pattern: roving tabIndex + arrow-key navigation.

package/src/components/StudioRightPanel.tsx

@@ -1,17 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, type MutableRefObject } from "react";
+import { useCallback, useEffect, useRef, type MutableRefObject } from "react";
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
 import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueue } from "./renders/RenderQueue";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
-import type { SceneInfo } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
 import { PanelTabButton } from "./PanelTabButton";
 import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
 import type { BlockParam } from "@hyperframes/core/registry";
-import type { IframeWindow } from "../player/lib/playbackTypes";
 import {
   STUDIO_FLAT_INSPECTOR_ENABLED,
   STUDIO_INSPECTOR_PANELS_ENABLED,
@@ -19,6 +17,7 @@ import {
 import type { Composition } from "@hyperframes/sdk";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { useSlideshowPersist, type UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
+import { useSlideshowTabState } from "../hooks/useSlideshowTabState";
 import { DesignPanelPromoteProvider } from "./DesignPanelPromoteProvider";
 
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
@@ -51,6 +50,19 @@ export interface StudioRightPanelProps {
   /** Dependencies for the Slideshow persist callback, threaded from App.tsx. */
   sdkSession: Composition | null;
   publishSdkSession: NonNullable<UseSlideshowPersistParams["publishSdkSession"]>;
+  /**
+   * Forces THIS `sdkSession` to re-open from disk. DesignPanelPromoteProvider
+   * opens its own separate SDK session scoped to the selected element's own
+   * file (needed so promoting inside a sub-composition binds a variable there,
+   * not on the host) — for a top-level selection that's the SAME file this
+   * session already has open, so a write through that other session leaves
+   * this one holding stale in-memory content. The self-write-echo registry
+   * that normally suppresses redundant reloads is keyed by file path only, not
+   * by session instance, so it wrongly treats the sibling session's write as
+   * "our own echo" and never reloads on its own — this must be called
+   * explicitly after such a write.
+   */
+  forceReloadSdkSession?: () => void;
   reloadPreview: () => void;
   domEditSaveTimestampRef: MutableRefObject<number>;
   recordEdit: (entry: {
@@ -71,6 +83,7 @@ export function StudioRightPanel({
   onToggleRecording,
   sdkSession,
   publishSdkSession,
+  forceReloadSdkSession,
   reloadPreview,
   domEditSaveTimestampRef,
   recordEdit,
@@ -154,6 +167,7 @@ export function StudioRightPanel({
     readProjectFile,
     writeProjectFile,
     fileTree,
+    editingFile,
   } = useFileManagerContext();
 
   // Discrete ops (toggle, reorder, add/delete, hotspot): persist immediately,
@@ -202,22 +216,13 @@ export function StudioRightPanel({
   const renderJobs = renderQueue.jobs as RenderJob[];
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
 
-  // Derive scene list from the live clip manifest in the preview iframe.
-  // fallow-ignore-next-line complexity
-  const slideshowScenes = useMemo<SceneInfo[]>(() => {
-    try {
-      const win = previewIframeRef.current?.contentWindow as IframeWindow | null;
-      return (win?.__clipManifest?.scenes ?? []).map((s) => ({
-        id: s.id,
-        label: s.label,
-        start: s.start,
-        duration: s.duration,
-      }));
-    } catch {
-      return [];
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previewIframeRef, rightPanelTab, refreshKey]);
+  const { isSlideshowComposition, slideshowScenes } = useSlideshowTabState({
+    editingFileContent: editingFile?.content,
+    previewIframeRef,
+    refreshKey,
+    rightPanelTab,
+    setRightPanelTab,
+  });
   const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
   const layersPaneOpen =
     inspectorTabActive && rightInspectorPanes.layers && STUDIO_INSPECTOR_PANELS_ENABLED;
@@ -336,6 +341,7 @@ export function StudioRightPanel({
       recordEdit={recordEdit}
       reloadPreview={reloadPreview}
       domEditSaveTimestampRef={domEditSaveTimestampRef}
+      forceReloadSharedSdkSession={forceReloadSdkSession}
     >
       <PropertyPanel
         projectId={projectId}
@@ -491,12 +497,14 @@ export function StudioRightPanel({
                 active={rightPanelTab === "renders"}
                 onClick={() => setRightPanelTab("renders")}
               />
-              <PanelTabButton
-                label="Slideshow"
-                tooltip="Slideshow branching editor"
-                active={rightPanelTab === "slideshow"}
-                onClick={() => setRightPanelTab("slideshow")}
-              />
+              {isSlideshowComposition && (
+                <PanelTabButton
+                  label="Slideshow"
+                  tooltip="Slideshow branching editor"
+                  active={rightPanelTab === "slideshow"}
+                  onClick={() => setRightPanelTab("slideshow")}
+                />
+              )}
               <PanelTabButton
                 label="Variables"
                 tooltip="Template variables — declare, preview with values"
@@ -513,7 +521,7 @@ export function StudioRightPanel({
                   compositionPath={activeBlockParams.compositionPath}
                   onClose={onCloseBlockParams ?? (() => {})}
                 />
-              ) : rightPanelTab === "slideshow" ? (
+              ) : rightPanelTab === "slideshow" && isSlideshowComposition ? (
                 <SlideshowPanel
                   scenes={slideshowScenes}
                   onPersist={onPersistSlideshow}

package/src/components/editor/PromotableControl.tsx

@@ -81,7 +81,9 @@ export function PromotableControl({
       {rendered}
       {bound && (
         <span
-          className="pointer-events-none absolute right-1.5 top-0 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
+          // Sits above the row (not on top of top-0) so it clears a value that
+          // renders flush to the row's right edge, e.g. flat Font/Color rows.
+          className="pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent"
           title={`Bound to variable "${promote.boundId}"`}
         >
           ◆ {promote.boundId}
@@ -95,7 +97,7 @@ export function PromotableControl({
             e.stopPropagation();
             promote.promote();
           }}
-          className="absolute right-1.5 top-0 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
+          className="absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100"
         >
           ◇ var
         </button>

package/src/components/editor/PropertyPanel.tsx

@@ -197,11 +197,11 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
   const sourceLabel = element.id ? `#${element.id}` : (element.selector ?? "");
-  const showEditableSections = element.capabilities.canEditStyles;
   // Capabilities are already resolved on the selection; recompute only sections,
   // feeding the live GSAP tween count (arrives on the gsapAnimations prop, not the
   // selection) so the Timing section shows for pure-GSAP elements with no data-start.
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
+  const showEditableSections = element.capabilities.canEditStyles && sections.style;
   const manualOffset = readStudioPathOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth =
@@ -385,161 +385,163 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
           />
         )}
 
-        <Section title="Layout" icon={<Move size={15} />}>
-          <div className={RESPONSIVE_GRID}>
-            <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)}
-                />
+        {sections.layout && (
+          <Section title="Layout" icon={<Move size={15} />}>
+            <div className={RESPONSIVE_GRID}>
+              <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={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "x", displayX)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("x"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("x"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="x"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "x", displayX)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("x"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("x"))}
-                />
-              )}
-            </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 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={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "y", displayY)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("y"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("y"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="y"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "y", displayY)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("y"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("y"))}
-                />
-              )}
-            </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 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={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "width", displayW)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("width"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("width"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="width"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "width", displayW)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("width"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("width"))}
-                />
-              )}
-            </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 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={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "height", displayH)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("height"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("height"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="height"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "height", displayH)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("height"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("height"))}
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-1">
-              <div className="flex-1">
-                <MetricField
-                  label="R"
-                  value={`${displayR}°`}
-                  disabled={manualRotationEditingDisabled}
-                  onCommit={(next) => commitManualRotation(next.replace("°", ""))}
-                />
+              <div className="flex items-center gap-1">
+                <div className="flex-1">
+                  <MetricField
+                    label="R"
+                    value={`${displayR}°`}
+                    disabled={manualRotationEditingDisabled}
+                    onCommit={(next) => commitManualRotation(next.replace("°", ""))}
+                  />
+                </div>
+                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                  <KeyframeNavigation
+                    property="rotation"
+                    keyframes={navKeyframes}
+                    currentPercentage={currentPct}
+                    onSeek={seekFromKfPct}
+                    onAddKeyframe={() =>
+                      onCommitAnimatedProperty &&
+                      void onCommitAnimatedProperty(element, "rotation", displayR)
+                    }
+                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("rotation"), pct)}
+                    onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("rotation"))}
+                  />
+                )}
               </div>
-              {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
-                <KeyframeNavigation
-                  property="rotation"
-                  keyframes={navKeyframes}
-                  currentPercentage={currentPct}
-                  onSeek={seekFromKfPct}
-                  onAddKeyframe={() =>
-                    onCommitAnimatedProperty &&
-                    void onCommitAnimatedProperty(element, "rotation", displayR)
-                  }
-                  onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("rotation"), pct)}
-                  onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("rotation"))}
-                />
-              )}
             </div>
-          </div>
-          <PropertyPanel3dTransform
-            gsapRuntimeValues={gsap3dValues}
-            gsapAnimId={gsapAnimId}
-            resolveAnimIdForProp={animIdForProp}
-            gsapKeyframes={navKeyframes}
-            currentPct={currentPct}
-            elStart={elStart}
-            elDuration={elDuration}
-            element={element}
-            onCommitAnimatedProperty={onCommitAnimatedProperty}
-            onCommitAnimatedProperties={onCommitAnimatedProperties}
-            onSeekToTime={onSeekToTime}
-            onRemoveKeyframe={onRemoveKeyframe}
-            onConvertToKeyframes={onConvertToKeyframes}
-            onLivePreviewProps={createGsapLivePreview(iframeRef)}
-          />
-          <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)}
-              scrub
-              onCommit={(next) => onSetStyle("z-index", next)}
+            <PropertyPanel3dTransform
+              gsapRuntimeValues={gsap3dValues}
+              gsapAnimId={gsapAnimId}
+              resolveAnimIdForProp={animIdForProp}
+              gsapKeyframes={navKeyframes}
+              currentPct={currentPct}
+              elStart={elStart}
+              elDuration={elDuration}
+              element={element}
+              onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onCommitAnimatedProperties={onCommitAnimatedProperties}
+              onSeekToTime={onSeekToTime}
+              onRemoveKeyframe={onRemoveKeyframe}
+              onConvertToKeyframes={onConvertToKeyframes}
+              onLivePreviewProps={createGsapLivePreview(iframeRef)}
             />
-          </div>
-        </Section>
+            <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)}
+                scrub
+                onCommit={(next) => onSetStyle("z-index", next)}
+              />
+            </div>
+          </Section>
+        )}
 
         {STUDIO_GSAP_PANEL_ENABLED &&
           onUpdateGsapProperty &&