@hyperframes/studio 0.6.97 → 0.6.98

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -0,0 +1,129 @@
+import type { DomEditSelection } from "./domEditingTypes";
+import { readStudioBoxSize, readStudioPathOffset } from "./manualEdits";
+import { parsePxMetricValue, type PropertyPanelProps } from "./propertyPanelHelpers";
+
+interface TransformCommitDeps {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  hasGsapAnimation: boolean;
+  gsapAnimId: string | null;
+  gsapKeyframes: unknown;
+  currentPct: number;
+  onCommitAnimatedProperty: PropertyPanelProps["onCommitAnimatedProperty"];
+  onAddKeyframe: PropertyPanelProps["onAddKeyframe"];
+  onSetManualOffset: PropertyPanelProps["onSetManualOffset"];
+  onSetManualSize: PropertyPanelProps["onSetManualSize"];
+  onSetManualRotation: PropertyPanelProps["onSetManualRotation"];
+  showToast?: (message: string, tone?: "error" | "info") => void;
+}
+
+/**
+ * Build the X/Y, W/H and rotation field commit handlers for the property panel.
+ * Each handler routes the value into the GSAP animation when the element is
+ * animated (matching the drag gesture and keyframe buttons), and otherwise
+ * falls through to the manual transform setter.
+ */
+// fallow-ignore-next-line unit-size
+export function createTransformCommitHandlers({
+  element,
+  styles,
+  hasGsapAnimation,
+  gsapAnimId,
+  gsapKeyframes,
+  currentPct,
+  onCommitAnimatedProperty,
+  onAddKeyframe,
+  onSetManualOffset,
+  onSetManualSize,
+  onSetManualRotation,
+  showToast,
+}: TransformCommitDeps) {
+  // Route a transform value into the GSAP animation (or a new keyframe) when the
+  // element is animated. Returns true when handled, so callers fall through to
+  // the manual-transform path only for non-animated elements.
+  const commitAnimatedTransformValue = (
+    property: string,
+    value: number,
+    noCallbacksMessage: string,
+  ): boolean => {
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
+      void onCommitAnimatedProperty(element, property, value);
+      return true;
+    }
+    if (gsapKeyframes && gsapAnimId && onAddKeyframe) {
+      const pct = Math.max(0, Math.min(100, Math.round(currentPct * 10) / 10));
+      onAddKeyframe(gsapAnimId, pct, property, value);
+      return true;
+    }
+    if (hasGsapAnimation) {
+      showToast?.(noCallbacksMessage);
+      return true;
+    }
+    return false;
+  };
+
+  const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null) return;
+    if (
+      commitAnimatedTransformValue(
+        axis,
+        parsed,
+        "Cannot edit position — animation callbacks not available",
+      )
+    )
+      return;
+    const current = readStudioPathOffset(element.element);
+    void Promise.resolve(
+      onSetManualOffset(element, {
+        x: axis === "x" ? parsed : current.x,
+        y: axis === "y" ? parsed : current.y,
+      }),
+    ).catch(() => undefined);
+  };
+
+  // fallow-ignore-next-line complexity
+  const commitManualSize = (axis: "width" | "height", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null || parsed <= 0) return;
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      return;
+    }
+    if (hasGsapAnimation) {
+      showToast?.("Cannot edit size — animation callbacks not available");
+      return;
+    }
+    const current = readStudioBoxSize(element.element);
+    const width =
+      current.width > 0
+        ? current.width
+        : (parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width);
+    const height =
+      current.height > 0
+        ? current.height
+        : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
+    void Promise.resolve(
+      onSetManualSize(element, {
+        width: axis === "width" ? parsed : width,
+        height: axis === "height" ? parsed : height,
+      }),
+    ).catch(() => undefined);
+  };
+
+  const commitManualRotation = (nextValue: string) => {
+    const parsed = Number.parseFloat(nextValue);
+    if (!Number.isFinite(parsed)) return;
+    if (
+      commitAnimatedTransformValue(
+        "rotation",
+        parsed,
+        "Cannot edit rotation — animation callbacks not available",
+      )
+    )
+      return;
+    void Promise.resolve(onSetManualRotation(element, { angle: parsed })).catch(() => undefined);
+  };
+
+  return { commitManualOffset, commitManualSize, commitManualRotation };
+}

package/src/components/editor/studioMotionOps.test.ts

@@ -11,7 +11,7 @@ import {
   STUDIO_MOTION_ORIGINAL_OPACITY_ATTR,
   STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR,
 } from "./studioMotionTypes";
-import { buildMotionPatches, buildClearMotionPatches } from "./manualEditsDom";
+import { buildMotionPatches, buildClearMotionPatches } from "./manualEditsDomPatches";
 import { applyPatchByTarget, readAttributeByTarget } from "../../utils/sourcePatcher";
 
 function createElement(markup: string): HTMLElement {

package/src/components/editor/studioMotionOps.ts

@@ -18,6 +18,7 @@ import {
   type StudioMotionManifest,
   type StudioMotionTarget,
 } from "./studioMotionTypes";
+import { roundTo3 } from "../../utils/rounding";
 
 // ── Private helpers ──
 
@@ -34,7 +35,7 @@ function sanitizeEase(value: string): string {
 }
 
 function roundEaseNumber(value: number): number {
-  return Math.round(value * 1000) / 1000;
+  return roundTo3(value);
 }
 
 function clampRange(value: number, min: number, max: number, fallback: number): number {

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -33,15 +33,14 @@ import {
 } from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
-  type BlockedMoveState,
   type GestureKind,
   type GestureState,
   type GroupGestureState,
+  type UseDomEditOverlayGesturesOptions,
   hasDomEditRotationChanged,
   resolveDomEditResizeGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
-import type { DomEditGroupPathOffsetCommit } from "./DomEditOverlay";
 import {
   startGesture as _startGesture,
   startGroupDrag as _startGroupDrag,
@@ -52,50 +51,6 @@ import {
   resolveEquidistanceGuides,
   SNAP_THRESHOLD_PX,
 } from "./snapEngine";
-import type { SnapGuidesState } from "./SnapGuideOverlay";
-
-// Refs are stable across renders; values are read via .current.
-export type UseDomEditOverlayGesturesOptions = {
-  overlayRef: RefObject<HTMLDivElement | null>;
-  iframeRef: RefObject<HTMLIFrameElement | null>;
-  boxRef: RefObject<HTMLDivElement | null>;
-  selectionRef: RefObject<DomEditSelection | null>;
-  overlayRectRef: RefObject<OverlayRect | null>;
-  groupOverlayItemsRef: RefObject<GroupOverlayItem[]>;
-  gestureRef: RefObject<GestureState | null>;
-  groupGestureRef: RefObject<GroupGestureState | null>;
-  blockedMoveRef: RefObject<BlockedMoveState | null>;
-  rafPausedRef: RefObject<boolean>;
-  suppressNextBoxClickRef: RefObject<boolean>;
-  setOverlayRect: (next: OverlayRect | null) => void;
-  setGroupOverlayItems: (next: GroupOverlayItem[]) => void;
-  onBlockedMoveRef: RefObject<(selection: DomEditSelection) => void>;
-  onManualDragStartRef: RefObject<(() => void) | undefined>;
-  onPathOffsetCommitRef: RefObject<
-    (s: DomEditSelection, n: { x: number; y: number }) => Promise<void> | void
-  >;
-  onGroupPathOffsetCommitRef: RefObject<
-    (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
-  >;
-  onBoxSizeCommitRef: RefObject<
-    (s: DomEditSelection, n: { width: number; height: number }) => Promise<void> | void
-  >;
-  onRotationCommitRef: RefObject<
-    (s: DomEditSelection, n: { angle: number }) => Promise<void> | void
-  >;
-  onCanvasPointerMoveRef: RefObject<
-    (
-      e: React.PointerEvent<HTMLDivElement>,
-      o?: { preferClipAncestor?: boolean },
-    ) => Promise<DomEditSelection | null>
-  >;
-  onCanvasMouseDown: (
-    e: React.MouseEvent<HTMLDivElement>,
-    o?: { preferClipAncestor?: boolean },
-  ) => void;
-  snapGuidesRef: RefObject<SnapGuidesState | null>;
-};
-
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
   const setDraftOverlayRect = (next: OverlayRect) => {
     opts.setOverlayRect(next);

package/src/components/nle/NLELayout.tsx

@@ -10,7 +10,6 @@ import {
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
-import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
 import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
@@ -20,7 +19,7 @@ import {
   getTimelineToggleTitle,
 } from "../../utils/timelineDiscovery";
 
-interface NLELayoutProps extends TimelineEditCallbacks {
+interface NLELayoutProps {
   projectId: string;
   portrait?: boolean;
   /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
@@ -104,18 +103,7 @@ export const NLELayout = memo(function NLELayout({
   onAssetDrop,
   onBlockDrop,
   onPreviewBlockDrop,
-  onMoveElement,
-  onResizeElement,
-  onBlockedEditAttempt,
-  onSplitElement,
-  onRazorSplit,
-  onRazorSplitAll,
   onSelectTimelineElement,
-  onDeleteKeyframe,
-  onDeleteAllKeyframes,
-  onChangeKeyframeEase,
-  onMoveKeyframe,
-  onToggleKeyframeAtPlayhead,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -444,18 +432,7 @@ export const NLELayout = memo(function NLELayout({
                 onDeleteElement={onDeleteElement}
                 onAssetDrop={onAssetDrop}
                 onBlockDrop={onBlockDrop}
-                onMoveElement={onMoveElement}
-                onResizeElement={onResizeElement}
-                onBlockedEditAttempt={onBlockedEditAttempt}
-                onSplitElement={onSplitElement}
-                onRazorSplit={onRazorSplit}
-                onRazorSplitAll={onRazorSplitAll}
                 onSelectElement={onSelectTimelineElement}
-                onDeleteKeyframe={onDeleteKeyframe}
-                onDeleteAllKeyframes={onDeleteAllKeyframes}
-                onChangeKeyframeEase={onChangeKeyframeEase}
-                onMoveKeyframe={onMoveKeyframe}
-                onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/components/sidebar/BlocksTab.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../utils/blockCategories";
 import { usePlayerStore } from "../../player";
 import { formatTime } from "../../player/lib/time";
-import { useStudioContext } from "../../contexts/StudioContext";
+import { useStudioShellContext } from "../../contexts/StudioContext";
 export interface BlockPreviewInfo {
   videoUrl?: string;
   posterUrl?: string;
@@ -345,7 +345,7 @@ function BlockCard({
     [onAdd, adding],
   );
 
-  const { activeCompPath, compositionDimensions } = useStudioContext();
+  const { activeCompPath, compositionDimensions } = useStudioShellContext();
 
   const handleShowPrompt = useCallback(
     (e: React.MouseEvent) => {

package/src/contexts/DomEditContext.tsx

@@ -1,17 +1,101 @@
 // fallow-ignore-file code-duplication
-import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useMemo, useRef, type ReactNode } from "react";
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 
 type DomEditValue = ReturnType<typeof useDomEditSession>;
 
-const DomEditContext = createContext<DomEditValue | null>(null);
+export interface DomEditActionsValue extends Pick<
+  DomEditValue,
+  | "handleTimelineElementSelect"
+  | "handlePreviewCanvasMouseDown"
+  | "handlePreviewCanvasPointerMove"
+  | "handlePreviewCanvasPointerLeave"
+  | "applyDomSelection"
+  | "clearDomSelection"
+  | "handleDomStyleCommit"
+  | "handleDomAttributeCommit"
+  | "handleDomHtmlAttributeCommit"
+  | "handleDomPathOffsetCommit"
+  | "handleDomGroupPathOffsetCommit"
+  | "handleDomZIndexReorderCommit"
+  | "handleDomBoxSizeCommit"
+  | "handleDomRotationCommit"
+  | "handleDomManualEditsReset"
+  | "handleDomTextCommit"
+  | "handleDomTextFieldStyleCommit"
+  | "handleDomAddTextField"
+  | "handleDomRemoveTextField"
+  | "handleAskAgent"
+  | "handleAgentModalSubmit"
+  | "handleBlockedDomMove"
+  | "handleDomManualDragStart"
+  | "handleDomEditElementDelete"
+  | "buildDomSelectionFromTarget"
+  | "buildDomSelectionForTimelineElement"
+  | "updateDomEditHoverSelection"
+  | "resolveImportedFontAsset"
+  | "setAgentModalOpen"
+  | "setAgentPromptSelectionContext"
+  | "setAgentModalAnchorPoint"
+  | "handleGsapUpdateProperty"
+  | "handleGsapUpdateMeta"
+  | "handleGsapDeleteAnimation"
+  | "handleGsapDeleteAllForElement"
+  | "handleGsapAddAnimation"
+  | "handleGsapAddProperty"
+  | "handleGsapRemoveProperty"
+  | "handleGsapUpdateFromProperty"
+  | "handleGsapAddFromProperty"
+  | "handleGsapRemoveFromProperty"
+  | "handleGsapAddKeyframe"
+  | "handleGsapAddKeyframeBatch"
+  | "handleGsapRemoveKeyframe"
+  | "handleGsapConvertToKeyframes"
+  | "handleGsapRemoveAllKeyframes"
+  | "handleResetSelectedElementKeyframes"
+  | "commitAnimatedProperty"
+  | "handleSetArcPath"
+  | "handleUpdateArcSegment"
+  | "invalidateGsapCache"
+  | "previewIframeRef"
+  | "commitMutation"
+> {}
 
-export function useDomEditContext(): DomEditValue {
-  const ctx = useContext(DomEditContext);
-  if (!ctx) throw new Error("useDomEditContext must be used within DomEditProvider");
+export interface DomEditSelectionValue extends Pick<
+  DomEditValue,
+  | "domEditSelection"
+  | "domEditGroupSelections"
+  | "domEditHoverSelection"
+  | "domEditSelectionRef"
+  | "selectedGsapAnimations"
+  | "gsapMultipleTimelines"
+  | "gsapUnsupportedTimelinePattern"
+  | "agentModalOpen"
+  | "agentModalAnchorPoint"
+  | "copiedAgentPrompt"
+  | "agentPromptSelectionContext"
+> {}
+
+const DomEditActionsContext = createContext<DomEditActionsValue | null>(null);
+const DomEditSelectionContext = createContext<DomEditSelectionValue | null>(null);
+
+export function useDomEditActionsContext(): DomEditActionsValue {
+  const ctx = useContext(DomEditActionsContext);
+  if (!ctx) throw new Error("useDomEditActionsContext must be used within DomEditProvider");
+  return ctx;
+}
+
+export function useDomEditSelectionContext(): DomEditSelectionValue {
+  const ctx = useContext(DomEditSelectionContext);
+  if (!ctx) throw new Error("useDomEditSelectionContext must be used within DomEditProvider");
   return ctx;
 }
 
+/** @deprecated Prefer useDomEditActionsContext or useDomEditSelectionContext. */
+export function useDomEditContext(): DomEditValue {
+  return { ...useDomEditActionsContext(), ...useDomEditSelectionContext() };
+}
+
 export function DomEditProvider({
   value: {
     domEditSelection,
@@ -85,16 +169,16 @@ export function DomEditProvider({
   value: DomEditValue;
   children: ReactNode;
 }) {
-  const stable = useMemo<DomEditValue>(
+  const commitMutationRef = useRef(commitMutation);
+  commitMutationRef.current = commitMutation;
+
+  const stableCommitMutation = useCallback<DomEditActionsValue["commitMutation"]>(
+    (mutation, options) => commitMutationRef.current(mutation, options),
+    [],
+  );
+
+  const actions = useMemo<DomEditActionsValue>(
     () => ({
-      domEditSelection,
-      domEditGroupSelections,
-      domEditHoverSelection,
-      agentModalOpen,
-      agentModalAnchorPoint,
-      copiedAgentPrompt,
-      agentPromptSelectionContext,
-      domEditSelectionRef,
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
       handlePreviewCanvasPointerMove,
@@ -126,9 +210,6 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
-      selectedGsapAnimations,
-      gsapMultipleTimelines,
-      gsapUnsupportedTimelinePattern,
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
@@ -150,17 +231,9 @@ export function DomEditProvider({
       handleUpdateArcSegment,
       invalidateGsapCache,
       previewIframeRef,
-      commitMutation,
+      commitMutation: stableCommitMutation,
     }),
     [
-      domEditSelection,
-      domEditGroupSelections,
-      domEditHoverSelection,
-      agentModalOpen,
-      agentModalAnchorPoint,
-      copiedAgentPrompt,
-      agentPromptSelectionContext,
-      domEditSelectionRef,
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
       handlePreviewCanvasPointerMove,
@@ -192,9 +265,6 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
-      selectedGsapAnimations,
-      gsapMultipleTimelines,
-      gsapUnsupportedTimelinePattern,
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
@@ -216,8 +286,41 @@ export function DomEditProvider({
       handleUpdateArcSegment,
       invalidateGsapCache,
       previewIframeRef,
-      commitMutation,
+      stableCommitMutation,
     ],
   );
-  return <DomEditContext value={stable}>{children}</DomEditContext>;
+
+  const selection = useMemo<DomEditSelectionValue>(
+    () => ({
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      domEditSelectionRef,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+    }),
+    [
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      domEditSelectionRef,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+    ],
+  );
+  return (
+    <DomEditActionsContext value={actions}>
+      <DomEditSelectionContext value={selection}>{children}</DomEditSelectionContext>
+    </DomEditActionsContext>
+  );
 }