@hyperframes/studio 0.6.90 → 0.6.92

package/src/hooks/useRazorSplit.ts

@@ -0,0 +1,298 @@
+import { useCallback, useRef } from "react";
+import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import { getTimelineElementLabel, collectHtmlIds } from "../utils/studioHelpers";
+import {
+  canSplitElement,
+  buildPatchTarget,
+  readFileContent,
+  isSplitTimeWithinBounds,
+} from "../utils/timelineElementSplit";
+import type { RecordEditInput } from "./useTimelineEditing";
+
+interface UseRazorSplitOptions {
+  projectId: string | null;
+  activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  reloadPreview: () => void;
+  isRecordingRef?: React.RefObject<boolean>;
+}
+
+function generateSplitId(existingIds: string[], baseId: string): string {
+  let newId = `${baseId}-split`;
+  let suffix = 2;
+  while (existingIds.includes(newId)) {
+    newId = `${baseId}-split-${suffix++}`;
+  }
+  return newId;
+}
+
+async function splitHtmlElement(
+  projectId: string,
+  targetPath: string,
+  patchTarget: NonNullable<ReturnType<typeof buildPatchTarget>>,
+  splitTime: number,
+  newId: string,
+): Promise<{ ok: boolean; changed?: boolean; content?: string }> {
+  const response = await fetch(
+    `/api/projects/${projectId}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ target: patchTarget, splitTime, newId }),
+    },
+  );
+  if (!response.ok) throw new Error("Split request failed");
+  return (await response.json()) as { ok: boolean; changed?: boolean; content?: string };
+}
+
+async function splitGsapAnimations(
+  projectId: string,
+  targetPath: string,
+  originalId: string,
+  newId: string,
+  splitTime: number,
+  elementStart: number,
+  elementDuration: number,
+): Promise<{ content: string | null; skippedSelectors?: string[] }> {
+  const response = await fetch(
+    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type: "split-animations",
+        originalId,
+        newId,
+        splitTime,
+        elementStart,
+        elementDuration,
+      }),
+    },
+  );
+  if (!response.ok) {
+    const errorBody = (await response.json().catch(() => null)) as { error?: string } | null;
+    if (errorBody?.error === "no GSAP script found in file") {
+      return { content: null };
+    }
+    throw new Error(errorBody?.error ?? `GSAP animation split failed (${response.status})`);
+  }
+  const data = (await response.json()) as {
+    ok?: boolean;
+    after?: string;
+    skippedSelectors?: string[];
+  };
+  return {
+    content: data.ok && data.after ? data.after : null,
+    skippedSelectors: data.skippedSelectors,
+  };
+}
+
+// fallow-ignore-next-line complexity
+async function executeSplit(
+  pid: string,
+  element: TimelineElement,
+  splitTime: number,
+  activeCompPath: string | null,
+  writeProjectFile: (path: string, content: string) => Promise<void>,
+): Promise<{
+  targetPath: string;
+  originalContent: string;
+  patchedContent: string;
+  changed: boolean;
+  skippedSelectors?: string[];
+}> {
+  const patchTarget = buildPatchTarget(element);
+  if (!patchTarget) throw new Error("Clip is missing a patchable target.");
+
+  const targetPath = element.sourceFile || activeCompPath || "index.html";
+  const originalContent = await readFileContent(pid, targetPath);
+  const newId = generateSplitId(collectHtmlIds(originalContent), element.domId || "clip");
+
+  const splitResult = await splitHtmlElement(pid, targetPath, patchTarget, splitTime, newId);
+  if (!splitResult.ok) throw new Error("Failed to split clip.");
+  if (!splitResult.changed) {
+    return { targetPath, originalContent, patchedContent: originalContent, changed: false };
+  }
+
+  let patchedContent =
+    typeof splitResult.content === "string" ? splitResult.content : originalContent;
+
+  let skippedSelectors: string[] | undefined;
+  if (element.domId) {
+    try {
+      const gsapResult = await splitGsapAnimations(
+        pid,
+        targetPath,
+        element.domId,
+        newId,
+        splitTime,
+        element.start,
+        element.duration,
+      );
+      if (gsapResult.content) patchedContent = gsapResult.content;
+      if (gsapResult.skippedSelectors?.length) skippedSelectors = gsapResult.skippedSelectors;
+    } catch (gsapError) {
+      // GSAP mutation failed — the HTML split already wrote to disk.
+      // Restore the original content to avoid a corrupt half-split state.
+      await writeProjectFile(targetPath, originalContent);
+      throw gsapError;
+    }
+  }
+
+  return { targetPath, originalContent, patchedContent, changed: true, skippedSelectors };
+}
+
+export function useRazorSplit({
+  projectId,
+  activeCompPath,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  reloadPreview,
+  isRecordingRef,
+}: UseRazorSplitOptions) {
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+
+  const handleRazorSplit = useCallback(
+    // fallow-ignore-next-line complexity
+    async (element: TimelineElement, splitTime: number) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+
+      const pid = projectIdRef.current;
+      if (!pid || !canSplitElement(element)) return;
+
+      if (!isSplitTimeWithinBounds(splitTime, element.start, element.duration)) {
+        return;
+      }
+
+      try {
+        const { targetPath, originalContent, patchedContent, changed, skippedSelectors } =
+          await executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile);
+
+        if (!changed) {
+          showToast("Failed to split clip — playhead may be outside the clip", "error");
+          return;
+        }
+
+        domEditSaveTimestampRef.current = Date.now();
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: "Split timeline clip",
+          kind: "timeline",
+          files: { [targetPath]: patchedContent },
+          readFile: async () => originalContent,
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        reloadPreview();
+        showToast(`Split ${getTimelineElementLabel(element)} at ${splitTime.toFixed(2)}s`, "info");
+        if (skippedSelectors?.length) {
+          showToast(
+            `Some animations use non-ID selectors (${skippedSelectors.join(", ")}) and were not retargeted`,
+            "info",
+          );
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to split timeline clip";
+        showToast(message, "error");
+      }
+    },
+    [
+      activeCompPath,
+      recordEdit,
+      showToast,
+      writeProjectFile,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      isRecordingRef,
+    ],
+  );
+
+  // fallow-ignore-next-line complexity
+  const handleRazorSplitAll = useCallback(
+    async (splitTime: number) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const { elements } = usePlayerStore.getState();
+      const splittable = elements.filter(
+        (el) => canSplitElement(el) && splitTime > el.start && splitTime < el.start + el.duration,
+      );
+      if (splittable.length === 0) return;
+
+      try {
+        const originals = new Map<string, string>();
+        for (const el of splittable) {
+          const path = el.sourceFile || activeCompPath || "index.html";
+          if (!originals.has(path)) {
+            originals.set(path, await readFileContent(pid, path));
+          }
+        }
+
+        let splitCount = 0;
+        const finalContent = new Map<string, string>();
+
+        for (const element of splittable) {
+          const result = await executeSplit(
+            pid,
+            element,
+            splitTime,
+            activeCompPath,
+            writeProjectFile,
+          );
+          if (result.changed) {
+            finalContent.set(result.targetPath, result.patchedContent);
+            await writeProjectFile(result.targetPath, result.patchedContent);
+            splitCount++;
+          }
+        }
+
+        if (splitCount === 0) return;
+
+        domEditSaveTimestampRef.current = Date.now();
+        await recordEdit({
+          label: `Split ${splitCount} clips at ${splitTime.toFixed(2)}s`,
+          kind: "timeline",
+          files: Object.fromEntries(
+            [...finalContent].map(([path, after]) => [
+              path,
+              { before: originals.get(path) ?? "", after },
+            ]),
+          ),
+        });
+
+        reloadPreview();
+        showToast(`Split ${splitCount} clips at ${splitTime.toFixed(2)}s`, "info");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to split clips";
+        showToast(message, "error");
+      }
+    },
+    [
+      activeCompPath,
+      recordEdit,
+      showToast,
+      writeProjectFile,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      isRecordingRef,
+    ],
+  );
+
+  return { handleRazorSplit, handleRazorSplitAll };
+}

package/src/hooks/useTimelineEditing.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
+import { useRazorSplit } from "./useRazorSplit";
 import {
   buildTimelineAssetId,
   buildTimelineAssetInsertHtml,
@@ -30,7 +31,7 @@ import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
 // ── Types ──
 
-interface RecordEditInput {
+export interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
@@ -386,108 +387,24 @@ export function useTimelineEditing({
     [showToast],
   );
 
-  const handleTimelineElementSplit = useCallback(
-    async (element: TimelineElement, splitTime: number) => {
-      if (isRecordingRef?.current) {
-        showToast("Cannot edit timeline while recording", "error");
-        return;
-      }
-      const pid = projectIdRef.current;
-      if (!pid) return;
-
-      const splittableTags = new Set(["video", "audio", "img"]);
-      if (
-        element.timelineLocked ||
-        element.timingSource === "implicit" ||
-        element.compositionSrc ||
-        !splittableTags.has(element.tag) ||
-        !element.duration ||
-        !Number.isFinite(element.duration)
-      ) {
-        return;
-      }
-
-      if (splitTime <= element.start || splitTime >= element.start + element.duration) {
-        showToast("Playhead must be inside the clip to split.", "error");
-        return;
-      }
-
-      const patchTarget = buildPatchTarget(element);
-      if (!patchTarget) {
-        showToast("Clip is missing a patchable target.", "error");
-        return;
-      }
-
-      const targetPath = element.sourceFile || activeCompPath || "index.html";
-      try {
-        const originalContent = await readFileContent(pid, targetPath);
-        const existingIds = collectHtmlIds(originalContent);
-        const baseId = element.domId || "clip";
-        let newId = `${baseId}-split`;
-        let suffix = 2;
-        while (existingIds.includes(newId)) {
-          newId = `${baseId}-split-${suffix++}`;
-        }
-
-        const response = await fetch(
-          `/api/projects/${pid}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ target: patchTarget, splitTime, newId }),
-          },
-        );
-        if (!response.ok) {
-          throw new Error("Split request failed");
-        }
-
-        const data = (await response.json()) as {
-          ok?: boolean;
-          changed?: boolean;
-          content?: string;
-        };
-        if (!data.ok || !data.changed) {
-          showToast("Failed to split clip — playhead may be outside the clip.", "error");
-          return;
-        }
-
-        const patchedContent = typeof data.content === "string" ? data.content : originalContent;
-
-        domEditSaveTimestampRef.current = Date.now();
-        await saveProjectFilesWithHistory({
-          projectId: pid,
-          label: "Split timeline clip",
-          kind: "timeline",
-          files: { [targetPath]: patchedContent },
-          readFile: async () => originalContent,
-          writeFile: writeProjectFile,
-          recordEdit,
-        });
-
-        reloadPreview();
-        const label = getTimelineElementLabel(element);
-        showToast(`Split ${label} at ${splitTime.toFixed(2)}s`, "info");
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Failed to split timeline clip";
-        showToast(message, "error");
-      }
-    },
-    [
-      activeCompPath,
-      recordEdit,
-      showToast,
-      writeProjectFile,
-      domEditSaveTimestampRef,
-      reloadPreview,
-      isRecordingRef,
-    ],
-  );
+  const { handleRazorSplit, handleRazorSplitAll } = useRazorSplit({
+    projectId,
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    reloadPreview,
+    isRecordingRef,
+  });
 
   return {
     handleTimelineElementMove,
     handleTimelineElementResize,
     handleTimelineElementDelete,
-    handleTimelineElementSplit,
+    handleTimelineElementSplit: handleRazorSplit,
+    handleRazorSplit,
+    handleRazorSplitAll,
     handleTimelineAssetDrop,
     handleTimelineFileDrop,
     handleBlockedTimelineEdit,

package/src/player/components/ClipContextMenu.tsx

@@ -1,5 +1,8 @@
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo } from "react";
+import { createPortal } from "react-dom";
 import type { TimelineElement } from "../store/playerStore";
+import { canSplitElement } from "../../utils/timelineElementSplit";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 interface ClipContextMenuProps {
   x: number;
@@ -20,30 +23,15 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onSplit,
   onDelete,
 }: ClipContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
+  const menuRef = useContextMenuDismiss(onClose);
 
-  const dismiss = useCallback(
-    (e: MouseEvent | KeyboardEvent) => {
-      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
-      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
-      onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", dismiss);
-    document.addEventListener("keydown", dismiss);
-    return () => {
-      document.removeEventListener("mousedown", dismiss);
-      document.removeEventListener("keydown", dismiss);
-    };
-  }, [dismiss]);
-
-  const adjustedX = Math.min(x, window.innerWidth - 200);
-  const adjustedY = Math.min(y, window.innerHeight - 200);
+  const menuWidth = 200;
+  const menuHeight = 80;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
 
-  const isSplittable = ["video", "audio", "img"].includes(element.tag);
+  const isSplittable = canSplitElement(element) && ["video", "audio", "img"].includes(element.tag);
   const canSplit =
     isSplittable && currentTime > element.start && currentTime < element.start + element.duration;
 
@@ -53,7 +41,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ? `Split at ${currentTime.toFixed(2)}s`
       : "Split (move playhead inside clip)";
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
@@ -94,6 +82,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         <span>Delete</span>
         <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
       </button>
-    </div>
+    </div>,
+    document.body,
   );
 });

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,11 +1,13 @@
-import { memo, useCallback, useEffect, useRef } from "react";
-import { EASE_LABELS } from "../../components/editor/gsapAnimationConstants";
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 export interface KeyframeDiamondContextMenuState {
   x: number;
   y: number;
   elementId: string;
   percentage: number;
+  tweenPercentage?: number;
   currentEase?: string;
 }
 
@@ -14,123 +16,36 @@ interface KeyframeDiamondContextMenuProps {
   onClose: () => void;
   onDelete: (elementId: string, percentage: number) => void;
   onDeleteAll: (elementId: string) => void;
-  onChangeEase: (elementId: string, percentage: number, ease: string) => void;
-  onCopyProperties: (elementId: string, percentage: number) => void;
+  onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onCopyProperties?: (elementId: string, percentage: number) => void;
 }
 
-const EASE_PRESETS = [
-  "none",
-  "power1.out",
-  "power2.out",
-  "power3.out",
-  "power1.in",
-  "power2.in",
-  "power1.inOut",
-  "power2.inOut",
-  "back.out",
-  "elastic.out",
-  "bounce.out",
-  "expo.out",
-] as const;
-
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
   state,
   onClose,
   onDelete,
   onDeleteAll,
-  onChangeEase,
-  onCopyProperties,
 }: KeyframeDiamondContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const easeSubmenuRef = useRef<HTMLDivElement>(null);
-
-  const dismiss = useCallback(
-    (e: MouseEvent | KeyboardEvent) => {
-      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
-      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
-      onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", dismiss);
-    document.addEventListener("keydown", dismiss);
-    return () => {
-      document.removeEventListener("mousedown", dismiss);
-      document.removeEventListener("keydown", dismiss);
-    };
-  }, [dismiss]);
+  const menuRef = useContextMenuDismiss(onClose);
 
-  const adjustedX = Math.min(state.x, window.innerWidth - 200);
-  const adjustedY = Math.min(state.y, window.innerHeight - 300);
+  const menuWidth = 200;
+  const menuHeight = 70;
+  const overflowY = state.y + menuHeight - window.innerHeight;
+  const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
+  const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
 
-  const currentEaseLabel = state.currentEase
-    ? (EASE_LABELS[state.currentEase] ?? state.currentEase)
-    : "Default";
-
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
-      {/* Ease submenu */}
-      <div className="relative group">
-        <button
-          type="button"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
-        >
-          <span>
-            Ease: <span className="text-neutral-500">{currentEaseLabel}</span>
-          </span>
-          <svg width="8" height="8" viewBox="0 0 8 8" className="text-neutral-500 ml-2">
-            <path d="M3 1l4 3-4 3" fill="none" stroke="currentColor" strokeWidth="1.2" />
-          </svg>
-        </button>
-        <div
-          ref={easeSubmenuRef}
-          className="absolute left-full top-0 ml-0.5 hidden group-hover:block bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[160px] max-h-[300px] overflow-y-auto"
-        >
-          {EASE_PRESETS.map((ease) => (
-            <button
-              key={ease}
-              type="button"
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-neutral-800 cursor-pointer text-left ${
-                ease === state.currentEase ? "text-white font-medium" : "text-neutral-300"
-              }`}
-              onClick={() => {
-                onChangeEase(state.elementId, state.percentage, ease);
-                onClose();
-              }}
-            >
-              {ease === state.currentEase && (
-                <svg
-                  width="8"
-                  height="8"
-                  viewBox="0 0 8 8"
-                  className="text-green-400 flex-shrink-0"
-                >
-                  <path d="M1 4l2 2 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" />
-                </svg>
-              )}
-              <span className={ease === state.currentEase ? "" : "ml-[16px]"}>
-                {EASE_LABELS[ease] ?? ease}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Separator */}
-      <div className="my-1 border-t border-neutral-700/60" />
-
       {/* Delete */}
       <button
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDelete(state.elementId, state.percentage);
+          onDelete(state.elementId, state.tweenPercentage ?? state.percentage);
           onClose();
         }}
       >
@@ -147,18 +62,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
       >
         Delete All Keyframes
       </button>
-
-      {/* Copy Properties */}
-      <button
-        type="button"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
-        onClick={() => {
-          onCopyProperties(state.elementId, state.percentage);
-          onClose();
-        }}
-      >
-        Copy Properties
-      </button>
-    </div>
+    </div>,
+    document.body,
   );
 });