feat(studio): runtime-synced design panel + 3D props + split polish

packages/core/src/parsers/gsapConstants.ts

@@ -6,7 +6,7 @@
  */
 
 export const SUPPORTED_PROPS = [
-  // Transforms
+  // 2D Transforms
   "x",
   "y",
   "scale",
@@ -15,6 +15,13 @@ export const SUPPORTED_PROPS = [
   "rotation",
   "skewX",
   "skewY",
+  // 3D Transforms
+  "z",
+  "rotationX",
+  "rotationY",
+  "rotationZ",
+  "perspective",
+  "transformOrigin",
   // Visibility
   "opacity",
   "visibility",

packages/studio/src/App.tsx

@@ -1,3 +1,3 @@
 import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import type { LeftSidebarHandle, SidebarTab } from "./components/sidebar/LeftSidebar";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
@@ -286,6 +286,7 @@
   const appHotkeys = useAppHotkeys({
     toggleTimelineVisibility,
     handleTimelineElementDelete: timelineEditing.handleTimelineElementDelete,
+    handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
     domEditSelectionRef: domEditSelectionBridgeRef,
     clearDomSelectionRef,
@@ -489,6 +490,7 @@
     <TimelineToolbar
       toggleTimelineVisibility={toggleTimelineVisibility}
       domEditSession={domEditSession}
+      onSplitElement={timelineEditing.handleTimelineElementSplit}
     />
   );
   return (
@@ -532,6 +534,7 @@
                   handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
                   handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
                   handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
+                  handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
                   setCompIdToSrc={setCompIdToSrc}
                   setCompositionLoading={setCompositionLoading}
                   shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}

packages/studio/src/components/StudioPreviewArea.tsx

@@ -49,6 +49,7 @@ export interface StudioPreviewAreaProps {
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
   handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   setCompIdToSrc: (map: Map<string, string>) => void;
   setCompositionLoading: (loading: boolean) => void;
   shouldShowSelectedDomBounds: boolean;
@@ -67,6 +68,7 @@ export function StudioPreviewArea({
   handleTimelineElementMove,
   handleTimelineElementResize,
   handleBlockedTimelineEdit,
+  handleTimelineElementSplit,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowSelectedDomBounds,
@@ -107,7 +109,7 @@ export function StudioPreviewArea({
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
     handleGsapConvertToKeyframes,
-    handleGsapRemoveAllKeyframes,
+    handleGsapDeleteAnimation,
   } = useDomEditContext();
 
   return (
@@ -127,10 +129,12 @@ export function StudioPreviewArea({
           onMoveElement={handleTimelineElementMove}
           onResizeElement={handleTimelineElementResize}
           onBlockedEditAttempt={handleBlockedTimelineEdit}
+          onSplitElement={handleTimelineElementSplit}
           onSelectTimelineElement={handleTimelineElementSelect}
           onDeleteAllKeyframes={(_elId) => {
-            const anim = selectedGsapAnimations.find((a) => a.keyframes);
-            if (anim) handleGsapRemoveAllKeyframes(anim.id);
+            const anim =
+              selectedGsapAnimations.find((a) => a.keyframes) ?? selectedGsapAnimations[0];
+            if (anim) handleGsapDeleteAnimation(anim.id);
           }}
           onDeleteKeyframe={(_elId, pct) => {
             const anim = selectedGsapAnimations.find((a) => a.keyframes);

packages/studio/src/components/StudioRightPanel.tsx

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

packages/studio/src/components/TimelineToolbar.tsx

@@ -6,6 +6,7 @@ import { getTimelineToggleTitle } from "../utils/timelineDiscovery";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { STUDIO_KEYFRAMES_ENABLED } from "./editor/manualEditingAvailability";
 import { Tooltip } from "./ui";
+import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation, GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 
@@ -218,38 +219,35 @@ export function TimelineToolbar({
               </button>
             </Tooltip>
           )}
-          {onSplitElement && (
-            <Tooltip label="Split clip at playhead (S)">
-              <button
-                type="button"
-                onClick={() => {
-                  const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
-                  if (!selectedElementId) return;
-                  const el = elements.find((e) => (e.key ?? e.id) === selectedElementId);
-                  if (el && currentTime > el.start && currentTime < el.start + el.duration) {
-                    onSplitElement(el, currentTime);
-                  }
-                }}
-                className="flex h-7 w-7 items-center justify-center rounded text-neutral-500 transition-colors hover:text-neutral-200"
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.4"
-                  strokeLinecap="round"
-                >
-                  <line x1="8" y1="2" x2="8" y2="14" />
-                  <polyline points="5,5 3,2" />
-                  <polyline points="11,5 13,2" />
-                  <polyline points="5,11 3,14" />
-                  <polyline points="11,11 13,14" />
-                </svg>
-              </button>
-            </Tooltip>
-          )}
+          {onSplitElement &&
+            (() => {
+              const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
+              const el = selectedElementId
+                ? elements.find((e) => (e.key ?? e.id) === selectedElementId)
+                : null;
+              const splittable =
+                el && !el.compositionSrc && ["video", "audio", "img"].includes(el.tag);
+              if (!splittable) return null;
+              const canSplit = currentTime > el.start && currentTime < el.start + el.duration;
+              return (
+                <Tooltip label="Split clip at playhead (S)">
+                  <button
+                    type="button"
+                    disabled={!canSplit}
+                    onClick={() => {
+                      if (canSplit) onSplitElement(el, currentTime);
+                    }}
+                    className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                      canSplit
+                        ? "text-neutral-500 hover:text-neutral-200"
+                        : "text-neutral-700 cursor-not-allowed"
+                    }`}
+                  >
+                    <Scissors size={15} />
+                  </button>
+                </Tooltip>
+              );
+            })()}
         </div>
         <div className="flex items-center gap-1">
           <Tooltip label="Fit timeline to width">